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

style: use mixins for borders

Browse source
This commit is contained in:
Kazhnuz 2018-10-14 17:02:50 +02:00
parent c79c110cb6
commit 14a2dda917
2 changed files with 26 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
css/style.css
View file

@ -32,9 +32,9 @@ header h1 {
.navbar { .navbar {
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3); box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
border-width: 1px 0px 1px 0px; border: 2px solid rgba(0, 0, 0, 0.3);
border-style: solid; border-left: 0;
border-color: rgba(0, 0, 0, 0.3); } border-right: 0; }
.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 2px 6px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2); }
@ -70,7 +70,7 @@ a.social-link:hover {
/* ------------------ CARDS ------------------- */ /* ------------------ CARDS ------------------- */
.card { .card {
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3); box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
border-width: 0px; border: none;
margin-bottom: 1.2em; } margin-bottom: 1.2em; }
.card-shadow { .card-shadow {
@ -80,11 +80,7 @@ a.social-link:hover {
.card-header { .card-header {
border-top-left-radius: 3px; border-top-left-radius: 3px;
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-top: 1px solid; border: 2px solid rgba(0, 0, 0, 0.3);
border-left: 1px solid;
border-right: 1px solid;
border-width: 1px;
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 0px 2px 0px rgba(255, 255, 255, 0.1);
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3); text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
@ -105,7 +101,7 @@ h1.card-title, h2.card-title, h3.card-title, h4.card-title, h5.card-title, h6.ca
/* meta */ /* meta */
.card-meta { .card-meta {
padding: 1em; padding: 1em;
border-bottom: 1px solid rgba(0, 0, 0, 0.2); } border-bottom: 2px solid rgba(0, 0, 0, 0.2); }
.card-meta.media { .card-meta.media {
-ms-flex-align: center !important; -ms-flex-align: center !important;
@ -127,9 +123,7 @@ h1.card-title, h2.card-title, h3.card-title, h4.card-title, h5.card-title, h6.ca
/* lists */ /* lists */
.list-group-item { .list-group-item {
border-style: none; border: none;
border-width: 0px;
border-radius: 0px;
background-color: transparent; } background-color: transparent; }
a.list-group-item:hover { a.list-group-item:hover {
@ -140,9 +134,7 @@ a.list-group-item:hover {
/* ------------------ BUTTONS ------------------- */ /* ------------------ BUTTONS ------------------- */
.btn { .btn {
border-style: solid; border: 2px solid rgba(0, 0, 0, 0.3);
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); }
@ -150,17 +142,13 @@ a.list-group-item: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: 0px 2px 6px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
top: 1px; top: 1px;
border-style: solid; border: 2px solid rgba(0, 0, 0, 0.3); }
border-width: 1px;
border-color: rgba(0, 0, 0, 0.3); }
.btn:active { .btn:active {
position: relative; position: relative;
box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.2); box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.2);
top: 2px; top: 2px;
border-style: solid; border: 2px solid rgba(0, 0, 0, 0.3); }
border-width: 1px;
border-color: rgba(0, 0, 0, 0.3); }
.btn-group { .btn-group {
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3); } box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3); }
@ -178,9 +166,7 @@ a.list-group-item:hover {
position: relative; position: relative;
box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.2) !important; box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.2) !important;
top: 2px; top: 2px;
border-style: solid; border: 2px solid rgba(0, 0, 0, 0.3); }
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 { .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;
@ -190,9 +176,7 @@ a.list-group-item:hover {
/* ------------------ ALERTS ------------------- */ /* ------------------ ALERTS ------------------- */
.alert { .alert {
border-style: solid; border: 2px solid rgba(0, 0, 0, 0.3);
border-width: 1px;
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 10px rgba(0, 0, 0, 0.3); } box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3); }
@ -203,8 +187,7 @@ a.list-group-item:hover {
/* ------------------ BREADCRUMB ------------------- */ /* ------------------ BREADCRUMB ------------------- */
.breadcrumb { .breadcrumb {
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);
border-color: rgba(0, 0, 0, 0.3); border: 0;
border-width: 1px;
background-color: #eeeeec; background-color: #eeeeec;
margin-bottom: 1.2em; } margin-bottom: 1.2em; }

43
scss/style.scss
View file

@ -49,9 +49,9 @@ header h1 {
.navbar { .navbar {
box-shadow: $large-shadow; box-shadow: $large-shadow;
border-width: 1px 0px 1px 0px; @include borders();
border-style: solid; border-left: 0;
border-color: rgba(0,0,0,0.3) border-right: 0;
} }
.dropdown-menu { .dropdown-menu {
@ -99,7 +99,7 @@ a.social-link:hover {
.card { .card {
box-shadow: $large-shadow; box-shadow: $large-shadow;
border-width:0px; border: none;
margin-bottom:1.2em; margin-bottom:1.2em;
} }
@ -112,11 +112,7 @@ a.social-link:hover {
.card-header { .card-header {
border-top-left-radius:3px; border-top-left-radius:3px;
border-top-right-radius:3px; border-top-right-radius:3px;
border-top:1px solid; @include borders();
border-left:1px solid;
border-right:1px solid;
border-width:1px;
border-color:rgba(0,0,0,0.3);
font-size:1.1em; font-size:1.1em;
box-shadow: $inset-relief; 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);
@ -141,7 +137,7 @@ h1.card-title, h2.card-title, h3.card-title, h4.card-title, h5.card-title, h6.ca
.card-meta { .card-meta {
padding:1em; padding:1em;
border-bottom:1px solid rgba(0,0,0,0.2); border-bottom: $border-size solid rgba(0,0,0,0.2);
} }
.card-meta.media { .card-meta.media {
@ -169,9 +165,7 @@ h1.card-title, h2.card-title, h3.card-title, h4.card-title, h5.card-title, h6.ca
/* lists */ /* lists */
.list-group-item { .list-group-item {
border-style:none; border: none;
border-width:0px;
border-radius:0px;
background-color:transparent; background-color:transparent;
} }
@ -186,9 +180,7 @@ a.list-group-item:hover {
/* ------------------ BUTTONS ------------------- */ /* ------------------ BUTTONS ------------------- */
.btn { .btn {
border-style:solid; @include borders();
border-width:1px;
border-color:rgba(0, 0, 0, 0.3);
box-shadow: $large-shadow, $inset-shadow; 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);
} }
@ -197,18 +189,14 @@ a.list-group-item:hover {
position:relative; position:relative;
box-shadow: $narrow-shadow, $inset-shadow; box-shadow: $narrow-shadow, $inset-shadow;
top:1px; top:1px;
border-style:solid; @include borders();
border-width:1px;
border-color:rgba(0, 0, 0, 0.3);
} }
.btn:active { .btn:active {
position:relative; position:relative;
box-shadow: $inset-shadow-inverted; box-shadow: $inset-shadow-inverted;
top:2px; top:2px;
border-style:solid; @include borders();
border-width:1px;
border-color:rgba(0, 0, 0, 0.3);
} }
.btn-group { .btn-group {
@ -230,9 +218,7 @@ a.list-group-item:hover {
position:relative; position:relative;
box-shadow: $inset-shadow-inverted!important; box-shadow: $inset-shadow-inverted!important;
top:2px; top:2px;
border-style:solid; @include borders();
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 { .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 {
@ -245,9 +231,7 @@ a.list-group-item:hover {
/* ------------------ ALERTS ------------------- */ /* ------------------ ALERTS ------------------- */
.alert { .alert {
border-style:solid; @include borders();
border-width:1px;
border-color:rgba(0, 0, 0, 0.3);
color:rgba(0, 0, 0, 0.7); color:rgba(0, 0, 0, 0.7);
box-shadow: $large-shadow; box-shadow: $large-shadow;
} }
@ -261,8 +245,7 @@ a.list-group-item:hover {
.breadcrumb { .breadcrumb {
box-shadow: $large-shadow, $inset-shadow; box-shadow: $large-shadow, $inset-shadow;
border-color:rgba(0,0,0,0.3); border: 0;
border-width:1px;
background-color:#eeeeec; background-color:#eeeeec;
margin-bottom:1.2em; margin-bottom:1.2em;
} }