improvement: button styling

This commit is contained in:
Kazhnuz 2019-10-18 10:07:38 +02:00
parent 881106d947
commit c07a76c5d6
5 changed files with 41 additions and 36 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -23,7 +23,6 @@ $button_small: 0.375rem;
@include borders(); @include borders();
@include border-radius(); @include border-radius();
font-weight: $fontweight_base; font-weight: $fontweight_base;
&:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & { &:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
text-decoration:none; text-decoration:none;
@ -59,11 +58,7 @@ $button_small: 0.375rem;
} }
@mixin button-color($background-color, $text-color) { @mixin button-color($background-color, $text-color) {
@include button-fullcontrol($background-color, lighten($background-color, 10%), $text-color) @include button-fullcontrol($background-color, darken($background-color, 7.5%), $text-color)
}
@mixin button-darken($background-color, $text-color) {
@include button-fullcontrol($background-color, darken($background-color, 05%), $text-color)
} }
.btn { .btn {
@ -159,7 +154,7 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
&-green { @include button-color($color-green, $color-button-light); } &-green { @include button-color($color-green, $color-button-light); }
&-skyblue { @include button-color($color-skyblue, $color-button-light); } &-skyblue { @include button-color($color-skyblue, $color-button-light); }
&-dark { @include button-color($color-dark, $color-button-light); } &-dark { @include button-color($color-dark, $color-button-light); }
&-light { @include button-darken($color-light2, $color-button-dark); } &-light { @include button-color($color-light2, $color-button-dark); }
&-turquoise { @include button-color($color-turquoise, $color-button-light); } &-turquoise { @include button-color($color-turquoise, $color-button-light); }
&-yellow { @include button-color($color-yellow, $color-button-light); } &-yellow { @include button-color($color-yellow, $color-button-light); }
&-brown { @include button-color($color-brown, $color-button-light); } &-brown { @include button-color($color-brown, $color-button-light); }

View file

@ -100,7 +100,7 @@ $card-smallpad: 0.75rem;
@include biseau(0.75rem); @include biseau(0.75rem);
&:before { &:before {
background-color:rgba(0,0,0,0.1); background-color: darken($color-light2, 7.5%)
} }
} }

View file

@ -37,5 +37,6 @@ $titlefont: Amatic SC, sans-serif;
bottom:0; bottom:0;
z-index:-1; z-index:-1;
transform: skewX(-15deg); transform: skewX(-15deg);
transition: background-color 0.3s;
} }
} }