summaryrefslogtreecommitdiffstats
path: root/src/objects/_side-nav.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects/_side-nav.scss')
-rw-r--r--src/objects/_side-nav.scss83
1 files changed, 40 insertions, 43 deletions
diff --git a/src/objects/_side-nav.scss b/src/objects/_side-nav.scss
index ed0f3dc..272d38c 100644
--- a/src/objects/_side-nav.scss
+++ b/src/objects/_side-nav.scss
@@ -1,79 +1,76 @@
1@use "sass:meta"; 1@use 'sass:meta';
2@use "pkg:iro-sass/bem"; 2@use 'pkg:iro-sass/src/bem';
3@use "pkg:iro-sass/props"; 3@use 'pkg:iro-sass/src/props';
4@use "../props" as *; 4@use '../props' as *;
5@use "icon.vars" as icon; 5@use 'icon.vars' as icon;
6 6
7@forward "side-nav.vars"; 7@forward 'side-nav.vars';
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: 0.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 display: block; 33 display: block;
34 padding-block: props.get(vars.$item--pad-b); 34 padding-block: props.get(vars.$item--pad-b);
35 padding-inline: props.get(vars.$item--pad-i); 35 padding-inline: props.get(vars.$item--pad-i);
36 margin: calc(-1 * props.get(vars.$item--key-focus--border-offset)); 36 margin: calc(-1 * props.get(vars.$item--key-focus--border-offset));
37 color: props.get(vars.$item--disabled--label-color); 37 color: props.get(vars.$item--disabled--label-color);
38 background-clip: padding-box; 38 background-clip: padding-box;
39 border: props.get(vars.$item--key-focus--border-offset) solid transparent; 39 border: props.get(vars.$item--key-focus--border-offset) solid transparent;
40 border-radius: calc( 40 border-radius: calc(props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--border-offset));
41 props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--border-offset)
42 );
43 41
44 &:link, 42 &:link,
45 &:visited, 43 &:visited,
46 &:enabled { 44 &:enabled {
47 color: currentColor; 45 color: currentColor;
48 46
49 @include bem.multi("&:hover, &:focus-visible", "is" "selected") { 47 @include bem.multi('&:hover, &:focus-visible', 'is' 'selected') {
50 color: props.get(vars.$item--hover--label-color); 48 color: props.get(vars.$item--hover--label-color);
51 background-color: props.get(vars.$item--hover--bg-color); 49 background-color: props.get(vars.$item--hover--bg-color);
52 } 50 }
53 51
54 &:active { 52 &:active {
55 color: props.get(vars.$item--active--label-color); 53 color: props.get(vars.$item--active--label-color);
56 background-color: props.get(vars.$item--active--bg-color); 54 background-color: props.get(vars.$item--active--bg-color);
57 } 55 }
58 56
59 &:focus-visible { 57 &:focus-visible {
60 outline: props.get(vars.$item--key-focus--border-color) solid 58 outline: props.get(vars.$item--key-focus--border-color) solid props.get(vars.$item--key-focus--border-width);
61 props.get(vars.$item--key-focus--border-width); 59 box-shadow:
62 box-shadow: 0 0 0 60 0
63 calc( 61 0
64 props.get(vars.$item--key-focus--border-width) + 62 0
65 props.get(vars.$item--key-focus--outline-width) 63 calc(props.get(vars.$item--key-focus--border-width) + props.get(vars.$item--key-focus--outline-width))
66 )
67 props.get(vars.$item--key-focus--outline-color); 64 props.get(vars.$item--key-focus--outline-color);
68 } 65 }
69 } 66 }
70 67
71 @include bem.next-elem("header") { 68 @include bem.next-elem('header') {
72 margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing)); 69 margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing));
73 } 70 }
74 } 71 }
75 72
76 @include bem.elem("header") { 73 @include bem.elem('header') {
77 &:link, 74 &:link,
78 &:visited, 75 &:visited,
79 &:enabled { 76 &:enabled {
@@ -81,14 +78,14 @@
81 } 78 }
82 } 79 }
83 80
84 @include bem.elem("separator") { 81 @include bem.elem('separator') {
85 block-size: props.get(vars.$separator); 82 block-size: props.get(vars.$separator);
86 } 83 }
87 84
88 @include bem.elem("icon-slot") { 85 @include bem.elem('icon-slot') {
89 display: flex; 86 display: flex;
90 justify-content: center; 87 justify-content: center;
91 inline-size: props.get(icon.$size); 88 inline-size: props.get(icon.$size);
92 } 89 }
93 } 90 }
94} 91}
generated by cgit v1.3.1 (git 2.54.0) at 2026-07-22 22:43:34 +0000