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

improvement: better shadows

Browse source
This commit is contained in:
Kazhnuz 2019-11-05 13:52:02 +01:00
parent f649e2e8f2
commit 9b1b600e15
4 changed files with 20 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
scss/_definitions.scss
View file

@ -10,8 +10,8 @@
// A modifier pour customiser le style facilement :
$large-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
$narrow-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
$large-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
$narrow-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
$inset-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2);
$inset-shadow-inverted: inset 0px 2px 0px rgba(0, 0, 0, 0.2);
$inset-relief: inset 0px 2px 0px rgba(255, 255, 255, 0.1);

10
scss/components/_buttons.scss
View file

@ -37,23 +37,23 @@
.btn {
@include button();
box-shadow: $inset-shadow;
box-shadow: $inset-shadow, $narrow-shadow;
&:hover {
box-shadow: $inset-shadow;
box-shadow: $inset-shadow, $narrow-shadow;
@include button();
}
&:focus {
box-shadow: $inset-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0.3)!important;
box-shadow: $inset-shadow, $narrow-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0.3)!important;
outline: none;
}
&:active {
box-shadow: $inset-shadow-inverted;
box-shadow: $inset-shadow-inverted, $narrow-shadow;
@include button();
&:focus {
box-shadow: $inset-shadow-inverted, 0px 0px 0px 2px rgba(0, 0, 0, 0.3)!important;
box-shadow: $inset-shadow-inverted, $narrow-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0.3)!important;
outline: none;
}
}

24
style.css
View file

@ -224,7 +224,7 @@ header h1 {
}
.navbar {
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(0, 0, 0, 0.3);
border-left: 0;
border-right: 0;
@ -237,7 +237,7 @@ header h1 {
}
.dropdown-menu {
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
}
/* 02.2 - Footer */
@ -280,7 +280,7 @@ ul.social li a:hover {
/* 10.1 - Cards */
.card {
border-radius: 3px 3px 3px 3px;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
border: none;
margin-bottom: 1.2em;
}
@ -437,10 +437,10 @@ a.list-group-item:hover {
/* 10.2 - Breadcrumb */
.breadcrumb {
border-radius: 3px 3px 3px 3px;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
border: none;
margin-bottom: 1.2em;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
background-color: #eeeeec;
}
.breadcrumb li {
@ -450,7 +450,7 @@ a.list-group-item:hover {
/* 10.3 - Alerts */
.alert {
border-radius: 3px 3px 3px 3px;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
border: none;
margin-bottom: 1.2em;
color: rgba(0, 0, 0, 0.7);
@ -542,26 +542,26 @@ a.list-group-item:hover {
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);
box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2), 0px 1px 2px rgba(0, 0, 0, 0.3);
}
.btn:hover {
box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2), 0px 1px 2px 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:focus {
box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 2px rgba(0, 0, 0, 0.3) !important;
box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2), 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 0px 0px 2px rgba(0, 0, 0, 0.3) !important;
outline: none;
}
.btn:active {
box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.2), 0px 1px 2px 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;
box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.2), 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 0px 0px 2px rgba(0, 0, 0, 0.3) !important;
outline: none;
}
@ -955,7 +955,7 @@ a.list-group-item:hover {
border-radius: 3px 3px 3px 3px;
width: 100%;
margin: auto;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
}
.preview-link:hover {

2
style.css.map
View file

File diff suppressed because one or more lines are too long