diff --git a/src/sass/_mixins.scss b/src/sass/_mixins.scss index fb3b1f4..127ffb2 100644 --- 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 index ee87083..a567a67 100644 --- 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 index 097e03e..ebe1688 100644 --- 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 index 5c6a740..cccb500 100644 --- 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 */ } /*