ratchet_design 0.1.37 → 0.1.38
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 +5 -5
- data/app/assets/javascripts/ratchet/base/form.js +0 -34
- data/app/assets/stylesheets/ratchet/_core.scss +1 -0
- data/app/assets/stylesheets/ratchet/base/_check-radio.scss +165 -0
- data/app/assets/stylesheets/ratchet/base/_form.scss +13 -0
- data/app/assets/stylesheets/ratchet/base/_validation.scss +63 -63
- data/app/assets/stylesheets/ratchet/utility/_color.scss +23 -0
- data/app/assets/stylesheets/ratchet/utility/_global.scss +1 -0
- data/app/helpers/ratchet/form_helper.rb +4 -3
- data/lib/ratchet_design/version.rb +1 -1
- data/public/core-0.1.38.js +157 -0
- data/public/core-0.1.38.js.gz +0 -0
- data/public/core-0.1.38.map.json +1 -0
- data/public/{fonts-woff-0.1.37.css → fonts-woff-0.1.38.css} +0 -0
- data/public/{fonts-woff-0.1.37.css.gz → fonts-woff-0.1.38.css.gz} +0 -0
- data/public/{fonts-woff2-0.1.37.css → fonts-woff2-0.1.38.css} +0 -0
- data/public/{fonts-woff2-0.1.37.css.gz → fonts-woff2-0.1.38.css.gz} +0 -0
- metadata +11 -10
- data/public/core-0.1.37.js +0 -222
- data/public/core-0.1.37.js.gz +0 -0
- data/public/core-0.1.37.map.json +0 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
|
-
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
2
|
+
SHA1:
|
|
3
|
+
metadata.gz: c176405659456e0bdefd76714d1dab0c626192c3
|
|
4
|
+
data.tar.gz: 21d34251ba9649ae73bc11b52e86044c0a3bbd7e
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: f65a2973861d066df0ef5590c1b127d1d3b2f811bf09dbb03a5213880a31d6d145b518d77d8b9509e3374c02dc8b33682bf0a9fef9c1cd7189aab056a05ffede
|
|
7
|
+
data.tar.gz: 4b394dce4506e284c8657b54626a7f7059d5305ee1e18f0992e1ba4110b3867b73a588e9aab85fed85b925648fd154010a8fb31bb32df8c6fb46e715ba4d96a2
|
|
@@ -39,40 +39,6 @@ var form = function( element, settings ) {
|
|
|
39
39
|
|
|
40
40
|
//}
|
|
41
41
|
|
|
42
|
-
// Loop over any checkbox/radio inputs that are present
|
|
43
|
-
for ( var tickIndex = 0; tickIndex < tickEls.length; tickIndex++ ) {
|
|
44
|
-
|
|
45
|
-
// And run their handler function explicitly at runtime
|
|
46
|
-
tickHandler( tickEls[ tickIndex ] );
|
|
47
|
-
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
// Checkbox/radio input hander function
|
|
51
|
-
function tickHandler( elem ) {
|
|
52
|
-
|
|
53
|
-
// Find element’s parent node
|
|
54
|
-
var labelParent = elem.parentNode;
|
|
55
|
-
|
|
56
|
-
// If parent is a label
|
|
57
|
-
if ( labelParent.tagName === 'LABEL' ) {
|
|
58
|
-
|
|
59
|
-
// Simply add the `tick-label` classname
|
|
60
|
-
labelParent.classList.add( 'tick-label' );
|
|
61
|
-
|
|
62
|
-
// Otherwise
|
|
63
|
-
} else {
|
|
64
|
-
|
|
65
|
-
// Wrap the element properly
|
|
66
|
-
elem.insertAdjacentHTML( 'beforebegin', '<label class="tick-label"></label>' );
|
|
67
|
-
elem.previousSibling.insertAdjacentElement( 'afterbegin', elem );
|
|
68
|
-
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
// And add empty span to label
|
|
72
|
-
elem.insertAdjacentHTML( 'afterend', '<span class="tick-label"></span>' );
|
|
73
|
-
|
|
74
|
-
}
|
|
75
|
-
|
|
76
42
|
// Keydown handler function
|
|
77
43
|
function restrictInput( event ) {
|
|
78
44
|
|
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
|
|
2
|
+
.switch-label,
|
|
3
|
+
.tick-label {
|
|
4
|
+
pointer-events: none;
|
|
5
|
+
|
|
6
|
+
* {
|
|
7
|
+
pointer-events: all;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
label.tick-box {
|
|
12
|
+
flex-direction: row;
|
|
13
|
+
align-items: center;
|
|
14
|
+
cursor: pointer;
|
|
15
|
+
|
|
16
|
+
// Bounce a little :)
|
|
17
|
+
*, *:after, *:before {
|
|
18
|
+
transition-timing-function: cubic-bezier( 0.175, 0.885, 0.320, 1.275 );
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
// Radios & checkboxes
|
|
22
|
+
input {
|
|
23
|
+
|
|
24
|
+
// Element styled to replace checkbox or radio button
|
|
25
|
+
+ .tick {
|
|
26
|
+
width: 20px;
|
|
27
|
+
height: 20px;
|
|
28
|
+
margin: 0 8px 0 0;
|
|
29
|
+
background: $white;
|
|
30
|
+
transition-property: box-shadow;
|
|
31
|
+
box-shadow: input-shadow(), $empty-shadow inset;
|
|
32
|
+
top: -3px;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
@include input-active {
|
|
36
|
+
border: none;
|
|
37
|
+
|
|
38
|
+
+ .tick { box-shadow: input-shadow( $gray-08 ), $empty-shadow inset; }
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
&:disabled {
|
|
42
|
+
pointer-events: none;
|
|
43
|
+
cursor: default;
|
|
44
|
+
color: $gray-05;
|
|
45
|
+
|
|
46
|
+
+ .tick {
|
|
47
|
+
box-shadow: 0 0 0 1px $gray-06 inset;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
input[type=radio] {
|
|
53
|
+
|
|
54
|
+
// Unchecked
|
|
55
|
+
+ .tick {
|
|
56
|
+
border-radius: 50%;
|
|
57
|
+
position: relative;
|
|
58
|
+
|
|
59
|
+
&:before, &:after {
|
|
60
|
+
content: '';
|
|
61
|
+
background-color: white;
|
|
62
|
+
position: absolute;
|
|
63
|
+
left: 0;
|
|
64
|
+
top: 0;
|
|
65
|
+
height: 100%;
|
|
66
|
+
width: 100%;
|
|
67
|
+
border-radius: 50%;
|
|
68
|
+
box-shadow: 0 0 0 transparent;
|
|
69
|
+
transform: scale(0);
|
|
70
|
+
transition-property: box-shadow, transform;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
&:before { background-color: $gray-06; }
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
// Checked
|
|
77
|
+
&:checked + .tick {
|
|
78
|
+
box-shadow: input-shadow( darken($blue-03, 3) ), 0 0 0 8px $blue-03 inset;
|
|
79
|
+
|
|
80
|
+
&:after {
|
|
81
|
+
box-shadow: 0 1px 0 2px darken($blue-03, 15);
|
|
82
|
+
transform: scale(.35);
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
// Hover, focus, active
|
|
87
|
+
@include input-active {
|
|
88
|
+
|
|
89
|
+
// Active Unchecked
|
|
90
|
+
+ .tick {
|
|
91
|
+
&:before { transform: scale(.35); }
|
|
92
|
+
&:after { transform: scale(0); }
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
// Active Checked
|
|
96
|
+
&:checked + .tick {
|
|
97
|
+
box-shadow: input-shadow( darken($blue-03, 15) ), 0 0 0 8px darken( $blue-03, 5 ) inset;
|
|
98
|
+
|
|
99
|
+
&:before { transform: scale(0); }
|
|
100
|
+
&:after { transform: scale(.35); }
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
// Checkboxes
|
|
106
|
+
input[type=checkbox] {
|
|
107
|
+
|
|
108
|
+
// Unchecked
|
|
109
|
+
+ .tick {
|
|
110
|
+
border-radius: $radius;
|
|
111
|
+
position: relative;
|
|
112
|
+
|
|
113
|
+
&:before, &:after {
|
|
114
|
+
content: '';
|
|
115
|
+
position: absolute;
|
|
116
|
+
left: -4px;
|
|
117
|
+
top: 0px;
|
|
118
|
+
width: 140%;
|
|
119
|
+
height: 70%;
|
|
120
|
+
margin: 10% 0 0 0;
|
|
121
|
+
border: solid $white;
|
|
122
|
+
border-width: 0 0 6px 6px;
|
|
123
|
+
transition-property: transform, border-color;
|
|
124
|
+
transform: scale(0) rotate(-50deg);
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
// Checked
|
|
129
|
+
&:checked + .tick {
|
|
130
|
+
box-shadow: input-shadow( darken($blue-03, 3) ), 0 0 0 10px $blue-03 inset;
|
|
131
|
+
|
|
132
|
+
&:after, &:before {
|
|
133
|
+
transform: scale(.5) rotate(-50deg);
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
&:before {
|
|
137
|
+
top: 1px;
|
|
138
|
+
opacity: 1;
|
|
139
|
+
border-color: darken( $blue-03, 10 );
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
// Hover, focus, active
|
|
144
|
+
@include input-active {
|
|
145
|
+
|
|
146
|
+
// Active Uncheked
|
|
147
|
+
+ .tick:before {
|
|
148
|
+
border-color: $gray-06;
|
|
149
|
+
transform: scale(.4) rotate(-50deg);
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
// Active Checked
|
|
153
|
+
&:checked + .tick {
|
|
154
|
+
box-shadow: input-shadow( darken($blue-03, 15) ), 0 0 0 10px darken( $blue-03, 5 ) inset;
|
|
155
|
+
|
|
156
|
+
&:before {
|
|
157
|
+
top: 1px;
|
|
158
|
+
opacity: 1;
|
|
159
|
+
transform: scale(.5) rotate(-50deg);
|
|
160
|
+
border-color: darken( $blue-03, 10 );
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
}
|
|
@@ -36,6 +36,19 @@ $text-inputs: 'textarea, input[type=url], input[type=tel], input[type=text], inp
|
|
|
36
36
|
* { pointer-events: all; }
|
|
37
37
|
}
|
|
38
38
|
|
|
39
|
+
$input-weight-shadow: 0 1px 3px rgba($gray-11, .3);
|
|
40
|
+
|
|
41
|
+
@function input-shadow($color: rgba($gray-11, .2), $size: 1px) {
|
|
42
|
+
@return 0 0 0 $size $color inset, $empty-shadow;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
@function input-focus-shadow($color: rgba($gray-11, .3), $size: 1px) {
|
|
46
|
+
@return 0 0 0 $size $color inset, $input-weight-shadow
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
$focus-shadow: input-focus-shadow();
|
|
50
|
+
$input-shadow: input-shadow();
|
|
51
|
+
|
|
39
52
|
label {
|
|
40
53
|
// Bare text-based inputs
|
|
41
54
|
+ input,
|
|
@@ -1,46 +1,39 @@
|
|
|
1
1
|
// Apply validation styles to inputs & textareas
|
|
2
|
+
label.valid:not(.remotely-invalid) {
|
|
3
|
+
color: $green-01;
|
|
2
4
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
box-shadow: $shadow;
|
|
5
|
+
input, select:not([tabindex="-1"]), textarea {
|
|
6
|
+
-webkit-text-fill-color: currentColor;
|
|
7
|
+
box-shadow: input-shadow( $green-01 );
|
|
7
8
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
@include input-active {
|
|
13
|
-
box-shadow: $focus-shadow;
|
|
14
|
-
|
|
15
|
-
&:-webkit-autofill {
|
|
16
|
-
box-shadow: $focus-shadow;
|
|
17
|
-
}
|
|
9
|
+
@include input-active {
|
|
10
|
+
box-shadow: input-focus-shadow( $green-01 )
|
|
11
|
+
}
|
|
18
12
|
}
|
|
19
13
|
}
|
|
20
14
|
|
|
21
|
-
label.
|
|
22
|
-
|
|
15
|
+
label.invalid,
|
|
16
|
+
label.remotely-invalid:not(.valid) {
|
|
17
|
+
color: $red-01;
|
|
18
|
+
flex-wrap: wrap;
|
|
23
19
|
|
|
24
|
-
input, textarea {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
20
|
+
input, select:not([tabindex="-1"]), textarea {
|
|
21
|
+
-webkit-text-fill-color: currentColor;
|
|
22
|
+
box-shadow: input-shadow( $red-01 );
|
|
23
|
+
|
|
24
|
+
@include input-active {
|
|
25
|
+
box-shadow: input-focus-shadow( $red-01 )
|
|
26
|
+
}
|
|
29
27
|
}
|
|
30
28
|
}
|
|
31
29
|
|
|
32
|
-
label.invalid {
|
|
33
|
-
color: $rusty;
|
|
34
30
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
@include validation-style( select-shadow( $rusty ), select-focus-shadow( $rusty ), false )
|
|
40
|
-
}
|
|
31
|
+
// Validation message animation declaration
|
|
32
|
+
@keyframes expand-validation {
|
|
33
|
+
0% { max-height: 0em; }
|
|
34
|
+
100% { max-height: 2.5em; }
|
|
41
35
|
}
|
|
42
36
|
|
|
43
|
-
// Validation message animation declaration
|
|
44
37
|
@keyframes scale-fade-in {
|
|
45
38
|
0% {
|
|
46
39
|
opacity: 0;
|
|
@@ -54,41 +47,48 @@ label.invalid {
|
|
|
54
47
|
}
|
|
55
48
|
|
|
56
49
|
// Inline validation messages
|
|
57
|
-
.validation-message
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
width: 325px;
|
|
62
|
-
max-width: 100vw;
|
|
50
|
+
.validation-message,
|
|
51
|
+
.remote-validation-message {
|
|
52
|
+
overflow: hidden;
|
|
53
|
+
display: block;
|
|
63
54
|
z-index: 3;
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
55
|
+
animation: expand-validation $duration $timing;
|
|
56
|
+
position: relative;
|
|
57
|
+
top: -1px;
|
|
58
|
+
width: 100%;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
// Message bubble (also a hack to maintain proper word wrap)
|
|
62
|
+
.validation-message-text {
|
|
63
|
+
margin: 0;
|
|
64
|
+
display: block;
|
|
65
|
+
padding: .8em .8em;
|
|
66
|
+
border-radius: 0 0 $radius $radius;
|
|
67
|
+
color: $white;
|
|
68
|
+
font-size: 12px;
|
|
69
|
+
line-height: 1em;
|
|
70
|
+
background: $gray-08;
|
|
71
|
+
|
|
72
|
+
.invalid &,
|
|
73
|
+
.remotely-invalid:not(.valid) & {
|
|
74
|
+
background: $red-01;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.valdiation-error-item,
|
|
79
|
+
.validation-error-notice {
|
|
80
|
+
display: block;
|
|
81
|
+
line-height: 1.3em;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.validation-error-notice {
|
|
85
|
+
font-weight: bold;
|
|
86
|
+
margin-bottom: .2em;
|
|
87
|
+
|
|
88
|
+
~ .valdiation-error-item {
|
|
89
|
+
margin-left: .5em;
|
|
81
90
|
&:before {
|
|
82
|
-
content:
|
|
83
|
-
position: absolute;
|
|
84
|
-
left: 50%;
|
|
85
|
-
margin-left: -6px;
|
|
86
|
-
bottom: 100%;
|
|
87
|
-
width: 0;
|
|
88
|
-
height: 0;
|
|
89
|
-
border-style: solid;
|
|
90
|
-
border-width: 0 6px 6px 6px;
|
|
91
|
-
border-color: transparent transparent $rusty transparent;
|
|
91
|
+
content: "• ";
|
|
92
92
|
}
|
|
93
93
|
}
|
|
94
94
|
}
|
|
@@ -79,3 +79,26 @@ $translucent-white: rgba($white, .5);
|
|
|
79
79
|
// }
|
|
80
80
|
// }
|
|
81
81
|
}
|
|
82
|
+
|
|
83
|
+
$gray-01: #f7fafb;
|
|
84
|
+
$gray-02: #f5f7fa;
|
|
85
|
+
$gray-03: #f0f3f6;
|
|
86
|
+
$gray-04: #dfe3e6;
|
|
87
|
+
$gray-05: #d6dde7;
|
|
88
|
+
$gray-06: #c3cdda;
|
|
89
|
+
$gray-07: #b4c1d2;
|
|
90
|
+
$gray-08: #8c9ba5;
|
|
91
|
+
$gray-09: #5a6872;
|
|
92
|
+
$gray-10: #152934;
|
|
93
|
+
$gray-11: #0f212e;
|
|
94
|
+
|
|
95
|
+
$blue-01: #5aaafa;
|
|
96
|
+
$blue-02: #5596e6;
|
|
97
|
+
$blue-03: #0094fd;
|
|
98
|
+
$blue-04: #006dff;
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
$green-01: #2ac84f;
|
|
102
|
+
$green-02: #5aa700;
|
|
103
|
+
$red-01: #dd2f41;
|
|
104
|
+
$red-02: #A81C27;
|
|
@@ -309,7 +309,7 @@ module Ratchet
|
|
|
309
309
|
|
|
310
310
|
options[:label] ||= options.delete(:label_placeholder)
|
|
311
311
|
|
|
312
|
-
option_tags ||=
|
|
312
|
+
option_tags ||= capture(&block).html_safe if block_given?
|
|
313
313
|
|
|
314
314
|
input_tag(:select, name, option_tags.html_safe, options)
|
|
315
315
|
end
|
|
@@ -347,7 +347,7 @@ module Ratchet
|
|
|
347
347
|
value = value.html_safe if value
|
|
348
348
|
select_tag(name, value, options)
|
|
349
349
|
when :textarea
|
|
350
|
-
value ||=
|
|
350
|
+
value ||= capture(&block).html_safe if block_given?
|
|
351
351
|
text_area_tag(name, value, options)
|
|
352
352
|
else
|
|
353
353
|
text_field_tag(name, value, options)
|
|
@@ -405,7 +405,8 @@ module Ratchet
|
|
|
405
405
|
|
|
406
406
|
def tick_wrapper( name, options, &block )
|
|
407
407
|
|
|
408
|
-
tag =
|
|
408
|
+
tag = capture(&block).html_safe
|
|
409
|
+
options.delete(:required)
|
|
409
410
|
|
|
410
411
|
tick = content_tag(:span, class: 'tick') {''}
|
|
411
412
|
label = content_tag(:span, class: 'label-text') { options.delete(:label) || name }
|