summaryrefslogtreecommitdiffstats
path: root/src/objects/_side-nav.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2025-08-06 16:40:56 +0200
committerVolpeon <git@volpeon.ink>2025-08-06 16:40:56 +0200
commit41b0d0497988274057fc2512c822a6bc9d2d3ebd (patch)
tree015a95ede42b799ac1fd049baa8b0a853b6d3bb3 /src/objects/_side-nav.scss
parentFix button font size (diff)
downloadiro-design-41b0d0497988274057fc2512c822a6bc9d2d3ebd.tar.gz
iro-design-41b0d0497988274057fc2512c822a6bc9d2d3ebd.tar.bz2
iro-design-41b0d0497988274057fc2512c822a6bc9d2d3ebd.zip
Switch to tab indentationHEADmaster
Diffstat (limited to 'src/objects/_side-nav.scss')
-rw-r--r--src/objects/_side-nav.scss134
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}
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-08-12 08:28:19 +0000