Last active
July 1, 2023 12:01
-
-
Save isuke/04bd2274d5d1ec970dfd9907e7f8f160 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