summaryrefslogtreecommitdiffstats
path: root/src/objects/_overflow-button.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-06-21 23:07:50 +0200
committerVolpeon <git@volpeon.ink>2024-06-21 23:07:50 +0200
commit48cb00040763459fc46d4aa108bf72c12f48f422 (patch)
tree9609470d56bb31d55697ef0c42f1c908804dd3f1 /src/objects/_overflow-button.scss
parentUpdate (diff)
downloadiro-design-48cb00040763459fc46d4aa108bf72c12f48f422.tar.gz
iro-design-48cb00040763459fc46d4aa108bf72c12f48f422.tar.bz2
iro-design-48cb00040763459fc46d4aa108bf72c12f48f422.zip
WIP: Refactoring
Diffstat (limited to 'src/objects/_overflow-button.scss')
-rw-r--r--src/objects/_overflow-button.scss243
1 files changed, 0 insertions, 243 deletions
diff --git a/src/objects/_overflow-button.scss b/src/objects/_overflow-button.scss
deleted file mode 100644
index b15ea1f..0000000
--- a/src/objects/_overflow-button.scss
+++ /dev/null
@@ -1,243 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('overflow-button') {
5 @include iro.props-store((
6 --dims: (
7 --pad-x: calc(fn.global-dim(--size --125) - 1px),
8 --pad-y: calc(fn.global-dim(--size --125) - 1px),
9 --spacing: fn.global-dim(--size --50)
10 ),
11 ), 'dims');
12
13 @include iro.props-store((
14 --colors: (
15 --label: fn.global-color(--fg),
16
17 --hover: (
18 --bg: fn.global-color(--obj-hi),
19 --label: fn.global-color(--fg-lo),
20 ),
21 --active: (
22 --bg: fn.global-color(--obj),
23 --label: fn.global-color(--fg-lo),
24 ),
25 --selected: (
26 --bg: fn.global-color(--obj-hi),
27 --label: fn.global-color(--fg),
28
29 --hover: (
30 --bg: fn.global-color(--obj),
31 --label: fn.global-color(--fg-lo),
32 ),
33 ),
34 --disabled: (
35 --label: fn.global-color(--fg-hi3),
36 ),
37 --key-focus: (
38 --border: fn.global-color(--focus --fill),
39 --shadow: fn.global-color(--focus --shadow),
40 ),
41
42 --red: (
43 --hover: (
44 --bg: fn.global-color(--red --quiet --bg),
45 --label: fn.global-color(--red --quiet --fg),
46 ),
47 --active: (
48 --bg: fn.global-color(--red --quiet --obj),
49 --label: fn.global-color(--red --quiet --fg-lo),
50 ),
51
52 --selected: (
53 --bg: fn.global-color(--red --quiet --bg),
54 --label: fn.global-color(--red --quiet --fg),
55
56 --hover: (
57 --bg: fn.global-color(--red --quiet --obj),
58 --label: fn.global-color(--red --quiet --fg-lo),
59 ),
60 ),
61 ),
62
63 --blue: (
64 --hover: (
65 --bg: fn.global-color(--blue --quiet --bg),
66 --label: fn.global-color(--blue --quiet --fg),
67 ),
68 --active: (
69 --bg: fn.global-color(--blue --quiet --obj),
70 --label: fn.global-color(--blue --quiet --fg-lo),
71 ),
72
73 --selected: (
74 --bg: fn.global-color(--blue --quiet --bg),
75 --label: fn.global-color(--blue --quiet --fg),
76
77 --hover: (
78 --bg: fn.global-color(--blue --quiet --obj),
79 --label: fn.global-color(--blue --quiet --fg-lo),
80 ),
81 ),
82 ),
83
84 --green: (
85 --hover: (
86 --bg: fn.global-color(--green --quiet --bg),
87 --label: fn.global-color(--green --quiet --fg),
88 ),
89 --active: (
90 --bg: fn.global-color(--green --quiet --obj),
91 --label: fn.global-color(--green --quiet --fg-lo),
92 ),
93
94 --selected: (
95 --bg: fn.global-color(--green --quiet --bg),
96 --label: fn.global-color(--green --quiet --fg),
97
98 --hover: (
99 --bg: fn.global-color(--green --quiet --obj),
100 --label: fn.global-color(--green --quiet --fg-lo),
101 ),
102 ),
103 )
104 ),
105 ), 'colors');
106
107 @include iro.bem-object(iro.props-namespace()) {
108 display: inline-block;
109 color: fn.color(--disabled --label);
110
111 @include iro.bem-elem('outside') {
112 display: inline-block;
113 margin-right: fn.dim(--spacing);
114 }
115
116 @include iro.bem-elem('inside') {
117 display: inline-block;
118 padding: fn.dim(--pad-y) fn.dim(--pad-x);
119 border: 2px solid transparent;
120 border-radius: 100em;
121 line-height: 1;
122 text-align: center;
123 text-decoration: none;
124 text-overflow: ellipsis;
125 white-space: nowrap;
126
127 @include iro.bem-next-elem('outside') {
128 margin-right: 0;
129 margin-left: fn.dim(--spacing);
130 }
131 }
132
133 &:link,
134 &:visited,
135 &:enabled {
136 color: fn.color(--label);
137
138 &:hover {
139 @include iro.bem-elem('inside') {
140 background-color: fn.color(--hover --bg);
141 color: fn.color(--hover --label);
142 }
143 }
144
145 &:active {
146 @include iro.bem-elem('inside') {
147 background-color: fn.color(--active --bg);
148 color: fn.color(--active --label);
149 }
150 }
151
152 @include iro.bem-at-theme('keyboard') {
153 &:focus {
154 @include iro.bem-elem('inside') {
155 background-color: fn.color(--hover --bg);
156 color: fn.color(--hover --label);
157 }
158 }
159 }
160 }
161
162 @include iro.bem-is('selected') {
163 @include iro.bem-elem('inside') {
164 background-color: fn.color(--selected --bg);
165 }
166
167 &:link,
168 &:visited,
169 &:enabled {
170 @include iro.bem-elem('inside') {
171 color: fn.color(--selected --label);
172 }
173
174 &:hover,
175 &:active {
176 @include iro.bem-elem('inside') {
177 background-color: fn.color(--selected --hover --bg);
178 color: fn.color(--selected --hover --label);
179 }
180 }
181
182 @include iro.bem-at-theme('keyboard') {
183 &:focus {
184 @include iro.bem-elem('inside') {
185 background-color: fn.color(--selected --bg);
186 color: fn.color(--selected --hover --label);
187 }
188 }
189 }
190 }
191 }
192
193 @each $color in 'red' 'blue' 'green' {
194 @include iro.bem-modifier($color) {
195 &:link,
196 &:visited,
197 &:enabled {
198 &:hover {
199 @include iro.bem-elem('inside') {
200 background-color: fn.color(--#{$color} --hover --bg);
201 color: fn.color(--#{$color} --hover --label);
202 }
203 }
204
205 &:active {
206 @include iro.bem-elem('inside') {
207 background-color: fn.color(--#{$color} --active --bg);
208 color: fn.color(--#{$color} --active --label);
209 }
210 }
211 }
212
213 @include iro.bem-is('selected') {
214 &:link,
215 &:visited,
216 &:enabled {
217 @include iro.bem-elem('inside') {
218 background-color: fn.color(--#{$color} --selected --bg);
219 color: fn.color(--#{$color} --selected --label);
220 }
221
222 &:hover,
223 &:active {
224 @include iro.bem-elem('inside') {
225 background-color: fn.color(--#{$color} --selected --hover --bg);
226 color: fn.color(--#{$color} --selected --hover --label);
227 }
228 }
229 }
230 }
231 }
232 }
233
234 @include iro.bem-at-theme('keyboard') {
235 &:focus {
236 @include iro.bem-elem('inside') {
237 border-color: fn.color(--key-focus --border);
238 box-shadow: fn.color(--key-focus --shadow);
239 }
240 }
241 }
242 }
243}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-11 02:39:20 +0000