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 | } |
