Fixes tabs styling (#389)

- Fix: Tabs styling
minvws · Oct 3, 2023 · 8377b2e · 8377b2e
1 parent b446326
commit 8377b2e
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 1 deletion.
diff --git a/docs/documentation/components/tabs.html b/docs/documentation/components/tabs.html
@@ -156,13 +156,15 @@ <h3>CSS</h3>
   --tabs-item-line-height: ;
   --tabs-item-background-color: ;
   --tabs-item-text-decoration: ;
+  --tabs-item-font-weight: ;
 
   /* List item hover */
   --tabs-item-hover-border-width: ;
   --tabs-item-hover-border-style: ;
   --tabs-item-hover-border-color: ;
   --tabs-item-hover-text-color: ;
   --tabs-item-hover-background-color: ;
+  --tabs-item-hover-font-weight: ;
 
   /* List item active */
   --tabs-item-active-border-width: ;
@@ -171,13 +173,15 @@ <h3>CSS</h3>
   --tabs-item-active-text-color: ;
   --tabs-item-active-background-color: ;
   --tabs-item-padding: ;
+  --tabs-item-active-font-weight: ;
 
   /* List item active hover */
   --tabs-item-active-hover-border-width: ;
   --tabs-item-active-hover-border-style: ;
   --tabs-item-active-hover-border-color: ;
   --tabs-item-active-hover-text-color: ;
   --tabs-item-active-hover-background-color: ;
+  --tabs-item-active-hover-font-weight: ;
 }
               </code>
             </pre>

diff --git a/manon/tabs-variables.scss b/manon/tabs-variables.scss
@@ -19,13 +19,15 @@
   --tabs-item-line-height: var(--application-base-line-height);
   --tabs-item-background-color: var(--tabs-background-color);
   --tabs-item-text-decoration: none;
+  --tabs-item-font-weight: var(--application-base-font-weight);
 
   /* List item hover */
-  --tabs-item-hover-border-width: 0 0 4px 0;
+  --tabs-item-hover-border-width: 0;
   --tabs-item-hover-border-style: solid;
   --tabs-item-hover-border-color: var(--application-base-accent-color);
   --tabs-item-hover-text-color: black;
   --tabs-item-hover-background-color: var(--tabs-item-background-color);
+  --tabs-item-hover-font-weight: var(--tabs-item-font-weight);
 
   /* List item active */
   --tabs-item-active-border-width: 0 0 4px 0;
@@ -34,11 +36,13 @@
   --tabs-item-active-text-color: black;
   --tabs-item-active-background-color: var(--tabs-item-background-color);
   --tabs-item-padding: 0.5rem 0;
+  --tabs-item-active-font-weight: bold;
 
   /* List item active hover */
   --tabs-item-active-hover-border-width: 0 0 4px 0;
   --tabs-item-active-hover-border-style: solid;
   --tabs-item-active-hover-border-color: var(--application-base-accent-color);
   --tabs-item-active-hover-text-color: black;
   --tabs-item-active-hover-background-color: var(--tabs-item-background-color);
+  --tabs-item-active-hover-font-weight: var(--tabs-item-active-font-weight);
 }
diff --git a/manon/tabs.scss b/manon/tabs.scss
@@ -13,6 +13,7 @@
   padding: var(--tabs-item-padding);
   background-color: var(--tabs-item-background-color);
   text-decoration: var(--tabs-item-text-decoration);
+  font-weight: var(--tabs-item-font-weight);
   white-space: nowrap;
   display: inline-block;
 
@@ -21,6 +22,7 @@
     border-style: var(--tabs-item-hover-border-style);
     border-color: var(--tabs-item-hover-border-color);
     color: var(--tabs-item-hover-text-color);
+    font-weight: var(--tabs-item-hover-font-weight);
     background-color: var(--tabs-item-hover-background-color);
   }
 }
@@ -31,13 +33,15 @@
   border-color: var(--tabs-item-active-border-color);
   color: var(--tabs-item-active-text-color);
   background-color: var(--tabs-item-active-background-color);
+  font-weight: var(--tabs-item-active-font-weight);
 
   &:hover {
     border-width: var(--tabs-item-active-hover-border-width);
     border-style: var(--tabs-item-active-hover-border-style);
     border-color: var(--tabs-item-active-hover-border-color);
     color: var(--tabs-item-active-hover-text-color);
     background-color: var(--tabs-item-active-hover-background-color);
+    font-weight: var(--tabs-item-active-hover-font-weight);
   }
 }