ratchet_design 0.1.12 → 0.1.13
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/assets/javascripts/ratchet/base/form.js +9 -3
- data/app/assets/javascripts/ratchet/base/sync-input-value.js +9 -18
- data/app/assets/javascripts/ratchet/core.js +9 -3
- data/app/assets/javascripts/ratchet/enhancement/lightbox.js +6 -6
- data/app/assets/javascripts/ratchet/enhancement/mapbox.js +48 -0
- data/app/assets/stylesheets/ratchet/_core.scss +4 -2
- data/app/assets/stylesheets/ratchet/base/_button.scss +15 -14
- data/app/assets/stylesheets/ratchet/base/_document.scss +30 -66
- data/app/assets/stylesheets/ratchet/base/_form.scss +162 -529
- data/app/assets/stylesheets/ratchet/base/_label-placeholder.scss +97 -0
- data/app/assets/stylesheets/ratchet/base/_media.scss +1 -1
- data/app/assets/stylesheets/ratchet/base/_multistep-form.scss +65 -11
- data/app/assets/stylesheets/ratchet/base/_section.scss +284 -0
- data/app/assets/stylesheets/ratchet/base/_table.scss +4 -4
- data/app/assets/stylesheets/ratchet/base/_text.scss +50 -45
- data/app/assets/stylesheets/ratchet/base/_validation.scss +83 -0
- data/app/assets/stylesheets/ratchet/enhancement/_hero.scss +39 -39
- data/app/assets/stylesheets/ratchet/utility/_color.scss +135 -0
- data/app/assets/stylesheets/ratchet/utility/_global.scss +21 -40
- data/app/assets/stylesheets/ratchet/utility/_loader.scss +1 -1
- data/app/helpers/ratchet/application_helper.rb +16 -10
- data/app/helpers/ratchet/form_helper.rb +302 -18
- data/app/views/layouts/ratchet/default.html.slim +2 -2
- data/app/views/shared/ratchet/_defs.html.slim +67 -0
- data/app/views/shared/ratchet/_footer.html.slim +6 -0
- data/app/views/shared/ratchet/_header.html.slim +5 -0
- data/app/views/shared/ratchet/_icons.html.slim +53 -6
- data/lib/ratchet_design/version.rb +1 -1
- data/public/{core-0.1.12.js → core-0.1.13.js} +66 -66
- data/public/core-0.1.13.js.gz +0 -0
- data/public/core-0.1.13.map.json +1 -0
- data/public/{fonts-woff-0.1.12.css → fonts-woff-0.1.13.css} +0 -0
- data/public/{fonts-woff-0.1.12.css.gz → fonts-woff-0.1.13.css.gz} +0 -0
- data/public/{fonts-woff2-0.1.12.css → fonts-woff2-0.1.13.css} +0 -0
- data/public/{fonts-woff2-0.1.12.css.gz → fonts-woff2-0.1.13.css.gz} +0 -0
- metadata +36 -32
- data/app/assets/javascripts/ratchet/utility/loader.js +0 -84
- data/app/assets/stylesheets/ratchet/enhancement/_contrast-section.scss +0 -22
- data/public/core-0.1.12.js.gz +0 -0
- data/public/core-0.1.12.map.json +0 -1
@@ -7,7 +7,7 @@
|
|
7
7
|
* ------------------------------------- */
|
8
8
|
|
9
9
|
// Create an underlined link with cleared descenders
|
10
|
-
@mixin inline-link($default-color: $
|
10
|
+
@mixin inline-link($default-color: $space, $active-color: $caribbean, $background: $white) {
|
11
11
|
background: linear-gradient(to bottom, transparent 50%, $active-color 50%) 0 91% / 2px 2px repeat-x;
|
12
12
|
transition: color $duration;
|
13
13
|
text-shadow:
|
@@ -65,6 +65,7 @@ h1 {
|
|
65
65
|
}
|
66
66
|
|
67
67
|
h2 {
|
68
|
+
font-weight: 600;
|
68
69
|
font-size: 36px;
|
69
70
|
line-height: 45px;
|
70
71
|
padding-top: 13px;
|
@@ -73,6 +74,7 @@ h2 {
|
|
73
74
|
|
74
75
|
h3 {
|
75
76
|
font-size: 31px;
|
77
|
+
font-weight: 600;
|
76
78
|
line-height: 45px;
|
77
79
|
padding-top: 14px;
|
78
80
|
margin-bottom: 16px;
|
@@ -80,12 +82,14 @@ h3 {
|
|
80
82
|
|
81
83
|
h4 {
|
82
84
|
font-size: 27px;
|
85
|
+
font-weight: 600;
|
83
86
|
line-height: 45px;
|
84
87
|
padding-top: 15px;
|
85
88
|
margin-bottom: 15px;
|
86
89
|
}
|
87
90
|
|
88
91
|
h5 {
|
92
|
+
font-weight: 600;
|
89
93
|
font-size: 24px;
|
90
94
|
line-height: 30px;
|
91
95
|
padding-top: 8px;
|
@@ -93,6 +97,7 @@ h5 {
|
|
93
97
|
}
|
94
98
|
|
95
99
|
h6 {
|
100
|
+
font-weight: 600;
|
96
101
|
font-size: 21px;
|
97
102
|
line-height: 30px;
|
98
103
|
padding-top: 9px;
|
@@ -120,7 +125,7 @@ article p a {
|
|
120
125
|
// Blockquotes
|
121
126
|
blockquote {
|
122
127
|
font-size: 28px;
|
123
|
-
color: $
|
128
|
+
color: $pewter;
|
124
129
|
line-height: vr(3); // 45px
|
125
130
|
border-top: 14px solid transparent;
|
126
131
|
margin-bottom: 31px;
|
@@ -157,7 +162,7 @@ blockquote {
|
|
157
162
|
font-weight: 700;
|
158
163
|
|
159
164
|
a {
|
160
|
-
@include inline-link($
|
165
|
+
@include inline-link($shark, $azure);
|
161
166
|
}
|
162
167
|
}
|
163
168
|
}
|
@@ -167,7 +172,7 @@ blockquote {
|
|
167
172
|
* ------------------------------------- */
|
168
173
|
|
169
174
|
// Bare inline text elements
|
170
|
-
:not(p):not(li):not(dd):not(blockquote):not(small):not(strong) > {
|
175
|
+
:not(p):not(li):not(dd):not(blockquote):not(small):not(strong):not(.suggestions li a) > {
|
171
176
|
small {
|
172
177
|
display: inline-block;
|
173
178
|
line-height: vr(2); // 30px
|
@@ -224,7 +229,7 @@ sup {
|
|
224
229
|
|
225
230
|
// Highlighted marks
|
226
231
|
mark {
|
227
|
-
background: lighten($
|
232
|
+
background: lighten($azure, 45);
|
228
233
|
}
|
229
234
|
|
230
235
|
// Definitions & Abbreviations
|
@@ -233,7 +238,7 @@ abbr[title] {
|
|
233
238
|
position: relative;
|
234
239
|
cursor: help;
|
235
240
|
font-style: normal;
|
236
|
-
border-bottom: 1px dashed $
|
241
|
+
border-bottom: 1px dashed $pewter;
|
237
242
|
|
238
243
|
&:after,
|
239
244
|
&:before {
|
@@ -254,7 +259,7 @@ abbr[title] {
|
|
254
259
|
white-space: nowrap;
|
255
260
|
padding: 2px 10px;
|
256
261
|
border-radius: $radius;
|
257
|
-
background: $
|
262
|
+
background: $space;
|
258
263
|
}
|
259
264
|
|
260
265
|
&:before {
|
@@ -265,7 +270,7 @@ abbr[title] {
|
|
265
270
|
height: 0;
|
266
271
|
border-style: solid;
|
267
272
|
border-width: 0 5px 6px 5px;
|
268
|
-
border-color: transparent transparent $
|
273
|
+
border-color: transparent transparent $space transparent;
|
269
274
|
}
|
270
275
|
|
271
276
|
&:hover:after,
|
@@ -301,13 +306,13 @@ hr {
|
|
301
306
|
border: 0;
|
302
307
|
padding-top: vr(2); // 30px
|
303
308
|
margin-bottom: vr(3); // 45px
|
304
|
-
box-shadow: 0 1px $
|
309
|
+
box-shadow: 0 1px $alabaster;
|
305
310
|
height: vr(1); // 15px
|
306
311
|
line-height: vr(1); // 15px
|
307
312
|
}
|
308
313
|
|
309
314
|
hr.stars {
|
310
|
-
color: $
|
315
|
+
color: $pewter;
|
311
316
|
box-shadow: none;
|
312
317
|
text-align: center;
|
313
318
|
|
@@ -328,7 +333,7 @@ code,
|
|
328
333
|
kbd,
|
329
334
|
samp {
|
330
335
|
font-family: $mono-font;
|
331
|
-
// color: $
|
336
|
+
// color: $steel;
|
332
337
|
direction: ltr;
|
333
338
|
text-align: left;
|
334
339
|
tab-size: 2;
|
@@ -343,8 +348,8 @@ pre {
|
|
343
348
|
letter-spacing: -.015em;
|
344
349
|
word-spacing: -.015em;
|
345
350
|
border-radius: $radius;
|
346
|
-
background: $
|
347
|
-
box-shadow: 0 0 0 1px $
|
351
|
+
background: $smoke;
|
352
|
+
box-shadow: 0 0 0 1px $alabaster inset;
|
348
353
|
}
|
349
354
|
|
350
355
|
:not(pre) > code,
|
@@ -357,8 +362,8 @@ pre {
|
|
357
362
|
white-space: pre-wrap;
|
358
363
|
border-radius: $radius;
|
359
364
|
padding: 2px 6px;
|
360
|
-
background: $
|
361
|
-
box-shadow: 0 0 0 1px $
|
365
|
+
background: $smoke;
|
366
|
+
box-shadow: 0 0 0 1px $alabaster inset;
|
362
367
|
}
|
363
368
|
|
364
369
|
/* ===================================== *
|
@@ -367,45 +372,45 @@ pre {
|
|
367
372
|
|
368
373
|
pre[class*=lang-],
|
369
374
|
code[class*=lang-] {
|
370
|
-
color: $
|
375
|
+
color: $steel;
|
371
376
|
}
|
372
377
|
|
373
378
|
.cm-s-default {
|
374
|
-
.cm-keyword { color: $
|
375
|
-
.cm-atom { color: $
|
376
|
-
.cm-number { color: $
|
377
|
-
.cm-def { color: $
|
378
|
-
.cm-variable { color: $
|
379
|
-
.cm-variable-2 { color: $
|
380
|
-
.cm-variable-3 { color: $
|
381
|
-
.cm-property { color: $
|
382
|
-
.cm-operator { color: $
|
383
|
-
.cm-comment { color: $
|
384
|
-
.cm-string { color: $
|
385
|
-
.cm-string-2 { color: $
|
386
|
-
.cm-meta { color: $
|
387
|
-
.cm-error { color: $
|
388
|
-
.cm-qualifier { color: $
|
389
|
-
.cm-builtin { color: $
|
390
|
-
.cm-bracket { color: $
|
391
|
-
.cm-tag { color: $
|
392
|
-
.cm-attribute { color: $
|
393
|
-
.cm-header { color: $
|
394
|
-
.cm-quote { color: $
|
395
|
-
.cm-hr { color: $
|
396
|
-
.cm-link { color: $
|
397
|
-
.cm-qualifier.cm-attribute { color: $
|
398
|
-
.cm-error { color: $
|
379
|
+
.cm-keyword { color: $majorelle; }
|
380
|
+
.cm-atom { color: $gold; }
|
381
|
+
.cm-number { color: $byzantine; }
|
382
|
+
.cm-def { color: $caribbean; }
|
383
|
+
.cm-variable { color: $tangelo; }
|
384
|
+
.cm-variable-2 { color: $mulberry; }
|
385
|
+
.cm-variable-3 { color: $tangelo; }
|
386
|
+
.cm-property { color: $azure; }
|
387
|
+
.cm-operator { color: $pewter; }
|
388
|
+
.cm-comment { color: $pewter; }
|
389
|
+
.cm-string { color: $azure; }
|
390
|
+
.cm-string-2 { color: $caribbean; }
|
391
|
+
.cm-meta { color: $pewter; }
|
392
|
+
.cm-error { color: $rusty; }
|
393
|
+
.cm-qualifier { color: $pewter; }
|
394
|
+
.cm-builtin { color: $majorelle; }
|
395
|
+
.cm-bracket { color: $pewter; }
|
396
|
+
.cm-tag { color: $majorelle; }
|
397
|
+
.cm-attribute { color: $tangelo; }
|
398
|
+
.cm-header { color: $azure; }
|
399
|
+
.cm-quote { color: $caribbean; }
|
400
|
+
.cm-hr { color: $pewter; }
|
401
|
+
.cm-link { color: $mulberry; }
|
402
|
+
.cm-qualifier.cm-attribute { color: $tangelo; }
|
403
|
+
.cm-error { color: $rusty; }
|
399
404
|
}
|
400
405
|
|
401
406
|
.static-code {
|
402
|
-
.cm-variable { color: $
|
407
|
+
.cm-variable { color: $caribbean; }
|
403
408
|
}
|
404
409
|
|
405
|
-
.cm-negative { color: $
|
406
|
-
.cm-positive { color: $
|
410
|
+
.cm-negative { color: $byzantine; }
|
411
|
+
.cm-positive { color: $caribbean; }
|
407
412
|
.cm-header,
|
408
413
|
.cm-strong { }
|
409
414
|
.cm-em { }
|
410
415
|
.cm-link { }
|
411
|
-
.cm-invalidchar { color: $
|
416
|
+
.cm-invalidchar { color: $rusty; }
|
@@ -0,0 +1,83 @@
|
|
1
|
+
// Apply validation styles to inputs & textareas
|
2
|
+
|
3
|
+
label.valid {
|
4
|
+
color: $apple;
|
5
|
+
|
6
|
+
input, select, textarea {
|
7
|
+
color: currentColor;
|
8
|
+
-webkit-text-fill-color: currentColor;
|
9
|
+
box-shadow: input-shadow( $apple );
|
10
|
+
|
11
|
+
@include input-active {
|
12
|
+
box-shadow: input-focus-shadow( $apple )
|
13
|
+
}
|
14
|
+
}
|
15
|
+
}
|
16
|
+
|
17
|
+
label.invalid {
|
18
|
+
color: $rusty;
|
19
|
+
|
20
|
+
input, select, textarea {
|
21
|
+
color: currentColor;
|
22
|
+
-webkit-text-fill-color: currentColor;
|
23
|
+
box-shadow: input-shadow( $rusty );
|
24
|
+
|
25
|
+
@include input-active {
|
26
|
+
box-shadow: input-focus-shadow( $rusty )
|
27
|
+
}
|
28
|
+
}
|
29
|
+
}
|
30
|
+
|
31
|
+
// Validation message animation declaration
|
32
|
+
@keyframes scale-fade-in {
|
33
|
+
0% {
|
34
|
+
opacity: 0;
|
35
|
+
transform: translate(-50%, -6px) scale(.5);
|
36
|
+
}
|
37
|
+
|
38
|
+
100% {
|
39
|
+
opacity: 1;
|
40
|
+
transform: translate(-50%, 6px) scale(1);
|
41
|
+
}
|
42
|
+
}
|
43
|
+
|
44
|
+
// Inline validation messages
|
45
|
+
.validation-message {
|
46
|
+
position: absolute;
|
47
|
+
left: 50%;
|
48
|
+
top: 100%;
|
49
|
+
width: 325px;
|
50
|
+
max-width: 100vw;
|
51
|
+
z-index: 3;
|
52
|
+
text-align: center;
|
53
|
+
transform: translate(-50%, 6px) scale(1);
|
54
|
+
transform-origin: center top;
|
55
|
+
animation: scale-fade-in $duration ease-out;
|
56
|
+
|
57
|
+
// Message bubble (also a hack to maintain proper word wrap)
|
58
|
+
p {
|
59
|
+
display: inline-block;
|
60
|
+
margin: 0;
|
61
|
+
padding: 12px 18px;
|
62
|
+
border-radius: $radius;
|
63
|
+
background: $rusty;
|
64
|
+
color: $white;
|
65
|
+
font-size: 14px;
|
66
|
+
line-height: 21px;
|
67
|
+
|
68
|
+
// Message bubble triangle
|
69
|
+
&:before {
|
70
|
+
content: '';
|
71
|
+
position: absolute;
|
72
|
+
left: 50%;
|
73
|
+
margin-left: -6px;
|
74
|
+
bottom: 100%;
|
75
|
+
width: 0;
|
76
|
+
height: 0;
|
77
|
+
border-style: solid;
|
78
|
+
border-width: 0 6px 6px 6px;
|
79
|
+
border-color: transparent transparent $rusty transparent;
|
80
|
+
}
|
81
|
+
}
|
82
|
+
}
|
83
|
+
|
@@ -1,44 +1,44 @@
|
|
1
|
-
/* ========================================================================== *
|
2
|
-
|
3
|
-
|
1
|
+
// /* ========================================================================== *
|
2
|
+
// * Hero module
|
3
|
+
// * -------------------------------------------------------------------------- */
|
4
4
|
|
5
|
-
/* ===================================== *
|
6
|
-
|
7
|
-
|
5
|
+
// /* ===================================== *
|
6
|
+
// * a. Utilities
|
7
|
+
// * ------------------------------------- */
|
8
8
|
|
9
|
-
// Hero banners
|
10
|
-
@mixin hero($height: tall, $color: $white, $background: $
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
9
|
+
// // Hero banners
|
10
|
+
// @mixin hero($height: tall, $color: $white, $background: $azure linear-gradient(to bottom right, $azure, mix($mulberry, $azure, 75%)) no-repeat) {
|
11
|
+
// display: flex;
|
12
|
+
// flex-direction: column;
|
13
|
+
// align-items: center;
|
14
|
+
// justify-content: center;
|
15
|
+
// text-align: center;
|
16
|
+
// color: $color;
|
17
|
+
// padding-top: vr(3); // 45px
|
18
|
+
// @include padded-module; // 1100px width & 30px padding
|
19
|
+
// @include cover-background($background);
|
20
20
|
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
21
|
+
// // Height conditional
|
22
|
+
// @if $height == short {
|
23
|
+
// min-height: vr(24); // 360px
|
24
|
+
// } @else if $height == tall {
|
25
|
+
// min-height: vr(36); // 540px
|
26
|
+
// } @else if $height == full {
|
27
|
+
// min-height: 100vh; // Full viewport
|
28
|
+
// } @else {
|
29
|
+
// min-height: $height; // Manually set
|
30
|
+
// }
|
31
31
|
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
32
|
+
// // Remove botton margin from buttons
|
33
|
+
// a {
|
34
|
+
// @include button($fill: off, $bevel: on, $color: $white);
|
35
|
+
// margin: 0;
|
36
|
+
// }
|
37
37
|
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
}
|
38
|
+
// // Smaller text for paragraphs
|
39
|
+
// p {
|
40
|
+
// font-size: 16px;
|
41
|
+
// max-width: 450px;
|
42
|
+
// margin-bottom: 35px;
|
43
|
+
// }
|
44
|
+
// }
|
@@ -0,0 +1,135 @@
|
|
1
|
+
/* ========================================================================== *
|
2
|
+
* a. Color module
|
3
|
+
* -------------------------------------------------------------------------- */
|
4
|
+
|
5
|
+
// Passive colors
|
6
|
+
$space: #263d53; // Blue-Black
|
7
|
+
$shark: #445d75; // Dark Blue-Gray
|
8
|
+
$steel: #58728a; // Blue-Gray
|
9
|
+
$pewter: #87a0b8; // Light Blue-Gray
|
10
|
+
$alabaster: #cbd6e1; // Light Blue
|
11
|
+
$isabella: #dde8eb; // Off-Cream
|
12
|
+
$smoke: #eff4f6; // Cream
|
13
|
+
$white: #FFFFFF; // White
|
14
|
+
|
15
|
+
// Active colors
|
16
|
+
$azure: #0094fd; // Blue
|
17
|
+
$cerulean: #0FA7DB; // Softer Blue
|
18
|
+
$byzantine: #c60ca5; // Magenta
|
19
|
+
$mulberry: #8f52ea; // Purple
|
20
|
+
$majorelle: #625ff9; // Indigo
|
21
|
+
$grass: #2ac84f; // Green
|
22
|
+
$apple: #3FBE3E; // Very Green
|
23
|
+
$caribbean: #25c894; // Mint
|
24
|
+
$gold: #f69523; // Yellow
|
25
|
+
$tangelo: #f96623; // Orange
|
26
|
+
$rusty: #dd2f41; // Red
|
27
|
+
$orchid: #a346ce; // Purple
|
28
|
+
|
29
|
+
// Banner-specific colors
|
30
|
+
$lochmara: #008BC3; // Default
|
31
|
+
$akaroa: #D2C9A7; // Error
|
32
|
+
$turquoise: #5CC6E4; // NTTW
|
33
|
+
$terracotta: #A81C27; // Thanksgiving
|
34
|
+
$cobalt: #006dff; // Royal blue
|
35
|
+
$capri: #00d2fe; // Deep sky blue
|
36
|
+
|
37
|
+
// Gradient (colors)
|
38
|
+
$earthrise: ( start: $azure, end: $majorelle ); // Blue to Indigo // PostgreSQL
|
39
|
+
$royalty: ( start: $majorelle, end: $mulberry ); // Indigo to Purple // Elasticsearch
|
40
|
+
$lagoon: ( start: $azure, end: $caribbean ); // Blue to Mint // RethinkDB
|
41
|
+
$pearlescent: ( start: $azure, end: $mulberry ); // Blue to Purple // MySQL
|
42
|
+
$firestorm: ( start: $gold, end: $tangelo ); // Yellow to Orange // RabbitMQ
|
43
|
+
$sunset: ( start: $tangelo, end: $rusty ); // Orange to Red // Redis
|
44
|
+
$berries: ( start: $byzantine, end: $rusty ); // Magenta to Red // etcd
|
45
|
+
$supernova: ( start: $byzantine, end: $mulberry ); // Magenta to Purple // ScyllaDB
|
46
|
+
$emerald: ( start: $caribbean, end: $grass ); // Mint to Green // MongoDB
|
47
|
+
$aurora: ( start: $grass, end: $mulberry ); // Green to Indigo
|
48
|
+
$tidal: ( start: $cobalt, end: $capri ); // Hero Gradient Only
|
49
|
+
|
50
|
+
// Gradient (passive)
|
51
|
+
$blackhole: ( start: $space, end: $steel ); // Hero Gradient Only
|
52
|
+
$midnight: ( start: $shark, end: $pewter ); // Hero Gradient Only
|
53
|
+
$shady: ( start: $steel, end: $alabaster ); // Hero Gradient Only
|
54
|
+
$grayscale: ( start: $pewter, end: $isabella ); // Hero Gradient Only
|
55
|
+
$polar: ( start: $alabaster, end: $smoke ); // Hero Gradient Only
|
56
|
+
$eggshell: ( start: $isabella, end: $white ); // Hero Gradient Only
|
57
|
+
|
58
|
+
|
59
|
+
// Translucent colors
|
60
|
+
$translucent-white: rgba($white, .5);
|
61
|
+
|
62
|
+
// Active Variable List
|
63
|
+
$active-colors: $azure, $byzantine, $mulberry, $majorelle, $caribbean, $grass, $gold, $tangelo, $rusty;
|
64
|
+
$active-color-names: azure, byzantine, mulberry, majorelle, caribbean, grass, gold, tangelo, rusty;
|
65
|
+
|
66
|
+
// Passive Variable List
|
67
|
+
$passive-colors: $space, $shark, $steel, $pewter, $alabaster, $smoke, $white;
|
68
|
+
$passive-color-names: space, shark, steel, pewter, alabaster, smoke, white;
|
69
|
+
|
70
|
+
// Active Gradient Variable List
|
71
|
+
$gradient-colors: $earthrise, $royalty, $lagoon, $pearlescent, $firestorm, $sunset, $berries, $supernova, $emerald, $aurora, $tidal, $blackhole, $midnight, $shady, $grayscale, $polar, $eggshell;
|
72
|
+
$gradient-color-names: earthrise, royalty, lagoon, pearlescent, firestorm, sunset, berries, supernova, emerald, aurora, tidal, blackhole, midnight, shady, grayscale, polar, eggshell;
|
73
|
+
|
74
|
+
// Active and Passive List
|
75
|
+
$full-solid-color-list: zip( join($active-color-names, $passive-color-names), join($active-colors, $passive-colors));
|
76
|
+
|
77
|
+
// Solid color classes
|
78
|
+
@each $name, $color in $full-solid-color-list {
|
79
|
+
// Assign a `.[color]-text` class with a color of [color]
|
80
|
+
.#{$name}-text {
|
81
|
+
color: $color;
|
82
|
+
}
|
83
|
+
|
84
|
+
.#{$name}-bg {
|
85
|
+
&:before {
|
86
|
+
background-color: $color;
|
87
|
+
}
|
88
|
+
}
|
89
|
+
|
90
|
+
linearGradient##{$name} {
|
91
|
+
stop:nth-child(1) {
|
92
|
+
stop-color: #{$color};
|
93
|
+
}
|
94
|
+
}
|
95
|
+
}
|
96
|
+
|
97
|
+
@for $i from 1 through length($gradient-colors) {
|
98
|
+
|
99
|
+
$gradient: nth($gradient-colors, $i);
|
100
|
+
$start-color: map_get( $gradient, start );
|
101
|
+
$end-color: map_get( $gradient, end );
|
102
|
+
|
103
|
+
.#{nth($gradient-color-names, $i)}-bg {
|
104
|
+
&:before {
|
105
|
+
background: linear-gradient(135deg, $start-color, $end-color) left top/100% 100% no-repeat;
|
106
|
+
}
|
107
|
+
}
|
108
|
+
|
109
|
+
linearGradient##{nth($gradient-color-names, $i)} {
|
110
|
+
stop:nth-child(1) {
|
111
|
+
stop-color: $start-color;
|
112
|
+
}
|
113
|
+
stop:nth-child(2) {
|
114
|
+
stop-color: $end-color;
|
115
|
+
}
|
116
|
+
}
|
117
|
+
|
118
|
+
linearGradient##{nth($gradient-color-names, $i)}-darken {
|
119
|
+
stop:nth-child(1) {
|
120
|
+
stop-color: darken($start-color, 10%);
|
121
|
+
}
|
122
|
+
stop:nth-child(2) {
|
123
|
+
stop-color: darken($end-color, 10%);
|
124
|
+
}
|
125
|
+
}
|
126
|
+
|
127
|
+
linearGradient##{nth($gradient-color-names, $i)}-lighten {
|
128
|
+
stop:nth-child(1) {
|
129
|
+
stop-color: lighten($start-color, 10%);
|
130
|
+
}
|
131
|
+
stop:nth-child(2) {
|
132
|
+
stop-color: lighten($end-color, 10%);
|
133
|
+
}
|
134
|
+
}
|
135
|
+
}
|
@@ -6,43 +6,8 @@
|
|
6
6
|
* i. Color
|
7
7
|
* ------------------------------------- */
|
8
8
|
|
9
|
-
|
10
|
-
|
11
|
-
$capecod: #3A3B3C; // Dark Gray
|
12
|
-
$aluminum: #828384; // Gray
|
13
|
-
$nobel: #B7B7B7; // Light Gray
|
14
|
-
$alto: #D1D1D1; // Silver
|
15
|
-
$iron: #E4E5E7; // Cream
|
16
|
-
$alabaster: #FAFAFA; // Off-white
|
17
|
-
$white: #FFFFFF; // White
|
18
|
-
|
19
|
-
// Active colors
|
20
|
-
$bahama: #006690; // Navy
|
21
|
-
$cerulean: #0FA7DB; // Blue
|
22
|
-
$apple: #3FBE3E; // Green
|
23
|
-
$lightning: #FCB827; // Yellow
|
24
|
-
$flush: #FF7C00; // Orange
|
25
|
-
$punch: #DD3340; // Red
|
26
|
-
$rose: #F248A5; // Pink
|
27
|
-
$orchid: #A346CE; // Purple
|
28
|
-
|
29
|
-
// Product-specific colors
|
30
|
-
$fern: #58AA3F; // MongoDB
|
31
|
-
$jellybean: #267187; // RethinkDB
|
32
|
-
$cardinal: #C8212E; // Redis
|
33
|
-
$jungle: #2CAA9E; // Elasticsearch
|
34
|
-
$regal: #004C72; // InfluxDB
|
35
|
-
$shakespeare: #57A5D1; // Etcd
|
36
|
-
$jaffa: #EB8E3E; // RabbitMQ
|
37
|
-
|
38
|
-
// Banner-specific colors
|
39
|
-
$lochmara: #008BC3; // Default
|
40
|
-
$akaroa: #D2C9A7; // Error
|
41
|
-
$turquoise: #5CC6E4; // NTTW
|
42
|
-
$terracotta: #A81C27; // Thanksgiving
|
43
|
-
|
44
|
-
// Translucent colors
|
45
|
-
$translucent-white: rgba($white, .5);
|
9
|
+
@import 'color';
|
10
|
+
|
46
11
|
|
47
12
|
/* ===================================== *
|
48
13
|
* ii. Fonts
|
@@ -81,7 +46,7 @@ $vr-base-unit: 15px;
|
|
81
46
|
}
|
82
47
|
|
83
48
|
// Vertical rhythm
|
84
|
-
$base-size:
|
49
|
+
$base-size: 15px;
|
85
50
|
$base-height: vr(2); // 30px
|
86
51
|
|
87
52
|
// Fonts stacks
|
@@ -109,6 +74,10 @@ $header-height: vr(6); // 90px
|
|
109
74
|
// Universal padding unit
|
110
75
|
$content-padding: vr(2); // 30px
|
111
76
|
|
77
|
+
// Angle
|
78
|
+
|
79
|
+
$deg: 30deg;
|
80
|
+
|
112
81
|
// Repeat a `$string` and number of `$times`
|
113
82
|
@function repeat-string($string, $times) {
|
114
83
|
$result: '';
|
@@ -128,6 +97,10 @@ $content-padding: vr(2); // 30px
|
|
128
97
|
@return nth($list, length($list));
|
129
98
|
}
|
130
99
|
|
100
|
+
@function contains($list,$var) {
|
101
|
+
@return (null != index($list, $var));
|
102
|
+
}
|
103
|
+
|
131
104
|
// Collapse top and/or bottom margin and/or padding from module
|
132
105
|
@mixin collapse($type: both, $direction: both, $level: 1) {
|
133
106
|
$type-selector: if($type == both, (margin, padding), $type);
|
@@ -168,8 +141,16 @@ $content-padding: vr(2); // 30px
|
|
168
141
|
width: 100vw;
|
169
142
|
position: absolute;
|
170
143
|
left: calc(-50vw + 50%);
|
171
|
-
background: $background;
|
172
144
|
z-index: -1;
|
145
|
+
|
146
|
+
|
147
|
+
@if contains($gradient-colors, $background) {
|
148
|
+
$start-color: map_get( $background, start );
|
149
|
+
$end-color: map_get( $background, end );
|
150
|
+
background: linear-gradient(135deg, $start-color, $end-color) left top/100% 100% no-repeat;
|
151
|
+
} @else {
|
152
|
+
background: $background;
|
153
|
+
}
|
173
154
|
|
174
155
|
// Set top offset (if present)
|
175
156
|
@if $offset != null {
|
@@ -204,7 +185,7 @@ $content-padding: vr(2); // 30px
|
|
204
185
|
// Between widths media query mixin
|
205
186
|
@mixin between($small-width, $large-width) {
|
206
187
|
$large-width: $large-width - 1;
|
207
|
-
@media (
|
188
|
+
@media (min-width: $small-width) and (max-width: $large-width) {
|
208
189
|
@content;
|
209
190
|
}
|
210
191
|
}
|
@@ -16,6 +16,11 @@ module Ratchet
|
|
16
16
|
content_for :top_nav, &block
|
17
17
|
end
|
18
18
|
|
19
|
+
# Set custom top navigation for app links
|
20
|
+
def app_nav(&block)
|
21
|
+
content_for :app_nav, &block
|
22
|
+
end
|
23
|
+
|
19
24
|
# Blank slate layout
|
20
25
|
def blank(&block)
|
21
26
|
content_for :blank, &block
|
@@ -42,21 +47,22 @@ module Ratchet
|
|
42
47
|
end
|
43
48
|
|
44
49
|
# Set custom page selector class
|
45
|
-
def
|
46
|
-
|
47
|
-
@classes += classes
|
48
|
-
@classes.uniq!
|
49
|
-
nil
|
50
|
+
def selector(selector = nil)
|
51
|
+
selector ? content_for(:selector) { selector } : content_for(:selector).presence
|
50
52
|
end
|
51
53
|
|
52
54
|
# Consolidated page class output
|
53
|
-
def
|
54
|
-
|
55
|
-
|
56
|
-
|
55
|
+
def page_class( classnames = nil )
|
56
|
+
if ( classnames )
|
57
|
+
@page_classes ||= ''
|
58
|
+
@page_classes = @page_classes + ' ' + classnames
|
59
|
+
@page_classes.strip!
|
60
|
+
else
|
61
|
+
@page_classes || ''
|
62
|
+
end
|
57
63
|
end
|
58
64
|
|
59
|
-
#
|
65
|
+
# Consolidated page class output
|
60
66
|
def main_class( classnames = nil )
|
61
67
|
if ( classnames )
|
62
68
|
@main_classes ||= ''
|