diff options
author | Volpeon <git@volpeon.ink> | 2024-06-26 21:47:55 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2024-06-26 21:47:55 +0200 |
commit | 03bb4268367dcd3b2d327d3834e2047a56687a86 (patch) | |
tree | 83f6f6837fc909dd8cc5f8166c3c1b4ae78c85d9 /src/objects/_menu.scss | |
parent | Update (diff) | |
download | iro-design-03bb4268367dcd3b2d327d3834e2047a56687a86.tar.gz iro-design-03bb4268367dcd3b2d327d3834e2047a56687a86.tar.bz2 iro-design-03bb4268367dcd3b2d327d3834e2047a56687a86.zip |
Menus
Diffstat (limited to 'src/objects/_menu.scss')
-rw-r--r-- | src/objects/_menu.scss | 127 |
1 files changed, 127 insertions, 0 deletions
diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss new file mode 100644 index 0000000..091098d --- /dev/null +++ b/src/objects/_menu.scss | |||
@@ -0,0 +1,127 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | ||
2 | @use '../functions' as fn; | ||
3 | |||
4 | @use './icon'; | ||
5 | |||
6 | @include iro.props-namespace('menu') { | ||
7 | @include iro.props-store(( | ||
8 | --dims: ( | ||
9 | --spacing: 0em, | ||
10 | --header: ( | ||
11 | --font-size: fn.global-dim(--font-size --50), | ||
12 | ), | ||
13 | --separator: fn.global-dim(--size --85), | ||
14 | --item: ( | ||
15 | --pad-i: fn.global-dim(--size --150), | ||
16 | --pad-b: fn.global-dim(--size --100), | ||
17 | --rounding: 0em, | ||
18 | ), | ||
19 | |||
20 | --key-focus: ( | ||
21 | --border: fn.global-dim(--key-focus --border), | ||
22 | --border-offset: fn.global-dim(--key-focus --border-offset), | ||
23 | --outline: fn.global-dim(--key-focus --outline), | ||
24 | ), | ||
25 | ), | ||
26 | --colors: ( | ||
27 | --separator: fn.global-color(--border), | ||
28 | --header: ( | ||
29 | --label: fn.global-color(--heading), | ||
30 | ), | ||
31 | --item: ( | ||
32 | --hover: ( | ||
33 | --bg: fn.global-color(--border-mute), | ||
34 | --label: fn.global-color(--heading), | ||
35 | ), | ||
36 | --active: ( | ||
37 | --bg: fn.global-color(--border), | ||
38 | --label: fn.global-color(--heading), | ||
39 | ), | ||
40 | --disabled: ( | ||
41 | --label: fn.global-color(--text-disabled), | ||
42 | ), | ||
43 | --key-focus: ( | ||
44 | --border: fn.global-color(--focus --border), | ||
45 | --outline: fn.global-color(--focus --outline), | ||
46 | ), | ||
47 | ), | ||
48 | ), | ||
49 | )); | ||
50 | |||
51 | @include iro.bem-object(iro.props-namespace()) { | ||
52 | display: flex; | ||
53 | flex-direction: column; | ||
54 | gap: fn.dim(--spacing); | ||
55 | |||
56 | @include iro.bem-elem('header') { | ||
57 | padding-block: fn.dim(--item --pad-b); | ||
58 | padding-inline: fn.dim(--item --pad-i); | ||
59 | color: fn.color(--header --label); | ||
60 | font-size: fn.dim(--header --font-size); | ||
61 | font-weight: 500; | ||
62 | letter-spacing: .5px; | ||
63 | text-transform: uppercase; | ||
64 | |||
65 | @include iro.bem-next-twin-elem { | ||
66 | margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing)); | ||
67 | } | ||
68 | } | ||
69 | |||
70 | @include iro.bem-elem('item') { | ||
71 | padding-block: calc(fn.dim(--item --pad-b) - 2px); | ||
72 | padding-inline: calc(fn.dim(--item --pad-i) - 2px); | ||
73 | border: 2px solid transparent; | ||
74 | border-radius: fn.dim(--item --rounding); | ||
75 | color: fn.color(--item --disabled --label); | ||
76 | |||
77 | &:link, | ||
78 | &:visited, | ||
79 | &:enabled { | ||
80 | color: currentColor; | ||
81 | |||
82 | @include iro.bem-multi('&:hover, &:focus-visible', 'is' 'selected') { | ||
83 | background-color: fn.color(--item --hover --bg); | ||
84 | color: fn.color(--item --hover --label); | ||
85 | } | ||
86 | |||
87 | &:active { | ||
88 | background-color: fn.color(--item --active --bg); | ||
89 | color: fn.color(--item --active --label); | ||
90 | } | ||
91 | } | ||
92 | |||
93 | @include iro.bem-next-elem('header') { | ||
94 | margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing)); | ||
95 | } | ||
96 | } | ||
97 | |||
98 | @include iro.bem-elem('header') { | ||
99 | &:link, | ||
100 | &:visited, | ||
101 | &:enabled { | ||
102 | color: fn.color(--header --label); | ||
103 | } | ||
104 | } | ||
105 | |||
106 | @include iro.bem-elem('separator') { | ||
107 | block-size: 1px; | ||
108 | margin-block: fn.dim(--separator); | ||
109 | background-color: fn.color(--separator); | ||
110 | } | ||
111 | |||
112 | @include iro.bem-elem('slot') { | ||
113 | padding-block: fn.dim(--item --pad-b); | ||
114 | padding-inline: fn.dim(--item --pad-i); | ||
115 | } | ||
116 | |||
117 | @include iro.bem-elem('icon-slot') { | ||
118 | display: flex; | ||
119 | justify-content: center; | ||
120 | inline-size: fn.foreign-dim(--icon, --size); | ||
121 | } | ||
122 | |||
123 | @include iro.bem-modifier('pull') { | ||
124 | margin: calc(-1 * fn.dim(--item --pad-i)); | ||
125 | } | ||
126 | } | ||
127 | } | ||