kazhnuz/bluesky-bootstrap-theme
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

fix: handful of button bugfixing

Browse source
This commit is contained in:
Kazhnuz 2019-11-05 13:02:01 +01:00
parent 9179375295
commit 2755fbb7de
3 changed files with 50 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
scss/components/_buttons.scss
View file

@ -1,5 +1,12 @@
// Mixins and colorizations // Mixins, variables and colorizations
@mixin button() {
@include borders();
@include border-radius();
text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
}
@mixin button-lighten($background-color, $text-color) { @mixin button-lighten($background-color, $text-color) {
background-color: lighten($background-color, 10%); background-color: lighten($background-color, 10%);
@ -29,32 +36,34 @@
// 11.1 - Buttons // 11.1 - Buttons
.btn { .btn {
@include borders(); @include button();
@include border-radius(); box-shadow: $inset-shadow;
box-shadow: $large-shadow, $inset-shadow; &:hover {
text-shadow: 0px -1px 0px rgba(0,0,0,0.3); box-shadow: $inset-shadow;
} @include button();
}
.btn:hover { &:focus {
position:relative; box-shadow: $inset-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0.3)!important;
box-shadow: $narrow-shadow, $inset-shadow; outline: none;
top:1px; }
@include borders();
}
.btn:active { &:active {
position:relative;
box-shadow: $inset-shadow-inverted; box-shadow: $inset-shadow-inverted;
top:2px; @include button();
@include borders();
&:focus {
box-shadow: $inset-shadow-inverted, 0px 0px 0px 2px rgba(0, 0, 0, 0.3)!important;
outline: none;
}
}
} }
.btn-group { .btn-group {
box-shadow: $large-shadow; box-shadow: none;
} }
.btn-group .btn { .btn-group .btn {
box-shadow: $inset-shadow;
@include border-radius(); @include border-radius();
&:not(:first-child) { &:not(:first-child) {
border-top-left-radius: 0; border-top-left-radius: 0;
@ -66,27 +75,6 @@
} }
} }
.btn-group .btn:hover {
position:relative;
top:1px;
box-shadow: $inset-shadow;
}
.btn-group .btn:active, .btn:not(:disabled):not(.disabled):active, .btn:not(:disabled):not(.disabled).active,
.show > .btn.dropdown-toggle {
position:relative;
box-shadow: $inset-shadow-inverted!important;
top:2px;
@include borders();
}
.btn:focus, .btn-primary:focus, .btn-secondary:focus, .btn-danger:focus, .btn-warning:focus, .btn-success:focus, .btn-info:focus, .btn-dark:focus, .btn-light:focus {
position:relative;
box-shadow: $narrow-shadow, $inset-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0.3);
top:1px;
outline: none;
}
.btn { .btn {
&-blue { @include button-color($color-blue, #FFF); } &-blue { @include button-color($color-blue, #FFF); }
&-violet { @include button-color($color-violet, #FFF); } &-violet { @include button-color($color-violet, #FFF); }
@ -139,7 +127,8 @@
/* 11.3 - Réseaux sociaux */ /* 11.3 - Réseaux sociaux */
.share-buttons { .share-buttons {
margin:15px; margin-top:15px;
margin-bottom:15px;
} }
.reagir { .reagir {

53
style.css
View file

@ -542,30 +542,35 @@ a.list-group-item:hover {
.btn { .btn {
border: 1px solid rgba(0, 0, 0, 0.3); border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2); text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2);
}
.btn:hover {
box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 3px 3px 3px 3px;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3); text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
} }
.btn:focus {
.btn:hover { box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 2px rgba(0, 0, 0, 0.3) !important;
position: relative; outline: none;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
top: 1px;
border: 1px solid rgba(0, 0, 0, 0.3);
} }
.btn:active { .btn:active {
position: relative;
box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.2); box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.2);
top: 2px;
border: 1px solid rgba(0, 0, 0, 0.3); border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 3px 3px 3px 3px;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
}
.btn:active:focus {
box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 2px rgba(0, 0, 0, 0.3) !important;
outline: none;
} }
.btn-group { .btn-group {
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3); box-shadow: none;
} }
.btn-group .btn { .btn-group .btn {
box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2);
border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px;
} }
.btn-group .btn:not(:first-child) { .btn-group .btn:not(:first-child) {
@ -577,27 +582,6 @@ a.list-group-item:hover {
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
.btn-group .btn:hover {
position: relative;
top: 1px;
box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2);
}
.btn-group .btn:active, .btn:not(:disabled):not(.disabled):active, .btn:not(:disabled):not(.disabled).active,
.show > .btn.dropdown-toggle {
position: relative;
box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.2) !important;
top: 2px;
border: 1px solid rgba(0, 0, 0, 0.3);
}
.btn:focus, .btn-primary:focus, .btn-secondary:focus, .btn-danger:focus, .btn-warning:focus, .btn-success:focus, .btn-info:focus, .btn-dark:focus, .btn-light:focus {
position: relative;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 2px rgba(0, 0, 0, 0.3);
top: 1px;
outline: none;
}
.btn-blue { .btn-blue {
background-color: #4e63c9; background-color: #4e63c9;
color: #FFF; color: #FFF;
@ -907,7 +891,8 @@ a.list-group-item:hover {
/* 11.3 - Réseaux sociaux */ /* 11.3 - Réseaux sociaux */
.share-buttons { .share-buttons {
margin: 15px; margin-top: 15px;
margin-bottom: 15px;
} }
.reagir { .reagir {

2
style.css.map
View file

File diff suppressed because one or more lines are too long