diff options
Diffstat (limited to 'src/objects')
| -rw-r--r-- | src/objects/_action-button.scss | 30 |
1 files changed, 19 insertions, 11 deletions
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss index 153780d..6aa1823 100644 --- a/src/objects/_action-button.scss +++ b/src/objects/_action-button.scss | |||
| @@ -27,11 +27,12 @@ | |||
| 27 | ), | 27 | ), |
| 28 | --selected: ( | 28 | --selected: ( |
| 29 | --bg: iro.props-get(--colors --obj-hi, $global: true), | 29 | --bg: iro.props-get(--colors --obj-hi, $global: true), |
| 30 | --label: iro.props-get(--colors --fg-lo, $global: true), | 30 | --label: iro.props-get(--colors --fg, $global: true), |
| 31 | --border: iro.props-get(--colors --fg-hi3, $global: true), | 31 | --border: iro.props-get(--colors --fg-hi3, $global: true), |
| 32 | --shadow: 0 0 0 0 transparent, | 32 | --shadow: 0 0 0 0 transparent, |
| 33 | 33 | ||
| 34 | --hover: ( | 34 | --hover: ( |
| 35 | --label: iro.props-get(--colors --fg-lo, $global: true), | ||
| 35 | --border: iro.props-get(--colors --fg-hi2, $global: true), | 36 | --border: iro.props-get(--colors --fg-hi2, $global: true), |
| 36 | --shadow: 0 0 0 0 transparent, | 37 | --shadow: 0 0 0 0 transparent, |
| 37 | ), | 38 | ), |
| @@ -64,8 +65,11 @@ | |||
| 64 | ), | 65 | ), |
| 65 | --selected: ( | 66 | --selected: ( |
| 66 | --bg: iro.props-get(--colors --obj-hi, $global: true), | 67 | --bg: iro.props-get(--colors --obj-hi, $global: true), |
| 67 | --label: iro.props-get(--colors --fg-lo, $global: true), | 68 | --label: iro.props-get(--colors --fg, $global: true), |
| 68 | 69 | ||
| 70 | --hover: ( | ||
| 71 | --label: iro.props-get(--colors --fg-lo, $global: true), | ||
| 72 | ), | ||
| 69 | --key-focus: ( | 73 | --key-focus: ( |
| 70 | --bg: iro.props-get(--colors --obj, $global: true), | 74 | --bg: iro.props-get(--colors --obj, $global: true), |
| 71 | ), | 75 | ), |
| @@ -97,7 +101,7 @@ | |||
| 97 | text-overflow: ellipsis; | 101 | text-overflow: ellipsis; |
| 98 | white-space: nowrap; | 102 | white-space: nowrap; |
| 99 | 103 | ||
| 100 | @include iro.bem-multi('&:link, &:visited', 'modifier:' 'native') { | 104 | @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { |
| 101 | &:hover { | 105 | &:hover { |
| 102 | border-color: iro.props-get(--colors --hover --border); | 106 | border-color: iro.props-get(--colors --hover --border); |
| 103 | background-color: iro.props-get(--colors --hover --bg); | 107 | background-color: iro.props-get(--colors --hover --bg); |
| @@ -128,13 +132,13 @@ | |||
| 128 | box-shadow: iro.props-get(--colors --selected --shadow); | 132 | box-shadow: iro.props-get(--colors --selected --shadow); |
| 129 | color: iro.props-get(--colors --selected --label); | 133 | color: iro.props-get(--colors --selected --label); |
| 130 | 134 | ||
| 131 | @include iro.bem-multi('&:link, &:visited', 'modifier:' 'native') { | 135 | @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { |
| 132 | &:hover, | 136 | &:hover, |
| 133 | &:active { | 137 | &:active { |
| 134 | border-color: iro.props-get(--colors --selected --hover --border); | 138 | border-color: iro.props-get(--colors --selected --hover --border); |
| 135 | background-color: iro.props-get(--colors --selected --bg); | 139 | background-color: iro.props-get(--colors --selected --bg); |
| 136 | box-shadow: iro.props-get(--colors --selected --hover --shadow); | 140 | box-shadow: iro.props-get(--colors --selected --hover --shadow); |
| 137 | color: iro.props-get(--colors --selected --label); | 141 | color: iro.props-get(--colors --selected --hover --label); |
| 138 | } | 142 | } |
| 139 | } | 143 | } |
| 140 | 144 | ||
| @@ -154,7 +158,7 @@ | |||
| 154 | box-shadow: none; | 158 | box-shadow: none; |
| 155 | color: iro.props-get(--colors --quiet --label); | 159 | color: iro.props-get(--colors --quiet --label); |
| 156 | 160 | ||
| 157 | @include iro.bem-multi('&:link, &:visited', 'modifier:' 'native') { | 161 | @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { |
| 158 | &:hover { | 162 | &:hover { |
| 159 | border-color: transparent; | 163 | border-color: transparent; |
| 160 | background-color: iro.props-get(--colors --quiet --hover --bg); | 164 | background-color: iro.props-get(--colors --quiet --hover --bg); |
| @@ -185,13 +189,13 @@ | |||
| 185 | box-shadow: none; | 189 | box-shadow: none; |
| 186 | color: iro.props-get(--colors --quiet --selected --label); | 190 | color: iro.props-get(--colors --quiet --selected --label); |
| 187 | 191 | ||
| 188 | @include iro.bem-multi('&:link, &:visited', 'modifier:' 'native') { | 192 | @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { |
| 189 | &:hover, | 193 | &:hover, |
| 190 | &:active { | 194 | &:active { |
| 191 | border-color: transparent; | 195 | border-color: transparent; |
| 192 | background-color: iro.props-get(--colors --quiet --selected --bg); | 196 | background-color: iro.props-get(--colors --quiet --selected --bg); |
| 193 | box-shadow: none; | 197 | box-shadow: none; |
| 194 | color: iro.props-get(--colors --quiet --selected --label); | 198 | color: iro.props-get(--colors --quiet --selected --hover --label); |
| 195 | } | 199 | } |
| 196 | } | 200 | } |
| 197 | 201 | ||
| @@ -212,7 +216,7 @@ | |||
| 212 | box-shadow: iro.props-get(--colors --disabled --shadow); | 216 | box-shadow: iro.props-get(--colors --disabled --shadow); |
| 213 | color: iro.props-get(--colors --disabled --label); | 217 | color: iro.props-get(--colors --disabled --label); |
| 214 | 218 | ||
| 215 | @include iro.bem-multi('&:link, &:visited', 'modifier:' 'native') { | 219 | @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { |
| 216 | &:hover, | 220 | &:hover, |
| 217 | &:active { | 221 | &:active { |
| 218 | border-color: iro.props-get(--colors --disabled --border); | 222 | border-color: iro.props-get(--colors --disabled --border); |
| @@ -228,7 +232,7 @@ | |||
| 228 | box-shadow: none; | 232 | box-shadow: none; |
| 229 | color: iro.props-get(--colors --quiet --disabled --label); | 233 | color: iro.props-get(--colors --quiet --disabled --label); |
| 230 | 234 | ||
| 231 | @include iro.bem-multi('&:link, &:visited', 'modifier:' 'native') { | 235 | @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { |
| 232 | &:hover, | 236 | &:hover, |
| 233 | &:active { | 237 | &:active { |
| 234 | border-color: transparent; | 238 | border-color: transparent; |
| @@ -237,6 +241,10 @@ | |||
| 237 | color: iro.props-get(--colors --quiet --disabled --label); | 241 | color: iro.props-get(--colors --quiet --disabled --label); |
| 238 | } | 242 | } |
| 239 | } | 243 | } |
| 244 | |||
| 245 | @include iro.bem-is('selected') { | ||
| 246 | background-color: iro.props-get(--colors --quiet --selected --bg); | ||
| 247 | } | ||
| 240 | } | 248 | } |
| 241 | } | 249 | } |
| 242 | } | 250 | } |
