254 lines
5.3 KiB
Stylus
254 lines
5.3 KiB
Stylus
// @import url('http://fonts.googleapis.com/css?family=Roboto:300,400,700')
|
|
|
|
// -- Colors
|
|
COLOR = #222222
|
|
BACKGROUND = #f5f5f5
|
|
THEME = #cccccc
|
|
WHITE = #ffffff
|
|
PRIMARY = #e91e63
|
|
SECONDARY = #00bcd4
|
|
// THEME = #ef6c00
|
|
CANCEL = red
|
|
|
|
// -- Fonts
|
|
FONT_FAMILY = "Roboto", "Helvetica Neue", "Helvetica", "sans-serif"
|
|
FONT_SIZE = 16px
|
|
FONT_SIZE_TINY = 80%
|
|
FONT_SIZE_SMALL = 90%
|
|
FONT_SIZE_NORMAL = 100%
|
|
FONT_SIZE_BIG = 120%
|
|
FONT_WEIGHT_THIN = 300
|
|
FONT_WEIGHT_NORMAL = 400
|
|
FONT_WEIGHT_BOLD = 700
|
|
|
|
// -- Sizes
|
|
UNIT = 4rem
|
|
SPACE = (UNIT * 0.29)
|
|
OFFSET = (SPACE * 1.75)
|
|
MENU_WIDTH = (3.85 * UNIT)
|
|
HEADER_HEIGHT = (1.65 * UNIT)
|
|
BUTTON_HEIGHT = (2.5 * SPACE)
|
|
BUTTON_CIRCLE_HEIGHT = (2.75 * SPACE)
|
|
LOADING_HEIGHT = (1.5 * UNIT)
|
|
|
|
// -- Shadows
|
|
ZDEPTH_SHADOW_1 = 0 1px 6px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.24)
|
|
ZDEPTH_SHADOW_2 = 0 3px 10px rgba(0,0,0,0.16), 0 3px 10px rgba(0,0,0,0.23)
|
|
ZDEPTH_SHADOW_3 = 0 10px 30px rgba(0,0,0,0.19), 0 6px 10px rgba(0,0,0,0.23)
|
|
ZDEPTH_SHADOW_4 = 0 14px 45px rgba(0,0,0,0.25), 0 10px 18px rgba(0,0,0,0.22)
|
|
ZDEPTH_SHADOW_5 = 0 19px 60px rgba(0,0,0,0.30), 0 15px 20px rgba(0,0,0,0.22)
|
|
|
|
// -- Animations
|
|
ANIMATION_DURATION = 450ms
|
|
ANIMATION_EASE = cubic-bezier(.55,0,.1,1)
|
|
ANIMATION_DELAY = (ANIMATION_DURATION / 5)
|
|
|
|
|
|
// normalize v3.0.2 | MIT License | git.io/normalize
|
|
|
|
html
|
|
font-family Roboto, sans-serif
|
|
-ms-text-size-adjust 100%
|
|
-webkit-text-size-adjust 100%
|
|
|
|
body
|
|
margin 0
|
|
|
|
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
|
|
nav, section, summary
|
|
display block
|
|
|
|
audio, canvas, progress, video
|
|
display inline-block
|
|
vertical-align baseline
|
|
|
|
audio
|
|
&:not([controls])
|
|
display none
|
|
height 0
|
|
|
|
[hidden], template
|
|
display none
|
|
|
|
a
|
|
background-color transparent
|
|
&:active, &:hover
|
|
outline 0
|
|
|
|
abbr[title]
|
|
border-bottom 1px dotted
|
|
|
|
b, strong
|
|
font-weight bold
|
|
|
|
dfn
|
|
font-style italic
|
|
|
|
h1
|
|
font-size 2em
|
|
margin 0.67em 0
|
|
|
|
mark
|
|
background #ff0
|
|
color #000
|
|
|
|
small
|
|
font-size 80%
|
|
|
|
sub, sup
|
|
font-size 75%
|
|
line-height 0
|
|
position relative
|
|
vertical-align baseline
|
|
|
|
sup
|
|
top -0.5em
|
|
|
|
sub
|
|
bottom -0.25em
|
|
|
|
img
|
|
border: 0
|
|
|
|
svg
|
|
&:not(:root)
|
|
overflow hidden
|
|
|
|
figure
|
|
border: 0
|
|
|
|
hr
|
|
-moz-box-sizing content-box
|
|
box-sizing content-box
|
|
height 0
|
|
|
|
pre
|
|
overflow auto
|
|
|
|
code, kbd, pre, samp
|
|
font-family monospace, monospace
|
|
font-size 1em
|
|
|
|
button, input, optgroup, select, textarea
|
|
color inherit
|
|
font inherit
|
|
margin 0
|
|
|
|
button
|
|
overflow visible
|
|
|
|
button, select
|
|
text-transform none
|
|
|
|
button, html input[type="button"], input[type="reset"], input[type="submit"]
|
|
-webkit-appearance button
|
|
cursor pointer
|
|
|
|
button[disabled], html input[disabled]
|
|
cursor default
|
|
|
|
button::-moz-focus-inner, input::-moz-focus-inner
|
|
border 0
|
|
padding 0
|
|
|
|
input
|
|
line-height normal
|
|
|
|
input[type="checkbox"], input[type="radio"]
|
|
box-sizing border-box
|
|
padding 0
|
|
|
|
input[type="number"]::-webkit-inner-spin-button,
|
|
input[type="number"]::-webkit-outer-spin-button
|
|
height auto
|
|
|
|
input[type="search"]
|
|
-webkit-appearance textfield
|
|
-moz-box-sizing content-box
|
|
-webkit-box-sizing content-box
|
|
box-sizing content-box
|
|
|
|
input[type="search"]::-webkit-search-cancel-button,
|
|
input[type="search"]::-webkit-search-decoration
|
|
-webkit-appearance none
|
|
|
|
fieldset
|
|
border 1px solid #c0c0c0
|
|
margin 0 2px
|
|
padding 0.35em 0.625em 0.75em
|
|
|
|
legend
|
|
border 0
|
|
padding 0
|
|
|
|
textarea
|
|
overflow auto
|
|
|
|
optgroup
|
|
font-weight bold
|
|
|
|
table
|
|
border-collapse collapse
|
|
border-spacing 0
|
|
|
|
td, th
|
|
padding 0
|
|
|
|
|
|
// -- App ----------------------------------------------------------------------
|
|
a,abbr,address,article,aside,audio,b,blockquote,body,caption,cite,code,dd,del,dfn,dialog,div,dl,dt,em,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video
|
|
border: 0
|
|
margin: 0
|
|
outline: 0
|
|
padding: 0
|
|
|
|
*, *:before, *:after
|
|
margin: 0
|
|
padding: 0
|
|
box-sizing: border-box
|
|
|
|
html
|
|
position: absolute
|
|
height: 100%
|
|
width: 100%
|
|
margin: 0
|
|
padding: 0
|
|
overflow: hidden
|
|
|
|
body
|
|
width: 100%
|
|
height: 100%
|
|
margin: 0
|
|
padding: 0
|
|
-webkit-touch-callout: none
|
|
-webkit-user-select: none
|
|
-moz-user-select: moz-none
|
|
user-select: none
|
|
overflow: hidden
|
|
|
|
*
|
|
-webkit-tap-highlight-color: rgba(255, 255, 255, 0)
|
|
|
|
h1, h2, h3, h4, h5, h6, label, p, button, abbr, a, span, small
|
|
-webkit-font-smoothing: RENDER = antialiased
|
|
font-smoothing: RENDER
|
|
-webkit-text-size-adjust: 100%
|
|
-ms-text-size-adjust: 100%
|
|
text-size-adjust: 100%
|
|
|
|
a
|
|
text-decoration: none
|
|
-webkit-tap-highlight-color: rgba(0,0,0,0)
|
|
|
|
::-webkit-scrollbar
|
|
width: 0px
|
|
height: 0px
|
|
|
|
input:not([type="checkbox"]):not([type="radio"]), button
|
|
-webkit-appearance: none
|
|
-moz-appearance: none
|
|
appearance: none
|
|
-webkit-touch-callout: none
|
|
-webkit-tap-highlight-color: rgba(255, 255, 255, 0)
|
|
outline: none
|