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