fix: styles for tabs with icons + text

materializecss · Nov 23, 2024 · 6242adc · 6242adc
1 parent 6913317
commit 6242adc
Showing 1 changed file with 40 additions and 0 deletions.
diff --git a/sass/components/_tabs.scss b/sass/components/_tabs.scss
@@ -51,6 +51,41 @@
   margin: 0 auto;
   white-space: nowrap;
 
+  &.tabs-vertical {
+    height: 64px;
+    .tab {
+      height: 64px;
+
+      i.material-icons {
+        position: relative;
+        top: 8px;
+        vertical-align: middle;  
+      }
+
+      a {
+        display: flex;
+        flex-direction: column;        
+      }
+
+
+
+      span {
+        height: 24px;
+        line-height: 20px;
+      }
+    }
+  }
+
+  &.tabs-horizontal .tab {    
+    i.material-icons {
+      padding: 0 4px;
+      position: relative;
+      top: -2px;
+      vertical-align: middle;
+
+    }
+  }
+
   .tab {
     padding-left: 0;
     list-style-type: none;
@@ -61,6 +96,11 @@
     padding: 0;
     margin: 0;
 
+    i.material-icons {
+      position: relative;
+      top: 4px;      
+    }
+
     a {
       &.active {
         background-color: transparent;