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

scss/buttons: refactor and follow global style

Browse source
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: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 0px 0px 0px 0px; 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); 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 { .btn-blue {
background-color: #4e63c9; background-color: #4e63c9;
@ -871,18 +888,6 @@ a.list-group-item:hover {
background-color: #8fd246; background-color: #8fd246;
color: #FFF; } 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 { .btn-group {
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0); } box-shadow: 0px 2px 10px rgba(0, 0, 0, 0); }
@ -957,6 +962,12 @@ a.list-group-item:hover {
color: #FFF; } color: #FFF; }
/* 5.2 - Badges */ /* 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 { .badge-blue {
background-color: #4e63c9; background-color: #4e63c9;
color: #FFF; } 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 { .btn {
@include borders(); @include borders();
@include border-radius(); @include border-radius();
box-shadow: $large-shadow, $inset-shadow; box-shadow: $large-shadow, $inset-shadow;
text-shadow: 0px -1px 0px rgba(0,0,0,0.3); 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 { .btn {
@ -60,21 +67,6 @@
&-success { @include button-color($color-success, #FFF); } &-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 { .btn-group {
box-shadow: $large-shadow; box-shadow: $large-shadow;
} }
@ -133,6 +125,25 @@
/* 5.2 - Badges */ /* 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 { .badge {
&-blue { @include badge-color($color-blue, #FFF); } &-blue { @include badge-color($color-blue, #FFF); }
&-violet { @include badge-color($color-violet, #FFF); } &-violet { @include badge-color($color-violet, #FFF); }