diff options
Diffstat (limited to 'src/objects')
-rw-r--r-- | src/objects/_action-button.scss | 116 |
1 files changed, 45 insertions, 71 deletions
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss index 6f0288d..6286f4e 100644 --- a/src/objects/_action-button.scss +++ b/src/objects/_action-button.scss | |||
@@ -22,7 +22,7 @@ | |||
22 | --border: fn.global-color(--border-strong), | 22 | --border: fn.global-color(--border-strong), |
23 | 23 | ||
24 | --hover: ( | 24 | --hover: ( |
25 | --bg: fn.global-color(--base --50), | 25 | --bg: fn.global-color(--border-mute), |
26 | --label: fn.global-color(--heading), | 26 | --label: fn.global-color(--heading), |
27 | --border: fn.global-color(--text-mute-more), | 27 | --border: fn.global-color(--text-mute-more), |
28 | ), | 28 | ), |
@@ -31,20 +31,31 @@ | |||
31 | --label: fn.global-color(--heading), | 31 | --label: fn.global-color(--heading), |
32 | --border: fn.global-color(--text-mute-more), | 32 | --border: fn.global-color(--text-mute-more), |
33 | ), | 33 | ), |
34 | --disabled: ( | ||
35 | --bg: fn.global-color(--bg-l1), | ||
36 | --label: fn.global-color(--border-strong), | ||
37 | --border: fn.global-color(--border-mute), | ||
38 | ), | ||
34 | --selected: ( | 39 | --selected: ( |
35 | --bg: fn.global-color(--border-mute), | 40 | --bg: fn.global-color(--text-mute), |
36 | --label: fn.global-color(--text), | 41 | --label: fn.global-color(--base --50), |
37 | --border: fn.global-color(--text-disabled), | 42 | --border: fn.global-color(--text-mute), |
38 | 43 | ||
39 | --hover: ( | 44 | --hover: ( |
40 | --label: fn.global-color(--heading), | 45 | --bg: fn.global-color(--text), |
41 | --border: fn.global-color(--text-mute-more), | 46 | --label: fn.global-color(--base --50), |
47 | --border: fn.global-color(--text), | ||
48 | ), | ||
49 | --active: ( | ||
50 | --bg: fn.global-color(--heading), | ||
51 | --label: fn.global-color(--base --50), | ||
52 | --border: fn.global-color(--heading), | ||
53 | ), | ||
54 | --disabled: ( | ||
55 | --bg: fn.global-color(--border-mute), | ||
56 | --label: fn.global-color(--border-strong), | ||
57 | --border: fn.global-color(--border-mute), | ||
42 | ), | 58 | ), |
43 | ), | ||
44 | --disabled: ( | ||
45 | --bg: fn.global-color(--bg-base), | ||
46 | --label: fn.global-color(--text-disabled), | ||
47 | --border: fn.global-color(--border-mute), | ||
48 | ), | 59 | ), |
49 | --key-focus: ( | 60 | --key-focus: ( |
50 | --border: fn.global-color(--focus --border), | 61 | --border: fn.global-color(--focus --border), |
@@ -61,15 +72,6 @@ | |||
61 | --bg: fn.global-color(--border), | 72 | --bg: fn.global-color(--border), |
62 | --label: fn.global-color(--heading), | 73 | --label: fn.global-color(--heading), |
63 | ), | 74 | ), |
64 | --selected: ( | ||
65 | --bg: fn.global-color(--border-mute), | ||
66 | --label: fn.global-color(--text), | ||
67 | |||
68 | --hover: ( | ||
69 | --bg: fn.global-color(--border), | ||
70 | --label: fn.global-color(--heading), | ||
71 | ), | ||
72 | ), | ||
73 | --disabled: ( | 75 | --disabled: ( |
74 | --label: fn.global-color(--text-disabled), | 76 | --label: fn.global-color(--text-disabled), |
75 | ), | 77 | ), |
@@ -132,31 +134,6 @@ | |||
132 | } | 134 | } |
133 | } | 135 | } |
134 | 136 | ||
135 | @include iro.bem-is('selected') { | ||
136 | &:link, | ||
137 | &:visited, | ||
138 | &:enabled { | ||
139 | border-color: fn.color(--selected --border); | ||
140 | background-color: fn.color(--selected --bg); | ||
141 | color: fn.color(--selected --label); | ||
142 | |||
143 | &:hover, | ||
144 | &:active, | ||
145 | &:focus-visible { | ||
146 | border-color: fn.color(--selected --hover --border); | ||
147 | background-color: fn.color(--selected --bg); | ||
148 | color: fn.color(--selected --hover --label); | ||
149 | } | ||
150 | |||
151 | @include iro.bem-at-theme('keyboard') { | ||
152 | &:focus { | ||
153 | background-color: fn.color(--selected --bg); | ||
154 | color: fn.color(--selected --hover --label); | ||
155 | } | ||
156 | } | ||
157 | } | ||
158 | } | ||
159 | |||
160 | @include iro.bem-modifier('quiet') { | 137 | @include iro.bem-modifier('quiet') { |
161 | border-color: transparent; | 138 | border-color: transparent; |
162 | background-color: transparent; | 139 | background-color: transparent; |
@@ -185,35 +162,32 @@ | |||
185 | box-shadow: none; | 162 | box-shadow: none; |
186 | color: fn.color(--quiet --active --label); | 163 | color: fn.color(--quiet --active --label); |
187 | } | 164 | } |
188 | |||
189 | @include iro.bem-at-theme('keyboard') { | ||
190 | &:focus { | ||
191 | background-color: fn.color(--quiet --hover --bg); | ||
192 | color: fn.color(--quiet --hover --label); | ||
193 | } | ||
194 | } | ||
195 | } | 165 | } |
166 | } | ||
196 | 167 | ||
197 | @include iro.bem-is('selected') { | 168 | @include iro.bem-is('selected') { |
198 | background-color: fn.color(--quiet --selected --bg); | 169 | border-color: fn.color(--selected --disabled --border); |
199 | color: fn.color(--quiet --disabled --label); | 170 | background-color: fn.color(--selected --disabled --bg); |
200 | 171 | color: fn.color(--selected --disabled --label); | |
201 | &:link, | ||
202 | &:visited, | ||
203 | &:enabled { | ||
204 | border-color: transparent; | ||
205 | background-color: fn.color(--quiet --selected --bg); | ||
206 | box-shadow: none; | ||
207 | color: fn.color(--quiet --selected --label); | ||
208 | 172 | ||
209 | &:hover, | 173 | &:link, |
210 | &:active, | 174 | &:visited, |
211 | &:focus-visible { | 175 | &:enabled { |
212 | border-color: transparent; | 176 | border-color: fn.color(--selected --border); |
213 | background-color: fn.color(--quiet --selected --hover --bg); | 177 | background-color: fn.color(--selected --bg); |
214 | box-shadow: none; | 178 | color: fn.color(--selected --label); |
215 | color: fn.color(--quiet --selected --hover --label); | 179 | |
216 | } | 180 | &:hover, |
181 | &:focus-visible { | ||
182 | border-color: fn.color(--selected --hover --border); | ||
183 | background-color: fn.color(--selected --hover --bg); | ||
184 | color: fn.color(--selected --hover --label); | ||
185 | } | ||
186 | |||
187 | &:active { | ||
188 | border-color: fn.color(--selected --active --border); | ||
189 | background-color: fn.color(--selected --active --bg); | ||
190 | color: fn.color(--selected --active --label); | ||
217 | } | 191 | } |
218 | } | 192 | } |
219 | } | 193 | } |