summaryrefslogtreecommitdiffstats
path: root/src/objects/_overflow-button.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects/_overflow-button.scss')
-rw-r--r--src/objects/_overflow-button.scss98
1 files changed, 98 insertions, 0 deletions
diff --git a/src/objects/_overflow-button.scss b/src/objects/_overflow-button.scss
index 3920a37..d768492 100644
--- a/src/objects/_overflow-button.scss
+++ b/src/objects/_overflow-button.scss
@@ -37,6 +37,63 @@
37 --border: fn.global-color(--focus --fill), 37 --border: fn.global-color(--focus --fill),
38 --shadow: fn.global-color(--focus --shadow), 38 --shadow: fn.global-color(--focus --shadow),
39 ), 39 ),
40
41 --red: (
42 --hover: (
43 --bg: fn.global-color(--red --quiet --bg),
44 --label: fn.global-color(--red --quiet --fg),
45 ),
46 --active: (
47 --bg: fn.global-color(--red --quiet --obj),
48 --label: fn.global-color(--red --quiet --fg-lo),
49 ),
50 --selected: (
51 --bg: fn.global-color(--red --quiet --bg),
52 --label: fn.global-color(--red --quiet --fg),
53
54 --hover: (
55 --label: fn.global-color(--red --quiet --fg-lo),
56 ),
57 ),
58 ),
59
60 --blue: (
61 --hover: (
62 --bg: fn.global-color(--blue --quiet --bg),
63 --label: fn.global-color(--blue --quiet --fg),
64 ),
65 --active: (
66 --bg: fn.global-color(--blue --quiet --obj),
67 --label: fn.global-color(--blue --quiet --fg-lo),
68 ),
69 --selected: (
70 --bg: fn.global-color(--blue --quiet --bg),
71 --label: fn.global-color(--blue --quiet --fg),
72
73 --hover: (
74 --label: fn.global-color(--blue --quiet --fg-lo),
75 ),
76 ),
77 ),
78
79 --green: (
80 --hover: (
81 --bg: fn.global-color(--green --quiet --bg),
82 --label: fn.global-color(--green --quiet --fg),
83 ),
84 --active: (
85 --bg: fn.global-color(--green --quiet --obj),
86 --label: fn.global-color(--green --quiet --fg-lo),
87 ),
88 --selected: (
89 --bg: fn.global-color(--green --quiet --bg),
90 --label: fn.global-color(--green --quiet --fg),
91
92 --hover: (
93 --label: fn.global-color(--green --quiet --fg-lo),
94 ),
95 ),
96 )
40 ), 97 ),
41 ), 'colors'); 98 ), 'colors');
42 99
@@ -122,6 +179,47 @@
122 } 179 }
123 } 180 }
124 } 181 }
182
183 @each $color in 'red' 'blue' 'green' {
184 @include iro.bem-modifier($color) {
185 &:link,
186 &:visited,
187 &:enabled {
188 &:hover {
189 @include iro.bem-elem('inside') {
190 background-color: fn.color(--#{$color} --hover --bg);
191 color: fn.color(--#{$color} --hover --label);
192 }
193 }
194
195 &:active {
196 @include iro.bem-elem('inside') {
197 background-color: fn.color(--#{$color} --active --bg);
198 color: fn.color(--#{$color} --active --label);
199 }
200 }
201 }
202
203 @include iro.bem-is('selected') {
204 &:link,
205 &:visited,
206 &:enabled {
207 @include iro.bem-elem('inside') {
208 background-color: fn.color(--#{$color} --selected --bg);
209 color: fn.color(--#{$color} --selected --label);
210 }
211
212 &:hover,
213 &:active {
214 @include iro.bem-elem('inside') {
215 background-color: fn.color(--#{$color} --selected --bg);
216 color: fn.color(--#{$color} --selected --hover --label);
217 }
218 }
219 }
220 }
221 }
222 }
125 223
126 @include iro.bem-at-theme('keyboard') { 224 @include iro.bem-at-theme('keyboard') {
127 &:focus { 225 &:focus {