-
-
Save vanja-san/87f92c5db82f33535d8660f9bc48f1c9 to your computer and use it in GitHub Desktop.
stylus mixins
This file contains 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
@require '../styles/_variables.styl' | |
@require './_shadow' | |
card(depth = 1) | |
shadow(depth) | |
padding: base-spacing | |
border-radius: base-border-radius | |
&:hover | |
shadow(depth + 1) |
This file contains 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
shadow(depth = 1) | |
if depth == 1 | |
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12) | |
else if depth == 2 | |
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19) | |
else if depth == 3 | |
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, .24), 0 17px 50px 0 rgba(0, 0, 0, .19) | |
else if depth == 4 | |
box-shadow: 0 16px 28px 0 rgba(0, 0, 0, .22), 0 25px 55px 0 rgba(0, 0, 0, .21) | |
else if depth == 5 | |
box-shadow: 0 27px 24px 0 rgba(0, 0, 0, .2), 0 40px 77px 0 rgba(0, 0, 0, .22) | |
else if depth == -1 | |
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16) inset, 0 2px 10px 0 rgba(0, 0, 0, .12) inset | |
else if depth == -2 | |
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, .2) inset, 0 6px 20px 0 rgba(0, 0, 0, .19) inset | |
else if depth == -3 | |
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, .24) inset, 0 17px 50px 0 rgba(0, 0, 0, .19) inset | |
else if depth == -4 | |
box-shadow: 0 16px 28px 0 rgba(0, 0, 0, .22) inset, 0 25px 55px 0 rgba(0, 0, 0, .21) inset | |
else if depth == -5 | |
box-shadow: 0 27px 24px 0 rgba(0, 0, 0, .2) inset, 0 40px 77px 0 rgba(0, 0, 0, .22) inset | |
else | |
box-shadow: none |
This file contains 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
// Font Family | |
// TODO | |
default-font-family = -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI","Noto Sans Japanese","ヒラギノ角ゴ ProN W3", Meiryo, sans-serif; | |
// Font Sizes | |
/* | |
* 1.1^ 6 = 1.77 extra-large | |
* 1.1^ 5 = 1.61 | |
* 1.1^ 4 = 1.46 | |
* 1.1^ 3 = 1.33 large | |
* 1.1^ 2 = 1.21 | |
* 1.1^ 1 = 1.10 | |
* 1.1^ 0 = 1.00 base | |
* 1.1^-1 = 0.90 | |
* 1.1^-2 = 0.83 | |
* 1.1^-3 = 0.75 small | |
* 1.1^-4 = 0.68 | |
* 1.1^-5 = 0.62 | |
* 1.1^-6 = 0.56 extra-small | |
*/ | |
base-font-size = 1rem | |
extra-large-font-size = base-font-size * 1.77 | |
large-font-size = base-font-size * 1.33 | |
small-font-size = base-font-size * 0.75 | |
extra-small-font-size = base-font-size * 0.56 | |
// Size | |
display-height = 480px | |
// Line height | |
base-line-height = 1.5 | |
heading-line-height = 1.2 | |
// Other Sizes | |
base-border-radius = 3px | |
base-spacing = base-line-height * 1em | |
large-spacing = base-spacing * 3 | |
small-spacing = base-spacing / 3 | |
base-z-index = 0 | |
// Colors | |
default-font-color = rgba(0, 0, 0, 0.87) | |
theme-color = #0094aa |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment