summaryrefslogtreecommitdiffstats
path: root/src/objects/_menu.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2026-07-22 12:27:09 +0200
committerVolpeon <git@volpeon.ink>2026-07-22 12:27:09 +0200
commitcc5329a5f4d3ea91cac93bc7f9b8f943b7ced226 (patch)
treed16dea8f0a5edca2b610ecabeac5e93a4d98be2f /src/objects/_menu.scss
parentUpdate _index.scss (diff)
downloadiro-design-cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226.tar.gz
iro-design-cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226.tar.bz2
iro-design-cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226.zip
Paths
Diffstat (limited to 'src/objects/_menu.scss')
-rw-r--r--src/objects/_menu.scss101
1 files changed, 54 insertions, 47 deletions
diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss
index dce14a8..c7fbc0e 100644
--- a/src/objects/_menu.scss
+++ b/src/objects/_menu.scss
@@ -1,75 +1,82 @@
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 'menu.vars'; 7@forward "menu.vars";
8@use 'menu.vars' as vars; 8@use "menu.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('menu') { 13 @include bem.object("menu") {
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-width) + props.get(vars.$spacing)); 28 margin-block-start: calc(
29 props.get(vars.$separator-width) + props.get(vars.$spacing)
30 );
29 } 31 }
30 } 32 }
31 33
32 @include bem.elem('item') { 34 @include bem.elem("item") {
33 padding-block: props.get(vars.$item--pad-b); 35 padding-block: props.get(vars.$item--pad-b);
34 padding-inline: props.get(vars.$item--pad-i); 36 padding-inline: props.get(vars.$item--pad-i);
35 margin: calc(-1 * props.get(vars.$item--key-focus--outline-width)); 37 margin: calc(-1 * props.get(vars.$item--key-focus--outline-width));
36 color: props.get(vars.$item--disabled--label-color); 38 color: props.get(vars.$item--disabled--label-color);
37 background-clip: padding-box; 39 background-clip: padding-box;
38 border: props.get(vars.$item--key-focus--outline-width) solid transparent; 40 border: props.get(vars.$item--key-focus--outline-width) solid transparent;
39 border-radius: calc(props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--outline-width)); 41 border-radius: calc(
42 props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--outline-width)
43 );
40 44
41 &:link, 45 &:link,
42 &:visited, 46 &:visited,
43 &:enabled { 47 &:enabled {
44 color: currentColor; 48 color: currentColor;
45 49
46 @include bem.multi('&:hover, &:focus-visible', 'is' 'selected') { 50 @include bem.multi("&:hover, &:focus-visible", "is" "selected") {
47 color: props.get(vars.$item--hover--label-color); 51 color: props.get(vars.$item--hover--label-color);
48 background-color: props.get(vars.$item--hover--bg-color); 52 background-color: props.get(vars.$item--hover--bg-color);
49 } 53 }
50 54
51 &:active { 55 &:active {
52 color: props.get(vars.$item--active--label-color); 56 color: props.get(vars.$item--active--label-color);
53 background-color: props.get(vars.$item--active--bg-color); 57 background-color: props.get(vars.$item--active--bg-color);
54 } 58 }
55 59
56 &:focus-visible { 60 &:focus-visible {
57 outline: props.get(vars.$item--key-focus--border-color) solid props.get(vars.$item--key-focus--border-width); 61 outline: props.get(vars.$item--key-focus--border-color) solid
58 box-shadow: 62 props.get(vars.$item--key-focus--border-width);
59 0 63 box-shadow: 0 0 0
60 0 64 calc(
61 0 65 props.get(vars.$item--key-focus--border-width) +
62 calc(props.get(vars.$item--key-focus--border-width) + props.get(vars.$item--key-focus--outline-width)) 66 props.get(vars.$item--key-focus--outline-width)
67 )
63 props.get(vars.$item--key-focus--outline-color); 68 props.get(vars.$item--key-focus--outline-color);
64 } 69 }
65 } 70 }
66 71
67 @include bem.next-elem('header') { 72 @include bem.next-elem("header") {
68 margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing)); 73 margin-block-start: calc(
74 props.get(vars.$separator-width) + props.get(vars.$spacing)
75 );
69 } 76 }
70 } 77 }
71 78
72 @include bem.elem('header') { 79 @include bem.elem("header") {
73 &:link, 80 &:link,
74 &:visited, 81 &:visited,
75 &:enabled { 82 &:enabled {
@@ -77,25 +84,25 @@
77 } 84 }
78 } 85 }
79 86
80 @include bem.elem('separator') { 87 @include bem.elem("separator") {
81 block-size: 1px; 88 block-size: 1px;
82 margin-block: props.get(vars.$separator-width); 89 margin-block: props.get(vars.$separator-width);
83 margin-inline: props.get(vars.$item--pad-i); 90 margin-inline: props.get(vars.$item--pad-i);
84 background-color: props.get(vars.$separator-color); 91 background-color: props.get(vars.$separator-color);
85 } 92 }
86 93
87 @include bem.elem('slot') { 94 @include bem.elem("slot") {
88 padding-block: props.get(vars.$item--pad-b); 95 padding-block: props.get(vars.$item--pad-b);
89 padding-inline: props.get(vars.$item--pad-i); 96 padding-inline: props.get(vars.$item--pad-i);
90 } 97 }
91 98
92 @include bem.elem('icon-slot') { 99 @include bem.elem("icon-slot") {
93 display: flex; 100 display: flex;
94 justify-content: center; 101 justify-content: center;
95 inline-size: props.get(icon.$size); 102 inline-size: props.get(icon.$size);
96 } 103 }
97 104
98 @include bem.modifier('pull') { 105 @include bem.modifier("pull") {
99 margin: calc(-1 * props.get(vars.$item--pad-i)); 106 margin: calc(-1 * props.get(vars.$item--pad-i));
100 } 107 }
101 } 108 }
generated by cgit v1.3.1 (git 2.54.0) at 2026-07-22 13:08:15 +0000