new style for buttons
This commit is contained in:
parent
6263014bd3
commit
9d7fe5016d
2 changed files with 51 additions and 5 deletions
2
NEWS
2
NEWS
|
@ -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
|
||||||
|
|
|
@ -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 ------------------- */
|
||||||
|
|
Reference in a new issue