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