1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
$xs-device-width: 480px
$sm-device-width: 768px
$md-device-width: 1150px
$colors: ('primary': #333, 'light': #999, 'dark': #000, 'medium': #555, 'error': #b94a48)
$link-colors: ('primary': #3366CC, 'focus': #DF5353, 'hover': #333)
$background-colors: ('primary': #fbfbfb, 'light': #fcfcfc)
$alert-colors: ('default': #c09853, 'success': #468847, 'error': #b94a48, 'info': #3a87ad, 'normal': #333)
$alert-background-colors: ('default': #fcf8e3, 'success': #dff0d8, 'error': #f2dede, 'info': #d9edf7, 'normal': #f0f0f0)
$alert-border-colors: ('default': #fbeed5, 'success': #d6e9c6, 'error': #eed3d7, 'info': #bce8f1, 'normal': #ddd)
$button-colors: ('default': #333, 'red': #fff, 'blue': #fff, 'disabled': #ccc)
$button-background-colors: ('default': #f5f5f5, 'red': #d14836, 'blue': #4d90fe, 'disabled': #f7f7f7)
$button-border-colors: ('default': #ddd, 'red': #b0281a, 'blue': #3079ed, 'disabled': #ccc)
$button-hover-colors: ('default': #000, 'red': #fff, 'blue': #fff)
$button-hover-background-colors: ('default': #fafafa, 'red': #c53727, 'blue': #357ae8)
$button-hover-border-colors: ('default': #bbb, 'red': #b0281a, 'blue': #3079ed)
$font-sizes: ('normal': 1.0em, 'tiny': 0.7em, 'small': 0.8em, 'compact': 0.9em, 'medium': 1.2em, 'large': 1.4em, 'xlarge': 1.6em, 'title': 1.5em)
$text-font: 'Helvetica Neue', Helvetica, Arial, sans-serif
$board-task-limit-color: #DF5353
@function size($key)
@return map-get($font-sizes, $key)
@function color($key: 'primary')
@return map-get($colors, $key)
@function link-color($key: 'primary')
@return map-get($link-colors, $key)
@function bg-color($key: 'primary')
@return map-get($background-colors, $key)
@function alert-color($key)
@return map-get($alert-colors, $key)
@function alert-bg-color($key)
@return map-get($alert-background-colors, $key)
@function alert-border-color($key)
@return map-get($alert-border-colors, $key)
@function button-color($key)
@return map-get($button-colors, $key)
@function button-bg-color($key)
@return map-get($button-background-colors, $key)
@function button-border-color($key)
@return map-get($button-border-colors, $key)
@function button-hover-color($key)
@return map-get($button-hover-colors, $key)
@function button-hover-bg-color($key)
@return map-get($button-hover-background-colors, $key)
@function button-hover-border-color($key)
@return map-get($button-hover-border-colors, $key)
=appearance
-webkit-appearance: none
-moz-appearance: none
=display-flex
display: -webkit-flex
display: flex
=flex-direction($direction)
-webkit-flex-direction: $direction
flex-direction: $direction
=flex-wrap
-webkit-flex-wrap: wrap
flex-wrap: wrap
=align-content($position)
-webkit-align-items: $position
align-items: $position
-webkit-justify-content: $position
justify-content: $position
|
