freifunk/hopglass
8
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

scss: refactor box shadows

Browse source
This commit is contained in:
Nils Schneider 2015-07-06 23:00:11 +02:00
parent 7a6d572be8
commit d17d6c881e
2 changed files with 25 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
scss/_shadow.scss Normal file
View file

@ -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);
}
}

11
scss/main.scss
View file

@ -1,4 +1,5 @@
@import '_reset'; @import '_reset';
@import '_shadow';
@import '_base'; @import '_base';
@import '_leaflet'; @import '_leaflet';
@import '_leaflet.label'; @import '_leaflet.label';
@ -40,7 +41,7 @@ $buttondistance: 12pt;
display: flex; display: flex;
font-family: Roboto; font-family: Roboto;
background: rgba(0, 0, 0, 0.02); 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 { .tabs li {
@ -121,7 +122,7 @@ table.attributes td {
.sidebar { .sidebar {
.infobox, .container { .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); background: rgba(255, 255, 255, 0.9);
border-radius: 2px; border-radius: 2px;
} }
@ -155,7 +156,7 @@ table.attributes td {
button { button {
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
font-family: "ionicons"; 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; border-radius: 0.9em;
background: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.7);
border: none; border: none;
@ -174,7 +175,7 @@ button.active {
button:hover { button:hover {
background: white; background: white;
color: #dc0067; 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 { button:active {
@ -357,7 +358,7 @@ table {
margin: 0pt; margin: 0pt;
width: $sidebarwidthsmall; width: $sidebarwidthsmall;
min-height: 100vh; 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; background: white;
.sidebarhandle { .sidebarhandle {