diff options
author | Volpeon <git@volpeon.ink> | 2022-02-08 18:05:15 +0100 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2022-02-08 18:05:15 +0100 |
commit | 9fb3237247f637b55a7da6bbf2847c17c2fb2ad0 (patch) | |
tree | 44bb936cbb48e59d50ff36a0f79e696f3232ba9b /src/objects/_menu.scss | |
parent | Update (diff) | |
download | iro-design-9fb3237247f637b55a7da6bbf2847c17c2fb2ad0.tar.gz iro-design-9fb3237247f637b55a7da6bbf2847c17c2fb2ad0.tar.bz2 iro-design-9fb3237247f637b55a7da6bbf2847c17c2fb2ad0.zip |
Added menu
Diffstat (limited to 'src/objects/_menu.scss')
-rw-r--r-- | src/objects/_menu.scss | 92 |
1 files changed, 92 insertions, 0 deletions
diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss new file mode 100644 index 0000000..91ef0a5 --- /dev/null +++ b/src/objects/_menu.scss | |||
@@ -0,0 +1,92 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | ||
2 | @use '../functions' as fn; | ||
3 | |||
4 | @include iro.props-namespace('menu') { | ||
5 | @include iro.props-store(( | ||
6 | --dims: ( | ||
7 | --separator: .6rem, | ||
8 | --item: ( | ||
9 | --pad-x: .8rem, | ||
10 | --pad-y: .4rem, | ||
11 | ), | ||
12 | ), | ||
13 | ), 'dims'); | ||
14 | |||
15 | @include iro.props-store(( | ||
16 | --colors: ( | ||
17 | --header: ( | ||
18 | --label: fn.global-color(--fg-hi2), | ||
19 | ), | ||
20 | --item: ( | ||
21 | --hover: ( | ||
22 | --bg: fn.global-color(--obj-hi), | ||
23 | --label: fn.global-color(--fg-lo), | ||
24 | ), | ||
25 | --disabled: ( | ||
26 | --label: fn.global-color(--fg-hi3), | ||
27 | ), | ||
28 | --key-focus: ( | ||
29 | --bg: fn.global-color(--obj-hi), | ||
30 | --label: fn.global-color(--fg-lo), | ||
31 | --border: fn.global-color(--focus --fill), | ||
32 | --shadow: fn.global-color(--focus --shadow), | ||
33 | ), | ||
34 | ), | ||
35 | ), | ||
36 | ), 'colors'); | ||
37 | |||
38 | @include iro.bem-object(iro.props-namespace()) { | ||
39 | @include iro.bem-elem('header') { | ||
40 | padding: | ||
41 | calc(1.5 * fn.dim(--item --pad-y)) | ||
42 | fn.dim(--item --pad-x) | ||
43 | calc(.5 * fn.dim(--item --pad-y)); | ||
44 | color: fn.color(--header --label); | ||
45 | font-size: fn.global-dim(--font-size --xs); | ||
46 | font-weight: 500; | ||
47 | letter-spacing: .5px; | ||
48 | text-transform: uppercase; | ||
49 | } | ||
50 | |||
51 | @include iro.bem-elem('item') { | ||
52 | display: block; | ||
53 | box-sizing: border-box; | ||
54 | width: 100%; | ||
55 | padding: calc(fn.dim(--item --pad-y) - 2px) calc(fn.dim(--item --pad-x) - 2px); | ||
56 | border: 2px solid transparent; | ||
57 | color: fn.color(--item --disabled --label); | ||
58 | |||
59 | &:link, | ||
60 | &:visited, | ||
61 | &:enabled { | ||
62 | color: currentColor; | ||
63 | |||
64 | &:hover, | ||
65 | &:active { | ||
66 | background-color: fn.color(--item --hover --bg); | ||
67 | color: fn.color(--item --hover --label); | ||
68 | } | ||
69 | |||
70 | @include iro.bem-at-theme('keyboard') { | ||
71 | &:focus { | ||
72 | border-radius: 2px; | ||
73 | border-color: fn.color(--item --key-focus --border); | ||
74 | background-color: fn.color(--item --key-focus --bg); | ||
75 | box-shadow: fn.color(--item --key-focus --shadow); | ||
76 | color: fn.color(--item --key-focus --label); | ||
77 | } | ||
78 | } | ||
79 | } | ||
80 | } | ||
81 | |||
82 | @include iro.bem-elem('separator') { | ||
83 | height: fn.dim(--separator); | ||
84 | } | ||
85 | |||
86 | @include iro.bem-elem('icon-slot') { | ||
87 | display: flex; | ||
88 | justify-content: center; | ||
89 | width: 1em; | ||
90 | } | ||
91 | } | ||
92 | } | ||