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 : // A modifier pour customiser le style facilement :
$large-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3); $large-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
$narrow-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3); $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: inset 0px -2px 0px rgba(0, 0, 0, 0.2);
$inset-shadow-inverted: 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); $inset-relief: inset 0px 2px 0px rgba(255, 255, 255, 0.1);

10
scss/components/_buttons.scss
View file

@ -37,23 +37,23 @@
.btn { .btn {
@include button(); @include button();
box-shadow: $inset-shadow; box-shadow: $inset-shadow, $narrow-shadow;
&:hover { &:hover {
box-shadow: $inset-shadow; box-shadow: $inset-shadow, $narrow-shadow;
@include button(); @include button();
} }
&:focus { &: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; outline: none;
} }
&:active { &:active {
box-shadow: $inset-shadow-inverted; box-shadow: $inset-shadow-inverted, $narrow-shadow;
@include button(); @include button();
&:focus { &: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; outline: none;
} }
} }

24
style.css
View file

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

2
style.css.map
View file

File diff suppressed because one or more lines are too long