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

style: use mixins for border-radius

Browse source
This commit is contained in:
Kazhnuz 2018-10-14 17:49:39 +02:00
parent 14a2dda917
commit 036286f3f4
2 changed files with 63 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
css/style.css
View file

@ -32,7 +32,7 @@ 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: 2px 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; }
@ -69,6 +69,7 @@ a.social-link:hover {
/* ------------------ CARDS ------------------- */ /* ------------------ CARDS ------------------- */
.card { .card {
border-radius: 3px 3px 3px 3px;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3); box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
border: none; border: none;
margin-bottom: 1.2em; } margin-bottom: 1.2em; }
@ -78,13 +79,20 @@ a.social-link:hover {
/* header and titles */ /* header and titles */
.card-header { .card-header {
border-top-left-radius: 3px; border: 1px solid rgba(0, 0, 0, 0.3);
border-top-right-radius: 3px;
border: 2px solid 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);
font-weight: 600; } font-weight: 600;
border-radius: 0; }
.card-header:first-child {
border-radius: 3px 3px 3px 3px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0; }
.card-header:last-child {
border-radius: 3px 3px 3px 3px;
border-top-left-radius: 0;
border-top-right-radius: 0; }
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6, .card h7, .card h8, .card h9, .card h10 { .card h1, .card h2, .card h3, .card h4, .card h5, .card h6, .card h7, .card h8, .card h9, .card h10 {
color: #333; color: #333;
@ -101,7 +109,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: 2px solid rgba(0, 0, 0, 0.2); } border-bottom: 1px solid rgba(0, 0, 0, 0.2); }
.card-meta.media { .card-meta.media {
-ms-flex-align: center !important; -ms-flex-align: center !important;
@ -134,7 +142,8 @@ a.list-group-item:hover {
/* ------------------ BUTTONS ------------------- */ /* ------------------ BUTTONS ------------------- */
.btn { .btn {
border: 2px solid rgba(0, 0, 0, 0.3); border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 3px 3px 3px 3px;
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); }
@ -142,19 +151,26 @@ 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: 2px solid rgba(0, 0, 0, 0.3); } border: 1px solid 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: 2px solid rgba(0, 0, 0, 0.3); } border: 1px solid 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); }
.btn-group .btn { .btn-group .btn {
box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2); } box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2);
border-radius: 3px 3px 3px 3px; }
.btn-group .btn:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0; }
.btn-group .btn:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0; }
.btn-group .btn:hover { .btn-group .btn:hover {
position: relative; position: relative;
@ -166,7 +182,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: 2px solid rgba(0, 0, 0, 0.3); } border: 1px solid 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;
@ -176,7 +192,8 @@ a.list-group-item:hover {
/* ------------------ ALERTS ------------------- */ /* ------------------ ALERTS ------------------- */
.alert { .alert {
border: 2px solid rgba(0, 0, 0, 0.3); border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 3px 3px 3px 3px;
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); }
@ -186,6 +203,7 @@ a.list-group-item:hover {
/* ------------------ BREADCRUMB ------------------- */ /* ------------------ BREADCRUMB ------------------- */
.breadcrumb { .breadcrumb {
border-radius: 3px 3px 3px 3px;
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: 0; border: 0;
background-color: #eeeeec; background-color: #eeeeec;
@ -218,6 +236,7 @@ a.list-group-item:hover {
width: 25%; } } width: 25%; } }
.card-preview { .card-preview {
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 2px 10px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2); }

36
scss/style.scss
View file

@ -13,6 +13,10 @@ $border-size: 1px;
border: $border-size solid rgba(0, 0, 0, 0.3) border: $border-size solid rgba(0, 0, 0, 0.3)
} }
@mixin border-radius {
border-radius: $border-radius $border-radius $border-radius $border-radius;
}
#wrapper { #wrapper {
background: #64b5f6 url('../img/background.png') center bottom repeat-x; background: #64b5f6 url('../img/background.png') center bottom repeat-x;
} }
@ -98,6 +102,7 @@ a.social-link:hover {
/* ------------------ CARDS ------------------- */ /* ------------------ CARDS ------------------- */
.card { .card {
@include border-radius();
box-shadow: $large-shadow; box-shadow: $large-shadow;
border: none; border: none;
margin-bottom:1.2em; margin-bottom:1.2em;
@ -110,13 +115,24 @@ a.social-link:hover {
/* header and titles */ /* header and titles */
.card-header { .card-header {
border-top-left-radius:3px;
border-top-right-radius:3px;
@include borders(); @include borders();
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);
font-weight:600; font-weight:600;
border-radius: 0;
&:first-child {
@include border-radius();
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
&:last-child {
@include border-radius();
border-top-left-radius: 0;
border-top-right-radius: 0;
}
} }
.card h1,.card h2,.card h3,.card h4,.card h5,.card h6,.card h7,.card h8,.card h9,.card h10 { .card h1,.card h2,.card h3,.card h4,.card h5,.card h6,.card h7,.card h8,.card h9,.card h10 {
@ -181,6 +197,7 @@ a.list-group-item:hover {
.btn { .btn {
@include borders(); @include borders();
@include border-radius();
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);
} }
@ -205,6 +222,15 @@ a.list-group-item:hover {
.btn-group .btn { .btn-group .btn {
box-shadow: $inset-shadow; box-shadow: $inset-shadow;
@include border-radius();
&:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
&:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
} }
.btn-group .btn:hover { .btn-group .btn:hover {
@ -232,6 +258,7 @@ a.list-group-item:hover {
.alert { .alert {
@include borders(); @include borders();
@include border-radius();
color:rgba(0, 0, 0, 0.7); color:rgba(0, 0, 0, 0.7);
box-shadow: $large-shadow; box-shadow: $large-shadow;
} }
@ -244,6 +271,7 @@ a.list-group-item:hover {
/* ------------------ BREADCRUMB ------------------- */ /* ------------------ BREADCRUMB ------------------- */
.breadcrumb { .breadcrumb {
@include border-radius();
box-shadow: $large-shadow, $inset-shadow; box-shadow: $large-shadow, $inset-shadow;
border: 0; border: 0;
background-color:#eeeeec; background-color:#eeeeec;
@ -295,8 +323,8 @@ a.list-group-item:hover {
} }
.card-preview { .card-preview {
width:100%; @include border-radius();
width:100%;
margin:auto; margin:auto;
box-shadow: $large-shadow, $inset-shadow; box-shadow: $large-shadow, $inset-shadow;
} }