kazhnuz/kazhnuz.css
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

improvement: flatten look

Browse source
This commit is contained in:
Kazhnuz 2019-10-08 13:30:13 +02:00
parent 76c889d47b
commit d4c5d542da
4 changed files with 40 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
css/style.css
View file

@ -42,8 +42,8 @@ header h1 {
}
.navbar {
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0);
border: 0px solid rgba(0, 0, 0, 0.3);
border-left: 0;
border-right: 0;
}
@ -55,7 +55,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 2px 6px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0);
}
/* ------------------ FOOTER ------------------- */
@ -91,15 +91,15 @@ ul.social li a:hover {
/* ------------------ CARDS ------------------- */
.card {
border-radius: 3px 3px 3px 3px;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
border-radius: 0px 0px 0px 0px;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0);
border: none;
margin-bottom: 1.2em;
background-color: #fdf6e3;
}
.card-shadow {
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), inset 0px -2px 0px rgba(0, 0, 0, 0);
}
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6, .card h7, .card h8, .card h9, .card h10 {
@ -109,20 +109,20 @@ ul.social li a:hover {
/* header and titles */
.card-header {
border: 1px solid rgba(0, 0, 0, 0.3);
border: 0px solid rgba(0, 0, 0, 0.3);
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);
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
font-weight: 600;
border-radius: 0;
}
.card-header:first-child {
border-radius: 3px 3px 3px 3px;
border-radius: 0px 0px 0px 0px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.card-header:last-child {
border-radius: 3px 3px 3px 3px;
border-radius: 0px 0px 0px 0px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
@ -139,7 +139,7 @@ ul.social li a:hover {
/* meta */
.card-meta {
padding: 1em;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
border-bottom: 0px solid rgba(0, 0, 0, 0.2);
}
.card-meta.media {
-ms-flex-align: center !important;
@ -175,33 +175,31 @@ a.list-group-item:hover {
/* ------------------ BUTTONS ------------------- */
.btn {
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);
border: 0px solid rgba(0, 0, 0, 0.3);
border-radius: 0px 0px 0px 0px;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0);
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
}
.btn:hover {
position: relative;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
top: 1px;
border: 1px solid rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0);
border: 0px solid rgba(0, 0, 0, 0.3);
}
.btn:active {
position: relative;
box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.2);
top: 2px;
border: 1px solid rgba(0, 0, 0, 0.3);
box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0);
border: 0px solid rgba(0, 0, 0, 0.3);
}
.btn-group {
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0);
}
.btn-group .btn {
box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2);
border-radius: 3px 3px 3px 3px;
box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0);
border-radius: 0px 0px 0px 0px;
}
.btn-group .btn:not(:first-child) {
border-top-left-radius: 0;
@ -214,31 +212,28 @@ a.list-group-item:hover {
.btn-group .btn:hover {
position: relative;
top: 1px;
box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0);
}
.btn-group .btn:active, .btn:not(:disabled):not(.disabled):active, .btn:not(:disabled):not(.disabled).active,
.show > .btn.dropdown-toggle {
position: relative;
box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.2) !important;
top: 2px;
border: 1px solid rgba(0, 0, 0, 0.3);
box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0) !important;
border: 0px 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 {
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);
top: 1px;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0), 0px 0px 0px 2px rgba(0, 0, 0, 0.3);
outline: none;
}
/* ------------------ ALERTS ------------------- */
.alert {
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 3px 3px 3px 3px;
border: 0px solid rgba(0, 0, 0, 0.3);
border-radius: 0px 0px 0px 0px;
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);
}
.alert a, .alert-link {
@ -248,8 +243,8 @@ a.list-group-item:hover {
/* ------------------ 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);
border-radius: 0px 0px 0px 0px;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0);
border: 0;
background-color: #eee8d5;
margin-bottom: 1.2em;
@ -294,10 +289,10 @@ a.list-group-item:hover {
}
}
.card-preview {
border-radius: 3px 3px 3px 3px;
border-radius: 0px 0px 0px 0px;
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 2px 10px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0);
}
.preview-link:hover {

2
css/style.css.map
View file

File diff suppressed because one or more lines are too long

5
scss/_commons.scss
View file

@ -196,14 +196,12 @@ a.list-group-item:hover {
.btn:hover {
position:relative;
box-shadow: $narrow-shadow, $inset-shadow;
top:1px;
@include borders();
}
.btn:active {
position:relative;
box-shadow: $inset-shadow-inverted;
top:2px;
@include borders();
}
@ -226,7 +224,6 @@ a.list-group-item:hover {
.btn-group .btn:hover {
position:relative;
top:1px;
box-shadow: $inset-shadow;
}
@ -234,14 +231,12 @@ a.list-group-item:hover {
.show > .btn.dropdown-toggle {
position:relative;
box-shadow: $inset-shadow-inverted!important;
top:2px;
@include borders();
}
.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;
box-shadow: $narrow-shadow, $inset-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0.3);
top:1px;
outline: none;
}

14
scss/style.scss
View file

@ -2,14 +2,14 @@
/* ------------------ CUSTOM STYLE ------------------- */
$large-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
$narrow-shadow: 0px 2px 6px 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);
$large-shadow: 0px 2px 10px rgba(0, 0, 0, 0);
$narrow-shadow: 0px 2px 6px rgba(0, 0, 0, 0);
$inset-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0);
$inset-shadow-inverted: inset 0px 2px 0px rgba(0, 0, 0, 0);
$inset-relief: inset 0px 2px 0px rgba(255, 255, 255, 0);
$border-radius: 3px;
$border-size: 1px;
$border-radius: 0px;
$border-size: 0px;
$color-primary: $color-purple;
$color-secondary: $color-blue;