nav.scss in uniform-ui-3.0.0.beta2

- old
+ new
@@ -1,128 +1,91 @@
-@mixin uniformNav-vertical(){
-    flex-direction: column;
-    align-items: stretch;
-    & > * {
-        padding: 0.5em 0.5em;
-    }
-    & > a{
-        border: none !important; // TODO remove !important
-        padding-bottom: 0.5em !important; // TODO remove !important
-        &:hover{
-            color: color('blue');
-            background: rgba(black, 0.05);
-        }
-        &.active{
-            color: white;
-            background: color('green');
-        }
-    }
-}
-
 .uniformNav{
+    --border-opacity: 1;
+    --text-opacity: 1;
+    --bg-opacity: 0;
+    
+    --hover-color: #{toRGB(color('blue'))};
+    --active-color: #{toRGB(color('green-60'))};
+    --color: #{toRGB(color('blue'))};
     display: flex;
     flex-wrap: wrap;
     align-items: stretch;
     align-content: space-stretch;
     
     &.-nowrap{
         flex-wrap: nowrap;
     }
     
     & > * {
+        --text-opacity: 1;
         flex: 0 0 auto;
         display: flex;
         align-items: center;
         padding: 0 1em;
-        border-style: solid none;
         border-color: transparent;
         border-top-width: 2px;
         border-bottom-width: 2px;
-        &.col-fill{
+        &.flex-fill{
             flex: 1 1 auto;
         }
     }
     & > a{
         text-decoration: none;
+        color: rgba(var(--color), var(--text-opacity));
         &:hover{
-            color: color('blue');
-            border-bottom-color: color('blue');
+            color: rgba(var(--hover-color), 1);
+            border-left-color: rgba(var(--hover-color), var(--border-opacity));
+            border-bottom-color: rgba(var(--hover-color), var(--border-opacity));
         }
         &.active{
-            color: color('green-dark');
-            border-bottom-color: color('green-dark');
+            color: rgba(var(--active-color), 1);
+            border-left-color: rgba(var(--active-color), 1);
+            border-bottom-color: rgba(var(--active-color), 1);
         }
     }
-    &.-pad{
+    
+    &.-pills{
         & > * {
-            padding-top: 0.25em;
-            padding-bottom: 0.25em;
+            border: none;
+            border-radius: 0.25em;
+            padding: 0.25em 0.5em;
         }
-    }
-    &.-pad-more{
-        & > * {
-            padding-top: 0.5em;
-            padding-bottom: 0.5em;
+        & > * + * {
+            margin-left: 0.25em;
         }
-    }
-    
-    &.-vertical{
-        @include uniformNav-vertical();
-    }
-}
-
-.uniformMainNav{
-    position: relative;
-    background: white;
-    box-shadow:inset 0 -1px 0 0 rgba(black, 0.10);
-    color: color('gray');
-    .uniformNav{
-        & > * {
-            padding-top: 0.25em;
-            padding-bottom: 0.25em;
-            color: color('gray-dark');
+        & > a {
+            &:hover,
             &.active{
-                color: color('gray-darkest');
+                --bg-opacity: 0.15;
+                background-color: rgba(var(--hover-color), var(--bg-opacity));
             }
+            &.active{
+                background-color: rgba(var(--active-color), var(--bg-opacity));
+            }
         }
     }
-    
-    &.bg-none{
-        background: none;
-    }
-    
-    &.border-bottom-none,
-    &.border-none{
-        box-shadow: none;
-    }
-    
+
     &.-vertical{
-        box-shadow: none;
-        .uniformNav{
-            @include uniformNav-vertical();
+        flex-direction: column;
+        align-items: stretch;
+        & > * {
+            padding: 0.5em;
+            border-top-width: 0;
+            border-bottom-width: 0;
+            border-left-width: 2px;
+            border-right-width: 2px;
         }
-    }
-    
-    &.-invert{
-        box-shadow:inset 0 -1px 0 0 rgba(white, 0.10);
-        background: none;
-        color: rgba(white, 0.7);
-        .uniformNav{
-            & > a {
-                color: rgba(white, 0.6);
-                &:hover{
-                    color: white;
-                    border-bottom-color: color('blue-bright');
-                }
-                &.active{
-                    color: white;
-                    background: rgba(black, 0.15);
-                    border-bottom-color: color('green-light');
-                }
+        &.-pills{
+            & > * + * {
+                margin-left: 0;
+                margin-top: 0.1em;
             }
         }
-        &.border-bottom-none,
-        &.border-none{
-            box-shadow: none;
-        }
     }
+}
+
+@include color-rule('.uniformNav.-active') using ($color) {
+    --active-color: #{toRGB($color)};
+}
+@include color-rule('.uniformNav.') using ($color) {
+    --color: #{toRGB($color)};
 }
\ No newline at end of file