diff options
Diffstat (limited to 'src/objects/_action-button.scss')
-rw-r--r-- | src/objects/_action-button.scss | 83 |
1 files changed, 27 insertions, 56 deletions
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss index 08ac625..ab9e38b 100644 --- a/src/objects/_action-button.scss +++ b/src/objects/_action-button.scss | |||
@@ -95,11 +95,11 @@ | |||
95 | display: inline-block; | 95 | display: inline-block; |
96 | padding: fn.dim(--pad-y) fn.dim(--pad-x); | 96 | padding: fn.dim(--pad-y) fn.dim(--pad-x); |
97 | overflow: hidden; | 97 | overflow: hidden; |
98 | border: 1px solid fn.color(--border); | 98 | border: 1px solid fn.color(--disabled --border); |
99 | border-radius: fn.dim(--rounding); | 99 | border-radius: fn.dim(--rounding); |
100 | background-color: fn.color(--bg); | 100 | background-color: fn.color(--disabled --bg); |
101 | box-shadow: fn.color(--shadow); | 101 | box-shadow: fn.color(--disabled --shadow); |
102 | color: fn.color(--label); | 102 | color: fn.color(--disabled --label); |
103 | line-height: 1; | 103 | line-height: 1; |
104 | text-align: center; | 104 | text-align: center; |
105 | text-decoration: none; | 105 | text-decoration: none; |
@@ -109,6 +109,11 @@ | |||
109 | &:link, | 109 | &:link, |
110 | &:visited, | 110 | &:visited, |
111 | &:enabled { | 111 | &:enabled { |
112 | border-color: fn.color(--border); | ||
113 | background-color: fn.color(--bg); | ||
114 | box-shadow: fn.color(--shadow); | ||
115 | color: fn.color(--label); | ||
116 | |||
112 | &:hover { | 117 | &:hover { |
113 | border-color: fn.color(--hover --border); | 118 | border-color: fn.color(--hover --border); |
114 | background-color: fn.color(--hover --bg); | 119 | background-color: fn.color(--hover --bg); |
@@ -134,14 +139,14 @@ | |||
134 | } | 139 | } |
135 | 140 | ||
136 | @include iro.bem-is('selected') { | 141 | @include iro.bem-is('selected') { |
137 | border-color: fn.color(--selected --border); | ||
138 | background-color: fn.color(--selected --bg); | ||
139 | box-shadow: fn.color(--selected --shadow); | ||
140 | color: fn.color(--selected --label); | ||
141 | |||
142 | &:link, | 142 | &:link, |
143 | &:visited, | 143 | &:visited, |
144 | &:enabled { | 144 | &:enabled { |
145 | border-color: fn.color(--selected --border); | ||
146 | background-color: fn.color(--selected --bg); | ||
147 | box-shadow: fn.color(--selected --shadow); | ||
148 | color: fn.color(--selected --label); | ||
149 | |||
145 | &:hover, | 150 | &:hover, |
146 | &:active { | 151 | &:active { |
147 | border-color: fn.color(--selected --hover --border); | 152 | border-color: fn.color(--selected --hover --border); |
@@ -165,11 +170,16 @@ | |||
165 | border-color: transparent; | 170 | border-color: transparent; |
166 | background-color: transparent; | 171 | background-color: transparent; |
167 | box-shadow: none; | 172 | box-shadow: none; |
168 | color: fn.color(--quiet --label); | 173 | color: fn.color(--quiet --disabled --label); |
169 | 174 | ||
170 | &:link, | 175 | &:link, |
171 | &:visited, | 176 | &:visited, |
172 | &:enabled { | 177 | &:enabled { |
178 | border-color: transparent; | ||
179 | background-color: transparent; | ||
180 | box-shadow: none; | ||
181 | color: fn.color(--quiet --label); | ||
182 | |||
173 | &:hover { | 183 | &:hover { |
174 | border-color: transparent; | 184 | border-color: transparent; |
175 | background-color: fn.color(--quiet --hover --bg); | 185 | background-color: fn.color(--quiet --hover --bg); |
@@ -195,14 +205,17 @@ | |||
195 | } | 205 | } |
196 | 206 | ||
197 | @include iro.bem-is('selected') { | 207 | @include iro.bem-is('selected') { |
198 | border-color: transparent; | ||
199 | background-color: fn.color(--quiet --selected --bg); | 208 | background-color: fn.color(--quiet --selected --bg); |
200 | box-shadow: none; | 209 | color: fn.color(--quiet --disabled --label); |
201 | color: fn.color(--quiet --selected --label); | 210 | |
202 | |||
203 | &:link, | 211 | &:link, |
204 | &:visited, | 212 | &:visited, |
205 | &:enabled { | 213 | &:enabled { |
214 | border-color: transparent; | ||
215 | background-color: fn.color(--quiet --selected --bg); | ||
216 | box-shadow: none; | ||
217 | color: fn.color(--quiet --selected --label); | ||
218 | |||
206 | &:hover, | 219 | &:hover, |
207 | &:active { | 220 | &:active { |
208 | border-color: transparent; | 221 | border-color: transparent; |
@@ -228,47 +241,5 @@ | |||
228 | padding-left: fn.dim(--pad-y); | 241 | padding-left: fn.dim(--pad-y); |
229 | border-radius: 100em; | 242 | border-radius: 100em; |
230 | } | 243 | } |
231 | |||
232 | @include iro.bem-is('disabled') { | ||
233 | border-color: fn.color(--disabled --border); | ||
234 | background-color: fn.color(--disabled --bg); | ||
235 | box-shadow: fn.color(--disabled --shadow); | ||
236 | color: fn.color(--disabled --label); | ||
237 | |||
238 | &:link, | ||
239 | &:visited, | ||
240 | &:enabled { | ||
241 | &:hover, | ||
242 | &:active { | ||
243 | border-color: fn.color(--disabled --border); | ||
244 | background-color: fn.color(--disabled --bg); | ||
245 | box-shadow: fn.color(--disabled --shadow); | ||
246 | color: fn.color(--disabled --label); | ||
247 | } | ||
248 | } | ||
249 | |||
250 | @include iro.bem-modifier('quiet') { | ||
251 | border-color: transparent; | ||
252 | background-color: transparent; | ||
253 | box-shadow: none; | ||
254 | color: fn.color(--quiet --disabled --label); | ||
255 | |||
256 | &:link, | ||
257 | &:visited, | ||
258 | &:enabled { | ||
259 | &:hover, | ||
260 | &:active { | ||
261 | border-color: transparent; | ||
262 | background-color: transparent; | ||
263 | box-shadow: none; | ||
264 | color: fn.color(--quiet --disabled --label); | ||
265 | } | ||
266 | } | ||
267 | |||
268 | @include iro.bem-is('selected') { | ||
269 | background-color: fn.color(--quiet --selected --bg); | ||
270 | } | ||
271 | } | ||
272 | } | ||
273 | } | 244 | } |
274 | } | 245 | } |