quarante-douze
/
qdouze-wordpress-theme
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

scss/buttons: refactor and follow global style

This commit is contained in:
Kazhnuz 2018-10-24 12:18:12 +02:00
parent baf8f8466f
commit 028543964b
2 changed files with 60 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
css/style.css
View File

@ -736,7 +736,24 @@ a.list-group-item:hover {
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 0px 0px 0px 0px;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3); }
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
background-color: #eeeeec;
color: #111; }
.btn:hover, .btn:active, .btn:focus, .btn:not(.disabled):not(:disabled):hover, .btn:not(.disabled):not(:disabled):active, .btn:not(.disabled):not(:disabled):focus {
background-color: white;
color: #111; }
.btn:hover {
position: relative;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
top: 1px;
border: 1px solid rgba(0, 0, 0, 0.3);
text-decoration: none; }
.btn:active {
position: relative;
box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.2);
top: 2px;
border: 1px solid rgba(0, 0, 0, 0.3);
text-decoration: none; }
.btn-blue {
background-color: #4e63c9;
@ -871,18 +888,6 @@ a.list-group-item:hover {
background-color: #8fd246;
color: #FFF; }
.btn:hover {
position: relative;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
top: 1px;
border: 1px solid rgba(0, 0, 0, 0.3); }
.btn:active {
position: relative;
box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.2);
top: 2px;
border: 1px solid rgba(0, 0, 0, 0.3); }
.btn-group {
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0); }
@ -957,6 +962,12 @@ a.list-group-item:hover {
color: #FFF; }
/* 5.2 - Badges */
.badge {
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 0px 0px 0px 0px; }
.badge-pill {
border-radius: 10rem; }
.badge-blue {
background-color: #4e63c9;
color: #FFF; }

61
scss/_buttons.scss
View File

@ -20,21 +20,28 @@
}
}
@mixin badge-color($background-color, $text-color) {
background-color: $background-color;
color: $text-color;
&, &:not(.disabled):not(:disabled) {
&:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
@include button-lighten($background-color, $text-color);
}
}
}
.btn {
@include borders();
@include border-radius();
box-shadow: $large-shadow, $inset-shadow;
text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
@include button-color($color-light, #111);
&:hover {
position:relative;
box-shadow: $narrow-shadow, $inset-shadow;
top:1px;
@include borders();
text-decoration: none;
}
&:active {
position:relative;
box-shadow: $inset-shadow-inverted;
top:2px;
@include borders();
text-decoration: none;
}
}
.btn {
@ -60,21 +67,6 @@
&-success { @include button-color($color-success, #FFF); }
}
.btn:hover {
position:relative;
box-shadow: $narrow-shadow, $inset-shadow;
top:1px;
@include borders();
}
.btn:active {
position:relative;
box-shadow: $inset-shadow-inverted;
top:2px;
@include borders();
}
.btn-group {
box-shadow: $large-shadow;
}
@ -133,6 +125,25 @@
/* 5.2 - Badges */
@mixin badge-color($background-color, $text-color) {
background-color: $background-color;
color: $text-color;
&, &:not(.disabled):not(:disabled) {
&:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
@include button-lighten($background-color, $text-color);
}
}
}
.badge {
@include borders();
@include border-radius();
&-pill {
border-radius: 10rem;
}
}
.badge {
&-blue { @include badge-color($color-blue, #FFF); }
&-violet { @include badge-color($color-violet, #FFF); }