wcc-styles 3.0.0.beta2 → 3.0.0.beta3
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/lib/assets/javascripts/wcc/styles/selectize.js +41 -6
- data/lib/assets/stylesheets/wcc/styles/base/_grid-legacy.scss +185 -0
- data/lib/assets/stylesheets/wcc/styles/base/_grid.scss +129 -163
- data/lib/assets/stylesheets/wcc/styles/materials/atoms/_forms.scss +1 -1
- data/lib/assets/stylesheets/wcc/styles/materials/molecules/_event-receipt.scss +32 -20
- data/lib/assets/stylesheets/wcc/styles/materials/molecules/_steps-progress.scss +4 -5
- data/lib/assets/stylesheets/wcc/styles/materials/templates/_transactional.scss +7 -19
- data/lib/assets/stylesheets/wcc/styles/modules/_mixins.scss +1 -17
- data/lib/assets/stylesheets/wcc/styles/modules/_vars.scss +30 -44
- data/lib/assets/stylesheets/wcc/styles/modules/mixins/_breakpoint-mixin.scss +82 -0
- data/lib/assets/stylesheets/wcc/styles.scss +7 -5
- data/lib/wcc/styles/simple_form/string_array_input.rb +22 -0
- data/lib/wcc/styles/simple_form.rb +1 -0
- data/lib/wcc/styles/version.rb +1 -1
- metadata +5 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 5774a9549005a5dde97bc6b1993f1d4b3825f73a
|
|
4
|
+
data.tar.gz: 4d757dbc91362102596b17cfd5e8278c6349b41c
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: ed17248155fedf8acd0e9711bd3fc199c3e44efda7a3a635335f3b7cbbc4958a5e0913a2980cc2cb63b9d3f54dac84dc64384290f51d2a64f302e74e424af313
|
|
7
|
+
data.tar.gz: 869294d6d6ac803dd8a025c2faf7538b4243f98e368b8adfb032a536ed9ee21093f49019943249f51e534df98354aaee5f795bee6f7181c70f694599ec677518
|
|
@@ -2,12 +2,47 @@
|
|
|
2
2
|
//= require microplugin
|
|
3
3
|
//= require selectize
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
(function() {
|
|
6
|
+
var $ = window.jQuery;
|
|
6
7
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
8
|
+
function updateHiddenStringArrayFields(values) {
|
|
9
|
+
var selectize = this;
|
|
10
|
+
var hiddenFieldBaseName = selectize.$input.data('string-array-selectize');
|
|
11
|
+
values = (values || "").split(",");
|
|
12
|
+
|
|
13
|
+
selectize.$wrapper.find('[type="hidden"][data-wcc-string-array]').remove();
|
|
14
|
+
|
|
15
|
+
values.forEach(function(value) {
|
|
16
|
+
$('<input type="hidden" data-wcc-string-array />')
|
|
17
|
+
.attr('name', hiddenFieldBaseName + '[]')
|
|
18
|
+
.val(value)
|
|
19
|
+
.appendTo(selectize.$wrapper);
|
|
20
|
+
});
|
|
21
|
+
|
|
22
|
+
return false;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
$(function () {
|
|
26
|
+
$('body.enable-selectize select:not(.no-selectize)').each(function(i, item) {
|
|
27
|
+
$(item).selectize({
|
|
28
|
+
hideSelected: false
|
|
29
|
+
});
|
|
30
|
+
});
|
|
31
|
+
|
|
32
|
+
$('[data-string-array-selectize').each(function(i, item) {
|
|
33
|
+
$(item).selectize({
|
|
34
|
+
delimiter: ',',
|
|
35
|
+
persist: false,
|
|
36
|
+
create: function(input) {
|
|
37
|
+
return {
|
|
38
|
+
value: input,
|
|
39
|
+
text: input
|
|
40
|
+
}
|
|
41
|
+
},
|
|
42
|
+
onInitialize: updateHiddenStringArrayFields,
|
|
43
|
+
onChange: updateHiddenStringArrayFields
|
|
44
|
+
});
|
|
11
45
|
});
|
|
12
46
|
});
|
|
13
|
-
|
|
47
|
+
|
|
48
|
+
})();
|
|
@@ -0,0 +1,185 @@
|
|
|
1
|
+
/* Legacy Grid */
|
|
2
|
+
// TODO: replace all instances of legacy grid in markup and styles
|
|
3
|
+
// TODO: delete this partial
|
|
4
|
+
|
|
5
|
+
/* Now For Some of my Breakpoints Loves:
|
|
6
|
+
1680 - Large Screen
|
|
7
|
+
1480 - Big Screen
|
|
8
|
+
1200 - Regular Screen
|
|
9
|
+
992 - Large Tablet
|
|
10
|
+
768 - Tablet
|
|
11
|
+
480 - Phone
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
@media (min-width: 768px) and (max-width: 991px) { .container { max-width: 728px; } }
|
|
15
|
+
|
|
16
|
+
@media (min-width: 992px) { .container { max-width: 940px; } }
|
|
17
|
+
|
|
18
|
+
@media (min-width: 1200px) { .container { max-width: 1170px; } }
|
|
19
|
+
|
|
20
|
+
@media (min-width: 1480px) { .container { max-width: 1400px; } }
|
|
21
|
+
|
|
22
|
+
@media (min-width: 1680px) { .container { max-width: 1600px; } }
|
|
23
|
+
|
|
24
|
+
.responsive-icon {
|
|
25
|
+
font-size: 24px;
|
|
26
|
+
display: none;
|
|
27
|
+
|
|
28
|
+
@media (max-width: 768px) {
|
|
29
|
+
display: inline-block;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.responsive-text-hide {
|
|
34
|
+
display: none;
|
|
35
|
+
|
|
36
|
+
@media (min-width: 768px) {
|
|
37
|
+
display: inline-block;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.pad-bottom {
|
|
42
|
+
padding-bottom: 40px;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.container {
|
|
46
|
+
margin-right: auto;
|
|
47
|
+
margin-left: auto;
|
|
48
|
+
width: 100%;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.container:before,
|
|
52
|
+
.container:after {
|
|
53
|
+
display: table;
|
|
54
|
+
content: " ";
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.container:after {
|
|
58
|
+
clear: both;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.row:before,
|
|
62
|
+
.row:after {
|
|
63
|
+
display: table;
|
|
64
|
+
content: " ";
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.row:after {
|
|
68
|
+
clear: both;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
@media (min-width: 768px) {
|
|
72
|
+
.row {
|
|
73
|
+
margin-right: -15px;
|
|
74
|
+
margin-left: -15px;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.row .row {
|
|
79
|
+
margin-right: -15px;
|
|
80
|
+
margin-left: -15px;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.col1,
|
|
84
|
+
.col2,
|
|
85
|
+
.col3,
|
|
86
|
+
.col4,
|
|
87
|
+
.col5,
|
|
88
|
+
.col6,
|
|
89
|
+
.col7,
|
|
90
|
+
.col8,
|
|
91
|
+
.col9,
|
|
92
|
+
.col10,
|
|
93
|
+
.col11,
|
|
94
|
+
.col12 {
|
|
95
|
+
position: relative;
|
|
96
|
+
min-height: 1px;
|
|
97
|
+
padding-right: 15px;
|
|
98
|
+
padding-left: 15px;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.col1,
|
|
102
|
+
.col2,
|
|
103
|
+
.col3,
|
|
104
|
+
.col4,
|
|
105
|
+
.col5,
|
|
106
|
+
.col6,
|
|
107
|
+
.col7,
|
|
108
|
+
.col8,
|
|
109
|
+
.col9,
|
|
110
|
+
.col10,
|
|
111
|
+
.col11,
|
|
112
|
+
.col12 {
|
|
113
|
+
float: left;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
@media (max-width: 480px) {
|
|
117
|
+
.col1,
|
|
118
|
+
.col2,
|
|
119
|
+
.col3,
|
|
120
|
+
.col4,
|
|
121
|
+
.col5,
|
|
122
|
+
.col6,
|
|
123
|
+
.col7,
|
|
124
|
+
.col8,
|
|
125
|
+
.col9,
|
|
126
|
+
.col10,
|
|
127
|
+
.col11,
|
|
128
|
+
.col12 {
|
|
129
|
+
display: block;
|
|
130
|
+
width: 100%;
|
|
131
|
+
margin-left: 0;
|
|
132
|
+
-webkit-box-sizing: border-box;
|
|
133
|
+
-moz-box-sizing: border-box;
|
|
134
|
+
box-sizing: border-box;
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
@media (min-width: 480px) and (max-width: 768px) {
|
|
139
|
+
.col1,
|
|
140
|
+
.col2,
|
|
141
|
+
.col3,
|
|
142
|
+
.col4,
|
|
143
|
+
.col5 {
|
|
144
|
+
width: 50%;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.col6,
|
|
148
|
+
.col7,
|
|
149
|
+
.col8,
|
|
150
|
+
.col9,
|
|
151
|
+
.col10,
|
|
152
|
+
.col11,
|
|
153
|
+
.col12 {
|
|
154
|
+
width: 100%;
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
@media (min-width: 768px) {
|
|
159
|
+
|
|
160
|
+
.col1 { width: 8.333333333333332%; }
|
|
161
|
+
.col2 { width: 16.666666666666664%; }
|
|
162
|
+
.col3 { width: 25%; }
|
|
163
|
+
.col4 { width: 33.33333333333333%; }
|
|
164
|
+
.col5 { width: 41.66666666666667%; }
|
|
165
|
+
.col6 { width: 50%; }
|
|
166
|
+
.col7 { width: 58.333333333333336%; }
|
|
167
|
+
.col8 { width: 66.66666666666666%; }
|
|
168
|
+
.col9 { width: 75%; }
|
|
169
|
+
.col10 { width: 83.33333333333334%; }
|
|
170
|
+
.col11 { width: 91.66666666666666%; }
|
|
171
|
+
.col12 { width: 100%; }
|
|
172
|
+
|
|
173
|
+
.offset1 { margin-left: 8.333333333333332%; }
|
|
174
|
+
.offset2 { margin-left: 16.666666666666664%; }
|
|
175
|
+
.offset3 { margin-left: 25%; }
|
|
176
|
+
.offset4 { margin-left: 33.33333333333333%; }
|
|
177
|
+
.offset5 { margin-left: 41.66666666666667%; }
|
|
178
|
+
.offset6 { margin-left: 50%; }
|
|
179
|
+
.offset7 { margin-left: 58.333333333333336%; }
|
|
180
|
+
.offset8 { margin-left: 66.66666666666666%; }
|
|
181
|
+
.offset9 { margin-left: 75%; }
|
|
182
|
+
.offset10 { margin-left: 83.33333333333334%; }
|
|
183
|
+
.offset11 { margin-left: 91.66666666666666%; }
|
|
184
|
+
|
|
185
|
+
}
|
|
@@ -1,191 +1,157 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
1
|
+
/* ==========================================================================
|
|
2
|
+
Watermark Flexible Grid
|
|
3
|
+
========================================================================== */
|
|
4
|
+
|
|
5
|
+
$row-width: 960px !default; //60rem !default;
|
|
6
|
+
$column-gutter: .9375rem !default;
|
|
7
|
+
$total-columns: 12 !default;
|
|
8
|
+
$show-grid: false !default;
|
|
9
|
+
|
|
10
|
+
.flex-row {
|
|
11
|
+
@include clearfix;
|
|
12
|
+
margin: 0 auto;
|
|
13
|
+
max-width: $row-width;
|
|
14
|
+
width: 100%;
|
|
15
15
|
|
|
16
|
-
|
|
16
|
+
// nested row
|
|
17
|
+
.flex-row {
|
|
18
|
+
margin-bottom: 0;
|
|
19
|
+
margin-left: -($column-gutter);
|
|
20
|
+
margin-right: -($column-gutter);
|
|
21
|
+
margin-top: 0;
|
|
22
|
+
width: auto;
|
|
23
|
+
}
|
|
17
24
|
|
|
18
|
-
|
|
25
|
+
&.collapse > .column,
|
|
26
|
+
&.collapse > .columns {
|
|
27
|
+
padding-left: 0;
|
|
28
|
+
padding-right: 0;
|
|
29
|
+
}
|
|
19
30
|
|
|
20
|
-
|
|
31
|
+
&.collapse-outer > .column,
|
|
32
|
+
&.collapse-outer > .columns {
|
|
21
33
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
34
|
+
&:first-child {
|
|
35
|
+
padding-left: 0;
|
|
36
|
+
}
|
|
25
37
|
|
|
26
|
-
|
|
27
|
-
|
|
38
|
+
&:last-child {
|
|
39
|
+
padding-right: 0;
|
|
40
|
+
}
|
|
28
41
|
}
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.responsive-text-hide {
|
|
32
|
-
display: none;
|
|
33
42
|
|
|
34
|
-
|
|
35
|
-
|
|
43
|
+
&.full-width {
|
|
44
|
+
max-width: none;
|
|
36
45
|
}
|
|
37
46
|
}
|
|
38
47
|
|
|
39
|
-
.
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
48
|
+
// all columns need the .column class
|
|
49
|
+
.column,
|
|
50
|
+
.columns {
|
|
51
|
+
float: left;
|
|
52
|
+
padding-left: $column-gutter;
|
|
53
|
+
padding-right: $column-gutter;
|
|
54
|
+
position: relative;
|
|
46
55
|
width: 100%;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
.container:before,
|
|
50
|
-
.container:after {
|
|
51
|
-
display: table;
|
|
52
|
-
content: " ";
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
.container:after {
|
|
56
|
-
clear: both;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
.row:before,
|
|
60
|
-
.row:after {
|
|
61
|
-
display: table;
|
|
62
|
-
content: " ";
|
|
63
|
-
}
|
|
64
56
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
57
|
+
// center a column
|
|
58
|
+
&.centered {
|
|
59
|
+
float: none;
|
|
60
|
+
margin-left: auto;
|
|
61
|
+
margin-right: auto;
|
|
62
|
+
}
|
|
68
63
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
64
|
+
// if $show-grid is set to true all grid columns will
|
|
65
|
+
// be visible, just for test or example purposes
|
|
66
|
+
@if $show-grid == true {
|
|
67
|
+
background-color: rgba(red,.1);
|
|
68
|
+
border: 1px solid rgba(red,.2);
|
|
69
|
+
border-top: none;
|
|
70
|
+
border-bottom: none;
|
|
73
71
|
}
|
|
74
72
|
}
|
|
75
73
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
}
|
|
74
|
+
//
|
|
75
|
+
// Column-widths created dynamically
|
|
76
|
+
//
|
|
80
77
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
.
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
.
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
.
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
78
|
+
// generate small grid classes
|
|
79
|
+
@for $i from 1 through $total-columns {
|
|
80
|
+
.small-#{$i} {
|
|
81
|
+
width: ((100 / $total-columns) * $i) * 1%;
|
|
82
|
+
}
|
|
83
|
+
.small-offset-#{$i} {
|
|
84
|
+
margin-left: ((100 / $total-columns) * $i) * 1%;
|
|
85
|
+
}
|
|
86
|
+
.small-push-#{$i} {
|
|
87
|
+
position: relative;
|
|
88
|
+
left: ((100 / $total-columns) * $i) * 1%;
|
|
89
|
+
right: auto;
|
|
90
|
+
}
|
|
91
|
+
.small-pull-#{$i} {
|
|
92
|
+
position: relative;
|
|
93
|
+
right: ((100 / $total-columns) * $i) * 1%;
|
|
94
|
+
left: auto;
|
|
95
|
+
}
|
|
97
96
|
}
|
|
98
97
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
.
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
.
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
.
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
98
|
+
@media screen and (min-width: $medium-breakpoint) {
|
|
99
|
+
|
|
100
|
+
// generate flexible grid above mobile
|
|
101
|
+
@for $i from 1 through $total-columns {
|
|
102
|
+
.medium-#{$i} {
|
|
103
|
+
width: ((100 / $total-columns) * $i) * 1%;
|
|
104
|
+
}
|
|
105
|
+
.medium-offset-#{$i} {
|
|
106
|
+
margin-left: ((100 / $total-columns) * $i) * 1%;
|
|
107
|
+
}
|
|
108
|
+
.medium-push-#{$i} {
|
|
109
|
+
position: relative;
|
|
110
|
+
left: ((100 / $total-columns) * $i) * 1%;
|
|
111
|
+
right: auto;
|
|
112
|
+
}
|
|
113
|
+
.medium-pull-#{$i} {
|
|
114
|
+
position: relative;
|
|
115
|
+
right: ((100 / $total-columns) * $i) * 1%;
|
|
116
|
+
left: auto;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
113
119
|
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
.col2,
|
|
117
|
-
.col3,
|
|
118
|
-
.col4,
|
|
119
|
-
.col5,
|
|
120
|
-
.col6,
|
|
121
|
-
.col7,
|
|
122
|
-
.col8,
|
|
123
|
-
.col9,
|
|
124
|
-
.col10,
|
|
125
|
-
.col11,
|
|
126
|
-
.col12 {
|
|
127
|
-
display: block;
|
|
128
|
-
width: 100%;
|
|
120
|
+
.medium-reset-order {
|
|
121
|
+
float: left;
|
|
129
122
|
margin-left: 0;
|
|
130
|
-
-
|
|
131
|
-
|
|
132
|
-
|
|
123
|
+
margin-right: 0;
|
|
124
|
+
left: auto;
|
|
125
|
+
right: auto;
|
|
133
126
|
}
|
|
134
127
|
}
|
|
135
128
|
|
|
136
|
-
@media
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
129
|
+
@media screen and (min-width: $large-breakpoint) {
|
|
130
|
+
|
|
131
|
+
@for $i from 1 through $total-columns {
|
|
132
|
+
.large-#{$i} {
|
|
133
|
+
width: ((100 / $total-columns) * $i) * 1%;
|
|
134
|
+
}
|
|
135
|
+
.large-offset-#{$i} {
|
|
136
|
+
margin-left: ((100 / $total-columns) * $i) * 1%;
|
|
137
|
+
}
|
|
138
|
+
.large-push-#{$i} {
|
|
139
|
+
position: relative;
|
|
140
|
+
left: ((100 / $total-columns) * $i) * 1%;
|
|
141
|
+
right: auto;
|
|
142
|
+
}
|
|
143
|
+
.large-pull-#{$i} {
|
|
144
|
+
position: relative;
|
|
145
|
+
right: ((100 / $total-columns) * $i) * 1%;
|
|
146
|
+
left: auto;
|
|
147
|
+
}
|
|
143
148
|
}
|
|
144
149
|
|
|
145
|
-
.
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
.col12 {
|
|
152
|
-
width: 100%;
|
|
150
|
+
.large-reset-order {
|
|
151
|
+
float: left;
|
|
152
|
+
margin-left: 0;
|
|
153
|
+
margin-right: 0;
|
|
154
|
+
left: auto;
|
|
155
|
+
right: auto;
|
|
153
156
|
}
|
|
154
157
|
}
|
|
155
|
-
|
|
156
|
-
@media (min-width: 768px) {
|
|
157
|
-
|
|
158
|
-
.col1 { width: 8.333333333333332%; }
|
|
159
|
-
.col2 { width: 16.666666666666664%; }
|
|
160
|
-
.col3 { width: 25%; }
|
|
161
|
-
.col4 { width: 33.33333333333333%; }
|
|
162
|
-
.col5 { width: 41.66666666666667%; }
|
|
163
|
-
.col6 { width: 50%; }
|
|
164
|
-
.col7 { width: 58.333333333333336%; }
|
|
165
|
-
.col8 { width: 66.66666666666666%; }
|
|
166
|
-
.col9 { width: 75%; }
|
|
167
|
-
.col10 { width: 83.33333333333334%; }
|
|
168
|
-
.col11 { width: 91.66666666666666%; }
|
|
169
|
-
.col12 { width: 100%; }
|
|
170
|
-
|
|
171
|
-
.offset1 { margin-left: 8.333333333333332%; }
|
|
172
|
-
.offset2 { margin-left: 16.666666666666664%; }
|
|
173
|
-
.offset3 { margin-left: 25%; }
|
|
174
|
-
.offset4 { margin-left: 33.33333333333333%; }
|
|
175
|
-
.offset5 { margin-left: 41.66666666666667%; }
|
|
176
|
-
.offset6 { margin-left: 50%; }
|
|
177
|
-
.offset7 { margin-left: 58.333333333333336%; }
|
|
178
|
-
.offset8 { margin-left: 66.66666666666666%; }
|
|
179
|
-
.offset9 { margin-left: 75%; }
|
|
180
|
-
.offset10 { margin-left: 83.33333333333334%; }
|
|
181
|
-
.offset11 { margin-left: 91.66666666666666%; }
|
|
182
|
-
|
|
183
|
-
}
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
.col-centered {
|
|
188
|
-
float: none;
|
|
189
|
-
margin-left: auto;
|
|
190
|
-
margin-right: auto;
|
|
191
|
-
}
|
|
@@ -4,31 +4,43 @@
|
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
.event-receipt-block {
|
|
7
|
-
|
|
8
|
-
@include clearfix();
|
|
7
|
+
@include clearfix;
|
|
9
8
|
|
|
9
|
+
@include breakpoint(medium) {
|
|
10
|
+
padding: 2.5rem 3.5rem;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
// Table
|
|
10
14
|
.event-receipt-meta {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
.meta-key {
|
|
18
|
-
font-size: 1.2rem;
|
|
19
|
-
font-weight: 600;
|
|
20
|
-
letter-spacing: .06em;
|
|
21
|
-
color: #464646;
|
|
22
|
-
text-transform: uppercase;
|
|
23
|
-
width: 25%;
|
|
24
|
-
display: inline-block;
|
|
15
|
+
color: map-get($gray, 4);
|
|
16
|
+
|
|
17
|
+
@include breakpoint(medium) {
|
|
18
|
+
float: left;
|
|
19
|
+
width: 80%;
|
|
25
20
|
}
|
|
26
21
|
}
|
|
27
22
|
|
|
23
|
+
// Table data key
|
|
24
|
+
.meta-key {
|
|
25
|
+
color: map-get($gray, 7);
|
|
26
|
+
display: inline-block;
|
|
27
|
+
font-size: 1.2rem;
|
|
28
|
+
font-weight: 600;
|
|
29
|
+
letter-spacing: .06em;
|
|
30
|
+
text-transform: uppercase;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
// Total event cost
|
|
28
34
|
.event-receipt-price {
|
|
29
|
-
|
|
35
|
+
border: 1px solid map-get($gray, 7);
|
|
36
|
+
display: block;
|
|
37
|
+
font-size: 3rem;
|
|
38
|
+
padding: 1rem 0;
|
|
30
39
|
text-align: center;
|
|
31
|
-
|
|
32
|
-
|
|
40
|
+
|
|
41
|
+
@include breakpoint(medium) {
|
|
42
|
+
float: right;
|
|
43
|
+
width: 20%;
|
|
44
|
+
}
|
|
33
45
|
}
|
|
34
|
-
}
|
|
46
|
+
}
|
|
@@ -13,10 +13,10 @@
|
|
|
13
13
|
|
|
14
14
|
// progress items container, on a ul
|
|
15
15
|
.progress-bar {
|
|
16
|
+
display: flex;
|
|
17
|
+
list-style: none;
|
|
16
18
|
margin: 0;
|
|
17
19
|
padding: 0;
|
|
18
|
-
list-style: none;
|
|
19
|
-
display: flex;
|
|
20
20
|
width: 100%;
|
|
21
21
|
|
|
22
22
|
// progress items, on a li
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
padding: 1rem 0;
|
|
27
27
|
display: inline-block;
|
|
28
28
|
flex-grow: 1;
|
|
29
|
-
border-
|
|
29
|
+
border-top: 2px solid $green; // by default we show the active bar color
|
|
30
30
|
position: relative;
|
|
31
31
|
|
|
32
32
|
@media (max-width: $medium-breakpoint) {
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
border-radius: $global-rounded;
|
|
46
46
|
|
|
47
47
|
position: absolute;
|
|
48
|
-
|
|
48
|
+
top: -4px;
|
|
49
49
|
left: 50%;
|
|
50
50
|
transform: translateX(-50%);
|
|
51
51
|
}
|
|
@@ -66,4 +66,3 @@
|
|
|
66
66
|
}
|
|
67
67
|
}
|
|
68
68
|
}
|
|
69
|
-
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
.transactional-page {
|
|
7
7
|
background-color: $body-bg;
|
|
8
8
|
position: relative;
|
|
9
|
-
|
|
9
|
+
|
|
10
10
|
// on transactional pages we include a faux header bg
|
|
11
11
|
&:before {
|
|
12
12
|
content: ' ';
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
left: 0;
|
|
21
21
|
right: 0;
|
|
22
22
|
}
|
|
23
|
-
|
|
23
|
+
|
|
24
24
|
.sheet {
|
|
25
25
|
border-radius: 3px;
|
|
26
26
|
margin-bottom: 3rem;
|
|
@@ -33,28 +33,16 @@
|
|
|
33
33
|
// on mobile, block will display inside the sheet
|
|
34
34
|
// on large screens, block appears in nav header
|
|
35
35
|
.persistent-block {
|
|
36
|
+
background-color: rgba($black, .05);
|
|
37
|
+
margin: (-$spacing-default) (-$spacing-default) $spacing-default;
|
|
38
|
+
padding: $spacing-default;
|
|
36
39
|
text-align: center;
|
|
37
|
-
|
|
38
|
-
// only on small screens
|
|
39
|
-
@media (max-width: $medium-breakpoint) {
|
|
40
|
-
background-color: rgba($black, .05);
|
|
41
|
-
margin: (-$spacing-default) (-$spacing-default) $spacing-default;
|
|
42
|
-
padding: $spacing-default;
|
|
43
|
-
}
|
|
44
|
-
// above small screens
|
|
45
|
-
@media (min-width: $medium-breakpoint) {
|
|
46
|
-
width: 100%;
|
|
47
|
-
position: absolute;
|
|
48
|
-
top: -11.5rem; // this is a magic number for proper placement
|
|
49
|
-
z-index: 9999;
|
|
50
|
-
}
|
|
51
|
-
|
|
40
|
+
|
|
52
41
|
.persistent-title {
|
|
53
42
|
margin: 0;
|
|
54
43
|
}
|
|
55
44
|
|
|
56
45
|
.persistent-meta {
|
|
57
|
-
color:
|
|
46
|
+
color: map-get($gray, 4);
|
|
58
47
|
}
|
|
59
48
|
}
|
|
60
|
-
|
|
@@ -2,23 +2,7 @@
|
|
|
2
2
|
Mixins.scss
|
|
3
3
|
========================================================================== */
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
// Breakpoint Mixin
|
|
8
|
-
// ----------------
|
|
9
|
-
// writing out CSS media queries by hand is a pain,
|
|
10
|
-
// to write awesome media queries simply @include this mixin
|
|
11
|
-
// Example:
|
|
12
|
-
// @include breakpoint($small) {
|
|
13
|
-
// write your code here
|
|
14
|
-
// }
|
|
15
|
-
@mixin breakpoint($val) {
|
|
16
|
-
@media #{$val} {
|
|
17
|
-
@content;
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
|
|
5
|
+
// TODO: split all mixins into their own partials under the `/mixin` directory
|
|
22
6
|
|
|
23
7
|
// TODO: sort this out
|
|
24
8
|
// this is temp
|
|
@@ -10,9 +10,8 @@
|
|
|
10
10
|
// 2. Typography
|
|
11
11
|
// 3. Globals
|
|
12
12
|
// 4. Breakpoints
|
|
13
|
-
// 5.
|
|
14
|
-
// 6.
|
|
15
|
-
// 7. Content
|
|
13
|
+
// 5. Buttons
|
|
14
|
+
// 6. Content
|
|
16
15
|
// -----------------------------
|
|
17
16
|
|
|
18
17
|
|
|
@@ -31,6 +30,7 @@ $green: #00e581;
|
|
|
31
30
|
$blue: #377CAD;
|
|
32
31
|
$pink: #FF3366;
|
|
33
32
|
|
|
33
|
+
// TODO: sort out the use of gray. use the sass-map version
|
|
34
34
|
$neutral1: #F6F5F3;
|
|
35
35
|
$neutral2: darken($neutral1, 2%);
|
|
36
36
|
$neutral3: darken($neutral2, 2%);
|
|
@@ -47,12 +47,6 @@ $light-grey: #999999;
|
|
|
47
47
|
$medium-grey: #595959;
|
|
48
48
|
$dark-grey: #393939;
|
|
49
49
|
|
|
50
|
-
$text: #292929;
|
|
51
|
-
$light-text: #a6a6a6;
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
$white: #fff;
|
|
56
50
|
$gray-1: #e5e5e5;
|
|
57
51
|
$gray-2: #ccc;
|
|
58
52
|
$gray-3: #bfbfbf;
|
|
@@ -62,8 +56,25 @@ $gray-6: #666;
|
|
|
62
56
|
$gray-7: #4c4c4c;
|
|
63
57
|
$gray-8: #333;
|
|
64
58
|
$gray-9: #191919;
|
|
59
|
+
|
|
60
|
+
// Neutral Colors
|
|
61
|
+
// use map-get($gray, #) for gray tones
|
|
62
|
+
$white: #fff;
|
|
63
|
+
$gray: (
|
|
64
|
+
1: #e5e5e5,
|
|
65
|
+
2: #ccc,
|
|
66
|
+
3: #bfbfbf,
|
|
67
|
+
4: #959595,
|
|
68
|
+
5: #7f7f7f,
|
|
69
|
+
6: #666,
|
|
70
|
+
7: #464646,
|
|
71
|
+
8: #333,
|
|
72
|
+
9: #191919
|
|
73
|
+
);
|
|
65
74
|
$black: #000;
|
|
66
75
|
|
|
76
|
+
$text: #292929;
|
|
77
|
+
$light-text: #a6a6a6;
|
|
67
78
|
$body-bg: #f4f9f9;
|
|
68
79
|
|
|
69
80
|
$gradient-blue: linear-gradient(to top right,#257491,#008b86);
|
|
@@ -148,57 +159,32 @@ $global-rounded: 999px;
|
|
|
148
159
|
|
|
149
160
|
|
|
150
161
|
// Edit the breakpoints to your liking
|
|
151
|
-
// When writing Sass, always use
|
|
162
|
+
// When writing Sass, always use breakpoint variables if possible
|
|
163
|
+
// Use the 'breakpoint-mixin' whenever possible to keep consistent
|
|
164
|
+
//
|
|
152
165
|
$small-breakpoint : 0; // should stay at zero
|
|
153
166
|
$medium-breakpoint : 640px;
|
|
154
|
-
$large-breakpoint :
|
|
155
|
-
$xlarge-breakpoint :
|
|
156
|
-
$xxlarge-breakpoint :
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
// ==========================================================================
|
|
162
|
-
// 5. Media Queries
|
|
163
|
-
// ==========================================================================
|
|
164
|
-
|
|
167
|
+
$large-breakpoint : 800px;
|
|
168
|
+
$xlarge-breakpoint : 1100px;
|
|
169
|
+
$xxlarge-breakpoint : 1280px;
|
|
165
170
|
|
|
166
171
|
// Set to true for debugging message
|
|
167
|
-
// See debugging message code in
|
|
172
|
+
// See debugging message code in base/utilities/_breakpoint-debugger.scss
|
|
168
173
|
$show-query: false;
|
|
169
174
|
|
|
170
|
-
// Set media query breakpoints to be used with @mixin breakpoint()
|
|
171
|
-
// See @mixin breakpoint() specifics in modules/_mixins.scss
|
|
172
|
-
$small : (min-width: $small-breakpoint);
|
|
173
|
-
$small-only : (min-width: $small-breakpoint) and (max-width: $medium-breakpoint);
|
|
174
|
-
$small-down : (max-width: $medium-breakpoint);
|
|
175
|
-
|
|
176
|
-
$medium : (min-width: $medium-breakpoint);
|
|
177
|
-
$medium-only : (min-width: $medium-breakpoint) and (max-width: $large-breakpoint);
|
|
178
|
-
$medium-down : (max-width: $large-breakpoint);
|
|
179
|
-
|
|
180
|
-
$large : (min-width: $large-breakpoint);
|
|
181
|
-
$large-only : (min-width: $large-breakpoint) and (max-width: $xlarge-breakpoint);
|
|
182
|
-
$large-down : (max-width: $xlarge-breakpoint);
|
|
183
|
-
|
|
184
|
-
$xlarge : (min-width: $xlarge-breakpoint);
|
|
185
|
-
$xlarge-only : (min-width: $xlarge-breakpoint) and (max-width: $xxlarge-breakpoint);
|
|
186
|
-
$xlarge-down : (max-width: $xxlarge-breakpoint);
|
|
187
|
-
|
|
188
|
-
$xxlarge : (min-width: $xxlarge-breakpoint);
|
|
189
175
|
|
|
190
176
|
|
|
191
177
|
// ==========================================================================
|
|
192
|
-
//
|
|
178
|
+
// 5. Buttons
|
|
193
179
|
// ==========================================================================
|
|
194
180
|
|
|
195
181
|
|
|
196
182
|
|
|
197
183
|
// ==========================================================================
|
|
198
|
-
//
|
|
184
|
+
// 6. Content
|
|
199
185
|
// ==========================================================================
|
|
200
186
|
|
|
201
187
|
$spacing-small: 1rem;
|
|
202
188
|
$spacing-default: 2rem;
|
|
203
189
|
$spacing-medium: 3rem;
|
|
204
|
-
$spacing-large: 4rem;
|
|
190
|
+
$spacing-large: 4rem;
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
// Breakpoint Mixin
|
|
2
|
+
// ----------------
|
|
3
|
+
// writing out CSS media queries by hand is a pain,
|
|
4
|
+
// to write awesome media queries, simply @include this mixin
|
|
5
|
+
//
|
|
6
|
+
// Example:
|
|
7
|
+
// @include breakpoint(key-word) {
|
|
8
|
+
// write your code here
|
|
9
|
+
// }
|
|
10
|
+
//
|
|
11
|
+
|
|
12
|
+
@mixin breakpoint($val) {
|
|
13
|
+
@if $val == "small" {
|
|
14
|
+
@media (min-width: $small-breakpoint) {
|
|
15
|
+
@content;
|
|
16
|
+
}
|
|
17
|
+
} @else if $val == "small-only" {
|
|
18
|
+
@media (min-width: $small-breakpoint) and (max-width: $medium-breakpoint) {
|
|
19
|
+
@content;
|
|
20
|
+
}
|
|
21
|
+
} @else if $val == "small-down" {
|
|
22
|
+
@media (max-width: $medium-breakpoint) {
|
|
23
|
+
@content;
|
|
24
|
+
}
|
|
25
|
+
} @else if $val == "medium" {
|
|
26
|
+
@media (min-width: $medium-breakpoint) {
|
|
27
|
+
@content;
|
|
28
|
+
}
|
|
29
|
+
} @else if $val == "medium-only" {
|
|
30
|
+
@media (min-width: $medium-breakpoint) and (max-width: $large-breakpoint) {
|
|
31
|
+
@content;
|
|
32
|
+
}
|
|
33
|
+
} @else if $val == "medium-down" {
|
|
34
|
+
@media (max-width: $large-breakpoint) {
|
|
35
|
+
@content;
|
|
36
|
+
}
|
|
37
|
+
} @else if $val == "medium" {
|
|
38
|
+
@media (min-width: $medium-breakpoint) {
|
|
39
|
+
@content;
|
|
40
|
+
}
|
|
41
|
+
} @else if $val == "medium-only" {
|
|
42
|
+
@media (min-width: $medium-breakpoint) and (max-width: $large-breakpoint) {
|
|
43
|
+
@content;
|
|
44
|
+
}
|
|
45
|
+
} @else if $val == "medium-down" {
|
|
46
|
+
@media (max-width: $large-breakpoint) {
|
|
47
|
+
@content;
|
|
48
|
+
}
|
|
49
|
+
} @else if $val == "large" {
|
|
50
|
+
@media (min-width: $large-breakpoint) {
|
|
51
|
+
@content;
|
|
52
|
+
}
|
|
53
|
+
} @else if $val == "large-only" {
|
|
54
|
+
@media (min-width: $large-breakpoint) and (max-width: $xlarge-breakpoint) {
|
|
55
|
+
@content;
|
|
56
|
+
}
|
|
57
|
+
} @else if $val == "large-down" {
|
|
58
|
+
@media (max-width: $xlarge-breakpoint) {
|
|
59
|
+
@content;
|
|
60
|
+
}
|
|
61
|
+
} @else if $val == "xlarge" {
|
|
62
|
+
@media (min-width: $xlarge-breakpoint) {
|
|
63
|
+
@content;
|
|
64
|
+
}
|
|
65
|
+
} @else if $val == "xlarge-only" {
|
|
66
|
+
@media (min-width: $xlarge-breakpoint) and (max-width: $xxlarge-breakpoint) {
|
|
67
|
+
@content;
|
|
68
|
+
}
|
|
69
|
+
} @else if $val == "xlarge-down" {
|
|
70
|
+
@media (max-width: $xxlarge-breakpoint) {
|
|
71
|
+
@content;
|
|
72
|
+
}
|
|
73
|
+
} @else if $val == "xxlarge" {
|
|
74
|
+
@media (min-width: $xxlarge-breakpoint) {
|
|
75
|
+
@content;
|
|
76
|
+
}
|
|
77
|
+
} @else {
|
|
78
|
+
@media #{$val} {
|
|
79
|
+
@content;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
*
|
|
2
|
+
*
|
|
3
3
|
* Watermark Pattern Library
|
|
4
4
|
* ==========================================================================
|
|
5
5
|
*
|
|
@@ -21,10 +21,11 @@
|
|
|
21
21
|
// 1. Modules
|
|
22
22
|
// ==========================================================================
|
|
23
23
|
//
|
|
24
|
-
// modules are reserved for sass code that do not output CSS.
|
|
24
|
+
// modules are reserved for sass code that do not output CSS.
|
|
25
25
|
// For example, mixin declarations, functions, and variables.
|
|
26
26
|
@import "styles/modules/vars";
|
|
27
27
|
@import "styles/modules/mixins";
|
|
28
|
+
@import "styles/modules/mixins/breakpoint-mixin";
|
|
28
29
|
|
|
29
30
|
|
|
30
31
|
|
|
@@ -33,10 +34,11 @@
|
|
|
33
34
|
// 2. Base
|
|
34
35
|
// ==========================================================================
|
|
35
36
|
//
|
|
36
|
-
// code related to the basic general structure; this can include
|
|
37
|
+
// code related to the basic general structure; this can include
|
|
37
38
|
// a grid system, browser reset, global generalities
|
|
38
39
|
@import "styles/base/base";
|
|
39
40
|
@import "styles/base/normalize";
|
|
41
|
+
@import "styles/base/grid-legacy";
|
|
40
42
|
@import "styles/base/grid";
|
|
41
43
|
|
|
42
44
|
@import "styles/base/utilities/box-shadow";
|
|
@@ -51,7 +53,7 @@
|
|
|
51
53
|
//
|
|
52
54
|
// materials are the building blocks all all web design
|
|
53
55
|
// materials are categorized as Atoms, Molecules, Organisms,
|
|
54
|
-
// and Pages. for more info and a deeper understanding of
|
|
56
|
+
// and Pages. for more info and a deeper understanding of
|
|
55
57
|
// the principles of Atomic design, read Brad Frost's book:
|
|
56
58
|
// http://atomicdesign.bradfrost.com/table-of-contents/
|
|
57
59
|
|
|
@@ -109,4 +111,4 @@
|
|
|
109
111
|
@import "styles/vendor/icons";
|
|
110
112
|
@import "styles/vendor/custom_selects";
|
|
111
113
|
@import "styles/vendor/custom_file_inputs";
|
|
112
|
-
@import "styles/vendor/selectize";
|
|
114
|
+
@import "styles/vendor/selectize";
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
module WCC::Styles::SimpleForm
|
|
2
|
+
class StringArrayInput < SimpleForm::Inputs::Base
|
|
3
|
+
def input(wrapper_options=nil)
|
|
4
|
+
merged_input_options = merge_wrapper_options(input_html_options, wrapper_options)
|
|
5
|
+
field_value = object.public_send(attribute_name)
|
|
6
|
+
|
|
7
|
+
template.content_tag(:div, class: "selectize select-style") do
|
|
8
|
+
template.text_field_tag(
|
|
9
|
+
"#{base_input_name}[#{attribute_name}_facade]",
|
|
10
|
+
field_value.join(','),
|
|
11
|
+
"data-string-array-selectize" => "#{base_input_name}[#{attribute_name}]",
|
|
12
|
+
)
|
|
13
|
+
end
|
|
14
|
+
end
|
|
15
|
+
|
|
16
|
+
private
|
|
17
|
+
|
|
18
|
+
def base_input_name
|
|
19
|
+
@base_input_name ||= "#{lookup_model_names.reduce { |str, item| "#{str}[#{item}]" }}"
|
|
20
|
+
end
|
|
21
|
+
end
|
|
22
|
+
end
|
|
@@ -2,6 +2,7 @@ require 'wcc/styles/simple_form/asset_input'
|
|
|
2
2
|
require 'wcc/styles/simple_form/time_picker_input'
|
|
3
3
|
require 'wcc/styles/simple_form/date_picker_input'
|
|
4
4
|
require 'wcc/styles/simple_form/historical_date_input'
|
|
5
|
+
require 'wcc/styles/simple_form/string_array_input'
|
|
5
6
|
|
|
6
7
|
SimpleForm::FormBuilder.map_type :date, to: WCC::Styles::SimpleForm::DatePickerInput
|
|
7
8
|
SimpleForm::FormBuilder.map_type :datetime, :time, to: WCC::Styles::SimpleForm::TimePickerInput
|
data/lib/wcc/styles/version.rb
CHANGED
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: wcc-styles
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 3.0.0.
|
|
4
|
+
version: 3.0.0.beta3
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Watermark Community Church
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2016-
|
|
11
|
+
date: 2016-11-11 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: coffee-rails
|
|
@@ -148,6 +148,7 @@ files:
|
|
|
148
148
|
- lib/assets/javascripts/wcc/styles/wcc.datetimepicker.js
|
|
149
149
|
- lib/assets/stylesheets/wcc/styles.scss
|
|
150
150
|
- lib/assets/stylesheets/wcc/styles/base/_base.scss
|
|
151
|
+
- lib/assets/stylesheets/wcc/styles/base/_grid-legacy.scss
|
|
151
152
|
- lib/assets/stylesheets/wcc/styles/base/_grid.scss
|
|
152
153
|
- lib/assets/stylesheets/wcc/styles/base/_normalize.scss
|
|
153
154
|
- lib/assets/stylesheets/wcc/styles/base/utilities/_box-shadow.scss
|
|
@@ -175,6 +176,7 @@ files:
|
|
|
175
176
|
- lib/assets/stylesheets/wcc/styles/materials/templates/_transactional.scss
|
|
176
177
|
- lib/assets/stylesheets/wcc/styles/modules/_mixins.scss
|
|
177
178
|
- lib/assets/stylesheets/wcc/styles/modules/_vars.scss
|
|
179
|
+
- lib/assets/stylesheets/wcc/styles/modules/mixins/_breakpoint-mixin.scss
|
|
178
180
|
- lib/assets/stylesheets/wcc/styles/vendor/_custom_file_inputs.scss
|
|
179
181
|
- lib/assets/stylesheets/wcc/styles/vendor/_custom_selects.scss
|
|
180
182
|
- lib/assets/stylesheets/wcc/styles/vendor/_icons.scss
|
|
@@ -186,6 +188,7 @@ files:
|
|
|
186
188
|
- lib/wcc/styles/simple_form/asset_input.rb
|
|
187
189
|
- lib/wcc/styles/simple_form/date_picker_input.rb
|
|
188
190
|
- lib/wcc/styles/simple_form/historical_date_input.rb
|
|
191
|
+
- lib/wcc/styles/simple_form/string_array_input.rb
|
|
189
192
|
- lib/wcc/styles/simple_form/time_picker_input.rb
|
|
190
193
|
- lib/wcc/styles/version.rb
|
|
191
194
|
homepage: https://patterns.watermark.org/
|