ratchet_design 0.1.5 → 0.1.6

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 (58) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/images/ratchet/favicon.ico +0 -0
  3. data/app/assets/javascripts/ratchet/base/form.js +117 -8
  4. data/app/assets/javascripts/ratchet/base/mobilemenu.js +50 -12
  5. data/app/assets/javascripts/ratchet/base/validation.js +263 -0
  6. data/app/assets/javascripts/ratchet/core.js +78 -57
  7. data/app/assets/javascripts/ratchet/enhancement/_collapse.js +6 -3
  8. data/app/assets/javascripts/ratchet/enhancement/_lightbox.js +93 -0
  9. data/app/assets/javascripts/ratchet/enhancement/_swap.js +7 -3
  10. data/app/assets/javascripts/ratchet/{utility → enhancement}/loader.js +8 -15
  11. data/app/assets/javascripts/ratchet/enhancement/notice.js +3 -8
  12. data/app/assets/javascripts/ratchet/enhancement/sticky.js +35 -18
  13. data/app/assets/javascripts/ratchet/enhancement/waypoints.js +162 -125
  14. data/app/assets/javascripts/ratchet/shim/classlist.js +234 -0
  15. data/app/assets/javascripts/ratchet/shim/object.assign.js +30 -0
  16. data/app/assets/javascripts/ratchet/utility/ajax.js +122 -0
  17. data/app/assets/javascripts/ratchet/utility/compile_data.js +40 -0
  18. data/app/assets/javascripts/ratchet/utility/from_top.js +14 -0
  19. data/app/assets/javascripts/ratchet/utility/full_stop.js +55 -0
  20. data/app/assets/javascripts/ratchet/utility/get_closest.js +20 -0
  21. data/app/assets/javascripts/ratchet/utility/get_next.js +17 -0
  22. data/app/assets/javascripts/ratchet/utility/matches.js +15 -0
  23. data/app/assets/javascripts/ratchet/utility/scroll_to.js +74 -0
  24. data/app/assets/javascripts/ratchet/utility/throttle.js +25 -0
  25. data/app/assets/javascripts/ratchet/utility/timeout.js +45 -0
  26. data/app/assets/javascripts/ratchet/utility/unhover.js +56 -0
  27. data/app/assets/javascripts/ratchet/utility/word_count.js +15 -0
  28. data/app/assets/stylesheets/ratchet/_core.scss +2 -4
  29. data/app/assets/stylesheets/ratchet/base/_button.scss +1 -1
  30. data/app/assets/stylesheets/ratchet/base/_form.scss +50 -61
  31. data/app/assets/stylesheets/ratchet/base/_text.scss +8 -8
  32. data/app/assets/stylesheets/ratchet/{utility → enhancement}/_loader.scss +1 -1
  33. data/app/assets/stylesheets/ratchet/enhancement/_tooltip.scss +1 -6
  34. data/app/assets/stylesheets/ratchet/utility/_global.scss +12 -2
  35. data/app/helpers/ratchet/application_helper.rb +2 -28
  36. data/app/views/layouts/ratchet/default.html.slim +4 -5
  37. data/app/views/shared/ratchet/_footer.html.slim +2 -3
  38. data/app/views/shared/ratchet/_header.html.slim +1 -1
  39. data/lib/ratchet_design/version.rb +1 -1
  40. data/lib/ratchet_design.rb +0 -1
  41. data/public/assets/ratchet/core-0.1.6.js +105 -0
  42. data/public/assets/ratchet/core-0.1.6.js.gz +0 -0
  43. data/public/assets/ratchet/core-0.1.6.map.json +1 -0
  44. data/public/assets/ratchet/{fonts-woff-0.1.5.css → fonts-woff-0.1.6.css} +0 -0
  45. data/public/assets/ratchet/{fonts-woff-0.1.5.css.gz → fonts-woff-0.1.6.css.gz} +0 -0
  46. data/public/assets/ratchet/{fonts-woff2-0.1.5.css → fonts-woff2-0.1.6.css} +0 -0
  47. data/public/assets/ratchet/{fonts-woff2-0.1.5.css.gz → fonts-woff2-0.1.6.css.gz} +0 -0
  48. metadata +28 -47
  49. data/app/assets/images/ratchet/safari-pinned-tab.svg +0 -1
  50. data/app/assets/javascripts/ratchet/base/sync-input-value.js +0 -30
  51. data/app/assets/javascripts/ratchet/enhancement/lightbox.js +0 -165
  52. data/app/assets/javascripts/ratchet/shim/scope.js +0 -94
  53. data/app/assets/stylesheets/ratchet/base/_multistep-form.scss +0 -64
  54. data/app/assets/stylesheets/ratchet/enhancement/_lightbox.scss +0 -98
  55. data/app/helpers/ratchet/form_helper.rb +0 -140
  56. data/public/assets/ratchet/core-0.1.5.js +0 -133
  57. data/public/assets/ratchet/core-0.1.5.js.gz +0 -0
  58. data/public/assets/ratchet/core-0.1.5.map.json +0 -1
@@ -0,0 +1,56 @@
1
+ /**
2
+ * Unhover 0.0.1
3
+ * Disable hover events on scroll
4
+ * @author Kyle Foster (@hkfoster)
5
+ * @license MIT
6
+ **/
7
+
8
+ // Dependencies
9
+ var throttle = require( '../utility/throttle' ),
10
+ timeout = require( '../utility/timeout' );
11
+
12
+ // Public API function
13
+ var unhover = function( settings ) {
14
+
15
+ // Overridable defaults
16
+ var defaults = {
17
+ scrollDelay : 150
18
+ };
19
+
20
+ // Scoped variables
21
+ var options = Object.assign( {}, defaults, settings ),
22
+ docElem = document.documentElement,
23
+ scrollTimer;
24
+
25
+ // Scroll handler function
26
+ function scrollHandler() {
27
+
28
+ // Clear timer (if it exists)
29
+ if ( scrollTimer ) timeout.clear( scrollTimer );
30
+
31
+ // Turn off pointer events
32
+ if ( !docElem.style.pointerEvents ) {
33
+ docElem.style.pointerEvents = 'none';
34
+ }
35
+
36
+ // Check to see if scroll is over
37
+ scrollTimer = timeout.set( function() {
38
+
39
+ // And reset pointer events upon completion
40
+ docElem.style.pointerEvents = '';
41
+
42
+ // Delay firing function based on argument passed
43
+ }, options.scrollDelay );
44
+
45
+ }
46
+
47
+ // Scroll throttle function init
48
+ throttle( 'scroll', 'optimizedscroll' );
49
+
50
+ // Scroll function listener
51
+ window.addEventListener( 'optimizedscroll', scrollHandler, false );
52
+
53
+ };
54
+
55
+ // Public API
56
+ module.exports = unhover;
@@ -0,0 +1,15 @@
1
+ /**
2
+ * WordCount 0.0.1
3
+ * Word counter function
4
+ * @author Kyle Foster (@hkfoster)
5
+ * @license MIT
6
+ **/
7
+
8
+ // Public API function
9
+ var wordCount = function( str ) {
10
+ var matches = str.match( /\S+/g );
11
+ return matches ? matches.length : 0;
12
+ };
13
+
14
+ // Public API
15
+ module.exports = wordCount;
@@ -1,7 +1,6 @@
1
1
  // Utility modules
2
2
  @import 'utility/global';
3
3
  @import 'utility/grid';
4
- @import 'utility/loader';
5
4
 
6
5
  // Base modules
7
6
  @import 'base/text';
@@ -9,15 +8,14 @@
9
8
  @import 'base/button';
10
9
  @import 'base/media';
11
10
  @import 'base/form';
12
- @import 'base/multistep-form';
13
11
  @import 'base/table';
14
12
  @import 'base/document';
15
13
 
16
14
  // Enhancement modules
15
+ @import 'enhancement/loader';
17
16
  @import 'enhancement/feature';
18
17
  @import 'enhancement/sticky-sidebar';
19
18
  @import 'enhancement/notice';
20
19
  @import 'enhancement/hero';
21
20
  @import 'enhancement/contrast-section';
22
- @import 'enhancement/tooltip';
23
- @import 'enhancement/lightbox';
21
+ @import 'enhancement/tooltip';
@@ -42,7 +42,7 @@
42
42
  } @else if $color == secondary {
43
43
  $color: $flush;
44
44
  } @else if $color == success {
45
- $color: $apple;
45
+ $color: $lima;
46
46
  } @else if $color == failure {
47
47
  $color: $punch;
48
48
  }
@@ -6,25 +6,18 @@
6
6
  * i. Utility
7
7
  * ------------------------------------- */
8
8
 
9
- // Universal text-based input variable
10
- $text-inputs: 'textarea, input[type=url], input[type=tel], input[type=text], input[type=email], input[type=number], input[type=password]';
11
-
12
9
  // Nested labels
13
- @mixin nested-label($size: normal, $spacing: on) {
10
+ @mixin nested-label($size: normal) {
14
11
 
15
12
  // Scoped variables
16
13
  $font-size: if($size == large, 17px, 16px);
14
+ $margin: if($size == large, 19px, 25px);
17
15
  $padding-y: if($size == large, 12px, 9px);
18
16
  $padding-x: if($size == large, 14px, 12px);
19
- $margin: if($size == large, 19px, 25px);
20
17
  $distance: if($size == large, -24px, -22px);
21
18
  $scale: if($size == large, .824, .875);
22
19
  $height: if($size == large, 56px, 50px);
23
20
 
24
- @if $spacing != on {
25
- $margin: 0;
26
- }
27
-
28
21
  // Active state
29
22
  %active {
30
23
  z-index: 2;
@@ -39,9 +32,9 @@ $text-inputs: 'textarea, input[type=url], input[type=tel], input[type=text], inp
39
32
 
40
33
  // Input labels
41
34
  label {
35
+ display: flex;
36
+ width: 100%;
42
37
  padding: 0;
43
- clear: both;
44
- flex: 1 0 auto;
45
38
  background: $white;
46
39
  font-size: $font-size;
47
40
  margin-bottom: $margin;
@@ -49,8 +42,8 @@ $text-inputs: 'textarea, input[type=url], input[type=tel], input[type=text], inp
49
42
 
50
43
  // Default active color
51
44
  :not(.valid):not(.invalid) > {
52
- textarea,
53
- #{$text-inputs} {
45
+ input,
46
+ textarea {
54
47
  &:focus + span,
55
48
  &:active + span {
56
49
  color: darken($aluminum, 10);
@@ -60,8 +53,13 @@ $text-inputs: 'textarea, input[type=url], input[type=tel], input[type=text], inp
60
53
 
61
54
  // Validated label
62
55
  .valid > {
63
- textarea,
64
- #{$text-inputs} {
56
+ input,
57
+ textarea {
58
+
59
+ // Active state
60
+ + span {
61
+ @extend %active;
62
+ }
65
63
 
66
64
  // Non-required active color
67
65
  &:not(:required):focus + span,
@@ -71,15 +69,20 @@ $text-inputs: 'textarea, input[type=url], input[type=tel], input[type=text], inp
71
69
 
72
70
  // Required active color
73
71
  &:required + span {
74
- color: $apple;
72
+ color: $lima;
75
73
  }
76
74
  }
77
75
  }
78
76
 
79
77
  // Invalidated label
80
78
  .invalid > {
81
- textarea,
82
- #{$text-inputs} {
79
+ input,
80
+ textarea {
81
+
82
+ // Active state
83
+ + span {
84
+ @extend %active;
85
+ }
83
86
 
84
87
  // Non-required active color
85
88
  &:not(:required):focus + span,
@@ -96,7 +99,6 @@ $text-inputs: 'textarea, input[type=url], input[type=tel], input[type=text], inp
96
99
 
97
100
  // Select-specific styles
98
101
  select {
99
- margin: 0;
100
102
  font-size: $font-size;
101
103
  line-height: inherit;
102
104
  height: $height;
@@ -104,13 +106,18 @@ $text-inputs: 'textarea, input[type=url], input[type=tel], input[type=text], inp
104
106
  }
105
107
 
106
108
  // Inputs
107
- textarea,
108
- #{$text-inputs} {
109
+ input,
110
+ textarea {
111
+ background: transparent;
112
+ }
113
+
114
+ input,
115
+ select,
116
+ textarea {
109
117
  z-index: 1;
110
118
  margin: 0;
111
119
  font-size: $font-size;
112
120
  line-height: inherit;
113
- background: transparent;
114
121
  padding: $padding-y $padding-x;
115
122
 
116
123
  // Faux-placeholder labels
@@ -139,34 +146,16 @@ $text-inputs: 'textarea, input[type=url], input[type=tel], input[type=text], inp
139
146
  transform .2s;
140
147
  }
141
148
 
142
- // Move labels out of the way on focus and empty
149
+ // Move labels out of the way on focus
143
150
  &:focus + span,
144
- &:active + span,
145
- &:not([value=""]) + span, {
151
+ &:active + span {
146
152
  @extend %active;
147
153
  }
148
154
  }
149
155
  }
150
156
 
151
- // Inline forms
152
- @mixin inline-form($size: normal, $gutter: 10px) {
153
- @include nested-label($size, off);
154
- @include grid;
155
-
156
- // Remove top spacing from submit button
157
- > [type=submit] {
158
- margin-top: 0;
159
- }
160
-
161
- // Leave right margin off last element
162
- > :not(:last-child) {
163
- margin-right: $gutter;
164
- }
165
-
166
- }
167
-
168
157
  %success-btn {
169
- @include button($color: $apple);
158
+ @include button($color: $lima);
170
159
  }
171
160
 
172
161
  /* ===================================== *
@@ -315,15 +304,9 @@ select {
315
304
  // Radios & checkboxes
316
305
  input[type=radio],
317
306
  input[type=checkbox] {
318
- position: absolute;
319
- opacity: 0;
307
+ display: none;
320
308
 
321
- &:focus + .tick-label,
322
- &:active + .tick-label {
323
- box-shadow: 0 0 0 1px $aluminum inset;
324
- }
325
-
326
- + .tick-label {
309
+ + span {
327
310
  width: 20px;
328
311
  height: 20px;
329
312
  margin: 0 8px 0 0;
@@ -344,11 +327,11 @@ input[type=checkbox] {
344
327
  // Radios
345
328
  input[type=radio] {
346
329
 
347
- + .tick-label {
330
+ + span {
348
331
  border-radius: 50%;
349
332
  }
350
333
 
351
- &:checked + .tick-label {
334
+ &:checked + span {
352
335
  box-shadow: 0 0 0 8px $cerulean inset;
353
336
  }
354
337
  }
@@ -356,7 +339,7 @@ input[type=radio] {
356
339
  // Checkboxes
357
340
  input[type=checkbox] {
358
341
 
359
- + .tick-label {
342
+ + span {
360
343
  border-radius: $radius;
361
344
  position: relative;
362
345
 
@@ -375,11 +358,11 @@ input[type=checkbox] {
375
358
  }
376
359
  }
377
360
 
378
- &:checked + .tick-label {
361
+ &:checked + span {
379
362
  box-shadow: 0 0 0 10px $cerulean inset;
380
363
  }
381
364
 
382
- &:checked + .tick-label:before {
365
+ &:checked + span:before {
383
366
  transform: scale(.5) rotate(-45deg);
384
367
  }
385
368
  }
@@ -531,7 +514,13 @@ button[type=submit] {
531
514
  * ------------------------------------- */
532
515
 
533
516
  // Apply validation styles to inputs & textareas
534
- textarea, #{$text-inputs}, select {
517
+ textarea,
518
+ input[type=url],
519
+ input[type=tel],
520
+ input[type=text],
521
+ input[type=email],
522
+ input[type=number],
523
+ input[type=password] {
535
524
 
536
525
  // Strip default styling
537
526
  &:invalid {
@@ -542,13 +531,13 @@ textarea, #{$text-inputs}, select {
542
531
  // Apply valid state color to required fields & adjacent labels
543
532
  &.valid:required,
544
533
  .valid &:required {
545
- color: $apple;
534
+ color: $lima;
546
535
  }
547
536
 
548
537
  // Apply valid state to required fields
549
538
  &.valid:required,
550
539
  .valid &:required {
551
- border-color: $apple;
540
+ border-color: $lima;
552
541
  }
553
542
 
554
543
  // Apply invalid state color to required fields & adjacent labels
@@ -566,7 +555,7 @@ textarea, #{$text-inputs}, select {
566
555
  // Apply valid state to Chrome’s autofilled fields
567
556
  &.valid:required:-webkit-autofill,
568
557
  .valid &:required:-webkit-autofill {
569
- -webkit-text-fill-color: $apple;
558
+ -webkit-text-fill-color: $lima;
570
559
  }
571
560
 
572
561
  // Apply invalid state to Chrome’s autofilled fields
@@ -627,4 +616,4 @@ textarea, #{$text-inputs}, select {
627
616
  border-color: transparent transparent $punch transparent;
628
617
  }
629
618
  }
630
- }
619
+ }
@@ -328,7 +328,7 @@ code,
328
328
  kbd,
329
329
  samp {
330
330
  font-family: $mono-font;
331
- // color: $aluminum;
331
+ color: $aluminum;
332
332
  direction: ltr;
333
333
  text-align: left;
334
334
  tab-size: 2;
@@ -365,8 +365,8 @@ pre {
365
365
  * xi. Syntax highlighting
366
366
  * ------------------------------------- */
367
367
 
368
- pre[class*=lang-],
369
- code[class*=lang-] {
368
+ pre[class*=language-],
369
+ code[class*=language-] {
370
370
  color: $aluminum;
371
371
  }
372
372
 
@@ -374,7 +374,7 @@ code[class*=lang-] {
374
374
  .cm-keyword { color: $bahama; }
375
375
  .cm-atom { color: $lightning; }
376
376
  .cm-number { color: $rose; }
377
- .cm-def { color: $apple; }
377
+ .cm-def { color: $lima; }
378
378
  .cm-variable { color: $flush; }
379
379
  .cm-variable-2 { color: $orchid; }
380
380
  .cm-variable-3 { color: $flush; }
@@ -382,7 +382,7 @@ code[class*=lang-] {
382
382
  .cm-operator { color: $nobel; }
383
383
  .cm-comment { color: $nobel; }
384
384
  .cm-string { color: $cerulean; }
385
- .cm-string-2 { color: $apple; }
385
+ .cm-string-2 { color: $lima; }
386
386
  .cm-meta { color: $nobel; }
387
387
  .cm-error { color: $punch; }
388
388
  .cm-qualifier { color: $nobel; }
@@ -391,7 +391,7 @@ code[class*=lang-] {
391
391
  .cm-tag { color: $bahama; }
392
392
  .cm-attribute { color: $flush; }
393
393
  .cm-header { color: $cerulean; }
394
- .cm-quote { color: $apple; }
394
+ .cm-quote { color: $lima; }
395
395
  .cm-hr { color: $nobel; }
396
396
  .cm-link { color: $orchid; }
397
397
  .cm-qualifier.cm-attribute { color: $flush; }
@@ -399,11 +399,11 @@ code[class*=lang-] {
399
399
  }
400
400
 
401
401
  .static-code {
402
- .cm-variable { color: $apple; }
402
+ .cm-variable { color: $lima; }
403
403
  }
404
404
 
405
405
  .cm-negative { color: $rose; }
406
- .cm-positive { color: $apple; }
406
+ .cm-positive { color: $lima; }
407
407
  .cm-header,
408
408
  .cm-strong { }
409
409
  .cm-em { }
@@ -37,7 +37,7 @@
37
37
  .loader {
38
38
  font-size: 14px;
39
39
  color: $white;
40
- position: fixed;
40
+ position: absolute;
41
41
  left: 0;
42
42
  top: 145px;
43
43
  width: 100%;
@@ -34,7 +34,6 @@
34
34
  content: attr(data-tooltip);
35
35
  color: $white;
36
36
  font-size: 14px;
37
- font-weight: 300;
38
37
  line-height: 20px;
39
38
  padding: 10px 12px;
40
39
  max-width: 100vw;
@@ -130,11 +129,7 @@ article > p:first-of-type > [data-tooltip] {
130
129
  }
131
130
 
132
131
  .tooltip-offset {
133
- @include tooltip($offset: 10px);
134
- }
135
-
136
- .tooltip-width {
137
- @include tooltip($width: 220px);
132
+ @include tooltip($offset: 30px);
138
133
  }
139
134
 
140
135
  // [data-tooltip] {