react-toolbox/source/styles/__constants.styl

43 lines
1.4 KiB
Stylus

@import url("http://fonts.googleapis.com/css?family=Roboto:200,300,700")
// -- Colors
COLOR = #222222
BACKGROUND = #F5F5F5
THEME = #00bcd4
WHITE = #ffffff
PRIMARY = rgb(255, 64, 129)
CANCEL = #f44336
// -- 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 = 200
FONT_WEIGHT_NORMAL = 300
FONT_WEIGHT_BOLD = 700
// -- Sizes
UNIT = 4rem
SPACE = (UNIT * 0.29)
OFFSET = (UNIT * 1.35)
HEADER_HEIGHT = 33vh
BUTTON_HEIGHT = (2.5 * SPACE)
BUTTON_CIRCLE_HEIGHT = (2.75 * SPACE)
BORDER_RADIUS = (SPACE / 2)
H1_SHADOW = (SPACE / 6) (SPACE / 6) rgba(0,0,0,0.2)
// -- Shadows
HEADER_SHADOW = 0 2px 5px rgba(0,0,0,0.26)
BUTTON_SHADOW = 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24)
// -- Animations
ANIMATION_DURATION = 450ms
ANIMATION_EASE = cubic-bezier(.55,0,.1,1)
ANIMATION_DELAY = (ANIMATION_DURATION / 5)