Skip to content

Commit

Permalink
Preparing 0.2.18 release (#182)
Browse files Browse the repository at this point in the history 
* Version 0.2.18 init commit

* OFR-346 | Button fixes: icon coloring and loading overlay fix (#181)
  • Loading branch information
@nbrylevv
nbrylevv authored Apr 19, 2022
1 parent 7e0ad36 commit 814a20b
Show file tree
Hide file tree
Showing 6 changed files with 21 additions and 147 deletions.
10 changes: 10 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,15 @@
# Changelog

## 0.2.18

### Maintenance
* Component `Button`'s fixes:
- Bug with icon coloring while `:active` and `:focus` states
- Bug with icon coloring with `secondary` and `text` `type`
- Deleted additional white overlay while `loading` at the same time as `disabled`



## 0.2.17
* svg-sprite-loader dependency fix: removed custom package and installed origin one

Expand Down
4 changes: 2 additions & 2 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@spacetab-io/vue-components",
"version": "0.2.17",
"version": "0.2.18",
"private": false,
"scripts": {
"serve": "npm run generator:all && start-storybook -p 6006",
Expand Down
2 changes: 1 addition & 1 deletion src/assets/scss/components/button/_mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@
}

#{$root}__icon {
color: $color;
color: currentColor;
}
}

Expand Down
16 changes: 4 additions & 12 deletions src/assets/scss/themes/offers/button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,10 @@
opacity: 0.5;
}

#{$root}__icon {
color: currentColor;
}

&--round {
&#{$root}--small {
padding: 0 12px;
Expand Down Expand Up @@ -108,10 +112,6 @@
color: $st-color-white;
background-color: $st-color-primary;
border-color: $st-color-primary;

#{$root}__icon {
color: $st-color-primary;
}
}

&:not(#{$root}--disabled):hover {
Expand Down Expand Up @@ -228,18 +228,10 @@
&:not(#{$root}--disabled):hover,
&:not(#{$root}--disabled):focus {
color: $st-color-primary-hover;

#{$root}__icon {
color: $st-color-primary-hover;
}
}

&:not(#{$root}--disabled):active {
color: $st-color-primary-hover;

#{$root}__icon {
color: $st-color-primary-hover;
}
}
}

Expand Down
134 changes: 3 additions & 131 deletions src/components/button/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,10 +46,11 @@
outline: none;
}

&__icon {
#{$root}__icon {
width: 16px;
height: 16px;
line-height: 16px;
color: currentColor;

+ #{$root}__content {
margin-left: 8px;
Expand Down Expand Up @@ -98,10 +99,6 @@
background-color: $st-button-default-fill;
border-color: mix($st-color-white-smoke, $st-color-white);
}

#{$root}__icon {
color: mix($st-color-taupe-gray, $st-color-white);
}
}

&:hover,
Expand All @@ -110,10 +107,6 @@
background-color: $st-color-white;
border-color: $st-color-white-smoke;
}

#{$root}__icon {
color: $st-color-taupe-gray;
}
}

&--primary {
Expand All @@ -126,41 +119,21 @@
&#{$root}--plain:hover {
color: $st-color-mantis;
background-color: $st-color-white;

#{$root}__icon {
color: $st-color-mantis;
}
}

#{$root}__icon {
color: $st-color-white;
}
}

&--secondary {
min-width: 192px;
border-radius: $st-button-secondary-border-radius;

#{$root}__icon {
color: $st-color-mantis;
}

&:focus {
color: $st-color-white;
background-color: mix($st-color-mantis, $st-color-white, 80%);

#{$root}__icon {
color: $st-color-white;
}
}

&:hover {
color: $st-color-white;
background-color: $st-color-mantis;

#{$root}__icon {
color: $st-color-white;
}
}

&#{$root}--plain {
Expand All @@ -169,51 +142,14 @@
}
}

&#{$root}--disabled {
#{$root}__icon {
color: mix($st-color-mantis, $st-color-white, 50%);
}
}

&#{$root}__approve {
#{$root}__icon {
color: $st-color-mantis;
}

&:not(#{$root}--disabled):hover,
&:not(#{$root}--disabled):focus {
#{$root}__icon {
color: $st-color-white;
}
}

&#{$root}--disabled {
&,
&:hover,
&:focus {
#{$root}__icon {
color: mix($st-color-mantis, $st-color-white);
}
}
}
}

&#{$root}--cancel {
color: $st-color-taupe-gray;
border-color: $st-color-pastel-gray;

&:not(#{$root}--disabled) {
#{$root}__icon {
color: $st-color-pastel-gray;
}

&:focus,
&:hover {
color: $st-color-white;

#{$root}__icon {
color: $st-color-white;
}
}

&:focus {
Expand All @@ -236,47 +172,27 @@
&:focus {
color: mix($st-color-taupe-gray, $st-color-white);
border-color: mix($st-color-pastel-gray, $st-color-white);

#{$root}__icon {
color: mix($st-color-taupe-gray, $st-color-white);
}
}

&#{$root}--plain {
background-color: mix($st-color-pastel-gray, $st-color-white, 10%);
}
}

#{$root}__icon {
color: $st-color-taupe-gray;
}
}

&#{$root}--remove {
color: $st-color-sunset-orange;
border-color: $st-color-sunset-orange;

#{$root}__icon {
color: $st-color-sunset-orange;
}

&:not(#{$root}--disabled):focus {
color: $st-color-white;
background-color: mix($st-color-sunset-orange, $st-color-white, 80%);

#{$root}__icon {
color: $st-color-white;
}
}

&:not(#{$root}--disabled):hover {
color: $st-color-white;
background-color: $st-color-sunset-orange;
border-color: $st-color-sunset-orange;

#{$root}__icon {
color: $st-color-white;
}
}

&#{$root}--plain {
Expand All @@ -289,10 +205,6 @@
&:focus {
color: mix($st-color-sunset-orange, $st-color-white);
border-color: mix($st-color-sunset-orange, $st-color-white);

#{$root}__icon {
color: mix($st-color-sunset-orange, $st-color-white);
}
}

&#{$root}--plain {
Expand Down Expand Up @@ -321,10 +233,6 @@
color: mix($st-color-blueberry, $st-color-white, 80%);
background-color: $st-color-white;
border-color: mix($st-color-blueberry, $st-color-white, 40%);

#{$root}__icon {
color: mix($st-color-blueberry, $st-color-white, 80%);
}
}

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

#{$root}__icon {
color: mix($st-color-blueberry, $st-color-white, 50%);
}

&#{$root}--plain,
&#{$root}--plain:hover {
color: mix($st-color-blueberry, $st-color-white, 40%);
Expand All @@ -362,10 +266,6 @@
border-color: $st-color-blueberry;
}
}

#{$root}__icon {
color: $st-button-info-color;
}
}

&--extra-large {
Expand Down Expand Up @@ -414,62 +314,34 @@
color: mix($st-color-taupe-gray, $st-color-white, 80%);
background-color: transparent;
border-color: transparent;

#{$root}__icon {
color: mix($st-color-taupe-gray, $st-color-white, 80%);
}
}

&:not(#{$root}--disabled):active {
color: $st-color-taupe-gray;
background-color: transparent;
border-color: transparent;

#{$root}__icon {
color: $st-color-taupe-gray;
}
}

&#{$root}--disabled,
&#{$root}--disabled:hover,
&#{$root}--disabled:focus {
color: mix($st-color-taupe-gray, $st-color-white, 40%);
border-color: transparent;

#{$root}__icon {
color: mix($st-color-taupe-gray, $st-color-white, 40%);
}
}

&:not(#{$root}--disabled)#{$root}--search {
&:focus {
color: mix($st-text-color-regular, $st-color-white, 40%);

#{$root}__icon {
color: mix($st-text-color-regular, $st-color-white, 40%);
}
}

&:hover {
color: $st-color-blueberry;

#{$root}__icon {
color: $st-color-blueberry;
}
}

&:active {
color: $st-text-color-regular;

#{$root}__icon {
color: $st-text-color-regular;
}
}
}

#{$root}__icon {
color: mix($st-color-taupe-gray, $st-color-white, 50%);
}
}

&--active {
Expand Down Expand Up @@ -500,7 +372,7 @@
padding-bottom: 11px;
pointer-events: none;

&::before {
&:not(#{$root}--disabled)::before {
position: absolute;
top: -1px;
right: -1px;
Expand Down

0 comments on commit 814a20b

Please sign in to comment.