diff options
Diffstat (limited to 'src/.old/objects')
-rw-r--r-- | src/.old/objects/_menu.scss | 124 |
1 files changed, 0 insertions, 124 deletions
diff --git a/src/.old/objects/_menu.scss b/src/.old/objects/_menu.scss deleted file mode 100644 index 7db4896..0000000 --- a/src/.old/objects/_menu.scss +++ /dev/null | |||
@@ -1,124 +0,0 @@ | |||
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: fn.global-dim(--size --50), | ||
10 | --header: ( | ||
11 | --font-size: fn.global-dim(--font-size --50), | ||
12 | ), | ||
13 | --separator: fn.global-dim(--size --200), | ||
14 | --item: ( | ||
15 | --pad-x: fn.global-dim(--size --150), | ||
16 | --pad-y: fn.global-dim(--size --100), | ||
17 | --rounding: 3px, | ||
18 | ), | ||
19 | ), | ||
20 | ), 'dims'); | ||
21 | |||
22 | @include iro.props-store(( | ||
23 | --colors: ( | ||
24 | --header: ( | ||
25 | --label: fn.global-color(--fg-hi), | ||
26 | ), | ||
27 | --item: ( | ||
28 | --hover: ( | ||
29 | --bg: fn.global-color(--obj-hi), | ||
30 | --label: fn.global-color(--fg-lo), | ||
31 | ), | ||
32 | --disabled: ( | ||
33 | --label: fn.global-color(--fg-hi3), | ||
34 | ), | ||
35 | --key-focus: ( | ||
36 | --border: fn.global-color(--focus --fill), | ||
37 | --shadow: fn.global-color(--focus --shadow), | ||
38 | ), | ||
39 | --badge: ( | ||
40 | --bg: fn.global-color(--bg), | ||
41 | --label: fn.global-color(--fg-lo), | ||
42 | ) | ||
43 | ), | ||
44 | ), | ||
45 | ), 'colors'); | ||
46 | |||
47 | @include iro.bem-object(iro.props-namespace()) { | ||
48 | display: flex; | ||
49 | flex-direction: column; | ||
50 | gap: fn.dim(--spacing); | ||
51 | |||
52 | @include iro.bem-elem('header') { | ||
53 | padding: fn.dim(--item --pad-y) fn.dim(--item --pad-x); | ||
54 | color: fn.color(--header --label); | ||
55 | font-size: fn.dim(--header --font-size); | ||
56 | font-weight: 500; | ||
57 | letter-spacing: .5px; | ||
58 | text-transform: uppercase; | ||
59 | |||
60 | @include iro.bem-next-twin-elem { | ||
61 | margin-top: calc(fn.dim(--separator) + fn.dim(--spacing)); | ||
62 | } | ||
63 | } | ||
64 | |||
65 | @include iro.bem-elem('item') { | ||
66 | padding: calc(fn.dim(--item --pad-y) - 2px) calc(fn.dim(--item --pad-x) - 2px); | ||
67 | border: 2px solid transparent; | ||
68 | border-radius: fn.dim(--item --rounding); | ||
69 | color: fn.color(--item --disabled --label); | ||
70 | |||
71 | &:link, | ||
72 | &:visited, | ||
73 | &:enabled { | ||
74 | color: currentColor; | ||
75 | |||
76 | @include iro.bem-multi('&:hover, &:active', 'is' 'selected') { | ||
77 | background-color: fn.color(--item --hover --bg); | ||
78 | color: fn.color(--item --hover --label); | ||
79 | |||
80 | @include iro.bem-elem('badge') { | ||
81 | background-color: fn.color(--item --badge --bg); | ||
82 | color: fn.color(--item --badge --label); | ||
83 | } | ||
84 | } | ||
85 | |||
86 | @include iro.bem-at-theme('keyboard') { | ||
87 | &:focus { | ||
88 | border-radius: calc(fn.dim(--item --rounding) - 1px); | ||
89 | border-color: fn.color(--item --key-focus --border); | ||
90 | background-color: fn.color(--item --hover --bg); | ||
91 | box-shadow: fn.color(--item --key-focus --shadow); | ||
92 | color: fn.color(--item --hover --label); | ||
93 | } | ||
94 | } | ||
95 | } | ||
96 | |||
97 | @include iro.bem-next-elem('header') { | ||
98 | margin-top: calc(fn.dim(--separator) + fn.dim(--spacing)); | ||
99 | } | ||
100 | } | ||
101 | |||
102 | @include iro.bem-elem('header') { | ||
103 | &:link, | ||
104 | &:visited, | ||
105 | &:enabled { | ||
106 | color: fn.color(--header --label); | ||
107 | } | ||
108 | } | ||
109 | |||
110 | @include iro.bem-elem('separator') { | ||
111 | height: fn.dim(--separator); | ||
112 | } | ||
113 | |||
114 | @include iro.bem-elem('icon-slot') { | ||
115 | display: flex; | ||
116 | justify-content: center; | ||
117 | width: fn.foreign-dim(--icon, --size); | ||
118 | } | ||
119 | |||
120 | @include iro.bem-modifier('pull') { | ||
121 | margin: calc(-1 * fn.dim(--item --pad-x)); | ||
122 | } | ||
123 | } | ||
124 | } | ||