ratchet_design 0.1.1 → 0.1.2

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 (61) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/images/ratchet/favicon.ico +0 -0
  3. data/app/assets/images/ratchet/safari-pinned-tab.svg +1 -0
  4. data/app/assets/javascripts/ratchet/base/form.js +9 -118
  5. data/app/assets/javascripts/ratchet/base/mobilemenu.js +12 -50
  6. data/app/assets/javascripts/ratchet/base/sync-input-value.js +30 -0
  7. data/app/assets/javascripts/ratchet/core.js +58 -77
  8. data/app/assets/javascripts/ratchet/enhancement/_collapse.js +3 -6
  9. data/app/assets/javascripts/ratchet/enhancement/_swap.js +3 -7
  10. data/app/assets/javascripts/ratchet/enhancement/lightbox.js +165 -0
  11. data/app/assets/javascripts/ratchet/enhancement/notice.js +8 -3
  12. data/app/assets/javascripts/ratchet/enhancement/sticky.js +18 -35
  13. data/app/assets/javascripts/ratchet/enhancement/waypoints.js +125 -162
  14. data/app/assets/javascripts/ratchet/shim/scope.js +94 -0
  15. data/app/assets/javascripts/ratchet/{enhancement → utility}/loader.js +15 -8
  16. data/app/assets/stylesheets/ratchet/_core.scss +4 -1
  17. data/app/assets/stylesheets/ratchet/base/_button.scss +3 -3
  18. data/app/assets/stylesheets/ratchet/base/_form.scss +63 -47
  19. data/app/assets/stylesheets/ratchet/base/_multistep-form.scss +64 -0
  20. data/app/assets/stylesheets/ratchet/base/_text.scss +15 -15
  21. data/app/assets/stylesheets/ratchet/enhancement/_lightbox.scss +98 -0
  22. data/app/assets/stylesheets/ratchet/enhancement/_tooltip.scss +142 -0
  23. data/app/assets/stylesheets/ratchet/fonts-woff.css +4 -4
  24. data/app/assets/stylesheets/ratchet/fonts-woff2.css +4 -4
  25. data/app/assets/stylesheets/ratchet/utility/_global.scss +3 -13
  26. data/app/assets/stylesheets/ratchet/{enhancement → utility}/_loader.scss +1 -1
  27. data/app/helpers/ratchet/application_helper.rb +6 -12
  28. data/app/helpers/ratchet/form_helper.rb +140 -0
  29. data/app/views/layouts/ratchet/default.html.slim +3 -2
  30. data/app/views/shared/ratchet/_footer.html.slim +1 -1
  31. data/app/views/shared/ratchet/_header.html.slim +1 -1
  32. data/lib/ratchet_design/version.rb +1 -1
  33. data/lib/ratchet_design.rb +24 -4
  34. data/public/assets/ratchet/core-0.1.2.js +133 -0
  35. data/public/assets/ratchet/core-0.1.2.js.gz +0 -0
  36. data/public/assets/ratchet/core-0.1.2.map.json +1 -0
  37. data/public/assets/ratchet/core-0.1.20.js +20472 -0
  38. data/public/assets/ratchet/{fonts-woff-0.1.1.css → fonts-woff-0.1.2.css} +4 -4
  39. data/public/assets/ratchet/{fonts-woff-0.1.1.css.gz → fonts-woff-0.1.2.css.gz} +0 -0
  40. data/public/assets/ratchet/{fonts-woff2-0.1.1.css → fonts-woff2-0.1.2.css} +4 -4
  41. data/public/assets/ratchet/{fonts-woff2-0.1.1.css.gz → fonts-woff2-0.1.2.css.gz} +0 -0
  42. metadata +48 -27
  43. data/app/assets/javascripts/ratchet/base/validation.js +0 -263
  44. data/app/assets/javascripts/ratchet/enhancement/_lightbox.js +0 -93
  45. data/app/assets/javascripts/ratchet/shim/classlist.js +0 -234
  46. data/app/assets/javascripts/ratchet/shim/object.assign.js +0 -30
  47. data/app/assets/javascripts/ratchet/utility/compile_data.js +0 -32
  48. data/app/assets/javascripts/ratchet/utility/from_top.js +0 -14
  49. data/app/assets/javascripts/ratchet/utility/full_stop.js +0 -55
  50. data/app/assets/javascripts/ratchet/utility/get_closest.js +0 -20
  51. data/app/assets/javascripts/ratchet/utility/get_next.js +0 -17
  52. data/app/assets/javascripts/ratchet/utility/matches.js +0 -15
  53. data/app/assets/javascripts/ratchet/utility/scroll_to.js +0 -74
  54. data/app/assets/javascripts/ratchet/utility/throttle.js +0 -25
  55. data/app/assets/javascripts/ratchet/utility/timeout.js +0 -45
  56. data/app/assets/javascripts/ratchet/utility/unhover.js +0 -56
  57. data/app/assets/javascripts/ratchet/utility/word_count.js +0 -15
  58. data/app/assets/stylesheets/ratchet/enhancement/_signup.scss +0 -206
  59. data/public/assets/ratchet/core-0.1.1.js +0 -103
  60. data/public/assets/ratchet/core-0.1.1.js.gz +0 -0
  61. data/public/assets/ratchet/core-0.1.1.map.json +0 -1
@@ -1,206 +0,0 @@
1
- /* ========================================================================== *
2
- * Signup module
3
- * -------------------------------------------------------------------------- */
4
-
5
- /* ===================================== *
6
- * a. Animations
7
- * ------------------------------------- */
8
-
9
- // Hello form animation
10
- @keyframes fade-in-right {
11
- 0% {
12
- opacity: 0;
13
- transform: perspective(1px) translate3d(200px, 0, 0);
14
- }
15
-
16
- 100% {
17
- opacity: 1;
18
- transform: perspective(1px) translate3d(0, 0, 0);
19
- }
20
- }
21
-
22
- // Goodbye form animation
23
- @keyframes fade-out-left {
24
- 0% {
25
- opacity: 1;
26
- transform: perspective(1px) translate3d(0, 0, 0);
27
- }
28
-
29
- 99% {
30
- opacity: 0;
31
- transform: perspective(1px) translate3d(-200px, 0, 0);
32
- }
33
-
34
- 100% {
35
- opacity: 0;
36
- transform: perspective(1px) translate3d(-9999px, 0, 0);
37
- }
38
- }
39
-
40
- // Welcome back form animation
41
- @keyframes fade-in-left {
42
- 0% {
43
- opacity: 0;
44
- transform: perspective(1px) translate3d(-200px, 0, 0);
45
- }
46
-
47
- 100% {
48
- opacity: 1;
49
- transform: perspective(1px) translate3d(0, 0, 0);
50
- }
51
- }
52
-
53
- /* ===================================== *
54
- * a. Common
55
- * ------------------------------------- */
56
-
57
- // Namespaced declarations
58
- .signup {
59
- align-items: center;
60
- background: $cerulean linear-gradient(to bottom, $cerulean, mix($orchid, $cerulean, 75%)) no-repeat fixed;
61
-
62
- // Transparent header
63
- header[role=banner] {
64
- height: 135px;
65
- justify-content: center;
66
-
67
- &,
68
- &:before {
69
- background: transparent;
70
- }
71
-
72
- // Fancy logo is fancy
73
- svg {
74
- width: auto;
75
- max-width: 100%;
76
- height: vr(3); // 45px
77
- color: $white;
78
- }
79
- }
80
-
81
- // Main content
82
- main {
83
- width: 100%;
84
- padding-top: 0;
85
- }
86
-
87
- // Fieldset legend
88
- legend {
89
- text-transform: none;
90
- letter-spacing: normal;
91
- box-shadow: none;
92
- font-weight: 300;
93
- width: 100%;
94
- float: left;
95
- font-size: 24px;
96
- padding-top: vr(2); // 30px
97
- margin-bottom: vr(2); // 30px
98
- text-align: center;
99
- }
100
-
101
- // All form fieldsets
102
- fieldset {
103
- position: absolute;
104
- left: -9999px;
105
- opacity: 0;
106
- width: 385px;
107
- max-width: 100%;
108
- margin: 0 auto;
109
- padding: 0 vr(2); // 30px
110
- background: $white;
111
- border-radius: $radius;
112
- box-shadow: 0 0 25px rgba(0, 0, 0, .05);
113
- will-change: transform;
114
- -webkit-filter: blur(0);
115
- backface-visibility: hidden;
116
- -webkit-font-smoothing: subpixel-antialiased;
117
- @include nested-label(large);
118
-
119
- // Animated styles
120
- &.hello,
121
- &.welcome-back,
122
- &.goodbye {
123
- left: 0;
124
- right: 0;
125
- }
126
-
127
- // I say hello
128
- &.hello {
129
- animation: fade-in-right .5s forwards;
130
- }
131
-
132
- // Welcome back, Kotter
133
- &.welcome-back {
134
- animation: .5s fade-in-left forwards;
135
- }
136
-
137
- // You say goodbye
138
- &.goodbye {
139
- animation: fade-out-left .5s forwards;
140
- }
141
- }
142
-
143
- // Submit buttons
144
- button[type=submit] {
145
- @include button($size: large, $color: $lima);
146
- margin-bottom: 3px;
147
- width: 100%;
148
- }
149
-
150
- // Grouped inputs
151
- .input-group {
152
- @include grid;
153
- @include gutter(19px);
154
-
155
- > * {
156
- @include span(1 of 2);
157
- }
158
-
159
- label {
160
- margin: 0;
161
- }
162
- }
163
-
164
- // Form footers
165
- footer p {
166
- font-size: 14px;
167
- padding-top: 11px;
168
- margin-bottom: 19px;
169
- text-align: center;
170
-
171
- // Inside the box styles
172
- &:first-child {
173
- color: $nobel;
174
-
175
- a {
176
- font-weight: 700;
177
-
178
- &:hover,
179
- &:focus,
180
- &:active {
181
- color: $aluminum;
182
- }
183
- }
184
- }
185
-
186
- // Outside the box styles
187
- &:last-child {
188
- color: lighten($cerulean, 45);
189
- position: absolute;
190
- top: 100%;
191
- left: 0;
192
- width: 100%;
193
- margin: 0;
194
-
195
- a {
196
- font-weight: 700;
197
-
198
- &:hover,
199
- &:focus,
200
- &:active {
201
- color: $white;
202
- }
203
- }
204
- }
205
- }
206
- }