improvement: button styling
This commit is contained in:
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
|
@ -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); }
|
||||||
|
|
|
@ -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%)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
Reference in a new issue