wcc-styles 3.0.0.beta2 → 3.0.0.beta3
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/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/
|