chore: use color mixin in buttons

This commit is contained in:
Seifeldin Mahjoub 2020-08-26 00:40:03 +02:00
parent 4a27b7c0fa
commit 63bba4d3ff

View file

@ -1,3 +1,4 @@
// here
button, button,
.paper-btn, .paper-btn,
[type='button'] { [type='button'] {
@ -45,7 +46,8 @@ button,
} }
&:focus { &:focus {
border: 2px solid $secondary; @include color('border-color', 'secondary');
border: 2px solid;
box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, 0.3); box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, 0.3);
} }
@ -84,18 +86,12 @@ a {
} }
@each $colorName, $color, $color-light, $color-text in $colors { @each $colorName, $color, $color-light, $color-text in $colors {
.alert-#{$colorName} {
background-color: $color-light;
border-color: $color;
color: $color;
}
button.btn-#{$colorName}, button.btn-#{$colorName},
.paper-btn.btn-#{$colorName}, .paper-btn.btn-#{$colorName},
[type='button'].btn-#{$colorName} { [type='button'].btn-#{$colorName} {
background-color: $color-light; @include color('color', #{$colorName}-text);
border-color: $color; @include color('background-color', #{$colorName}-light);
color: $color-text; @include color('border-color', #{$colorName});
&:hover { &:hover {
&:active { &:active {