material_design_lite-sass 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/.gitignore +11 -0
- data/.rspec +2 -0
- data/.travis.yml +11 -0
- data/CHANGELOG.md +5 -0
- data/Gemfile +4 -0
- data/LICENSE.txt +21 -0
- data/README.md +108 -0
- data/Rakefile +4 -0
- data/bin/console +14 -0
- data/bin/setup +7 -0
- data/lib/material_design_lite-sass.rb +46 -0
- data/lib/material_design_lite/sass/engine.rb +13 -0
- data/lib/material_design_lite/sass/version.rb +5 -0
- data/material_design_lite-sass.gemspec +28 -0
- data/vendor/assets/javascripts/material.js +3919 -0
- data/vendor/assets/javascripts/material/button.js +132 -0
- data/vendor/assets/javascripts/material/checkbox.js +265 -0
- data/vendor/assets/javascripts/material/data-table.js +149 -0
- data/vendor/assets/javascripts/material/icon-toggle.js +248 -0
- data/vendor/assets/javascripts/material/layout.js +434 -0
- data/vendor/assets/javascripts/material/mdlComponentHandler.js +346 -0
- data/vendor/assets/javascripts/material/menu.js +468 -0
- data/vendor/assets/javascripts/material/progress.js +116 -0
- data/vendor/assets/javascripts/material/rAF.js +38 -0
- data/vendor/assets/javascripts/material/radio.js +257 -0
- data/vendor/assets/javascripts/material/ripple.js +244 -0
- data/vendor/assets/javascripts/material/slider.js +252 -0
- data/vendor/assets/javascripts/material/spinner.js +140 -0
- data/vendor/assets/javascripts/material/switch.js +269 -0
- data/vendor/assets/javascripts/material/tabs.js +152 -0
- data/vendor/assets/javascripts/material/textfield.js +247 -0
- data/vendor/assets/javascripts/material/tooltip.js +146 -0
- data/vendor/assets/stylesheets/_material.scss +50 -0
- data/vendor/assets/stylesheets/material/_animation.scss +34 -0
- data/vendor/assets/stylesheets/material/_badge.scss +66 -0
- data/vendor/assets/stylesheets/material/_button.scss +298 -0
- data/vendor/assets/stylesheets/material/_card.scss +111 -0
- data/vendor/assets/stylesheets/material/_checkbox.scss +175 -0
- data/vendor/assets/stylesheets/material/_color-definitions.scss +599 -0
- data/vendor/assets/stylesheets/material/_data-table.scss +105 -0
- data/vendor/assets/stylesheets/material/_functions.scss +3 -0
- data/vendor/assets/stylesheets/material/_grid.scss +180 -0
- data/vendor/assets/stylesheets/material/_icon-toggle.scss +121 -0
- data/vendor/assets/stylesheets/material/_layout.scss +580 -0
- data/vendor/assets/stylesheets/material/_mega_footer.scss +309 -0
- data/vendor/assets/stylesheets/material/_menu.scss +193 -0
- data/vendor/assets/stylesheets/material/_mini_footer.scss +88 -0
- data/vendor/assets/stylesheets/material/_mixins.scss +268 -0
- data/vendor/assets/stylesheets/material/_palette.scss +2303 -0
- data/vendor/assets/stylesheets/material/_progress.scss +115 -0
- data/vendor/assets/stylesheets/material/_radio.scss +155 -0
- data/vendor/assets/stylesheets/material/_resets.scss +55 -0
- data/vendor/assets/stylesheets/material/_ripple.scss +42 -0
- data/vendor/assets/stylesheets/material/_shadow.scss +42 -0
- data/vendor/assets/stylesheets/material/_slider.scss +396 -0
- data/vendor/assets/stylesheets/material/_spinner.scss +248 -0
- data/vendor/assets/stylesheets/material/_switch.scss +199 -0
- data/vendor/assets/stylesheets/material/_tabs.scss +115 -0
- data/vendor/assets/stylesheets/material/_textfield.scss +190 -0
- data/vendor/assets/stylesheets/material/_tooltip.scss +66 -0
- data/vendor/assets/stylesheets/material/_typography.scss +297 -0
- data/vendor/assets/stylesheets/material/_variables.scss +572 -0
- data/vendor/assets/stylesheets/material/resets/_h5bp.scss +284 -0
- data/vendor/assets/stylesheets/material/resets/_mobile.scss +25 -0
- metadata +151 -0
@@ -0,0 +1,111 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright 2015 Google Inc. All Rights Reserved.
|
3
|
+
*
|
4
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
5
|
+
* you may not use this file except in compliance with the License.
|
6
|
+
* You may obtain a copy of the License at
|
7
|
+
*
|
8
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
9
|
+
*
|
10
|
+
* Unless required by applicable law or agreed to in writing, software
|
11
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
12
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
13
|
+
* See the License for the specific language governing permissions and
|
14
|
+
* limitations under the License.
|
15
|
+
*/
|
16
|
+
|
17
|
+
@import "variables";
|
18
|
+
|
19
|
+
.mdl-card {
|
20
|
+
display: flex;
|
21
|
+
flex-direction: column;
|
22
|
+
font-size: $card-font-size;
|
23
|
+
font-weight: 400;
|
24
|
+
min-height: $card-height;
|
25
|
+
overflow: hidden;
|
26
|
+
width: $card-width;
|
27
|
+
z-index: $card-z-index;
|
28
|
+
position: relative;
|
29
|
+
background: $card-background-color;
|
30
|
+
border-radius: 2px;
|
31
|
+
box-sizing: border-box;
|
32
|
+
}
|
33
|
+
|
34
|
+
.mdl-card__media {
|
35
|
+
background-color: $card-image-placeholder-color;
|
36
|
+
background-repeat: repeat;
|
37
|
+
background-position: 50% 50%;
|
38
|
+
background-size: cover;
|
39
|
+
background-origin: padding-box;
|
40
|
+
background-attachment: scroll;
|
41
|
+
box-sizing: border-box;
|
42
|
+
}
|
43
|
+
|
44
|
+
.mdl-card__title {
|
45
|
+
align-items: center;
|
46
|
+
color: $card-text-color;
|
47
|
+
display: block;
|
48
|
+
display: flex;
|
49
|
+
justify-content: stretch;
|
50
|
+
line-height: normal;
|
51
|
+
padding: $card-vertical-padding $card-horizontal-padding;
|
52
|
+
perspective-origin: $card-title-perspective-origin-x $card-title-perspective-origin-y;
|
53
|
+
transform-origin: $card-title-transform-origin-x $card-title-transform-origin-y;
|
54
|
+
box-sizing: border-box;
|
55
|
+
|
56
|
+
&.mdl-card--border {
|
57
|
+
border-bottom: 1px solid $card-border-color;
|
58
|
+
}
|
59
|
+
}
|
60
|
+
|
61
|
+
.mdl-card__title-text {
|
62
|
+
align-self: flex-end;
|
63
|
+
color: inherit;
|
64
|
+
display: block;
|
65
|
+
display: flex;
|
66
|
+
font-size: $card-title-font-size;
|
67
|
+
font-weight: $card-title-text-font-weight;
|
68
|
+
line-height: normal;
|
69
|
+
overflow: hidden;
|
70
|
+
transform-origin: $card-title-text-transform-origin-x $card-title-text-transform-origin-y;
|
71
|
+
margin: 0;
|
72
|
+
}
|
73
|
+
|
74
|
+
.mdl-card__subtitle-text {
|
75
|
+
font-size: 14px;
|
76
|
+
color: grey;
|
77
|
+
margin: 0;
|
78
|
+
}
|
79
|
+
|
80
|
+
.mdl-card__supporting-text {
|
81
|
+
color: $card-supporting-text-text-color;
|
82
|
+
font-size: $card-supporting-text-font-size;
|
83
|
+
line-height: $card-supporting-text-line-height;
|
84
|
+
overflow: hidden;
|
85
|
+
padding: $card-vertical-padding $card-horizontal-padding;
|
86
|
+
width: 90%;
|
87
|
+
}
|
88
|
+
|
89
|
+
.mdl-card__actions {
|
90
|
+
font-size: $card-actions-font-size;
|
91
|
+
line-height: normal;
|
92
|
+
width: 100%;
|
93
|
+
background-color: rgba(0,0,0,0);
|
94
|
+
padding: 8px;
|
95
|
+
box-sizing: border-box;
|
96
|
+
|
97
|
+
&.mdl-card--border {
|
98
|
+
border-top: 1px solid $card-border-color;
|
99
|
+
}
|
100
|
+
}
|
101
|
+
|
102
|
+
.mdl-card--expand {
|
103
|
+
flex-grow: 1;
|
104
|
+
}
|
105
|
+
|
106
|
+
|
107
|
+
.mdl-card__menu {
|
108
|
+
position: absolute;
|
109
|
+
right: 16px;
|
110
|
+
top: 16px;
|
111
|
+
}
|
@@ -0,0 +1,175 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright 2015 Google Inc. All Rights Reserved.
|
3
|
+
*
|
4
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
5
|
+
* you may not use this file except in compliance with the License.
|
6
|
+
* You may obtain a copy of the License at
|
7
|
+
*
|
8
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
9
|
+
*
|
10
|
+
* Unless required by applicable law or agreed to in writing, software
|
11
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
12
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
13
|
+
* See the License for the specific language governing permissions and
|
14
|
+
* limitations under the License.
|
15
|
+
*/
|
16
|
+
|
17
|
+
@import "variables";
|
18
|
+
@import "mixins";
|
19
|
+
|
20
|
+
.mdl-checkbox {
|
21
|
+
position: relative;
|
22
|
+
|
23
|
+
z-index: 1;
|
24
|
+
|
25
|
+
vertical-align: middle;
|
26
|
+
|
27
|
+
display: inline-block;
|
28
|
+
|
29
|
+
box-sizing: border-box;
|
30
|
+
width: 100%;
|
31
|
+
height: $checkbox-label-height;
|
32
|
+
margin: 0;
|
33
|
+
padding: 0;
|
34
|
+
|
35
|
+
&.is-upgraded {
|
36
|
+
padding-left: $checkbox-button-size + $checkbox-padding;
|
37
|
+
}
|
38
|
+
}
|
39
|
+
|
40
|
+
.mdl-checkbox__input {
|
41
|
+
line-height: $checkbox-label-height;
|
42
|
+
|
43
|
+
.mdl-checkbox.is-upgraded & {
|
44
|
+
// Hide input element, while still making it respond to focus.
|
45
|
+
position: absolute;
|
46
|
+
width: 0;
|
47
|
+
height: 0;
|
48
|
+
margin: 0;
|
49
|
+
padding: 0;
|
50
|
+
opacity: 0;
|
51
|
+
-ms-appearance: none;
|
52
|
+
-moz-appearance: none;
|
53
|
+
-webkit-appearance: none;
|
54
|
+
appearance: none;
|
55
|
+
border: none;
|
56
|
+
}
|
57
|
+
}
|
58
|
+
|
59
|
+
.mdl-checkbox__box-outline {
|
60
|
+
position: absolute;
|
61
|
+
top: $checkbox-top-offset;
|
62
|
+
left: 0;
|
63
|
+
|
64
|
+
display: inline-block;
|
65
|
+
|
66
|
+
box-sizing: border-box;
|
67
|
+
width: $checkbox-button-size;
|
68
|
+
height: $checkbox-button-size;
|
69
|
+
margin: 0;
|
70
|
+
|
71
|
+
cursor: pointer;
|
72
|
+
overflow: hidden;
|
73
|
+
|
74
|
+
border: 2px solid $checkbox-off-color;
|
75
|
+
border-radius: 2px;
|
76
|
+
|
77
|
+
z-index: 2;
|
78
|
+
|
79
|
+
.mdl-checkbox.is-checked & {
|
80
|
+
border: 2px solid $checkbox-color;
|
81
|
+
}
|
82
|
+
|
83
|
+
.mdl-checkbox.is-disabled & {
|
84
|
+
border: 2px solid $checkbox-disabled-color;
|
85
|
+
cursor: auto;
|
86
|
+
}
|
87
|
+
}
|
88
|
+
|
89
|
+
.mdl-checkbox__focus-helper {
|
90
|
+
position: absolute;
|
91
|
+
top: $checkbox-top-offset;
|
92
|
+
left: 0;
|
93
|
+
|
94
|
+
display: inline-block;
|
95
|
+
|
96
|
+
box-sizing: border-box;
|
97
|
+
width: $checkbox-button-size;
|
98
|
+
height: $checkbox-button-size;
|
99
|
+
border-radius: 50%;
|
100
|
+
|
101
|
+
background-color: transparent;
|
102
|
+
|
103
|
+
.mdl-checkbox.is-focused & {
|
104
|
+
box-shadow: 0 0 0px ($checkbox-button-size / 2) rgba(0, 0, 0, 0.1);
|
105
|
+
background-color: rgba(0, 0, 0, 0.1);
|
106
|
+
}
|
107
|
+
|
108
|
+
.mdl-checkbox.is-focused.is-checked & {
|
109
|
+
box-shadow: 0 0 0px ($checkbox-button-size / 2) $checkbox-focus-color;
|
110
|
+
background-color: $checkbox-focus-color;
|
111
|
+
}
|
112
|
+
}
|
113
|
+
|
114
|
+
.mdl-checkbox__tick-outline {
|
115
|
+
position: absolute;
|
116
|
+
top: 0;
|
117
|
+
left: 0;
|
118
|
+
height: 100%;
|
119
|
+
width: 100%;
|
120
|
+
mask: url("/images/tick-mask.svg?embed");
|
121
|
+
|
122
|
+
background: transparent;
|
123
|
+
@include material-animation-default(0.28s);
|
124
|
+
transition-property: background;
|
125
|
+
|
126
|
+
.mdl-checkbox.is-checked & {
|
127
|
+
background: $checkbox-color url("/images/tick.svg?embed");
|
128
|
+
}
|
129
|
+
|
130
|
+
.mdl-checkbox.is-checked.is-disabled & {
|
131
|
+
background: $checkbox-disabled-color url("/images/tick.svg?embed");
|
132
|
+
}
|
133
|
+
}
|
134
|
+
|
135
|
+
.mdl-checkbox__label {
|
136
|
+
position: relative;
|
137
|
+
cursor: pointer;
|
138
|
+
font-size: 16px;
|
139
|
+
line-height: $checkbox-label-height;
|
140
|
+
margin: 0;
|
141
|
+
|
142
|
+
.mdl-checkbox.is-disabled & {
|
143
|
+
color: $checkbox-disabled-color;
|
144
|
+
cursor: auto;
|
145
|
+
}
|
146
|
+
}
|
147
|
+
|
148
|
+
.mdl-checkbox__ripple-container {
|
149
|
+
position: absolute;
|
150
|
+
z-index: 2;
|
151
|
+
top: -(($checkbox-ripple-size - $checkbox-label-height) / 2);
|
152
|
+
left: -(($checkbox-ripple-size - $checkbox-button-size) / 2);
|
153
|
+
|
154
|
+
box-sizing: border-box;
|
155
|
+
width: $checkbox-ripple-size;
|
156
|
+
height: $checkbox-ripple-size;
|
157
|
+
border-radius: 50%;
|
158
|
+
|
159
|
+
cursor: pointer;
|
160
|
+
|
161
|
+
overflow: hidden;
|
162
|
+
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
|
163
|
+
|
164
|
+
& .mdl-ripple {
|
165
|
+
background: $checkbox-color;
|
166
|
+
}
|
167
|
+
|
168
|
+
.mdl-checkbox.is-disabled & {
|
169
|
+
cursor: auto;
|
170
|
+
}
|
171
|
+
|
172
|
+
.mdl-checkbox.is-disabled & .mdl-ripple {
|
173
|
+
background: transparent;
|
174
|
+
}
|
175
|
+
}
|
@@ -0,0 +1,599 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright 2015 Google Inc. All Rights Reserved.
|
3
|
+
*
|
4
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
5
|
+
* you may not use this file except in compliance with the License.
|
6
|
+
* You may obtain a copy of the License at
|
7
|
+
*
|
8
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
9
|
+
*
|
10
|
+
* Unless required by applicable law or agreed to in writing, software
|
11
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
12
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
13
|
+
* See the License for the specific language governing permissions and
|
14
|
+
* limitations under the License.
|
15
|
+
*/
|
16
|
+
|
17
|
+
/* ========== Color Palettes ========== */
|
18
|
+
|
19
|
+
// Color order: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200,
|
20
|
+
// A400, A700.
|
21
|
+
|
22
|
+
$palette-red:
|
23
|
+
"255,235,238"
|
24
|
+
"255,205,210"
|
25
|
+
"239,154,154"
|
26
|
+
"229,115,115"
|
27
|
+
"239,83,80"
|
28
|
+
"244,67,54"
|
29
|
+
"229,57,53"
|
30
|
+
"211,47,47"
|
31
|
+
"198,40,40"
|
32
|
+
"183,28,28"
|
33
|
+
"255,138,128"
|
34
|
+
"255,82,82"
|
35
|
+
"255,23,68"
|
36
|
+
"213,0,0";
|
37
|
+
|
38
|
+
$palette-red-50: nth($palette-red, 1);
|
39
|
+
$palette-red-100: nth($palette-red, 2);
|
40
|
+
$palette-red-200: nth($palette-red, 3);
|
41
|
+
$palette-red-300: nth($palette-red, 4);
|
42
|
+
$palette-red-400: nth($palette-red, 5);
|
43
|
+
$palette-red-500: nth($palette-red, 6);
|
44
|
+
$palette-red-600: nth($palette-red, 7);
|
45
|
+
$palette-red-700: nth($palette-red, 8);
|
46
|
+
$palette-red-800: nth($palette-red, 9);
|
47
|
+
$palette-red-900: nth($palette-red, 10);
|
48
|
+
$palette-red-A100: nth($palette-red, 11);
|
49
|
+
$palette-red-A200: nth($palette-red, 12);
|
50
|
+
$palette-red-A400: nth($palette-red, 13);
|
51
|
+
$palette-red-A700: nth($palette-red, 14);
|
52
|
+
|
53
|
+
$palette-pink:
|
54
|
+
"252,228,236"
|
55
|
+
"248,187,208"
|
56
|
+
"244,143,177"
|
57
|
+
"240,98,146"
|
58
|
+
"236,64,122"
|
59
|
+
"233,30,99"
|
60
|
+
"216,27,96"
|
61
|
+
"194,24,91"
|
62
|
+
"173,20,87"
|
63
|
+
"136,14,79"
|
64
|
+
"255,128,171"
|
65
|
+
"255,64,129"
|
66
|
+
"245,0,87"
|
67
|
+
"197,17,98";
|
68
|
+
|
69
|
+
$palette-pink-50: nth($palette-pink, 1);
|
70
|
+
$palette-pink-100: nth($palette-pink, 2);
|
71
|
+
$palette-pink-200: nth($palette-pink, 3);
|
72
|
+
$palette-pink-300: nth($palette-pink, 4);
|
73
|
+
$palette-pink-400: nth($palette-pink, 5);
|
74
|
+
$palette-pink-500: nth($palette-pink, 6);
|
75
|
+
$palette-pink-600: nth($palette-pink, 7);
|
76
|
+
$palette-pink-700: nth($palette-pink, 8);
|
77
|
+
$palette-pink-800: nth($palette-pink, 9);
|
78
|
+
$palette-pink-900: nth($palette-pink, 10);
|
79
|
+
$palette-pink-A100: nth($palette-pink, 11);
|
80
|
+
$palette-pink-A200: nth($palette-pink, 12);
|
81
|
+
$palette-pink-A400: nth($palette-pink, 13);
|
82
|
+
$palette-pink-A700: nth($palette-pink, 14);
|
83
|
+
|
84
|
+
$palette-purple:
|
85
|
+
"243,229,245"
|
86
|
+
"225,190,231"
|
87
|
+
"206,147,216"
|
88
|
+
"186,104,200"
|
89
|
+
"171,71,188"
|
90
|
+
"156,39,176"
|
91
|
+
"142,36,170"
|
92
|
+
"123,31,162"
|
93
|
+
"106,27,154"
|
94
|
+
"74,20,140"
|
95
|
+
"234,128,252"
|
96
|
+
"224,64,251"
|
97
|
+
"213,0,249"
|
98
|
+
"170,0,255";
|
99
|
+
|
100
|
+
$palette-purple-50: nth($palette-purple, 1);
|
101
|
+
$palette-purple-100: nth($palette-purple, 2);
|
102
|
+
$palette-purple-200: nth($palette-purple, 3);
|
103
|
+
$palette-purple-300: nth($palette-purple, 4);
|
104
|
+
$palette-purple-400: nth($palette-purple, 5);
|
105
|
+
$palette-purple-500: nth($palette-purple, 6);
|
106
|
+
$palette-purple-600: nth($palette-purple, 7);
|
107
|
+
$palette-purple-700: nth($palette-purple, 8);
|
108
|
+
$palette-purple-800: nth($palette-purple, 9);
|
109
|
+
$palette-purple-900: nth($palette-purple, 10);
|
110
|
+
$palette-purple-A100: nth($palette-purple, 11);
|
111
|
+
$palette-purple-A200: nth($palette-purple, 12);
|
112
|
+
$palette-purple-A400: nth($palette-purple, 13);
|
113
|
+
$palette-purple-A700: nth($palette-purple, 14);
|
114
|
+
|
115
|
+
$palette-deep-purple:
|
116
|
+
"237,231,246"
|
117
|
+
"209,196,233"
|
118
|
+
"179,157,219"
|
119
|
+
"149,117,205"
|
120
|
+
"126,87,194"
|
121
|
+
"103,58,183"
|
122
|
+
"94,53,177"
|
123
|
+
"81,45,168"
|
124
|
+
"69,39,160"
|
125
|
+
"49,27,146"
|
126
|
+
"179,136,255"
|
127
|
+
"124,77,255"
|
128
|
+
"101,31,255"
|
129
|
+
"98,0,234";
|
130
|
+
|
131
|
+
$palette-deep-purple-50: nth($palette-deep-purple, 1);
|
132
|
+
$palette-deep-purple-100: nth($palette-deep-purple, 2);
|
133
|
+
$palette-deep-purple-200: nth($palette-deep-purple, 3);
|
134
|
+
$palette-deep-purple-300: nth($palette-deep-purple, 4);
|
135
|
+
$palette-deep-purple-400: nth($palette-deep-purple, 5);
|
136
|
+
$palette-deep-purple-500: nth($palette-deep-purple, 6);
|
137
|
+
$palette-deep-purple-600: nth($palette-deep-purple, 7);
|
138
|
+
$palette-deep-purple-700: nth($palette-deep-purple, 8);
|
139
|
+
$palette-deep-purple-800: nth($palette-deep-purple, 9);
|
140
|
+
$palette-deep-purple-900: nth($palette-deep-purple, 10);
|
141
|
+
$palette-deep-purple-A100: nth($palette-deep-purple, 11);
|
142
|
+
$palette-deep-purple-A200: nth($palette-deep-purple, 12);
|
143
|
+
$palette-deep-purple-A400: nth($palette-deep-purple, 13);
|
144
|
+
$palette-deep-purple-A700: nth($palette-deep-purple, 14);
|
145
|
+
|
146
|
+
$palette-indigo:
|
147
|
+
"232,234,246"
|
148
|
+
"197,202,233"
|
149
|
+
"159,168,218"
|
150
|
+
"121,134,203"
|
151
|
+
"92,107,192"
|
152
|
+
"63,81,181"
|
153
|
+
"57,73,171"
|
154
|
+
"48,63,159"
|
155
|
+
"40,53,147"
|
156
|
+
"26,35,126"
|
157
|
+
"140,158,255"
|
158
|
+
"83,109,254"
|
159
|
+
"61,90,254"
|
160
|
+
"48,79,254";
|
161
|
+
|
162
|
+
$palette-indigo-50: nth($palette-indigo, 1);
|
163
|
+
$palette-indigo-100: nth($palette-indigo, 2);
|
164
|
+
$palette-indigo-200: nth($palette-indigo, 3);
|
165
|
+
$palette-indigo-300: nth($palette-indigo, 4);
|
166
|
+
$palette-indigo-400: nth($palette-indigo, 5);
|
167
|
+
$palette-indigo-500: nth($palette-indigo, 6);
|
168
|
+
$palette-indigo-600: nth($palette-indigo, 7);
|
169
|
+
$palette-indigo-700: nth($palette-indigo, 8);
|
170
|
+
$palette-indigo-800: nth($palette-indigo, 9);
|
171
|
+
$palette-indigo-900: nth($palette-indigo, 10);
|
172
|
+
$palette-indigo-A100: nth($palette-indigo, 11);
|
173
|
+
$palette-indigo-A200: nth($palette-indigo, 12);
|
174
|
+
$palette-indigo-A400: nth($palette-indigo, 13);
|
175
|
+
$palette-indigo-A700: nth($palette-indigo, 14);
|
176
|
+
|
177
|
+
$palette-blue:
|
178
|
+
"227,242,253"
|
179
|
+
"187,222,251"
|
180
|
+
"144,202,249"
|
181
|
+
"100,181,246"
|
182
|
+
"66,165,245"
|
183
|
+
"33,150,243"
|
184
|
+
"30,136,229"
|
185
|
+
"25,118,210"
|
186
|
+
"21,101,192"
|
187
|
+
"13,71,161"
|
188
|
+
"130,177,255"
|
189
|
+
"68,138,255"
|
190
|
+
"41,121,255"
|
191
|
+
"41,98,255";
|
192
|
+
|
193
|
+
$palette-blue-50: nth($palette-blue, 1);
|
194
|
+
$palette-blue-100: nth($palette-blue, 2);
|
195
|
+
$palette-blue-200: nth($palette-blue, 3);
|
196
|
+
$palette-blue-300: nth($palette-blue, 4);
|
197
|
+
$palette-blue-400: nth($palette-blue, 5);
|
198
|
+
$palette-blue-500: nth($palette-blue, 6);
|
199
|
+
$palette-blue-600: nth($palette-blue, 7);
|
200
|
+
$palette-blue-700: nth($palette-blue, 8);
|
201
|
+
$palette-blue-800: nth($palette-blue, 9);
|
202
|
+
$palette-blue-900: nth($palette-blue, 10);
|
203
|
+
$palette-blue-A100: nth($palette-blue, 11);
|
204
|
+
$palette-blue-A200: nth($palette-blue, 12);
|
205
|
+
$palette-blue-A400: nth($palette-blue, 13);
|
206
|
+
$palette-blue-A700: nth($palette-blue, 14);
|
207
|
+
|
208
|
+
$palette-light-blue:
|
209
|
+
"225,245,254"
|
210
|
+
"179,229,252"
|
211
|
+
"129,212,250"
|
212
|
+
"79,195,247"
|
213
|
+
"41,182,246"
|
214
|
+
"3,169,244"
|
215
|
+
"3,155,229"
|
216
|
+
"2,136,209"
|
217
|
+
"2,119,189"
|
218
|
+
"1,87,155"
|
219
|
+
"128,216,255"
|
220
|
+
"64,196,255"
|
221
|
+
"0,176,255"
|
222
|
+
"0,145,234";
|
223
|
+
|
224
|
+
$palette-light-blue-50: nth($palette-light-blue, 1);
|
225
|
+
$palette-light-blue-100: nth($palette-light-blue, 2);
|
226
|
+
$palette-light-blue-200: nth($palette-light-blue, 3);
|
227
|
+
$palette-light-blue-300: nth($palette-light-blue, 4);
|
228
|
+
$palette-light-blue-400: nth($palette-light-blue, 5);
|
229
|
+
$palette-light-blue-500: nth($palette-light-blue, 6);
|
230
|
+
$palette-light-blue-600: nth($palette-light-blue, 7);
|
231
|
+
$palette-light-blue-700: nth($palette-light-blue, 8);
|
232
|
+
$palette-light-blue-800: nth($palette-light-blue, 9);
|
233
|
+
$palette-light-blue-900: nth($palette-light-blue, 10);
|
234
|
+
$palette-light-blue-A100: nth($palette-light-blue, 11);
|
235
|
+
$palette-light-blue-A200: nth($palette-light-blue, 12);
|
236
|
+
$palette-light-blue-A400: nth($palette-light-blue, 13);
|
237
|
+
$palette-light-blue-A700: nth($palette-light-blue, 14);
|
238
|
+
|
239
|
+
$palette-cyan:
|
240
|
+
"224,247,250"
|
241
|
+
"178,235,242"
|
242
|
+
"128,222,234"
|
243
|
+
"77,208,225"
|
244
|
+
"38,198,218"
|
245
|
+
"0,188,212"
|
246
|
+
"0,172,193"
|
247
|
+
"0,151,167"
|
248
|
+
"0,131,143"
|
249
|
+
"0,96,100"
|
250
|
+
"132,255,255"
|
251
|
+
"24,255,255"
|
252
|
+
"0,229,255"
|
253
|
+
"0,184,212";
|
254
|
+
|
255
|
+
$palette-cyan-50: nth($palette-cyan, 1);
|
256
|
+
$palette-cyan-100: nth($palette-cyan, 2);
|
257
|
+
$palette-cyan-200: nth($palette-cyan, 3);
|
258
|
+
$palette-cyan-300: nth($palette-cyan, 4);
|
259
|
+
$palette-cyan-400: nth($palette-cyan, 5);
|
260
|
+
$palette-cyan-500: nth($palette-cyan, 6);
|
261
|
+
$palette-cyan-600: nth($palette-cyan, 7);
|
262
|
+
$palette-cyan-700: nth($palette-cyan, 8);
|
263
|
+
$palette-cyan-800: nth($palette-cyan, 9);
|
264
|
+
$palette-cyan-900: nth($palette-cyan, 10);
|
265
|
+
$palette-cyan-A100: nth($palette-cyan, 11);
|
266
|
+
$palette-cyan-A200: nth($palette-cyan, 12);
|
267
|
+
$palette-cyan-A400: nth($palette-cyan, 13);
|
268
|
+
$palette-cyan-A700: nth($palette-cyan, 14);
|
269
|
+
|
270
|
+
$palette-teal:
|
271
|
+
"224,242,241"
|
272
|
+
"178,223,219"
|
273
|
+
"128,203,196"
|
274
|
+
"77,182,172"
|
275
|
+
"38,166,154"
|
276
|
+
"0,150,136"
|
277
|
+
"0,137,123"
|
278
|
+
"0,121,107"
|
279
|
+
"0,105,92"
|
280
|
+
"0,77,64"
|
281
|
+
"167,255,235"
|
282
|
+
"100,255,218"
|
283
|
+
"29,233,182"
|
284
|
+
"0,191,165";
|
285
|
+
|
286
|
+
$palette-teal-50: nth($palette-teal, 1);
|
287
|
+
$palette-teal-100: nth($palette-teal, 2);
|
288
|
+
$palette-teal-200: nth($palette-teal, 3);
|
289
|
+
$palette-teal-300: nth($palette-teal, 4);
|
290
|
+
$palette-teal-400: nth($palette-teal, 5);
|
291
|
+
$palette-teal-500: nth($palette-teal, 6);
|
292
|
+
$palette-teal-600: nth($palette-teal, 7);
|
293
|
+
$palette-teal-700: nth($palette-teal, 8);
|
294
|
+
$palette-teal-800: nth($palette-teal, 9);
|
295
|
+
$palette-teal-900: nth($palette-teal, 10);
|
296
|
+
$palette-teal-A100: nth($palette-teal, 11);
|
297
|
+
$palette-teal-A200: nth($palette-teal, 12);
|
298
|
+
$palette-teal-A400: nth($palette-teal, 13);
|
299
|
+
$palette-teal-A700: nth($palette-teal, 14);
|
300
|
+
|
301
|
+
$palette-green:
|
302
|
+
"232,245,233"
|
303
|
+
"200,230,201"
|
304
|
+
"165,214,167"
|
305
|
+
"129,199,132"
|
306
|
+
"102,187,106"
|
307
|
+
"76,175,80"
|
308
|
+
"67,160,71"
|
309
|
+
"56,142,60"
|
310
|
+
"46,125,50"
|
311
|
+
"27,94,32"
|
312
|
+
"185,246,202"
|
313
|
+
"105,240,174"
|
314
|
+
"0,230,118"
|
315
|
+
"0,200,83";
|
316
|
+
|
317
|
+
$palette-green-50: nth($palette-green, 1);
|
318
|
+
$palette-green-100: nth($palette-green, 2);
|
319
|
+
$palette-green-200: nth($palette-green, 3);
|
320
|
+
$palette-green-300: nth($palette-green, 4);
|
321
|
+
$palette-green-400: nth($palette-green, 5);
|
322
|
+
$palette-green-500: nth($palette-green, 6);
|
323
|
+
$palette-green-600: nth($palette-green, 7);
|
324
|
+
$palette-green-700: nth($palette-green, 8);
|
325
|
+
$palette-green-800: nth($palette-green, 9);
|
326
|
+
$palette-green-900: nth($palette-green, 10);
|
327
|
+
$palette-green-A100: nth($palette-green, 11);
|
328
|
+
$palette-green-A200: nth($palette-green, 12);
|
329
|
+
$palette-green-A400: nth($palette-green, 13);
|
330
|
+
$palette-green-A700: nth($palette-green, 14);
|
331
|
+
|
332
|
+
$palette-light-green:
|
333
|
+
"241,248,233"
|
334
|
+
"220,237,200"
|
335
|
+
"197,225,165"
|
336
|
+
"174,213,129"
|
337
|
+
"156,204,101"
|
338
|
+
"139,195,74"
|
339
|
+
"124,179,66"
|
340
|
+
"104,159,56"
|
341
|
+
"85,139,47"
|
342
|
+
"51,105,30"
|
343
|
+
"204,255,144"
|
344
|
+
"178,255,89"
|
345
|
+
"118,255,3"
|
346
|
+
"100,221,23";
|
347
|
+
|
348
|
+
$palette-light-green-50: nth($palette-light-green, 1);
|
349
|
+
$palette-light-green-100: nth($palette-light-green, 2);
|
350
|
+
$palette-light-green-200: nth($palette-light-green, 3);
|
351
|
+
$palette-light-green-300: nth($palette-light-green, 4);
|
352
|
+
$palette-light-green-400: nth($palette-light-green, 5);
|
353
|
+
$palette-light-green-500: nth($palette-light-green, 6);
|
354
|
+
$palette-light-green-600: nth($palette-light-green, 7);
|
355
|
+
$palette-light-green-700: nth($palette-light-green, 8);
|
356
|
+
$palette-light-green-800: nth($palette-light-green, 9);
|
357
|
+
$palette-light-green-900: nth($palette-light-green, 10);
|
358
|
+
$palette-light-green-A100: nth($palette-light-green, 11);
|
359
|
+
$palette-light-green-A200: nth($palette-light-green, 12);
|
360
|
+
$palette-light-green-A400: nth($palette-light-green, 13);
|
361
|
+
$palette-light-green-A700: nth($palette-light-green, 14);
|
362
|
+
|
363
|
+
$palette-lime:
|
364
|
+
"249,251,231"
|
365
|
+
"240,244,195"
|
366
|
+
"230,238,156"
|
367
|
+
"220,231,117"
|
368
|
+
"212,225,87"
|
369
|
+
"205,220,57"
|
370
|
+
"192,202,51"
|
371
|
+
"175,180,43"
|
372
|
+
"158,157,36"
|
373
|
+
"130,119,23"
|
374
|
+
"244,255,129"
|
375
|
+
"238,255,65"
|
376
|
+
"198,255,0"
|
377
|
+
"174,234,0";
|
378
|
+
|
379
|
+
$palette-lime-50: nth($palette-lime, 1);
|
380
|
+
$palette-lime-100: nth($palette-lime, 2);
|
381
|
+
$palette-lime-200: nth($palette-lime, 3);
|
382
|
+
$palette-lime-300: nth($palette-lime, 4);
|
383
|
+
$palette-lime-400: nth($palette-lime, 5);
|
384
|
+
$palette-lime-500: nth($palette-lime, 6);
|
385
|
+
$palette-lime-600: nth($palette-lime, 7);
|
386
|
+
$palette-lime-700: nth($palette-lime, 8);
|
387
|
+
$palette-lime-800: nth($palette-lime, 9);
|
388
|
+
$palette-lime-900: nth($palette-lime, 10);
|
389
|
+
$palette-lime-A100: nth($palette-lime, 11);
|
390
|
+
$palette-lime-A200: nth($palette-lime, 12);
|
391
|
+
$palette-lime-A400: nth($palette-lime, 13);
|
392
|
+
$palette-lime-A700: nth($palette-lime, 14);
|
393
|
+
|
394
|
+
$palette-yellow:
|
395
|
+
"255,253,231"
|
396
|
+
"255,249,196"
|
397
|
+
"255,245,157"
|
398
|
+
"255,241,118"
|
399
|
+
"255,238,88"
|
400
|
+
"255,235,59"
|
401
|
+
"253,216,53"
|
402
|
+
"251,192,45"
|
403
|
+
"249,168,37"
|
404
|
+
"245,127,23"
|
405
|
+
"255,255,141"
|
406
|
+
"255,255,0"
|
407
|
+
"255,234,0"
|
408
|
+
"255,214,0";
|
409
|
+
|
410
|
+
$palette-yellow-50: nth($palette-yellow, 1);
|
411
|
+
$palette-yellow-100: nth($palette-yellow, 2);
|
412
|
+
$palette-yellow-200: nth($palette-yellow, 3);
|
413
|
+
$palette-yellow-300: nth($palette-yellow, 4);
|
414
|
+
$palette-yellow-400: nth($palette-yellow, 5);
|
415
|
+
$palette-yellow-500: nth($palette-yellow, 6);
|
416
|
+
$palette-yellow-600: nth($palette-yellow, 7);
|
417
|
+
$palette-yellow-700: nth($palette-yellow, 8);
|
418
|
+
$palette-yellow-800: nth($palette-yellow, 9);
|
419
|
+
$palette-yellow-900: nth($palette-yellow, 10);
|
420
|
+
$palette-yellow-A100: nth($palette-yellow, 11);
|
421
|
+
$palette-yellow-A200: nth($palette-yellow, 12);
|
422
|
+
$palette-yellow-A400: nth($palette-yellow, 13);
|
423
|
+
$palette-yellow-A700: nth($palette-yellow, 14);
|
424
|
+
|
425
|
+
$palette-amber:
|
426
|
+
"255,248,225"
|
427
|
+
"255,236,179"
|
428
|
+
"255,224,130"
|
429
|
+
"255,213,79"
|
430
|
+
"255,202,40"
|
431
|
+
"255,193,7"
|
432
|
+
"255,179,0"
|
433
|
+
"255,160,0"
|
434
|
+
"255,143,0"
|
435
|
+
"255,111,0"
|
436
|
+
"255,229,127"
|
437
|
+
"255,215,64"
|
438
|
+
"255,196,0"
|
439
|
+
"255,171,0";
|
440
|
+
|
441
|
+
$palette-amber-50: nth($palette-amber, 1);
|
442
|
+
$palette-amber-100: nth($palette-amber, 2);
|
443
|
+
$palette-amber-200: nth($palette-amber, 3);
|
444
|
+
$palette-amber-300: nth($palette-amber, 4);
|
445
|
+
$palette-amber-400: nth($palette-amber, 5);
|
446
|
+
$palette-amber-500: nth($palette-amber, 6);
|
447
|
+
$palette-amber-600: nth($palette-amber, 7);
|
448
|
+
$palette-amber-700: nth($palette-amber, 8);
|
449
|
+
$palette-amber-800: nth($palette-amber, 9);
|
450
|
+
$palette-amber-900: nth($palette-amber, 10);
|
451
|
+
$palette-amber-A100: nth($palette-amber, 11);
|
452
|
+
$palette-amber-A200: nth($palette-amber, 12);
|
453
|
+
$palette-amber-A400: nth($palette-amber, 13);
|
454
|
+
$palette-amber-A700: nth($palette-amber, 14);
|
455
|
+
|
456
|
+
$palette-orange:
|
457
|
+
"255,243,224"
|
458
|
+
"255,224,178"
|
459
|
+
"255,204,128"
|
460
|
+
"255,183,77"
|
461
|
+
"255,167,38"
|
462
|
+
"255,152,0"
|
463
|
+
"251,140,0"
|
464
|
+
"245,124,0"
|
465
|
+
"239,108,0"
|
466
|
+
"230,81,0"
|
467
|
+
"255,209,128"
|
468
|
+
"255,171,64"
|
469
|
+
"255,145,0"
|
470
|
+
"255,109,0";
|
471
|
+
|
472
|
+
$palette-orange-50: nth($palette-orange, 1);
|
473
|
+
$palette-orange-100: nth($palette-orange, 2);
|
474
|
+
$palette-orange-200: nth($palette-orange, 3);
|
475
|
+
$palette-orange-300: nth($palette-orange, 4);
|
476
|
+
$palette-orange-400: nth($palette-orange, 5);
|
477
|
+
$palette-orange-500: nth($palette-orange, 6);
|
478
|
+
$palette-orange-600: nth($palette-orange, 7);
|
479
|
+
$palette-orange-700: nth($palette-orange, 8);
|
480
|
+
$palette-orange-800: nth($palette-orange, 9);
|
481
|
+
$palette-orange-900: nth($palette-orange, 10);
|
482
|
+
$palette-orange-A100: nth($palette-orange, 11);
|
483
|
+
$palette-orange-A200: nth($palette-orange, 12);
|
484
|
+
$palette-orange-A400: nth($palette-orange, 13);
|
485
|
+
$palette-orange-A700: nth($palette-orange, 14);
|
486
|
+
|
487
|
+
$palette-deep-orange:
|
488
|
+
"251,233,231"
|
489
|
+
"255,204,188"
|
490
|
+
"255,171,145"
|
491
|
+
"255,138,101"
|
492
|
+
"255,112,67"
|
493
|
+
"255,87,34"
|
494
|
+
"244,81,30"
|
495
|
+
"230,74,25"
|
496
|
+
"216,67,21"
|
497
|
+
"191,54,12"
|
498
|
+
"255,158,128"
|
499
|
+
"255,110,64"
|
500
|
+
"255,61,0"
|
501
|
+
"221,44,0";
|
502
|
+
|
503
|
+
$palette-deep-orange-50: nth($palette-deep-orange, 1);
|
504
|
+
$palette-deep-orange-100: nth($palette-deep-orange, 2);
|
505
|
+
$palette-deep-orange-200: nth($palette-deep-orange, 3);
|
506
|
+
$palette-deep-orange-300: nth($palette-deep-orange, 4);
|
507
|
+
$palette-deep-orange-400: nth($palette-deep-orange, 5);
|
508
|
+
$palette-deep-orange-500: nth($palette-deep-orange, 6);
|
509
|
+
$palette-deep-orange-600: nth($palette-deep-orange, 7);
|
510
|
+
$palette-deep-orange-700: nth($palette-deep-orange, 8);
|
511
|
+
$palette-deep-orange-800: nth($palette-deep-orange, 9);
|
512
|
+
$palette-deep-orange-900: nth($palette-deep-orange, 10);
|
513
|
+
$palette-deep-orange-A100: nth($palette-deep-orange, 11);
|
514
|
+
$palette-deep-orange-A200: nth($palette-deep-orange, 12);
|
515
|
+
$palette-deep-orange-A400: nth($palette-deep-orange, 13);
|
516
|
+
$palette-deep-orange-A700: nth($palette-deep-orange, 14);
|
517
|
+
|
518
|
+
|
519
|
+
// Color order: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900.
|
520
|
+
|
521
|
+
$palette-brown:
|
522
|
+
"239,235,233"
|
523
|
+
"215,204,200"
|
524
|
+
"188,170,164"
|
525
|
+
"161,136,127"
|
526
|
+
"141,110,99"
|
527
|
+
"121,85,72"
|
528
|
+
"109,76,65"
|
529
|
+
"93,64,55"
|
530
|
+
"78,52,46"
|
531
|
+
"62,39,35";
|
532
|
+
|
533
|
+
$palette-brown-50: nth($palette-brown, 1);
|
534
|
+
$palette-brown-100: nth($palette-brown, 2);
|
535
|
+
$palette-brown-200: nth($palette-brown, 3);
|
536
|
+
$palette-brown-300: nth($palette-brown, 4);
|
537
|
+
$palette-brown-400: nth($palette-brown, 5);
|
538
|
+
$palette-brown-500: nth($palette-brown, 6);
|
539
|
+
$palette-brown-600: nth($palette-brown, 7);
|
540
|
+
$palette-brown-700: nth($palette-brown, 8);
|
541
|
+
$palette-brown-800: nth($palette-brown, 9);
|
542
|
+
$palette-brown-900: nth($palette-brown, 10);
|
543
|
+
|
544
|
+
$palette-grey:
|
545
|
+
"250,250,250"
|
546
|
+
"245,245,245"
|
547
|
+
"238,238,238"
|
548
|
+
"224,224,224"
|
549
|
+
"189,189,189"
|
550
|
+
"158,158,158"
|
551
|
+
"117,117,117"
|
552
|
+
"97,97,97"
|
553
|
+
"66,66,66"
|
554
|
+
"33,33,33";
|
555
|
+
|
556
|
+
$palette-grey-50: nth($palette-grey, 1);
|
557
|
+
$palette-grey-100: nth($palette-grey, 2);
|
558
|
+
$palette-grey-200: nth($palette-grey, 3);
|
559
|
+
$palette-grey-300: nth($palette-grey, 4);
|
560
|
+
$palette-grey-400: nth($palette-grey, 5);
|
561
|
+
$palette-grey-500: nth($palette-grey, 6);
|
562
|
+
$palette-grey-600: nth($palette-grey, 7);
|
563
|
+
$palette-grey-700: nth($palette-grey, 8);
|
564
|
+
$palette-grey-800: nth($palette-grey, 9);
|
565
|
+
$palette-grey-900: nth($palette-grey, 10);
|
566
|
+
|
567
|
+
$palette-blue-grey:
|
568
|
+
"236,239,241"
|
569
|
+
"207,216,220"
|
570
|
+
"176,190,197"
|
571
|
+
"144,164,174"
|
572
|
+
"120,144,156"
|
573
|
+
"96,125,139"
|
574
|
+
"84,110,122"
|
575
|
+
"69,90,100"
|
576
|
+
"55,71,79"
|
577
|
+
"38,50,56";
|
578
|
+
|
579
|
+
$palette-blue-grey-50: nth($palette-blue-grey, 1);
|
580
|
+
$palette-blue-grey-100: nth($palette-blue-grey, 2);
|
581
|
+
$palette-blue-grey-200: nth($palette-blue-grey, 3);
|
582
|
+
$palette-blue-grey-300: nth($palette-blue-grey, 4);
|
583
|
+
$palette-blue-grey-400: nth($palette-blue-grey, 5);
|
584
|
+
$palette-blue-grey-500: nth($palette-blue-grey, 6);
|
585
|
+
$palette-blue-grey-600: nth($palette-blue-grey, 7);
|
586
|
+
$palette-blue-grey-700: nth($palette-blue-grey, 8);
|
587
|
+
$palette-blue-grey-800: nth($palette-blue-grey, 9);
|
588
|
+
$palette-blue-grey-900: nth($palette-blue-grey, 10);
|
589
|
+
|
590
|
+
$color-black: "0,0,0";
|
591
|
+
$color-white: "255,255,255";
|
592
|
+
|
593
|
+
|
594
|
+
/* colors.scss */
|
595
|
+
$styleguide-generate-template: false !default;
|
596
|
+
|
597
|
+
// The two possible colors for overlayed text.
|
598
|
+
$color-dark-contrast: $color-white !default;
|
599
|
+
$color-light-contrast: $color-black !default;
|