diff options
Diffstat (limited to 'src/objects/_side-nav.scss')
| -rw-r--r-- | src/objects/_side-nav.scss | 134 |
1 files changed, 67 insertions, 67 deletions
diff --git a/src/objects/_side-nav.scss b/src/objects/_side-nav.scss index 6c60777..4a1feda 100644 --- a/src/objects/_side-nav.scss +++ b/src/objects/_side-nav.scss | |||
| @@ -8,83 +8,83 @@ | |||
| 8 | @use 'side-nav.vars' as vars; | 8 | @use 'side-nav.vars' as vars; |
| 9 | 9 | ||
| 10 | @mixin styles { | 10 | @mixin styles { |
| 11 | @include materialize-at-root(meta.module-variables('vars')); | 11 | @include materialize-at-root(meta.module-variables('vars')); |
| 12 | 12 | ||
| 13 | @include bem.object('side-nav') { | 13 | @include bem.object('side-nav') { |
| 14 | display: flex; | 14 | display: flex; |
| 15 | flex-direction: column; | 15 | flex-direction: column; |
| 16 | gap: props.get(vars.$spacing); | 16 | gap: props.get(vars.$spacing); |
| 17 | 17 | ||
| 18 | @include bem.elem('header') { | 18 | @include bem.elem('header') { |
| 19 | padding-block: props.get(vars.$item--pad-b); | 19 | padding-block: props.get(vars.$item--pad-b); |
| 20 | padding-inline: props.get(vars.$item--pad-i); | 20 | padding-inline: props.get(vars.$item--pad-i); |
| 21 | font-size: props.get(vars.$header--font-size); | 21 | font-size: props.get(vars.$header--font-size); |
| 22 | font-weight: 500; | 22 | font-weight: 500; |
| 23 | color: props.get(vars.$header--label-color); | 23 | color: props.get(vars.$header--label-color); |
| 24 | text-transform: uppercase; | 24 | text-transform: uppercase; |
| 25 | letter-spacing: .5px; | 25 | letter-spacing: .5px; |
| 26 | 26 | ||
| 27 | @include bem.next-twin-elem { | 27 | @include bem.next-twin-elem { |
| 28 | margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing)); | 28 | margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing)); |
| 29 | } | 29 | } |
| 30 | } | 30 | } |
| 31 | 31 | ||
| 32 | @include bem.elem('item') { | 32 | @include bem.elem('item') { |
| 33 | padding-block: props.get(vars.$item--pad-b); | 33 | padding-block: props.get(vars.$item--pad-b); |
| 34 | padding-inline: props.get(vars.$item--pad-i); | 34 | padding-inline: props.get(vars.$item--pad-i); |
| 35 | margin: calc(-1 * props.get(vars.$item--key-focus--border-offset)); | 35 | margin: calc(-1 * props.get(vars.$item--key-focus--border-offset)); |
| 36 | color: props.get(vars.$item--disabled--label-color); | 36 | color: props.get(vars.$item--disabled--label-color); |
| 37 | background-clip: padding-box; | 37 | background-clip: padding-box; |
| 38 | border: props.get(vars.$item--key-focus--border-offset) solid transparent; | 38 | border: props.get(vars.$item--key-focus--border-offset) solid transparent; |
| 39 | border-radius: calc(props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--border-offset)); | 39 | border-radius: calc(props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--border-offset)); |
| 40 | 40 | ||
| 41 | &:link, | 41 | &:link, |
| 42 | &:visited, | 42 | &:visited, |
| 43 | &:enabled { | 43 | &:enabled { |
| 44 | color: currentColor; | 44 | color: currentColor; |
| 45 | 45 | ||
| 46 | @include bem.multi('&:hover, &:focus-visible', 'is' 'selected') { | 46 | @include bem.multi('&:hover, &:focus-visible', 'is' 'selected') { |
| 47 | color: props.get(vars.$item--hover--label-color); | 47 | color: props.get(vars.$item--hover--label-color); |
| 48 | background-color: props.get(vars.$item--hover--bg-color); | 48 | background-color: props.get(vars.$item--hover--bg-color); |
| 49 | } | 49 | } |
| 50 | 50 | ||
| 51 | &:active { | 51 | &:active { |
| 52 | color: props.get(vars.$item--active--label-color); | 52 | color: props.get(vars.$item--active--label-color); |
| 53 | background-color: props.get(vars.$item--active--bg-color); | 53 | background-color: props.get(vars.$item--active--bg-color); |
| 54 | } | 54 | } |
| 55 | 55 | ||
| 56 | &:focus-visible { | 56 | &:focus-visible { |
| 57 | outline: props.get(vars.$item--key-focus--border-color) solid props.get(vars.$item--key-focus--border-width); | 57 | outline: props.get(vars.$item--key-focus--border-color) solid props.get(vars.$item--key-focus--border-width); |
| 58 | box-shadow: | 58 | box-shadow: |
| 59 | 0 | 59 | 0 |
| 60 | 0 | 60 | 0 |
| 61 | 0 | 61 | 0 |
| 62 | calc(props.get(vars.$item--key-focus--border-width) + props.get(vars.$item--key-focus--outline-width)) | 62 | calc(props.get(vars.$item--key-focus--border-width) + props.get(vars.$item--key-focus--outline-width)) |
| 63 | props.get(vars.$item--key-focus--outline-color); | 63 | props.get(vars.$item--key-focus--outline-color); |
| 64 | } | 64 | } |
| 65 | } | 65 | } |
| 66 | 66 | ||
| 67 | @include bem.next-elem('header') { | 67 | @include bem.next-elem('header') { |
| 68 | margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing)); | 68 | margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing)); |
| 69 | } | 69 | } |
| 70 | } | 70 | } |
| 71 | 71 | ||
| 72 | @include bem.elem('header') { | 72 | @include bem.elem('header') { |
| 73 | &:link, | 73 | &:link, |
| 74 | &:visited, | 74 | &:visited, |
| 75 | &:enabled { | 75 | &:enabled { |
| 76 | color: props.get(vars.$header--label-color); | 76 | color: props.get(vars.$header--label-color); |
| 77 | } | 77 | } |
| 78 | } | 78 | } |
| 79 | 79 | ||
| 80 | @include bem.elem('separator') { | 80 | @include bem.elem('separator') { |
| 81 | block-size: props.get(vars.$separator); | 81 | block-size: props.get(vars.$separator); |
| 82 | } | 82 | } |
| 83 | 83 | ||
| 84 | @include bem.elem('icon-slot') { | 84 | @include bem.elem('icon-slot') { |
| 85 | display: flex; | 85 | display: flex; |
| 86 | justify-content: center; | 86 | justify-content: center; |
| 87 | inline-size: props.get(icon.$size); | 87 | inline-size: props.get(icon.$size); |
| 88 | } | 88 | } |
| 89 | } | 89 | } |
| 90 | } | 90 | } |
