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.
- checksums.yaml +4 -4
- data/app/assets/images/ratchet/favicon.ico +0 -0
- data/app/assets/javascripts/ratchet/base/form.js +117 -8
- data/app/assets/javascripts/ratchet/base/mobilemenu.js +50 -12
- data/app/assets/javascripts/ratchet/base/validation.js +263 -0
- data/app/assets/javascripts/ratchet/core.js +78 -57
- data/app/assets/javascripts/ratchet/enhancement/_collapse.js +6 -3
- data/app/assets/javascripts/ratchet/enhancement/_lightbox.js +93 -0
- data/app/assets/javascripts/ratchet/enhancement/_swap.js +7 -3
- data/app/assets/javascripts/ratchet/{utility → enhancement}/loader.js +8 -15
- data/app/assets/javascripts/ratchet/enhancement/notice.js +3 -8
- data/app/assets/javascripts/ratchet/enhancement/sticky.js +35 -18
- data/app/assets/javascripts/ratchet/enhancement/waypoints.js +162 -125
- data/app/assets/javascripts/ratchet/shim/classlist.js +234 -0
- data/app/assets/javascripts/ratchet/shim/object.assign.js +30 -0
- data/app/assets/javascripts/ratchet/utility/ajax.js +122 -0
- data/app/assets/javascripts/ratchet/utility/compile_data.js +40 -0
- data/app/assets/javascripts/ratchet/utility/from_top.js +14 -0
- data/app/assets/javascripts/ratchet/utility/full_stop.js +55 -0
- data/app/assets/javascripts/ratchet/utility/get_closest.js +20 -0
- data/app/assets/javascripts/ratchet/utility/get_next.js +17 -0
- data/app/assets/javascripts/ratchet/utility/matches.js +15 -0
- data/app/assets/javascripts/ratchet/utility/scroll_to.js +74 -0
- data/app/assets/javascripts/ratchet/utility/throttle.js +25 -0
- data/app/assets/javascripts/ratchet/utility/timeout.js +45 -0
- data/app/assets/javascripts/ratchet/utility/unhover.js +56 -0
- data/app/assets/javascripts/ratchet/utility/word_count.js +15 -0
- data/app/assets/stylesheets/ratchet/_core.scss +2 -4
- data/app/assets/stylesheets/ratchet/base/_button.scss +1 -1
- data/app/assets/stylesheets/ratchet/base/_form.scss +50 -61
- data/app/assets/stylesheets/ratchet/base/_text.scss +8 -8
- data/app/assets/stylesheets/ratchet/{utility → enhancement}/_loader.scss +1 -1
- data/app/assets/stylesheets/ratchet/enhancement/_tooltip.scss +1 -6
- data/app/assets/stylesheets/ratchet/utility/_global.scss +12 -2
- data/app/helpers/ratchet/application_helper.rb +2 -28
- data/app/views/layouts/ratchet/default.html.slim +4 -5
- data/app/views/shared/ratchet/_footer.html.slim +2 -3
- data/app/views/shared/ratchet/_header.html.slim +1 -1
- data/lib/ratchet_design/version.rb +1 -1
- data/lib/ratchet_design.rb +0 -1
- data/public/assets/ratchet/core-0.1.6.js +105 -0
- data/public/assets/ratchet/core-0.1.6.js.gz +0 -0
- data/public/assets/ratchet/core-0.1.6.map.json +1 -0
- data/public/assets/ratchet/{fonts-woff-0.1.5.css → fonts-woff-0.1.6.css} +0 -0
- data/public/assets/ratchet/{fonts-woff-0.1.5.css.gz → fonts-woff-0.1.6.css.gz} +0 -0
- data/public/assets/ratchet/{fonts-woff2-0.1.5.css → fonts-woff2-0.1.6.css} +0 -0
- data/public/assets/ratchet/{fonts-woff2-0.1.5.css.gz → fonts-woff2-0.1.6.css.gz} +0 -0
- metadata +28 -47
- data/app/assets/images/ratchet/safari-pinned-tab.svg +0 -1
- data/app/assets/javascripts/ratchet/base/sync-input-value.js +0 -30
- data/app/assets/javascripts/ratchet/enhancement/lightbox.js +0 -165
- data/app/assets/javascripts/ratchet/shim/scope.js +0 -94
- data/app/assets/stylesheets/ratchet/base/_multistep-form.scss +0 -64
- data/app/assets/stylesheets/ratchet/enhancement/_lightbox.scss +0 -98
- data/app/helpers/ratchet/form_helper.rb +0 -140
- data/public/assets/ratchet/core-0.1.5.js +0 -133
- data/public/assets/ratchet/core-0.1.5.js.gz +0 -0
- 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';
|
@@ -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
|
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
|
-
|
53
|
-
|
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
|
-
|
64
|
-
|
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: $
|
72
|
+
color: $lima;
|
75
73
|
}
|
76
74
|
}
|
77
75
|
}
|
78
76
|
|
79
77
|
// Invalidated label
|
80
78
|
.invalid > {
|
81
|
-
|
82
|
-
|
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
|
-
|
108
|
-
|
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
|
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: $
|
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
|
-
|
319
|
-
opacity: 0;
|
307
|
+
display: none;
|
320
308
|
|
321
|
-
|
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
|
-
+
|
330
|
+
+ span {
|
348
331
|
border-radius: 50%;
|
349
332
|
}
|
350
333
|
|
351
|
-
&:checked +
|
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
|
-
+
|
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 +
|
361
|
+
&:checked + span {
|
379
362
|
box-shadow: 0 0 0 10px $cerulean inset;
|
380
363
|
}
|
381
364
|
|
382
|
-
&:checked +
|
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,
|
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: $
|
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: $
|
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: $
|
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
|
-
|
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*=
|
369
|
-
code[class*=
|
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: $
|
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: $
|
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: $
|
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: $
|
402
|
+
.cm-variable { color: $lima; }
|
403
403
|
}
|
404
404
|
|
405
405
|
.cm-negative { color: $rose; }
|
406
|
-
.cm-positive { color: $
|
406
|
+
.cm-positive { color: $lima; }
|
407
407
|
.cm-header,
|
408
408
|
.cm-strong { }
|
409
409
|
.cm-em { }
|
@@ -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:
|
134
|
-
}
|
135
|
-
|
136
|
-
.tooltip-width {
|
137
|
-
@include tooltip($width: 220px);
|
132
|
+
@include tooltip($offset: 30px);
|
138
133
|
}
|
139
134
|
|
140
135
|
// [data-tooltip] {
|