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