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
@@ -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;
@@ -19,7 +19,7 @@
19
19
  // Image caption mixin
20
20
  @mixin figcaption {
21
21
  font-size: 14px;
22
- color: $nobel;
22
+ color: $pewter;
23
23
  @include rhythm(11px, 4px);
24
24
  }
25
25
 
@@ -1,22 +1,59 @@
1
1
  fieldset.form-step {
2
- left: 0;
3
- right: 0;
4
2
 
5
- &[disabled] {
6
- display: none;
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
- // Transition to form step
11
- &.arrived { animation: fade-in-right .5s forwards; }
12
-
13
- // Revisit form step
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
- // Transition away from form step
17
- &.departed { animation: fade-out-left .5s forwards; }
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 $alto inset;
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($iron, 5);
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 $alto inset;
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 $alto inset;
80
+ box-shadow: 0 1px $alabaster inset;
81
81
  }