OpenServer/Theme
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add important elevations

Browse Source
This commit is contained in:
Fabian 2019-07-29 16:10:07 +02:00
parent fa0f13bf0f
commit b5b7285e38
3 changed files with 36 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/_maketheme.scss
View File

@ -20,7 +20,11 @@ $button-color: #CCCCCC !default;
@each $dp in $elevations { @each $dp in $elevations {
.elv-#{$dp} { .elv-#{$dp} {
@include Elevation($dp); @include Elevation($dp, false);
}
.elv-#{$dp}-imp {
@include Elevation($dp, true);
} }
} }

11
src/dark.scss
View File

@ -4,8 +4,15 @@ $background: #000000;
$on-background: white; $on-background: white;
$disabled-brightness: 1.1; $disabled-brightness: 1.1;
@mixin Elevation ($dp) { @mixin Elevation ($dp, $imp:false) {
background: lighten($background, 10% + floor($dp * .7%)); @if $imp==true {
background: lighten($background, 10% + floor($dp * .7%)) !important;
}
@else {
background: lighten($background, 10% + floor($dp * .7%));
}
z-index: $dp; z-index: $dp;
} }

33
src/light.scss
View File

@ -2,49 +2,60 @@ $background: #f9f9f9;
$on-background: black; $on-background: black;
$disabled-brightness: .9; $disabled-brightness: .9;
@mixin Elevation ($dp) { @mixin MakeShadow($imp, $type) {
@if $imp==true {
box-shadow: $type !important;
}
@else {
box-shadow: $type;
}
}
@mixin Elevation ($dp, $imp:false) {
@if $dp==0 { @if $dp==0 {
@include MakeShadow($imp, none);
box-shadow: none box-shadow: none
} }
@else if $dp==1 { @else if $dp==1 {
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12), 0 1px 3px 0 rgba(0, 0, 0, .20) @include MakeShadow($imp, (0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12), 0 1px 3px 0 rgba(0, 0, 0, .20))) // box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12), 0 1px 3px 0 rgba(0, 0, 0, .20)
} }
@else if $dp==2 { @else if $dp==2 {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .20) @include MakeShadow($imp, (0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .20)))
} }
@else if $dp==3 { @else if $dp==3 {
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .12), 0 1px 8px 0 rgba(0, 0, 0, .20) @include MakeShadow($imp, (0 3px 4px 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .12), 0 1px 8px 0 rgba(0, 0, 0, .20)))
} }
@else if $dp==4 { @else if $dp==4 {
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .20) @include MakeShadow($imp, (0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .20)))
} }
@else if $dp==6 { @else if $dp==6 {
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12), 0 3px 5px -1px rgba(0, 0, 0, .20) @include MakeShadow($imp, (0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12), 0 3px 5px -1px rgba(0, 0, 0, .20)))
} }
@else if $dp==8 { @else if $dp==8 {
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .20) @include MakeShadow($imp, (0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .20)))
} }
@else if $dp==9 { @else if $dp==9 {
box-shadow: 0 9px 12px 1px rgba(0, 0, 0, .14), 0 3px 16px 2px rgba(0, 0, 0, .12), 0 5px 6px -3px rgba(0, 0, 0, .20) @include MakeShadow($imp, (0 9px 12px 1px rgba(0, 0, 0, .14), 0 3px 16px 2px rgba(0, 0, 0, .12), 0 5px 6px -3px rgba(0, 0, 0, .20)))
} }
@else if $dp==12 { @else if $dp==12 {
box-shadow: 0 12px 17px 2px rgba(0, 0, 0, .14), 0 5px 22px 4px rgba(0, 0, 0, .12), 0 7px 8px -4px rgba(0, 0, 0, .20) @include MakeShadow($imp, (0 12px 17px 2px rgba(0, 0, 0, .14), 0 5px 22px 4px rgba(0, 0, 0, .12), 0 7px 8px -4px rgba(0, 0, 0, .20)))
} }
@else if $dp==16 { @else if $dp==16 {
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .20) @include MakeShadow($imp, (0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .20)))
} }
@else if $dp==24 { @else if $dp==24 {
box-shadow: 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12), 0 11px 15px -7px rgba(0, 0, 0, .20) @include MakeShadow($imp, (0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12), 0 11px 15px -7px rgba(0, 0, 0, .20)))
} }
@else { @else {