new style for buttons

This commit is contained in:
Kazhnuz 2018-06-08 01:35:53 +02:00
parent 6263014bd3
commit 9d7fe5016d
2 changed files with 51 additions and 5 deletions

2
NEWS
View file

@ -18,6 +18,8 @@
- New style for card headers - New style for card headers
- New style for buttons
- New Palette based on a work by Tobias Bernard for the Fractal application - New Palette based on a work by Tobias Bernard for the Fractal application
- Color that aren't based on semantics - Color that aren't based on semantics

View file

@ -177,17 +177,61 @@ a.list-group-item:hover {
/* ------------------ BUTTONS ------------------- */ /* ------------------ BUTTONS ------------------- */
.btn { .btn {
border-style:none; border-style:solid;
border-width:0px; border-width:1px;
border-color:rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2); 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); text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
} }
.btn:active { .btn:hover {
box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.2); position:relative;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
top:1px;
border-style:solid;
border-width:1px;
border-color: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-style:solid;
border-width:1px;
border-color:rgba(0, 0, 0, 0.3);
}
.btn-group {
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
}
.btn-group .btn {
box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2);
}
.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-style:solid;
border-width:1px;
border-color: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 #75507b;
top:1px;
outline: none;
} }
/* ------------------ BREADCRUMB ------------------- */ /* ------------------ BREADCRUMB ------------------- */