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
@@ -0,0 +1,97 @@
|
|
1
|
+
@mixin label-placeholder {
|
2
|
+
// Scoped variables
|
3
|
+
$font-size: 16px;
|
4
|
+
$padding-x: 12px;
|
5
|
+
$padding-y: 9px;
|
6
|
+
$distance-y: -23px;
|
7
|
+
$distance-x: 0;
|
8
|
+
$scale: .875;
|
9
|
+
$height: 50px;
|
10
|
+
$duration: .2s;
|
11
|
+
|
12
|
+
// Input labels
|
13
|
+
label.placeholder-label {
|
14
|
+
|
15
|
+
padding-top: 0;
|
16
|
+
line-height: vr(2);
|
17
|
+
background: $white;
|
18
|
+
font-size: $font-size;
|
19
|
+
|
20
|
+
// Nested text-based inputs
|
21
|
+
> input,
|
22
|
+
> textarea {
|
23
|
+
margin-top: 5px;
|
24
|
+
}
|
25
|
+
|
26
|
+
// Hide input placeholder text
|
27
|
+
::placeholder {
|
28
|
+
opacity: 0;
|
29
|
+
color: transparent;
|
30
|
+
}
|
31
|
+
|
32
|
+
// Default active color
|
33
|
+
:not(.valid):not(.invalid) > {
|
34
|
+
textarea, input {
|
35
|
+
&:focus + span,
|
36
|
+
&:active + span {
|
37
|
+
color: $steel;
|
38
|
+
}
|
39
|
+
}
|
40
|
+
}
|
41
|
+
|
42
|
+
// Inputs
|
43
|
+
textarea, input {
|
44
|
+
z-index: 1;
|
45
|
+
margin: 0;
|
46
|
+
font-size: inherit;
|
47
|
+
background: transparent;
|
48
|
+
padding: $padding-y $padding-x;
|
49
|
+
|
50
|
+
// Move labels out of the way on focus and empty
|
51
|
+
&:focus + .placeholder-label-text,
|
52
|
+
&:not(.empty) + .placeholder-label-text, {
|
53
|
+
z-index: 2;
|
54
|
+
transform: translate3d($distance-x, $distance-y, 0) scale($scale);
|
55
|
+
color: darken($steel, 10);
|
56
|
+
}
|
57
|
+
}
|
58
|
+
|
59
|
+
&.valid, &.invalid {
|
60
|
+
textarea, input {
|
61
|
+
+ .placeholder-label-text {
|
62
|
+
color: inherit;
|
63
|
+
}
|
64
|
+
}
|
65
|
+
}
|
66
|
+
|
67
|
+
input {
|
68
|
+
line-height: inherit;
|
69
|
+
}
|
70
|
+
textarea {
|
71
|
+
padding-top: $padding-y + 4;
|
72
|
+
}
|
73
|
+
}
|
74
|
+
|
75
|
+
// Faux-placeholder labels
|
76
|
+
.placeholder-label-text {
|
77
|
+
pointer-events: none;
|
78
|
+
font-size: inherit;
|
79
|
+
line-height: 1.2em;
|
80
|
+
position: absolute;
|
81
|
+
top: $padding-y + 5px;
|
82
|
+
left: $padding-x;
|
83
|
+
padding: 1px 0 0 1px;
|
84
|
+
transform-origin: left top 0;
|
85
|
+
will-change: transform;
|
86
|
+
-webkit-filter: blur(0);
|
87
|
+
backface-visibility: hidden;
|
88
|
+
-webkit-font-smoothing: subpixel-antialiased;
|
89
|
+
color: $alabaster;
|
90
|
+
transform: translate3d(0, 0, 0) scale(1);
|
91
|
+
transition-property: color, transform;
|
92
|
+
background: $white;
|
93
|
+
box-shadow: -6px 0 $white, 6px 0 $white;
|
94
|
+
}
|
95
|
+
}
|
96
|
+
|
97
|
+
@include label-placeholder;
|
@@ -1,22 +1,59 @@
|
|
1
1
|
fieldset.form-step {
|
2
|
-
left: 0;
|
3
|
-
right: 0;
|
4
2
|
|
5
|
-
|
6
|
-
|
3
|
+
// Transition to form step
|
4
|
+
&.enter[data-direction=forward] { animation: fade-in-right .3s forwards; }
|
5
|
+
&.enter[data-direction=reverse] { animation: fade-in-left .3s forwards; }
|
6
|
+
|
7
|
+
// Transition away from form step
|
8
|
+
&.exit[data-direction=forward] { animation: fade-out-left .3s forwards; }
|
9
|
+
&.exit[data-direction=reverse] { animation: fade-out-right .3s forwards; }
|
10
|
+
|
11
|
+
}
|
12
|
+
|
13
|
+
.progressive-form-nav {
|
14
|
+
display: flex;
|
15
|
+
position: relative;
|
16
|
+
justify-content: center;
|
17
|
+
text-align: center;
|
18
|
+
margin-bottom: 1em;
|
19
|
+
}
|
20
|
+
|
21
|
+
.progressive-form-nav-item {
|
22
|
+
margin: 5px 10px;
|
23
|
+
opacity: .4;
|
24
|
+
cursor: default;
|
25
|
+
text-decoration: none;
|
26
|
+
|
27
|
+
background: transparent linear-gradient(rgba(white, .6), rgba(white, .6)) 50% 90%/0px 1px no-repeat;
|
28
|
+
transition: background .1s ease, color .15s ease, opacity .15 ease;
|
29
|
+
|
30
|
+
&,
|
31
|
+
&:visited,
|
32
|
+
&:hover,
|
33
|
+
&:focus,
|
34
|
+
&:active {
|
35
|
+
color: white;
|
7
36
|
}
|
8
37
|
|
38
|
+
&.previous { opacity: .8; }
|
39
|
+
&.next { cursor: default; }
|
9
40
|
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
&.revisted, &.step-visited.arrived { animation: .5s fade-in-left forwards; }
|
41
|
+
&.previous, &.completed, .completed + & {
|
42
|
+
cursor: pointer;
|
43
|
+
&:hover { opacity: 1; }
|
44
|
+
}
|
15
45
|
|
16
|
-
|
17
|
-
|
46
|
+
&.here {
|
47
|
+
opacity: 1;
|
48
|
+
background: transparent linear-gradient(rgba(white, .6), rgba(white, .6)) 50% 90%/100% 1px no-repeat;
|
49
|
+
}
|
50
|
+
|
51
|
+
&:active {
|
52
|
+
transform: scale(.97, .97);
|
53
|
+
}
|
18
54
|
}
|
19
55
|
|
56
|
+
|
20
57
|
// Transition to form step
|
21
58
|
@keyframes fade-in-right {
|
22
59
|
0% {
|
@@ -48,6 +85,23 @@ fieldset.form-step {
|
|
48
85
|
}
|
49
86
|
}
|
50
87
|
|
88
|
+
// Transition away from form step
|
89
|
+
@keyframes fade-out-right {
|
90
|
+
0% {
|
91
|
+
opacity: 1;
|
92
|
+
transform: perspective(1px) translate3d(0, 0, 0);
|
93
|
+
}
|
94
|
+
|
95
|
+
99% {
|
96
|
+
opacity: 0;
|
97
|
+
transform: perspective(1px) translate3d(200px, 0, 0);
|
98
|
+
}
|
99
|
+
|
100
|
+
100% {
|
101
|
+
opacity: 0;
|
102
|
+
transform: perspective(1px) translate3d(9999px, 0, 0);
|
103
|
+
}
|
104
|
+
}
|
51
105
|
// Return to previous form step
|
52
106
|
@keyframes fade-in-left {
|
53
107
|
0% {
|
@@ -0,0 +1,284 @@
|
|
1
|
+
/* ========================================================================== *
|
2
|
+
* Contrast section
|
3
|
+
* -------------------------------------------------------------------------- */
|
4
|
+
|
5
|
+
/*
|
6
|
+
* Variables that we need to account for:
|
7
|
+
* Layout
|
8
|
+
* Spacing
|
9
|
+
* Background
|
10
|
+
* Angle Direction
|
11
|
+
* One Angle
|
12
|
+
* Background Image
|
13
|
+
*/
|
14
|
+
|
15
|
+
/* ===================================== *
|
16
|
+
* a. Utilities
|
17
|
+
* ------------------------------------- */
|
18
|
+
|
19
|
+
$section-gutter-none: 0;
|
20
|
+
$section-gutter-xsmall: 5%;
|
21
|
+
$section-gutter-small: 15%;
|
22
|
+
$section-gutter-large: 30%;
|
23
|
+
|
24
|
+
@mixin section-offset($num) {
|
25
|
+
.section-offset-#{$num} {
|
26
|
+
margin-top: $num * -1%;
|
27
|
+
}
|
28
|
+
}
|
29
|
+
|
30
|
+
@include section-offset(10);
|
31
|
+
@include section-offset(20);
|
32
|
+
@include section-offset(30);
|
33
|
+
@include section-offset(40);
|
34
|
+
@include section-offset(50);
|
35
|
+
|
36
|
+
/* ===================================== *
|
37
|
+
* b. Common
|
38
|
+
* ------------------------------------- */
|
39
|
+
|
40
|
+
// Contrast and Angle Sections
|
41
|
+
.contrast-section,
|
42
|
+
.angle-section {
|
43
|
+
padding-top: vr(4);
|
44
|
+
padding-bottom: vr(4);
|
45
|
+
position: relative;
|
46
|
+
|
47
|
+
// Background
|
48
|
+
&:before {
|
49
|
+
height: 100%;
|
50
|
+
top: 0;
|
51
|
+
content: '';
|
52
|
+
width: 100vw;
|
53
|
+
position: absolute;
|
54
|
+
left: calc(-50vw + 50%);
|
55
|
+
z-index: -1;
|
56
|
+
}
|
57
|
+
}
|
58
|
+
|
59
|
+
// Angle and Block Heros
|
60
|
+
.angle-hero,
|
61
|
+
.block-hero {
|
62
|
+
position: relative;
|
63
|
+
// overflow: hidden;
|
64
|
+
color: $white;
|
65
|
+
max-height: 1400px;
|
66
|
+
text-align: center;
|
67
|
+
|
68
|
+
&:before {
|
69
|
+
bottom: 0;
|
70
|
+
z-index: -3;
|
71
|
+
content: '';
|
72
|
+
width: 100vw;
|
73
|
+
position: absolute;
|
74
|
+
left: calc(-50vw + 50%);
|
75
|
+
}
|
76
|
+
|
77
|
+
// Hero SVG
|
78
|
+
figure {
|
79
|
+
bottom: -11%;
|
80
|
+
overflow: hidden;
|
81
|
+
position: absolute;
|
82
|
+
width: 100%;
|
83
|
+
z-index: -1;
|
84
|
+
|
85
|
+
@media (max-width: $breakpoint) {
|
86
|
+
@include hidden;
|
87
|
+
}
|
88
|
+
}
|
89
|
+
}
|
90
|
+
|
91
|
+
// Angle Hero
|
92
|
+
.angle-hero {
|
93
|
+
// Large Gutter is default for hero to completely set copy within angles
|
94
|
+
padding-top: $section-gutter-large;
|
95
|
+
padding-bottom: $section-gutter-large;
|
96
|
+
margin-top: -$section-gutter-large;
|
97
|
+
|
98
|
+
&:before {
|
99
|
+
top: (-$section-gutter-large - $section-gutter-xsmall);
|
100
|
+
height: 100% + $section-gutter-large;
|
101
|
+
}
|
102
|
+
|
103
|
+
// // Adjust height
|
104
|
+
// &.left:before,
|
105
|
+
// &.right:before {
|
106
|
+
// height: 100%;
|
107
|
+
// @include until($breakpoint) {
|
108
|
+
// height: 110% + $section-gutter-xsmall;
|
109
|
+
// };
|
110
|
+
// @include between($breakpoint-lg, 1800px) {
|
111
|
+
// height: 100% - $section-gutter-xsmall;
|
112
|
+
// };
|
113
|
+
// }
|
114
|
+
}
|
115
|
+
|
116
|
+
// Block Hero (No Angle)
|
117
|
+
.block-hero {
|
118
|
+
padding-top: $section-gutter-large * 2;
|
119
|
+
padding-bottom: 15%;
|
120
|
+
margin-top: -$section-gutter-large * 2;
|
121
|
+
margin-bottom: vr(5); // 90px
|
122
|
+
|
123
|
+
&:before {
|
124
|
+
top: 0;
|
125
|
+
height: 100%;
|
126
|
+
}
|
127
|
+
|
128
|
+
@include at-least($breakpoint-lg) {
|
129
|
+
padding-bottom: 10%;
|
130
|
+
};
|
131
|
+
}
|
132
|
+
|
133
|
+
// Default Angle Direction - RTL
|
134
|
+
.angle-section,
|
135
|
+
.angle-hero {
|
136
|
+
&:before { transform: skewY(-$deg); }
|
137
|
+
}
|
138
|
+
|
139
|
+
// Reverse Angle Direction - LTR
|
140
|
+
.angle-section.reverse,
|
141
|
+
.angle-hero.right {
|
142
|
+
&:before { transform: skewY($deg); }
|
143
|
+
}
|
144
|
+
|
145
|
+
// // Center break to only used in conjunction with angle-break
|
146
|
+
// @mixin center-break($height) {
|
147
|
+
|
148
|
+
// $width: 1.732 * $height;
|
149
|
+
// $position: .866 * $height;
|
150
|
+
|
151
|
+
// // Universal styles
|
152
|
+
// position: absolute;
|
153
|
+
// left: calc(50% - $position);
|
154
|
+
// bottom: 0;
|
155
|
+
// width: 0;
|
156
|
+
// height: 0;
|
157
|
+
// border-style: solid;
|
158
|
+
// border-width: 0 $width $height;
|
159
|
+
// border-color: transparent transparent $white transparent;
|
160
|
+
// // box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.1);
|
161
|
+
|
162
|
+
// // // Stack cells at breakpoint
|
163
|
+
// // @media (max-width: $breakpoint) {
|
164
|
+
// // flex-basis: 100%;
|
165
|
+
// // width: auto;
|
166
|
+
// // max-width: unset;
|
167
|
+
// // margin-left: 0;
|
168
|
+
// // }
|
169
|
+
// }
|
170
|
+
|
171
|
+
// Break full angle ** MAKE INTO MIXIN FOR VARIATIONS ****
|
172
|
+
.angle-break {
|
173
|
+
background: $white;
|
174
|
+
// Need better math here?
|
175
|
+
bottom: -95%;
|
176
|
+
content: '';
|
177
|
+
display: block;
|
178
|
+
height: 100%;
|
179
|
+
right: 0;
|
180
|
+
position: absolute;
|
181
|
+
width: 100%;
|
182
|
+
transform: skewY(30deg);
|
183
|
+
|
184
|
+
&.reverse {
|
185
|
+
transform: skewY(-30deg);
|
186
|
+
}
|
187
|
+
|
188
|
+
+ .center-break {
|
189
|
+
// @include center-break(350px);
|
190
|
+
}
|
191
|
+
}
|
192
|
+
|
193
|
+
|
194
|
+
/* ===================================== *
|
195
|
+
* c. Specific Hero SVG Styling
|
196
|
+
* ------------------------------------- */
|
197
|
+
|
198
|
+
// Blank isometric grid SVG positioning within hero
|
199
|
+
.isometric-grid-hero-bg {
|
200
|
+
figure {
|
201
|
+
overflow: visible;
|
202
|
+
}
|
203
|
+
|
204
|
+
svg {
|
205
|
+
margin-left: -136%;
|
206
|
+
margin-bottom: -20%;
|
207
|
+
width: 275%;
|
208
|
+
}
|
209
|
+
|
210
|
+
// Different positioning when hero is reversed
|
211
|
+
&.reverse {
|
212
|
+
svg {
|
213
|
+
margin-left: -50%;
|
214
|
+
}
|
215
|
+
}
|
216
|
+
}
|
217
|
+
|
218
|
+
// Cube Stack SVG positioning within hero
|
219
|
+
.cube-stack-hero-bg {
|
220
|
+
padding-bottom: 33%;
|
221
|
+
|
222
|
+
svg {
|
223
|
+
margin-left: -6%;
|
224
|
+
width: 112%;
|
225
|
+
|
226
|
+
// Prevent svg from continuing to scale
|
227
|
+
@media (min-width: 1500px) {
|
228
|
+
max-width: 1500px;
|
229
|
+
margin: 0 auto;
|
230
|
+
}
|
231
|
+
}
|
232
|
+
|
233
|
+
// Hide svg overflow - right
|
234
|
+
&:after {
|
235
|
+
background: $white;
|
236
|
+
bottom: -95%;
|
237
|
+
content: '';
|
238
|
+
display: block;
|
239
|
+
height: 100%;
|
240
|
+
left: 0;
|
241
|
+
position: absolute;
|
242
|
+
width: 100%;
|
243
|
+
transform: skewY(-30deg);
|
244
|
+
}
|
245
|
+
}
|
246
|
+
|
247
|
+
/* REVISIT BELOW */
|
248
|
+
|
249
|
+
// Need to rethink the gutter for sections
|
250
|
+
// // No Gutter for Sections
|
251
|
+
// &.no-gutter {
|
252
|
+
// padding: {top: $section-gutter-none; bottom: $section-gutter-none;}
|
253
|
+
// }
|
254
|
+
|
255
|
+
// // Xsmall Gutter for Sections
|
256
|
+
// &.xsmall-gutter {
|
257
|
+
// padding: {top: $section-gutter-xsmall; bottom: $section-gutter-xsmall;}
|
258
|
+
// }
|
259
|
+
|
260
|
+
// // Small Gutter for Sections
|
261
|
+
// &.small-gutter {
|
262
|
+
// padding: {top: $section-gutter-small; bottom: $section-gutter-small;}
|
263
|
+
// }
|
264
|
+
|
265
|
+
// // Large Gutter for Sections
|
266
|
+
// &.large-gutter {
|
267
|
+
// padding: {top: $section-gutter-large; bottom: $section-gutter-large;}
|
268
|
+
// }
|
269
|
+
|
270
|
+
// Need to rethink the gutters for heros
|
271
|
+
// // No Gutter for Hero
|
272
|
+
// &.no-gutter {
|
273
|
+
// padding-bottom: $section-gutter-none;
|
274
|
+
// }
|
275
|
+
|
276
|
+
// // Xsmall Gutter for Hero
|
277
|
+
// &.xsmall-gutter {
|
278
|
+
// padding-bottom: $section-gutter-xsmall;
|
279
|
+
// }
|
280
|
+
|
281
|
+
// // Small Gutter for Hero
|
282
|
+
// &.small-gutter {
|
283
|
+
// padding-bottom: $section-gutter-small;
|
284
|
+
// }
|
@@ -14,7 +14,7 @@
|
|
14
14
|
}
|
15
15
|
|
16
16
|
td {
|
17
|
-
box-shadow: 1px 1px $
|
17
|
+
box-shadow: 1px 1px $alabaster inset;
|
18
18
|
}
|
19
19
|
}
|
20
20
|
}
|
@@ -22,7 +22,7 @@
|
|
22
22
|
// Striped rows
|
23
23
|
@mixin striped() {
|
24
24
|
tbody tr:nth-child(2n+1) {
|
25
|
-
background: lighten($
|
25
|
+
background: lighten($alabaster, 5);
|
26
26
|
}
|
27
27
|
}
|
28
28
|
|
@@ -69,7 +69,7 @@ th {
|
|
69
69
|
|
70
70
|
td {
|
71
71
|
padding: 8px 10px 7px 10px;
|
72
|
-
box-shadow: 0 1px $
|
72
|
+
box-shadow: 0 1px $alabaster inset;
|
73
73
|
}
|
74
74
|
|
75
75
|
caption {
|
@@ -77,5 +77,5 @@ caption {
|
|
77
77
|
}
|
78
78
|
|
79
79
|
tfoot th {
|
80
|
-
box-shadow: 0 1px $
|
80
|
+
box-shadow: 0 1px $alabaster inset;
|
81
81
|
}
|