Improve dropdown menu hovering (full width, color for sex chartbox)

jon48 · Jun 9, 2022 · 6f737a1 · 6f737a1
1 parent ef8b1f9
commit 6f737a1
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 31 deletions.
diff --git a/src/sass/_mixins.scss b/src/sass/_mixins.scss
@@ -48,6 +48,25 @@
     }
 }
 
+@mixin maj-chartbox-sex($sex, $border-style: solid) {
+    &-#{$sex} {
+        &,
+        .dropdown-menu {
+            background: var(--sex-#{$sex}-bg);
+            border: $border-style var(--sex-#{$sex}-fg) thin;
+
+            .dropdown-item:hover {
+                background: var(--sex-#{$sex}-bg);
+                filter: brightness(93%);
+            }
+        }
+    }
+}
+
+@mixin maj-dropdown-left-align($padding-y: $dropdown-item-padding-y, $important: false) {
+    padding: $padding-y (2 * $dropdown-item-padding-x) $padding-y 0 #{if($important, '!important', '')};
+}
+
 @mixin maj-secondary-button {
     .btn-secondary {
         @include button-variant($maj-c-theme-lighter, $maj-c-theme-medium, $active-background: $primary);

diff --git a/src/sass/rural/_global.scss b/src/sass/rural/_global.scss
@@ -129,6 +129,8 @@ h4 {
         overflow-x: hidden;
 
         .dropdown-item {
+            box-sizing: content-box;
+
             &.active {
                 &:hover,
                 &:focus {

diff --git a/src/sass/rural/_header.scss b/src/sass/rural/_header.scss
@@ -218,8 +218,7 @@
             }
 
             .dropdown-item {
-                /* Space between icons and align with submenu icons */
-                padding: 0 10px 0 0;
+                @include maj-dropdown-left-align($padding-y: 0);
 
                 &::before {
                     line-height: 2;

diff --git a/src/sass/rural/_pages-charts.scss b/src/sass/rural/_pages-charts.scss
@@ -112,37 +112,22 @@
         width: 19.8rem;
     }
 
-    &-m {
-        &,
-        .dropdown-menu {
-            background: var(--sex-m-bg);
-            border: solid var(--sex-m-fg) thin;
-        }
-    }
-
-    &-f {
-        &,
-        .dropdown-menu {
-            background: var(--sex-f-bg);
-            border: solid var(--sex-f-fg) thin;
-        }
-    }
-
-    &-u {
-        &,
-        .dropdown-menu {
-            background: var(--sex-u-bg);
-            border: dashed var(--sex-u-fg) thin;
-        }
-    }
-
-    &-x {
-        &,
-        .dropdown-menu {
-            background: var(--sex-x-bg);
-            border: solid var(--sex-x-fg) thin;
+    .dropdown-item {
+        @include maj-dropdown-left-align;
+
+        &.p-1 {
+            @include maj-dropdown-left-align($important: true);
         }
     }
+
+    /* stylelint-disable order/order */
+
+    @include maj-chartbox-sex('m');
+    @include maj-chartbox-sex('f');
+    @include maj-chartbox-sex('u', $border-style: dashed);
+    @include maj-chartbox-sex('x');
+
+    /* stylelint-enable order/order */
 }
 
 /*