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.
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 ||= ''