ratchet_design 0.1.12 → 0.1.13
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 +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 ||= ''
|