You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
48 lines
2.3 KiB
48 lines
2.3 KiB
4 years ago
|
@import "./variables";
|
||
|
|
|
||
|
|
@function al-shadow($level, $weight: 1, $offset-y: 1) {
|
||
|
|
@if $level == 1 {
|
||
|
|
@return 0 ($offset-y * 1px) 1px 0 rgba(0, 0, 0, $weight * .14),
|
||
|
|
0 ($offset-y * 2px) 1px -1px rgba(0, 0, 0, $weight * .12),
|
||
|
|
0 ($offset-y * 1px) 3px 0 rgba(0, 0, 0, $weight * .20);
|
||
|
|
} @else if $level == 2 {
|
||
|
|
@return 0 ($offset-y * 2px) 2px 0 rgba(0, 0, 0, $weight * .14),
|
||
|
|
0 ($offset-y * 3px) 1px -2px rgba(0, 0, 0, $weight * .12),
|
||
|
|
0 ($offset-y * 1px) 5px 0 rgba(0, 0, 0, $weight * .20);
|
||
|
|
} @else if $level == 3 {
|
||
|
|
@return 0 ($offset-y * 3px) 4px 0 rgba(0, 0, 0, $weight * .14),
|
||
|
|
0 ($offset-y * 3px) 3px -2px rgba(0, 0, 0, $weight * .12),
|
||
|
|
0 ($offset-y * 1px) 8px 0 rgba(0, 0, 0, $weight * .20);
|
||
|
|
} @else if $level == 4 {
|
||
|
|
@return 0 ($offset-y * 4px) 5px 0 rgba(0, 0, 0, $weight * .14),
|
||
|
|
0 ($offset-y * 1px) 10px 0 rgba(0, 0, 0, $weight * .12),
|
||
|
|
0 ($offset-y * 2px) 4px -1px rgba(0, 0, 0, $weight * .20);
|
||
|
|
} @else if $level == 5 {
|
||
|
|
@return 0 ($offset-y * 6px) 10px 0 rgba(0, 0, 0, $weight * .14),
|
||
|
|
0 ($offset-y * 1px) 18px 0 rgba(0, 0, 0, $weight * .12),
|
||
|
|
0 ($offset-y * 3px) 5px -1px rgba(0, 0, 0, $weight * .20);
|
||
|
|
} @else if $level == 6 {
|
||
|
|
@return 0 ($offset-y * 8px) 10px 1px rgba(0, 0, 0, $weight * .14),
|
||
|
|
0 ($offset-y * 3px) 14px 2px rgba(0, 0, 0, $weight * .12),
|
||
|
|
0 ($offset-y * 5px) 5px -3px rgba(0, 0, 0, $weight * .20);
|
||
|
|
} @else if $level == 7 {
|
||
|
|
@return 0 ($offset-y * 9px) 12px 1px rgba(0, 0, 0, $weight * .14),
|
||
|
|
0 ($offset-y * 3px) 16px 2px rgba(0, 0, 0, $weight * .12),
|
||
|
|
0 ($offset-y * 5px) 6px -3px rgba(0, 0, 0, $weight * .20);
|
||
|
|
} @else if $level == 8 {
|
||
|
|
@return 0 ($offset-y * 12px) 17px 2px rgba(0, 0, 0, $weight * .14),
|
||
|
|
0 ($offset-y * 5px) 22px 4px rgba(0, 0, 0, $weight * .12),
|
||
|
|
0 ($offset-y * 7px) 8px -4px rgba(0, 0, 0, $weight * .20);
|
||
|
|
} @else if $level == 9 {
|
||
|
|
@return 0 ($offset-y * 16px) 24px 2px rgba(0, 0, 0, $weight * .14),
|
||
|
|
0 ($offset-y * 6px) 30px 5px rgba(0, 0, 0, $weight * .12),
|
||
|
|
0 ($offset-y * 8px) 10px -5px rgba(0, 0, 0, $weight * .20);
|
||
|
|
} @else if $level == 10 {
|
||
|
|
@return 0 ($offset-y * 24px) 38px 3px rgba(0, 0, 0, $weight * .14),
|
||
|
|
0 ($offset-y * 9px) 46px 8px rgba(0, 0, 0, $weight * .12),
|
||
|
|
0 ($offset-y * 11px) 15px -7px rgba(0, 0, 0, $weight * .20);
|
||
|
|
}
|
||
|
|
|
||
|
|
@error 'Invalid shadow level - #{level}'
|
||
|
|
}
|