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 { .navbar {
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3); box-shadow: 0px 2px 10px rgba(0, 0, 0, 0);
border: 1px solid rgba(0, 0, 0, 0.3); border: 0px solid rgba(0, 0, 0, 0.3);
border-left: 0; border-left: 0;
border-right: 0; border-right: 0;
} }
@ -55,7 +55,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 2px 6px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0);
} }
/* ------------------ FOOTER ------------------- */ /* ------------------ FOOTER ------------------- */
@ -91,15 +91,15 @@ ul.social li a:hover {
/* ------------------ CARDS ------------------- */ /* ------------------ CARDS ------------------- */
.card { .card {
border-radius: 3px 3px 3px 3px; border-radius: 0px 0px 0px 0px;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3); box-shadow: 0px 2px 10px rgba(0, 0, 0, 0);
border: none; border: none;
margin-bottom: 1.2em; margin-bottom: 1.2em;
background-color: #fdf6e3; background-color: #fdf6e3;
} }
.card-shadow { .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 { .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 */ /* header and titles */
.card-header { .card-header {
border: 1px solid rgba(0, 0, 0, 0.3); border: 0px 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);
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; border-radius: 0;
} }
.card-header:first-child { .card-header:first-child {
border-radius: 3px 3px 3px 3px; border-radius: 0px 0px 0px 0px;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
.card-header:last-child { .card-header:last-child {
border-radius: 3px 3px 3px 3px; border-radius: 0px 0px 0px 0px;
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
} }
@ -139,7 +139,7 @@ ul.social li a:hover {
/* meta */ /* meta */
.card-meta { .card-meta {
padding: 1em; 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 { .card-meta.media {
-ms-flex-align: center !important; -ms-flex-align: center !important;
@ -175,33 +175,31 @@ a.list-group-item:hover {
/* ------------------ BUTTONS ------------------- */ /* ------------------ BUTTONS ------------------- */
.btn { .btn {
border: 1px solid rgba(0, 0, 0, 0.3); border: 0px solid rgba(0, 0, 0, 0.3);
border-radius: 3px 3px 3px 3px; border-radius: 0px 0px 0px 0px;
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);
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: 0px 2px 6px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0);
top: 1px; border: 0px 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);
top: 2px; border: 0px 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);
} }
.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);
border-radius: 3px 3px 3px 3px; border-radius: 0px 0px 0px 0px;
} }
.btn-group .btn:not(:first-child) { .btn-group .btn:not(:first-child) {
border-top-left-radius: 0; border-top-left-radius: 0;
@ -214,31 +212,28 @@ a.list-group-item:hover {
.btn-group .btn:hover { .btn-group .btn:hover {
position: relative; position: relative;
top: 1px; box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0);
box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2);
} }
.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 0px 2px 0px rgba(0, 0, 0, 0) !important;
top: 2px; border: 0px 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;
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: 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);
top: 1px;
outline: none; outline: none;
} }
/* ------------------ ALERTS ------------------- */ /* ------------------ ALERTS ------------------- */
.alert { .alert {
border: 1px solid rgba(0, 0, 0, 0.3); border: 0px solid rgba(0, 0, 0, 0.3);
border-radius: 3px 3px 3px 3px; border-radius: 0px 0px 0px 0px;
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);
} }
.alert a, .alert-link { .alert a, .alert-link {
@ -248,8 +243,8 @@ a.list-group-item:hover {
/* ------------------ BREADCRUMB ------------------- */ /* ------------------ BREADCRUMB ------------------- */
.breadcrumb { .breadcrumb {
border-radius: 3px 3px 3px 3px; border-radius: 0px 0px 0px 0px;
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);
border: 0; border: 0;
background-color: #eee8d5; background-color: #eee8d5;
margin-bottom: 1.2em; margin-bottom: 1.2em;
@ -294,10 +289,10 @@ a.list-group-item:hover {
} }
} }
.card-preview { .card-preview {
border-radius: 3px 3px 3px 3px; border-radius: 0px 0px 0px 0px;
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), inset 0px -2px 0px rgba(0, 0, 0, 0);
} }
.preview-link:hover { .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 { .btn:hover {
position:relative; position:relative;
box-shadow: $narrow-shadow, $inset-shadow; box-shadow: $narrow-shadow, $inset-shadow;
top:1px;
@include borders(); @include borders();
} }
.btn:active { .btn:active {
position:relative; position:relative;
box-shadow: $inset-shadow-inverted; box-shadow: $inset-shadow-inverted;
top:2px;
@include borders(); @include borders();
} }
@ -226,7 +224,6 @@ a.list-group-item:hover {
.btn-group .btn:hover { .btn-group .btn:hover {
position:relative; position:relative;
top:1px;
box-shadow: $inset-shadow; box-shadow: $inset-shadow;
} }
@ -234,14 +231,12 @@ a.list-group-item:hover {
.show > .btn.dropdown-toggle { .show > .btn.dropdown-toggle {
position:relative; position:relative;
box-shadow: $inset-shadow-inverted!important; box-shadow: $inset-shadow-inverted!important;
top:2px;
@include borders(); @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 { .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: $narrow-shadow, $inset-shadow, 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;
outline: none; outline: none;
} }

14
scss/style.scss
View file

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