move themes the the end of the file

- add comment for hardcoded color
canonical · Aug 24, 2022 · ea44c39 · ea44c39
1 parent 0cc8eab
commit ea44c39
Showing 1 changed file with 31 additions and 30 deletions.
diff --git a/scss/_patterns_side-navigation-expandable.scss b/scss/_patterns_side-navigation-expandable.scss
@@ -1,35 +1,5 @@
 @import 'settings';
 
-@mixin vf-side-navigation-expandable-theme($color-sidenav-text-active, $color-sidenav-item-background-hover, $color-sidenav-toggle-icon) {
-  .p-side-navigation__expand {
-    background-color: inherit;
-    &::before {
-      @include vf-icon-chevron($color-sidenav-toggle-icon);
-    }
-
-    &:hover {
-      background: $color-sidenav-item-background-hover;
-      color: $color-sidenav-text-active;
-    }
-  }
-}
-
-@mixin vf-side-navigation-expandable-theme-light {
-  @include vf-side-navigation-expandable-theme(
-    $color-sidenav-text-active: $colors--light-theme--text-default,
-    $color-sidenav-item-background-hover: $colors--light-theme--background-hover,
-    $color-sidenav-toggle-icon: $colors--light-theme--text-inactive
-  );
-}
-
-@mixin vf-side-navigation-expandable-theme-dark {
-  @include vf-side-navigation-expandable-theme(
-    $color-sidenav-text-active: $colors--dark-theme--text-default,
-    $color-sidenav-item-background-hover: $colors--dark-theme--background-hover,
-    $color-sidenav-toggle-icon: #999
-  );
-}
-
 @mixin vf-p-side-navigation-expandable {
   .p-side-navigation__item,
   .p-side-navigation__item--title {
@@ -110,3 +80,34 @@
     }
   }
 }
+
+@mixin vf-side-navigation-expandable-theme($color-sidenav-text-active, $color-sidenav-item-background-hover, $color-sidenav-toggle-icon) {
+  .p-side-navigation__expand {
+    background-color: inherit;
+    &::before {
+      @include vf-icon-chevron($color-sidenav-toggle-icon);
+    }
+
+    &:hover {
+      background: $color-sidenav-item-background-hover;
+      color: $color-sidenav-text-active;
+    }
+  }
+}
+
+@mixin vf-side-navigation-expandable-theme-light {
+  @include vf-side-navigation-expandable-theme(
+    $color-sidenav-text-active: $colors--light-theme--text-default,
+    $color-sidenav-item-background-hover: $colors--light-theme--background-hover,
+    $color-sidenav-toggle-icon: $colors--light-theme--text-inactive
+  );
+}
+
+@mixin vf-side-navigation-expandable-theme-dark {
+  @include vf-side-navigation-expandable-theme(
+    $color-sidenav-text-active: $colors--dark-theme--text-default,
+    $color-sidenav-item-background-hover: $colors--dark-theme--background-hover,
+    // color of toggle icon - needed because of lack of rgba support in icon mixin
+    $color-sidenav-toggle-icon: #999
+  );
+}