From 1c79c252624e73750ca01314f05833a8c10ab0ad Mon Sep 17 00:00:00 2001
From: imperosol <thgirod@hotmail.com>
Date: Sun, 1 Dec 2024 18:14:09 +0100
Subject: [PATCH] better tab style

---
 core/static/core/style.scss      | 44 ++++++++++++++++++++------------
 core/templates/core/macros.jinja |  6 ++---
 2 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/core/static/core/style.scss b/core/static/core/style.scss
index b9296e2e..50892df3 100644
--- a/core/static/core/style.scss
+++ b/core/static/core/style.scss
@@ -290,29 +290,39 @@ body {
   }
 
   .tabs {
+    border-radius: 5px;
+
     .tab-headers {
       display: flex;
       flex-flow: row wrap;
-      .tab-header{
-        margin: 0;
-        flex: 1 1;
-        border-radius: 5px 5px 0 0;
-        font-size: 100%;
+      background-color: $primary-neutral-light-color;
+      padding: 3px 12px 12px;
+      column-gap: 20px;
+      border-top-left-radius: 5px;
+      border-top-right-radius: 5px;
 
-        @media (max-width: 800px) {
-          flex-wrap: wrap;
+      .tab-header {
+        border: none;
+        padding-right: 0;
+        padding-left: 0;
+        font-size: 120%;
+        background-color: unset;
+        position: relative;
+        &:after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 100%;
+          border-bottom: 4px solid darken($primary-neutral-light-color, 10%);
+          border-radius: 2px;
+          transition: all 0.2s ease-in-out;
         }
-        &.active {
-          background-color: $white-color;
-          border: 1px solid $primary-neutral-dark-color;
-          border-bottom: none;
+        &:hover:after {
+          border-bottom-color: darken($primary-neutral-light-color, 20%);
         }
-        &:not(.active) {
-          background-color: $primary-neutral-dark-color;
-          color: darken($white-color, 5%);
-          &:hover {
-            background-color: lighten($primary-neutral-dark-color, 15%);
-          }
+        &.active:after {
+          border-bottom-color: $primary-dark-color;
         }
       }
     }
diff --git a/core/templates/core/macros.jinja b/core/templates/core/macros.jinja
index 8615b570..6ab52cad 100644
--- a/core/templates/core/macros.jinja
+++ b/core/templates/core/macros.jinja
@@ -303,7 +303,7 @@
         {% endwith %}
   #}
   <div
-    class="tabs"
+    class="tabs shadow"
     x-data="{selected: '{{ tab_list[0][0] }}'}"
     x-modelable="selected"
     {{ attrs }}
@@ -319,9 +319,9 @@
         </button>
       {% endfor %}
     </div>
-    <div class="tab-content shadow">
+    <div class="tab-content">
       {% for title, content in tab_list %}
-        <section x-show="selected === '{{ title }}'" class="">
+        <section x-show="selected === '{{ title }}'">
           {{ content }}
         </section>
       {% endfor %}