react-toolbox/components/constants.styl

60 lines
2.1 KiB
Stylus

// -- Colors
PRIMARY = #E91E63
PRIMARY_DARK = darken(PRIMARY, 25%)
PRIMARY_LIGHT = lighten(PRIMARY, 25%)
ACCENT = #03A9F4
TEXT = #212121
TEXT_ACCENT = #727272
DIVIDER = lighten(#B6B6B6, 75%)
BACKGROUND = #ffffff
WHITE = #ffffff
SUCCESS = #4CAF50
CANCEL = #F44336
WARNING = #FFC107
// -- 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)
INPUT_HEIGHT = (2 * SPACE)
BUTTON_HEIGHT = (2.5 * SPACE)
BUTTON_CIRCLE_HEIGHT = (2.75 * SPACE)
BUTTON_CIRCLE_MINI_HEIGHT = (2 * SPACE)
LOADING_HEIGHT = (1.5 * UNIT)
PROGRESS_BAR_HEIGHT = (SPACE / 4)
// -- 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)
// -- Z Indexes
Z_INDEX_HIGHER = 200
Z_INDEX_HIGH = 100
Z_INDEX_NORMAL = 1
Z_INDEX_LOW = -100
Z_INDEX_LOWER = -200