tabs in fullwidth

la_chariotte/order/templates/order/grouped_order_overview.html

@@ -42,7 +42,7 @@
     </div>
   </div>
 
-  <div class="tabs is-toggle is-centered">
+  <div class="tabs is-toggle is-centered is-fullwidth">
     <ul>
       <li>
         <a id="resume-opener" class="is-active tablinks" onclick="openTab('resume')">
@@ -162,7 +162,7 @@
           <div class="modal-card ">
             <header class="modal-card-head has-background-info">
               <div class="modal-card-title-container">
-                <p class="modal-card-title">Commande de {{ order.author }} : n°{{ order.id }}</p>
+                <p class="modal-card-title">Commande de {{ order.author }}</p>
               </div>
               <button class="delete" aria-label="close"></button>
             </header>
@@ -198,20 +198,14 @@
   {% block extra_js %}
   // Copy grouped order link
   function copyLink() {
-    // Get the text field
     var copyText = document.getElementById("shareLink");
-  
-    // Select the text field
     copyText.select();
     copyText.setSelectionRange(0, 99999); // For mobile devices
-  
-    // Copy the text inside the text field
     navigator.clipboard.writeText(copyText.value);
   }
 
   // Tabs
   function openTab(idToOpen) {
-    // Declare all variables
     var i, tabcontent, tablinks;
 
     // Get all elements with class="tabcontent" and hide them

la_chariotte/static/css/app.css

@@ -10449,7 +10449,24 @@ p.mobile-content-title {
   display: none;
 }
 
-.tabs.is-toggle li.is-active a {
-  background-color: #A52951;
+.tabs.is-toggle li a {
   border-color: #A52951;
+  background-color: #A52951;
+  color: hsl(0, 0%, 100%);
+}
+
+.tabs.is-toggle li a:hover {
+  background-color: #A52951;
+  color: hsl(0, 0%, 100%);
+  border-color: hsl(0, 0%, 100%);
+}
+
+.tabs.is-toggle li.is-active a {
+  border-color: #A52951 !important;
+  background-color: hsl(0, 0%, 100%);
+  color: #A52951;
+}
+
+.tabs > ul {
+  margin-left: 0;
 }

la_chariotte/static/sass/base/_tabs.sass

@@ -1,6 +1,20 @@
 .tabcontent
     display: none
 
-.tabs.is-toggle li.is-active a
-    background-color: $primary
+.tabs.is-toggle li a
     border-color: $primary
+    background-color: $primary
+    color: $white
+
+.tabs.is-toggle li a:hover
+    background-color: $primary
+    color: $white
+    border-color: $white
+
+.tabs.is-toggle li.is-active a
+    border-color: $primary !important
+    background-color: $white
+    color: $primary
+    
+.tabs > ul
+    margin-left: 0

la_chariotte/static/sass/base/_variables.sass

@@ -7,7 +7,6 @@ $grey-text: #7a7a7a
 $primary: $betterave
 $info: $beige
 $text: $bright-black
-$grey-text: #7a7a7a
 
 // Navbar
 $side-nav-width: 220px