summaryrefslogtreecommitdiffstats
path: root/src/objects/_action-button.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects/_action-button.scss')
-rw-r--r--src/objects/_action-button.scss30
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 }