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

style: use shadow variables for box-shadow

Browse source
This commit is contained in:
Kazhnuz 2018-10-14 16:50:55 +02:00
parent a3fcd4d98d
commit 04e5ea01f2
2 changed files with 23 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
css/style.css
View file

@ -31,13 +31,13 @@ header h1 {
text-align: center; } text-align: center; }
.navbar { .navbar {
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3); box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
border-width: 1px 0px 1px 0px; border-width: 1px 0px 1px 0px;
border-style: solid; border-style: solid;
border-color: rgba(0, 0, 0, 0.3); } border-color: rgba(0, 0, 0, 0.3); }
.dropdown-menu { .dropdown-menu {
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2), inset 0px -2px 0px rgba(0, 0, 0, 0.2); } box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2); }
/* ------------------ FOOTER ------------------- */ /* ------------------ FOOTER ------------------- */
footer { footer {
@ -69,12 +69,12 @@ a.social-link:hover {
/* ------------------ CARDS ------------------- */ /* ------------------ CARDS ------------------- */
.card { .card {
box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.3); box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
border-width: 0px; border-width: 0px;
margin-bottom: 1.2em; } margin-bottom: 1.2em; }
.card-shadow { .card-shadow {
box-shadow: 0px 2px 12px 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); }
/* header and titles */ /* header and titles */
.card-header { .card-header {
@ -194,7 +194,7 @@ a.list-group-item:hover {
border-width: 1px; border-width: 1px;
border-color: rgba(0, 0, 0, 0.3); border-color: rgba(0, 0, 0, 0.3);
color: rgba(0, 0, 0, 0.7); color: rgba(0, 0, 0, 0.7);
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3); } box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3); }
.alert a, .alert-link { .alert a, .alert-link {
color: rgba(0, 0, 0, 0.7); color: rgba(0, 0, 0, 0.7);
@ -202,7 +202,7 @@ a.list-group-item:hover {
/* ------------------ BREADCRUMB ------------------- */ /* ------------------ BREADCRUMB ------------------- */
.breadcrumb { .breadcrumb {
box-shadow: 0px 2px 12px 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);
border-color: rgba(0, 0, 0, 0.3); border-color: rgba(0, 0, 0, 0.3);
border-width: 1px; border-width: 1px;
background-color: #eeeeec; background-color: #eeeeec;
@ -237,7 +237,7 @@ a.list-group-item:hover {
.card-preview { .card-preview {
width: 100%; width: 100%;
margin: auto; margin: auto;
box-shadow: 0px 2px 12px 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); }
.preview-link:hover { .preview-link:hover {
text-decoration: none !important; } text-decoration: none !important; }

32
scss/style.scss
View file

@ -41,14 +41,14 @@ header h1 {
} }
.navbar { .navbar {
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3); box-shadow: $large-shadow;
border-width: 1px 0px 1px 0px; border-width: 1px 0px 1px 0px;
border-style: solid; border-style: solid;
border-color: rgba(0,0,0,0.3) border-color: rgba(0,0,0,0.3)
} }
.dropdown-menu { .dropdown-menu {
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2), inset 0px -2px 0px rgba(0, 0, 0, 0.2); box-shadow: $narrow-shadow, $inset-shadow;
} }
@ -91,13 +91,13 @@ a.social-link:hover {
/* ------------------ CARDS ------------------- */ /* ------------------ CARDS ------------------- */
.card { .card {
box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.3); box-shadow: $large-shadow;
border-width:0px; border-width:0px;
margin-bottom:1.2em; margin-bottom:1.2em;
} }
.card-shadow { .card-shadow {
box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2); box-shadow: $large-shadow, $inset-shadow;
} }
/* header and titles */ /* header and titles */
@ -111,7 +111,7 @@ a.social-link:hover {
border-width:1px; border-width:1px;
border-color:rgba(0,0,0,0.3); border-color:rgba(0,0,0,0.3);
font-size:1.1em; font-size:1.1em;
box-shadow: inset 0px 2px 0px rgba(255, 255, 255, 0.1); box-shadow: $inset-relief;
text-shadow: 0px 1px 1px rgba(0,0,0,0.3); text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
font-weight:600; font-weight:600;
} }
@ -182,13 +182,13 @@ a.list-group-item:hover {
border-style:solid; border-style:solid;
border-width:1px; border-width:1px;
border-color:rgba(0, 0, 0, 0.3); 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: $large-shadow, $inset-shadow;
text-shadow: 0px -1px 0px rgba(0,0,0,0.3); text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
} }
.btn:hover { .btn:hover {
position:relative; position:relative;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2); box-shadow: $narrow-shadow, $inset-shadow;
top:1px; top:1px;
border-style:solid; border-style:solid;
border-width:1px; border-width:1px;
@ -197,7 +197,7 @@ a.list-group-item:hover {
.btn:active { .btn:active {
position:relative; position:relative;
box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.2); box-shadow: $inset-shadow-inverted;
top:2px; top:2px;
border-style:solid; border-style:solid;
border-width:1px; border-width:1px;
@ -205,23 +205,23 @@ a.list-group-item:hover {
} }
.btn-group { .btn-group {
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3); box-shadow: $large-shadow;
} }
.btn-group .btn { .btn-group .btn {
box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2); box-shadow: $inset-shadow;
} }
.btn-group .btn:hover { .btn-group .btn:hover {
position:relative; position:relative;
top:1px; top:1px;
box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2); box-shadow: $inset-shadow;
} }
.btn-group .btn:active, .btn:not(:disabled):not(.disabled):active, .btn:not(:disabled):not(.disabled).active, .btn-group .btn:active, .btn:not(:disabled):not(.disabled):active, .btn:not(:disabled):not(.disabled).active,
.show > .btn.dropdown-toggle { .show > .btn.dropdown-toggle {
position:relative; position:relative;
box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.2)!important; box-shadow: $inset-shadow-inverted!important;
top:2px; top:2px;
border-style:solid; border-style:solid;
border-width:1px; border-width:1px;
@ -230,7 +230,7 @@ a.list-group-item:hover {
.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 { .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; 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); box-shadow: $narrow-shadow, $inset-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0.3);
top:1px; top:1px;
outline: none; outline: none;
} }
@ -242,7 +242,7 @@ a.list-group-item:hover {
border-width:1px; border-width:1px;
border-color:rgba(0, 0, 0, 0.3); border-color:rgba(0, 0, 0, 0.3);
color:rgba(0, 0, 0, 0.7); color:rgba(0, 0, 0, 0.7);
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3) box-shadow: $large-shadow;
} }
.alert a, .alert-link { .alert a, .alert-link {
@ -253,7 +253,7 @@ a.list-group-item:hover {
/* ------------------ BREADCRUMB ------------------- */ /* ------------------ BREADCRUMB ------------------- */
.breadcrumb { .breadcrumb {
box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2); box-shadow: $large-shadow, $inset-shadow;
border-color:rgba(0,0,0,0.3); border-color:rgba(0,0,0,0.3);
border-width:1px; border-width:1px;
background-color:#eeeeec; background-color:#eeeeec;
@ -308,7 +308,7 @@ a.list-group-item:hover {
width:100%; width:100%;
margin:auto; margin:auto;
box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2); box-shadow: $large-shadow, $inset-shadow;
} }
.preview-link:hover { .preview-link:hover {