From d17d6c881e3f097dc5511a7034c6eacd10d19636 Mon Sep 17 00:00:00 2001 From: Nils Schneider Date: Mon, 6 Jul 2015 23:00:11 +0200 Subject: [PATCH] scss: refactor box shadows --- scss/_shadow.scss | 19 +++++++++++++++++++ scss/main.scss | 11 ++++++----- 2 files changed, 25 insertions(+), 5 deletions(-) create mode 100644 scss/_shadow.scss diff --git a/scss/_shadow.scss b/scss/_shadow.scss new file mode 100644 index 0000000..13483e5 --- /dev/null +++ b/scss/_shadow.scss @@ -0,0 +1,19 @@ +/* Original is in LESS and can be found here: https://gist.github.com/gefangenimnetz/3ef3e18364edf105c5af */ + +@mixin shadow($level:1){ + @if $level == 1 { + box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); + } + @else if $level == 2 { + box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); + } + @else if $level == 3 { + box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); + } + @else if $level == 4 { + box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); + } + @else if $level == 5 { + box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22); + } +} diff --git a/scss/main.scss b/scss/main.scss index 2181d00..0d53e93 100644 --- a/scss/main.scss +++ b/scss/main.scss @@ -1,4 +1,5 @@ @import '_reset'; +@import '_shadow'; @import '_base'; @import '_leaflet'; @import '_leaflet.label'; @@ -40,7 +41,7 @@ $buttondistance: 12pt; display: flex; font-family: Roboto; background: rgba(0, 0, 0, 0.02); - box-shadow: 0px 0.5px 3px rgba(0, 0, 0, 0.16), 0px 0.5px 2px rgba(0, 0, 0, 0.24); + @include shadow(1); } .tabs li { @@ -121,7 +122,7 @@ table.attributes td { .sidebar { .infobox, .container { - box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.19), 0px 3px 6px rgba(0, 0, 0, 0.23); + @include shadow(2); background: rgba(255, 255, 255, 0.9); border-radius: 2px; } @@ -155,7 +156,7 @@ table.attributes td { button { -webkit-tap-highlight-color: transparent; font-family: "ionicons"; - box-shadow: 0px 0.5px 3px rgba(0, 0, 0, 0.16), 0px 0.5px 2px rgba(0, 0, 0, 0.24); + @include shadow(1); border-radius: 0.9em; background: rgba(255, 255, 255, 0.7); border: none; @@ -174,7 +175,7 @@ button.active { button:hover { background: white; color: #dc0067; - box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.19), 0px 3px 6px rgba(0, 0, 0, 0.23); + @include shadow(2); } button:active { @@ -357,7 +358,7 @@ table { margin: 0pt; width: $sidebarwidthsmall; min-height: 100vh; - box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.19), 0px 3px 6px rgba(0, 0, 0, 0.23); + @include shadow(2); background: white; .sidebarhandle {