Skip to content

Commit bbf36d5

Browse files
nbrylevvnbrylevv
committed
Preparing 0.2.18 release (#182)
* Version 0.2.18 init commit * OFR-346 | Button fixes: icon coloring and loading overlay fix (#181)
1 parent 4b727bc commit bbf36d5

File tree

6 files changed

+21
-147
lines changed

6 files changed

+21
-147
lines changed

‎CHANGELOG.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
11
# Changelog
22

3+
## 0.2.18
4+
5+
### Maintenance
6+
* Component `Button`'s fixes:
7+
- Bug with icon coloring while `:active` and `:focus` states
8+
- Bug with icon coloring with `secondary` and `text` `type`
9+
- Deleted additional white overlay while `loading` at the same time as `disabled`
10+
11+
12+
313
## 0.2.17
414
* svg-sprite-loader dependency fix: removed custom package and installed origin one
515

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@spacetab-io/vue-components",
3-
"version": "0.2.17",
3+
"version": "0.2.18",
44
"private": false,
55
"scripts": {
66
"serve": "npm run generator:all && start-storybook -p 6006",

‎src/assets/scss/components/button/_mixins.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
}
5353

5454
#{$root}__icon {
55-
color: $color;
55+
color: currentColor;
5656
}
5757
}
5858

‎src/assets/scss/themes/offers/button.scss‎

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,10 @@
3333
opacity: 0.5;
3434
}
3535

36+
#{$root}__icon {
37+
color: currentColor;
38+
}
39+
3640
&--round {
3741
&#{$root}--small {
3842
padding: 0 12px;
@@ -108,10 +112,6 @@
108112
color: $st-color-white;
109113
background-color: $st-color-primary;
110114
border-color: $st-color-primary;
111-
112-
#{$root}__icon {
113-
color: $st-color-primary;
114-
}
115115
}
116116

117117
&:not(#{$root}--disabled):hover {
@@ -228,18 +228,10 @@
228228
&:not(#{$root}--disabled):hover,
229229
&:not(#{$root}--disabled):focus {
230230
color: $st-color-primary-hover;
231-
232-
#{$root}__icon {
233-
color: $st-color-primary-hover;
234-
}
235231
}
236232

237233
&:not(#{$root}--disabled):active {
238234
color: $st-color-primary-hover;
239-
240-
#{$root}__icon {
241-
color: $st-color-primary-hover;
242-
}
243235
}
244236
}
245237

‎src/components/button/style.scss‎

Lines changed: 3 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -46,10 +46,11 @@
4646
outline: none;
4747
}
4848

49-
&__icon {
49+
#{$root}__icon {
5050
width: 16px;
5151
height: 16px;
5252
line-height: 16px;
53+
color: currentColor;
5354

5455
+ #{$root}__content {
5556
margin-left: 8px;
@@ -98,10 +99,6 @@
9899
background-color: $st-button-default-fill;
99100
border-color: mix($st-color-white-smoke, $st-color-white);
100101
}
101-
102-
#{$root}__icon {
103-
color: mix($st-color-taupe-gray, $st-color-white);
104-
}
105102
}
106103

107104
&:hover,
@@ -110,10 +107,6 @@
110107
background-color: $st-color-white;
111108
border-color: $st-color-white-smoke;
112109
}
113-
114-
#{$root}__icon {
115-
color: $st-color-taupe-gray;
116-
}
117110
}
118111

119112
&--primary {
@@ -126,41 +119,21 @@
126119
&#{$root}--plain:hover {
127120
color: $st-color-mantis;
128121
background-color: $st-color-white;
129-
130-
#{$root}__icon {
131-
color: $st-color-mantis;
132-
}
133-
}
134-
135-
#{$root}__icon {
136-
color: $st-color-white;
137122
}
138123
}
139124

140125
&--secondary {
141126
min-width: 192px;
142127
border-radius: $st-button-secondary-border-radius;
143128

144-
#{$root}__icon {
145-
color: $st-color-mantis;
146-
}
147-
148129
&:focus {
149130
color: $st-color-white;
150131
background-color: mix($st-color-mantis, $st-color-white, 80%);
151-
152-
#{$root}__icon {
153-
color: $st-color-white;
154-
}
155132
}
156133

157134
&:hover {
158135
color: $st-color-white;
159136
background-color: $st-color-mantis;
160-
161-
#{$root}__icon {
162-
color: $st-color-white;
163-
}
164137
}
165138

166139
&#{$root}--plain {
@@ -169,51 +142,14 @@
169142
}
170143
}
171144

172-
&#{$root}--disabled {
173-
#{$root}__icon {
174-
color: mix($st-color-mantis, $st-color-white, 50%);
175-
}
176-
}
177-
178-
&#{$root}__approve {
179-
#{$root}__icon {
180-
color: $st-color-mantis;
181-
}
182-
183-
&:not(#{$root}--disabled):hover,
184-
&:not(#{$root}--disabled):focus {
185-
#{$root}__icon {
186-
color: $st-color-white;
187-
}
188-
}
189-
190-
&#{$root}--disabled {
191-
&,
192-
&:hover,
193-
&:focus {
194-
#{$root}__icon {
195-
color: mix($st-color-mantis, $st-color-white);
196-
}
197-
}
198-
}
199-
}
200-
201145
&#{$root}--cancel {
202146
color: $st-color-taupe-gray;
203147
border-color: $st-color-pastel-gray;
204148

205149
&:not(#{$root}--disabled) {
206-
#{$root}__icon {
207-
color: $st-color-pastel-gray;
208-
}
209-
210150
&:focus,
211151
&:hover {
212152
color: $st-color-white;
213-
214-
#{$root}__icon {
215-
color: $st-color-white;
216-
}
217153
}
218154

219155
&:focus {
@@ -236,47 +172,27 @@
236172
&:focus {
237173
color: mix($st-color-taupe-gray, $st-color-white);
238174
border-color: mix($st-color-pastel-gray, $st-color-white);
239-
240-
#{$root}__icon {
241-
color: mix($st-color-taupe-gray, $st-color-white);
242-
}
243175
}
244176

245177
&#{$root}--plain {
246178
background-color: mix($st-color-pastel-gray, $st-color-white, 10%);
247179
}
248180
}
249-
250-
#{$root}__icon {
251-
color: $st-color-taupe-gray;
252-
}
253181
}
254182

255183
&#{$root}--remove {
256184
color: $st-color-sunset-orange;
257185
border-color: $st-color-sunset-orange;
258186

259-
#{$root}__icon {
260-
color: $st-color-sunset-orange;
261-
}
262-
263187
&:not(#{$root}--disabled):focus {
264188
color: $st-color-white;
265189
background-color: mix($st-color-sunset-orange, $st-color-white, 80%);
266-
267-
#{$root}__icon {
268-
color: $st-color-white;
269-
}
270190
}
271191

272192
&:not(#{$root}--disabled):hover {
273193
color: $st-color-white;
274194
background-color: $st-color-sunset-orange;
275195
border-color: $st-color-sunset-orange;
276-
277-
#{$root}__icon {
278-
color: $st-color-white;
279-
}
280196
}
281197

282198
&#{$root}--plain {
@@ -289,10 +205,6 @@
289205
&:focus {
290206
color: mix($st-color-sunset-orange, $st-color-white);
291207
border-color: mix($st-color-sunset-orange, $st-color-white);
292-
293-
#{$root}__icon {
294-
color: mix($st-color-sunset-orange, $st-color-white);
295-
}
296208
}
297209

298210
&#{$root}--plain {
@@ -321,10 +233,6 @@
321233
color: mix($st-color-blueberry, $st-color-white, 80%);
322234
background-color: $st-color-white;
323235
border-color: mix($st-color-blueberry, $st-color-white, 40%);
324-
325-
#{$root}__icon {
326-
color: mix($st-color-blueberry, $st-color-white, 80%);
327-
}
328236
}
329237

330238
&:not(#{$root}--disabled):hover {
@@ -340,10 +248,6 @@
340248
border-color: transparent;
341249
}
342250

343-
#{$root}__icon {
344-
color: mix($st-color-blueberry, $st-color-white, 50%);
345-
}
346-
347251
&#{$root}--plain,
348252
&#{$root}--plain:hover {
349253
color: mix($st-color-blueberry, $st-color-white, 40%);
@@ -362,10 +266,6 @@
362266
border-color: $st-color-blueberry;
363267
}
364268
}
365-
366-
#{$root}__icon {
367-
color: $st-button-info-color;
368-
}
369269
}
370270

371271
&--extra-large {
@@ -414,62 +314,34 @@
414314
color: mix($st-color-taupe-gray, $st-color-white, 80%);
415315
background-color: transparent;
416316
border-color: transparent;
417-
418-
#{$root}__icon {
419-
color: mix($st-color-taupe-gray, $st-color-white, 80%);
420-
}
421317
}
422318

423319
&:not(#{$root}--disabled):active {
424320
color: $st-color-taupe-gray;
425321
background-color: transparent;
426322
border-color: transparent;
427-
428-
#{$root}__icon {
429-
color: $st-color-taupe-gray;
430-
}
431323
}
432324

433325
&#{$root}--disabled,
434326
&#{$root}--disabled:hover,
435327
&#{$root}--disabled:focus {
436328
color: mix($st-color-taupe-gray, $st-color-white, 40%);
437329
border-color: transparent;
438-
439-
#{$root}__icon {
440-
color: mix($st-color-taupe-gray, $st-color-white, 40%);
441-
}
442330
}
443331

444332
&:not(#{$root}--disabled)#{$root}--search {
445333
&:focus {
446334
color: mix($st-text-color-regular, $st-color-white, 40%);
447-
448-
#{$root}__icon {
449-
color: mix($st-text-color-regular, $st-color-white, 40%);
450-
}
451335
}
452336

453337
&:hover {
454338
color: $st-color-blueberry;
455-
456-
#{$root}__icon {
457-
color: $st-color-blueberry;
458-
}
459339
}
460340

461341
&:active {
462342
color: $st-text-color-regular;
463-
464-
#{$root}__icon {
465-
color: $st-text-color-regular;
466-
}
467343
}
468344
}
469-
470-
#{$root}__icon {
471-
color: mix($st-color-taupe-gray, $st-color-white, 50%);
472-
}
473345
}
474346

475347
&--active {
@@ -500,7 +372,7 @@
500372
padding-bottom: 11px;
501373
pointer-events: none;
502374

503-
&::before {
375+
&:not(#{$root}--disabled)::before {
504376
position: absolute;
505377
top: -1px;
506378
right: -1px;

0 commit comments

Comments
 (0)