Created
November 3, 2018 23:58
-
-
Save jstewsy/b9d1586648d7aa004216b3dd2fa5784d to your computer and use it in GitHub Desktop.
material design elevation mixin concept
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Box Shadow Offsets Helper | |
* | |
* helper to build a shadow offsets map based on a size value | |
*/ | |
@function box-shadow-offsets($size) { | |
@return ( | |
top: 0 $size, | |
right: negative($size) 0, | |
bottom: 0 negative($size), | |
left: $size 0 | |
) | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Elevate Helper | |
* | |
* helper to build a shadow offsets map based on a size value | |
*/ | |
@function negative($number) { | |
@return $number * -1; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* elevate | |
* | |
* apply elevation box-shadows on components at varying levels based on their | |
* `Z` axis visual level. | |
* | |
* $level: Depth of the component to the page. Higher level = larger drop shadow spread | |
* $light-source: Location from which component originates resulting in a shadow on the opposite edge | |
* EX. A 'top' modal will have a shadow starting at the "bottom" edge. | |
* $color: Color of drop-shadow | |
*/ | |
@mixin elevate($level: 1, $light-source: top, $color: '#555') { | |
// Level | |
@if ($level == 1) { | |
$offsets: box-shadow-offsets(1px); | |
box-shadow: #{map-get($offsets, $light-source)} 3px rgba($color, 0.12), | |
#{map-get($offsets, $light-source)} 2px rgba($color, 0.24); | |
} | |
// Level 2 | |
@if ($level == 2) { | |
$offsets: box-shadow-offsets(3px); | |
box-shadow: #{map-get($offsets, $light-source)} 6px rgba($color, 0.16), | |
#{map-get($offsets, $light-source)} 6px rgba($color, 0.23); | |
} | |
// Level 3 | |
@if ($level == 3) { | |
$primary-offsets: box-shadow-offsets(10px); | |
$secondary-offsets: box-shadow-offsets(6px); | |
box-shadow: #{map-get($primary-offsets, $light-source)} 20px rgba($color, 0.19), | |
#{map-get($secondary-offsets, $light-source)} 6px rgba($color, 0.23); | |
} | |
// Level 4 | |
@if ($level == 4) { | |
$primary-offsets: box-shadow-offsets(14px); | |
$secondary-offsets: box-shadow-offsets(10px); | |
box-shadow: #{map-get($primary-offsets, $light-source)} 28px rgba($color, 0.25), | |
#{map-get($secondary-offsets, $light-source)} 10px rgba($color, 0.22); | |
} | |
// Level 5 | |
@if ($level == 5) { | |
$primary-offsets: box-shadow-offsets(19px); | |
$secondary-offsets: box-shadow-offsets(15px); | |
box-shadow: #{map-get($primary-offsets, $light-source)} 38px rgba($color, 0.30), | |
#{map-get($secondary-offsets, $light-source)} 12px rgba($color, 0.22); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment