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.
Files changed (41) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/ratchet/base/form.js +9 -3
  3. data/app/assets/javascripts/ratchet/base/sync-input-value.js +9 -18
  4. data/app/assets/javascripts/ratchet/core.js +9 -3
  5. data/app/assets/javascripts/ratchet/enhancement/lightbox.js +6 -6
  6. data/app/assets/javascripts/ratchet/enhancement/mapbox.js +48 -0
  7. data/app/assets/stylesheets/ratchet/_core.scss +4 -2
  8. data/app/assets/stylesheets/ratchet/base/_button.scss +15 -14
  9. data/app/assets/stylesheets/ratchet/base/_document.scss +30 -66
  10. data/app/assets/stylesheets/ratchet/base/_form.scss +162 -529
  11. data/app/assets/stylesheets/ratchet/base/_label-placeholder.scss +97 -0
  12. data/app/assets/stylesheets/ratchet/base/_media.scss +1 -1
  13. data/app/assets/stylesheets/ratchet/base/_multistep-form.scss +65 -11
  14. data/app/assets/stylesheets/ratchet/base/_section.scss +284 -0
  15. data/app/assets/stylesheets/ratchet/base/_table.scss +4 -4
  16. data/app/assets/stylesheets/ratchet/base/_text.scss +50 -45
  17. data/app/assets/stylesheets/ratchet/base/_validation.scss +83 -0
  18. data/app/assets/stylesheets/ratchet/enhancement/_hero.scss +39 -39
  19. data/app/assets/stylesheets/ratchet/utility/_color.scss +135 -0
  20. data/app/assets/stylesheets/ratchet/utility/_global.scss +21 -40
  21. data/app/assets/stylesheets/ratchet/utility/_loader.scss +1 -1
  22. data/app/helpers/ratchet/application_helper.rb +16 -10
  23. data/app/helpers/ratchet/form_helper.rb +302 -18
  24. data/app/views/layouts/ratchet/default.html.slim +2 -2
  25. data/app/views/shared/ratchet/_defs.html.slim +67 -0
  26. data/app/views/shared/ratchet/_footer.html.slim +6 -0
  27. data/app/views/shared/ratchet/_header.html.slim +5 -0
  28. data/app/views/shared/ratchet/_icons.html.slim +53 -6
  29. data/lib/ratchet_design/version.rb +1 -1
  30. data/public/{core-0.1.12.js → core-0.1.13.js} +66 -66
  31. data/public/core-0.1.13.js.gz +0 -0
  32. data/public/core-0.1.13.map.json +1 -0
  33. data/public/{fonts-woff-0.1.12.css → fonts-woff-0.1.13.css} +0 -0
  34. data/public/{fonts-woff-0.1.12.css.gz → fonts-woff-0.1.13.css.gz} +0 -0
  35. data/public/{fonts-woff2-0.1.12.css → fonts-woff2-0.1.13.css} +0 -0
  36. data/public/{fonts-woff2-0.1.12.css.gz → fonts-woff2-0.1.13.css.gz} +0 -0
  37. metadata +36 -32
  38. data/app/assets/javascripts/ratchet/utility/loader.js +0 -84
  39. data/app/assets/stylesheets/ratchet/enhancement/_contrast-section.scss +0 -22
  40. data/public/core-0.1.12.js.gz +0 -0
  41. 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: $capecod, $active-color: $cerulean, $background: $white) {
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: $nobel;
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($capecod, $cerulean);
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($cerulean, 45);
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 $nobel;
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: $shark;
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 $shark 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 $alto;
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: $nobel;
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: $aluminum;
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: $alabaster;
347
- box-shadow: 0 0 0 1px $iron inset;
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: $alabaster;
361
- box-shadow: 0 0 0 1px $iron inset;
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: $aluminum;
375
+ color: $steel;
371
376
  }
372
377
 
373
378
  .cm-s-default {
374
- .cm-keyword { color: $bahama; }
375
- .cm-atom { color: $lightning; }
376
- .cm-number { color: $rose; }
377
- .cm-def { color: $apple; }
378
- .cm-variable { color: $flush; }
379
- .cm-variable-2 { color: $orchid; }
380
- .cm-variable-3 { color: $flush; }
381
- .cm-property { color: $cerulean; }
382
- .cm-operator { color: $nobel; }
383
- .cm-comment { color: $nobel; }
384
- .cm-string { color: $cerulean; }
385
- .cm-string-2 { color: $apple; }
386
- .cm-meta { color: $nobel; }
387
- .cm-error { color: $punch; }
388
- .cm-qualifier { color: $nobel; }
389
- .cm-builtin { color: $bahama; }
390
- .cm-bracket { color: $nobel; }
391
- .cm-tag { color: $bahama; }
392
- .cm-attribute { color: $flush; }
393
- .cm-header { color: $cerulean; }
394
- .cm-quote { color: $apple; }
395
- .cm-hr { color: $nobel; }
396
- .cm-link { color: $orchid; }
397
- .cm-qualifier.cm-attribute { color: $flush; }
398
- .cm-error { color: $punch; }
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: $apple; }
407
+ .cm-variable { color: $caribbean; }
403
408
  }
404
409
 
405
- .cm-negative { color: $rose; }
406
- .cm-positive { color: $apple; }
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: $punch; }
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
- * Hero module
3
- * -------------------------------------------------------------------------- */
1
+ // /* ========================================================================== *
2
+ // * Hero module
3
+ // * -------------------------------------------------------------------------- */
4
4
 
5
- /* ===================================== *
6
- * a. Utilities
7
- * ------------------------------------- */
5
+ // /* ===================================== *
6
+ // * a. Utilities
7
+ // * ------------------------------------- */
8
8
 
9
- // Hero banners
10
- @mixin hero($height: tall, $color: $white, $background: $cerulean linear-gradient(to bottom right, $cerulean, mix($orchid, $cerulean, 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);
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
- // 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
- }
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
- // Remove botton margin from buttons
33
- a {
34
- @include button($fill: off, $bevel: on, $color: $white);
35
- margin: 0;
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
- // Smaller text for paragraphs
39
- p {
40
- font-size: 16px;
41
- max-width: 450px;
42
- margin-bottom: 35px;
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
- // Passive colors
10
- $shark: #1A1B1C; // Black
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: 18px;
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 (max-width: $large-width) and (min-width: $small-width) {
188
+ @media (min-width: $small-width) and (max-width: $large-width) {
208
189
  @content;
209
190
  }
210
191
  }
@@ -106,4 +106,4 @@
106
106
  line-height: 52px;
107
107
  text-align: center;
108
108
  margin: -25px 0 0 -25px;
109
- }
109
+ }
@@ -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 page_class(*classes)
46
- @classes = [] if @classes.nil?
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 page_classes
54
- page_class = @classes.map(&:to_s).join(" ") rescue nil
55
- parts = request.path.split("/").reject(&:blank?).reject{|s| s.match(/\A[0-9]+(\.[0-9]+)?\z/)}
56
- [ parts.last, page_class ].reject(&:blank?).join(" ")
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
- # Main section class output
65
+ # Consolidated page class output
60
66
  def main_class( classnames = nil )
61
67
  if ( classnames )
62
68
  @main_classes ||= ''