diff options
Diffstat (limited to 'src/objects/_overflow-button.scss')
| -rw-r--r-- | src/objects/_overflow-button.scss | 29 |
1 files changed, 19 insertions, 10 deletions
diff --git a/src/objects/_overflow-button.scss b/src/objects/_overflow-button.scss index 4a794a7..b15ea1f 100644 --- a/src/objects/_overflow-button.scss +++ b/src/objects/_overflow-button.scss | |||
| @@ -27,6 +27,7 @@ | |||
| 27 | --label: fn.global-color(--fg), | 27 | --label: fn.global-color(--fg), |
| 28 | 28 | ||
| 29 | --hover: ( | 29 | --hover: ( |
| 30 | --bg: fn.global-color(--obj), | ||
| 30 | --label: fn.global-color(--fg-lo), | 31 | --label: fn.global-color(--fg-lo), |
| 31 | ), | 32 | ), |
| 32 | ), | 33 | ), |
| @@ -47,11 +48,13 @@ | |||
| 47 | --bg: fn.global-color(--red --quiet --obj), | 48 | --bg: fn.global-color(--red --quiet --obj), |
| 48 | --label: fn.global-color(--red --quiet --fg-lo), | 49 | --label: fn.global-color(--red --quiet --fg-lo), |
| 49 | ), | 50 | ), |
| 51 | |||
| 50 | --selected: ( | 52 | --selected: ( |
| 51 | --bg: fn.global-color(--red --quiet --bg), | 53 | --bg: fn.global-color(--red --quiet --bg), |
| 52 | --label: fn.global-color(--red --quiet --fg), | 54 | --label: fn.global-color(--red --quiet --fg), |
| 53 | 55 | ||
| 54 | --hover: ( | 56 | --hover: ( |
| 57 | --bg: fn.global-color(--red --quiet --obj), | ||
| 55 | --label: fn.global-color(--red --quiet --fg-lo), | 58 | --label: fn.global-color(--red --quiet --fg-lo), |
| 56 | ), | 59 | ), |
| 57 | ), | 60 | ), |
| @@ -66,11 +69,13 @@ | |||
| 66 | --bg: fn.global-color(--blue --quiet --obj), | 69 | --bg: fn.global-color(--blue --quiet --obj), |
| 67 | --label: fn.global-color(--blue --quiet --fg-lo), | 70 | --label: fn.global-color(--blue --quiet --fg-lo), |
| 68 | ), | 71 | ), |
| 72 | |||
| 69 | --selected: ( | 73 | --selected: ( |
| 70 | --bg: fn.global-color(--blue --quiet --bg), | 74 | --bg: fn.global-color(--blue --quiet --bg), |
| 71 | --label: fn.global-color(--blue --quiet --fg), | 75 | --label: fn.global-color(--blue --quiet --fg), |
| 72 | 76 | ||
| 73 | --hover: ( | 77 | --hover: ( |
| 78 | --bg: fn.global-color(--blue --quiet --obj), | ||
| 74 | --label: fn.global-color(--blue --quiet --fg-lo), | 79 | --label: fn.global-color(--blue --quiet --fg-lo), |
| 75 | ), | 80 | ), |
| 76 | ), | 81 | ), |
| @@ -85,11 +90,13 @@ | |||
| 85 | --bg: fn.global-color(--green --quiet --obj), | 90 | --bg: fn.global-color(--green --quiet --obj), |
| 86 | --label: fn.global-color(--green --quiet --fg-lo), | 91 | --label: fn.global-color(--green --quiet --fg-lo), |
| 87 | ), | 92 | ), |
| 93 | |||
| 88 | --selected: ( | 94 | --selected: ( |
| 89 | --bg: fn.global-color(--green --quiet --bg), | 95 | --bg: fn.global-color(--green --quiet --bg), |
| 90 | --label: fn.global-color(--green --quiet --fg), | 96 | --label: fn.global-color(--green --quiet --fg), |
| 91 | 97 | ||
| 92 | --hover: ( | 98 | --hover: ( |
| 99 | --bg: fn.global-color(--green --quiet --obj), | ||
| 93 | --label: fn.global-color(--green --quiet --fg-lo), | 100 | --label: fn.global-color(--green --quiet --fg-lo), |
| 94 | ), | 101 | ), |
| 95 | ), | 102 | ), |
| @@ -154,18 +161,20 @@ | |||
| 154 | 161 | ||
| 155 | @include iro.bem-is('selected') { | 162 | @include iro.bem-is('selected') { |
| 156 | @include iro.bem-elem('inside') { | 163 | @include iro.bem-elem('inside') { |
| 157 | border-color: fn.color(--selected --bg); | 164 | background-color: fn.color(--selected --bg); |
| 158 | color: fn.color(--selected --label); | ||
| 159 | } | 165 | } |
| 160 | 166 | ||
| 161 | &:link, | 167 | &:link, |
| 162 | &:visited, | 168 | &:visited, |
| 163 | &:enabled { | 169 | &:enabled { |
| 170 | @include iro.bem-elem('inside') { | ||
| 171 | color: fn.color(--selected --label); | ||
| 172 | } | ||
| 173 | |||
| 164 | &:hover, | 174 | &:hover, |
| 165 | &:active { | 175 | &:active { |
| 166 | @include iro.bem-elem('inside') { | 176 | @include iro.bem-elem('inside') { |
| 167 | border-color: transparent; | 177 | background-color: fn.color(--selected --hover --bg); |
| 168 | background-color: fn.color(--selected --bg); | ||
| 169 | color: fn.color(--selected --hover --label); | 178 | color: fn.color(--selected --hover --label); |
| 170 | } | 179 | } |
| 171 | } | 180 | } |
| @@ -202,18 +211,18 @@ | |||
| 202 | } | 211 | } |
| 203 | 212 | ||
| 204 | @include iro.bem-is('selected') { | 213 | @include iro.bem-is('selected') { |
| 205 | @include iro.bem-elem('inside') { | ||
| 206 | border-color: fn.color(--#{$color} --selected --bg); | ||
| 207 | color: fn.color(--#{$color} --selected --label); | ||
| 208 | } | ||
| 209 | |||
| 210 | &:link, | 214 | &:link, |
| 211 | &:visited, | 215 | &:visited, |
| 212 | &:enabled { | 216 | &:enabled { |
| 217 | @include iro.bem-elem('inside') { | ||
| 218 | background-color: fn.color(--#{$color} --selected --bg); | ||
| 219 | color: fn.color(--#{$color} --selected --label); | ||
| 220 | } | ||
| 221 | |||
| 213 | &:hover, | 222 | &:hover, |
| 214 | &:active { | 223 | &:active { |
| 215 | @include iro.bem-elem('inside') { | 224 | @include iro.bem-elem('inside') { |
| 216 | background-color: fn.color(--#{$color} --selected --bg); | 225 | background-color: fn.color(--#{$color} --selected --hover --bg); |
| 217 | color: fn.color(--#{$color} --selected --hover --label); | 226 | color: fn.color(--#{$color} --selected --hover --label); |
| 218 | } | 227 | } |
| 219 | } | 228 | } |
