chore: use color mixin in alerts

This commit is contained in:
Seifeldin Mahjoub 2020-08-26 00:35:20 +02:00
parent 688f27d959
commit 415dca3d75

View file

@ -1,16 +1,17 @@
@mixin btn-close-color($base-color) {
color: lighten($base-color, 10%);
@mixin btn-close-color($base-color-name) {
@include color('color', #{$base-color-name}-light-10);
&:hover,
&:active,
&:focus {
color: darken($base-color, 10%);
@include color('color', #{$base-color-name}-dark-10)
}
}
.alert {
@include color('border-color', 'primary');
@include border-style();
border: 2px solid $primary;
border-style: solid;
border-width: 2px;
margin-bottom: 20px;
padding: 15px;
width: 100%;
@ -33,9 +34,9 @@
@each $colorName, $color, $color-light in $colors {
.alert-#{$colorName} {
background-color: $color-light;
border-color: $color;
color: $color;
@include color('color', #{$colorName}-text);
@include color('background-color', #{$colorName}-light);
@include color('border-color', #{$colorName});
.btn-close {
@include btn-close-color($color);