-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathcolors.scss
124 lines (110 loc) · 3.92 KB
/
colors.scss
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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
$black: rgb(68, 68, 68);
/* Yellows */
$kournikova: rgb(248, 214, 98);
/* Oranges */
$sunshade: rgb(249, 169, 74);
$california: rgb(233, 149, 59);
/* Blues (Damn right I've got them) */
$arapawa: rgb(44, 71, 98);
$dark-cerulean: rgb(6, 101, 145);
$steel-blue: rgb(72, 117, 180);
$deep-sky-blue: rgb(51, 204, 255);
$cerulean-blue: rgb(47, 114, 196);
$cerulean-blue-light: rgb(40, 93, 167);
$summer-sky: rgb(48, 176, 226);
$big-stone: rgb(51, 69, 78);
$pacific-blue: rgb(0, 141, 222);
/* Reds */
$red: rgb(239, 14, 17);
$deep-pink: rgb(255, 0, 132);
$chilean-fire: rgb(211, 72, 54);
$free-speech-red: rgb(168, 36, 0);
$free-speech-red-dark: rgb(192, 0, 0);
$free-speech-red-darker: rgb(196, 18, 0);
$cardinal: rgb(203, 32, 39);
/* Greens (Eat them... They're good for you!) */
$medium-sea-green: rgb(47, 178, 91);
/* We are Grey; we stand between the candle and the light */
$dark-grey: rgb(51, 51, 51); // #333
$med-dark-grey: rgb(137, 137, 137); // #888
$medium-grey: rgb(200, 200, 200); // #c8c8c8
$light-grey: rgb(232, 232, 232); // #e8e8e8
// to remove
$faint-grey: rgb(232, 232, 232);
$slight-grey: rgb(247, 247, 247);
$traackr-light-red: rgb(242, 110, 66);
$traackr-green: rgb(193, 216, 47);
/* Traackr Colors */
$traackr-logo: rgb(240, 76, 60); // #f04c3c
$traackr-red: rgb(244, 98, 64); //#f46240
$traackr-dark-red: rgb(240, 76, 60); // #f04c3c
$traackr-yellow: rgb(255, 219, 63); // #ffdb3f
$traackr-teal: rgb(67, 180, 194); // #43b4c2
$traackr-blue-grey: rgb(103, 112, 128); // #677080
$traackr-nav-grey: rgb(91, 94, 100); // #5b5e64
$traackr-blue: rgb(109, 197, 213); // #6DC5D5
/* Social Networks */
$traackr-social-twitter: $deep-sky-blue;
$traackr-social-rss: $sunshade;
$traackr-social-email: $black;
$traackr-social-tumblr: $arapawa;
$traackr-social-facebook: $dark-cerulean;
$traackr-social-youtube: $red;
$traackr-social-linkedin: $steel-blue;
$traackr-social-flickr: $deep-pink;
$traackr-social-googleplus: $chilean-fire;
$traackr-social-quora: $free-speech-red;
$traackr-social-share: $california;
$traackr-social-lastfm: $free-speech-red-dark;
$traackr-social-friendfeed: $cerulean-blue;
$traackr-social-microsoft: $cerulean-blue-light;
$traackr-social-posterous: $kournikova;
$traackr-social-pinterest: $cardinal;
$traackr-social-stumbleupon: $medium-sea-green;
$traackr-social-foursquare: $summer-sky;
$traackr-social-yelp: $free-speech-red-darker;
$traackr-social-vimeo: $big-stone;
$traackr-social-myspace: $pacific-blue;
$traackr-social-compose: $black;
/* Relationship Stages */
$traackr-stage-1: #fcb69a;
$traackr-stage-2: #fba481;
$traackr-stage-3: #fa9267;
$traackr-stage-4: #f9804e;
$traackr-stage-5: $traackr-red;
$traackr-stage-6: $traackr-red;
/*
* The list of gradients represent percentage to 3 sig digits, multiplied by 1000. These are keys that correspond
* with the percentages of a stage out of the whole, and they map to a percent lightness for each stage in the funnel.
*/
/* Relationship Stage Gradients */
$traackr-stage-highest: $traackr-red;
$list-stage-gradients: 8333, 10000, 12500, 16666, 16667, 20000, 24999, 25000, 30000, 33332, 33334, 37500, 40000, 41665;
@for $i from 1 through (length($list-stage-gradients)) {
$val: nth($list-stage-gradients, $i);
$valPerc: percentage($val/170000);
.traackr-stage-background-#{$val} {
background-color: lighten($traackr-red, $valPerc);
}
.traackr-stage-font-#{$val} {
color: lighten($traackr-red, $valPerc);
}
.traackr-stage-background-highest {
background-color: $traackr-stage-highest;
}
.traackr-stage-font-highest {
color: $traackr-stage-highest;
}
.stage-slider {
.ui-slider-label-ticks {
&.traackr-stage-background-#{$val} {
background: lighten($traackr-red, $valPerc);
&.clear {
background: #fff;
border: 1px solid lighten($traackr-red, $valPerc);
border-left: 0;
}
}
}
}
}