govuk_elements_rails 0.3.0 → 1.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.
- checksums.yaml +4 -4
- data/LICENSE +19 -0
- data/README.md +165 -46
- data/lib/govuk_elements_rails.rb +0 -1
- data/lib/govuk_elements_rails/engine.rb +0 -10
- data/vendor/assets/javascripts/details.polyfill.js +29 -43
- data/vendor/assets/stylesheets/_govuk-elements.scss +54 -0
- data/vendor/assets/stylesheets/elements/_base.scss +126 -0
- data/vendor/assets/stylesheets/elements/_breadcrumbs.scss +6 -0
- data/vendor/assets/stylesheets/elements/_buttons.scss +5 -5
- data/vendor/assets/stylesheets/elements/_components.scss +9 -0
- data/vendor/assets/stylesheets/elements/_details.scss +3 -9
- data/vendor/assets/stylesheets/elements/_elements-typography.scss +102 -9
- data/vendor/assets/stylesheets/elements/_forms.scss +84 -61
- data/vendor/assets/stylesheets/elements/_helpers.scss +6 -12
- data/vendor/assets/stylesheets/elements/_icons.scss +63 -207
- data/vendor/assets/stylesheets/elements/_layout.scss +9 -22
- data/vendor/assets/stylesheets/elements/_lists.scss +10 -13
- data/vendor/assets/stylesheets/elements/_panels.scss +24 -17
- data/vendor/assets/stylesheets/elements/_phase-banner.scss +10 -0
- data/vendor/assets/stylesheets/elements/_tables.scss +1 -5
- data/vendor/assets/stylesheets/elements/forms/_form-block-labels.scss +8 -7
- data/vendor/assets/stylesheets/elements/forms/_form-validation.scss +0 -3
- metadata +33 -49
- data/LICENCE +0 -20
- data/app/builders/govuk_elements_form_builder.rb +0 -77
- data/app/builders/labelling_form_builder.rb +0 -316
- data/lib/govuk_elements_rails/version.rb +0 -5
- data/vendor/assets/images/icons/accordian-arrow-2x.png +0 -0
- data/vendor/assets/images/icons/accordian-arrow.png +0 -0
- data/vendor/assets/images/icons/arrow-sprite.png +0 -0
- data/vendor/assets/images/icons/icon-calendar-2x.png +0 -0
- data/vendor/assets/images/icons/icon-calendar.png +0 -0
- data/vendor/assets/images/icons/icon-file-download-2x.png +0 -0
- data/vendor/assets/images/icons/icon-file-download.png +0 -0
- data/vendor/assets/images/icons/icon-important-2x.png +0 -0
- data/vendor/assets/images/icons/icon-important.png +0 -0
- data/vendor/assets/images/icons/icon-information-2x.png +0 -0
- data/vendor/assets/images/icons/icon-information.png +0 -0
- data/vendor/assets/images/icons/icon-locator-2x.png +0 -0
- data/vendor/assets/images/icons/icon-locator.png +0 -0
- data/vendor/assets/images/icons/icon-pointer-2x.png +0 -0
- data/vendor/assets/images/icons/icon-pointer-black-2x.png +0 -0
- data/vendor/assets/images/icons/icon-pointer-black.png +0 -0
- data/vendor/assets/images/icons/icon-pointer-indexed.png +0 -0
- data/vendor/assets/images/icons/icon-pointer.png +0 -0
- data/vendor/assets/images/icons/icon-search-2x.png +0 -0
- data/vendor/assets/images/icons/icon-search.png +0 -0
- data/vendor/assets/images/icons/player-icon-forward.png +0 -0
- data/vendor/assets/images/icons/player-icon-pause.png +0 -0
- data/vendor/assets/images/icons/player-icon-play.png +0 -0
- data/vendor/assets/images/icons/player-icon-rewind.png +0 -0
- data/vendor/assets/images/icons/player-icon-volume.png +0 -0
- data/vendor/assets/javascripts/application.js +0 -157
- data/vendor/assets/javascripts/bind.js +0 -40
- data/vendor/assets/javascripts/selection-buttons.js +0 -111
- data/vendor/assets/stylesheets/elements-page-ie6.scss +0 -5
- data/vendor/assets/stylesheets/elements-page-ie7.scss +0 -4
- data/vendor/assets/stylesheets/elements-page-ie8.scss +0 -4
- data/vendor/assets/stylesheets/elements-page.scss +0 -386
- data/vendor/assets/stylesheets/main-ie6.scss +0 -5
- data/vendor/assets/stylesheets/main-ie7.scss +0 -4
- data/vendor/assets/stylesheets/main-ie8.scss +0 -4
- data/vendor/assets/stylesheets/main.scss +0 -36
- data/vendor/assets/stylesheets/prism.scss +0 -144
- data/vendor/assets/stylesheets/service-design-manual/helpers/_breadcrumbs.scss +0 -81
- data/vendor/assets/stylesheets/service-design-manual/helpers/_page-header.scss +0 -28
- data/vendor/assets/stylesheets/service-design-manual/styleguide/_colours.scss +0 -3
@@ -0,0 +1,126 @@
|
|
1
|
+
html, body, button, input, table, td, th { font-family: $NTA-Light; }
|
2
|
+
|
3
|
+
// basic styles for HTML5 and other elements
|
4
|
+
html, body, div, h1, h2, h3, h4, h5, h6, article, aside, footer, header, hgroup, nav, section {
|
5
|
+
margin: 0;
|
6
|
+
padding: 0;
|
7
|
+
vertical-align: baseline;
|
8
|
+
}
|
9
|
+
|
10
|
+
// HTML5 display definition
|
11
|
+
main {
|
12
|
+
display: block;
|
13
|
+
}
|
14
|
+
|
15
|
+
// 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
|
16
|
+
// http://clagnut.com/blog/348/#c790
|
17
|
+
// note - font-size reduced to 62.5% to allow simple rem/px font-sizing and fallback
|
18
|
+
// http://snook.ca/archives/html_and_css/font-size-with-rem
|
19
|
+
// 2. Keeps page centred in all browsers regardless of content height
|
20
|
+
// 3. Removes Android and iOS tap highlight color to prevent entire container being highlighted
|
21
|
+
// www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/
|
22
|
+
// 4. Prevents iOS text size adjust after orientation change, without disabling user zoom.
|
23
|
+
|
24
|
+
html {
|
25
|
+
font-size: 62.5%; // 1
|
26
|
+
overflow-y: scroll; // 2
|
27
|
+
-webkit-tap-highlight-color: rgba(0,0,0,0); // 3
|
28
|
+
-webkit-text-size-adjust: 100%; // 4
|
29
|
+
-ms-text-size-adjust: 100%; // 4
|
30
|
+
// Set background colour to match footer background
|
31
|
+
background-color: $grey-8;
|
32
|
+
// Force the scrollbar to always display in IE10/11
|
33
|
+
-ms-overflow-style: scrollbar;
|
34
|
+
}
|
35
|
+
|
36
|
+
// 1. Font-size increased to compensate for change to html element font-size in
|
37
|
+
// order to support beta typography which was set in ems
|
38
|
+
// (62.5% * 160% = 100%)
|
39
|
+
// 2. Addresses margins handled incorrectly in IE6/7
|
40
|
+
|
41
|
+
body {
|
42
|
+
font-size: 160%; // 1
|
43
|
+
margin: 0; // 2
|
44
|
+
background: $white;
|
45
|
+
color: $text-colour;
|
46
|
+
line-height: 1.5;
|
47
|
+
font-weight: 400;
|
48
|
+
-webkit-font-smoothing: antialiased;
|
49
|
+
-moz-osx-font-smoothing: grayscale;
|
50
|
+
}
|
51
|
+
|
52
|
+
ol, ul, nav ol, nav ul {
|
53
|
+
list-style: inherit;
|
54
|
+
}
|
55
|
+
|
56
|
+
fieldset {
|
57
|
+
border: none;
|
58
|
+
padding: 0;
|
59
|
+
}
|
60
|
+
|
61
|
+
b,
|
62
|
+
strong {
|
63
|
+
font-weight: 600;
|
64
|
+
}
|
65
|
+
|
66
|
+
img {
|
67
|
+
border: 0;
|
68
|
+
}
|
69
|
+
|
70
|
+
@include ie-lte(7) {
|
71
|
+
button {
|
72
|
+
overflow:visible;
|
73
|
+
}
|
74
|
+
}
|
75
|
+
|
76
|
+
abbr[title] {
|
77
|
+
cursor: help;
|
78
|
+
}
|
79
|
+
|
80
|
+
// Set focus styles
|
81
|
+
a {
|
82
|
+
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);
|
83
|
+
}
|
84
|
+
|
85
|
+
a:focus {
|
86
|
+
background-color: $focus-colour;
|
87
|
+
outline: 3px solid $focus-colour;
|
88
|
+
}
|
89
|
+
|
90
|
+
input:focus,
|
91
|
+
textarea:focus,
|
92
|
+
select:focus,
|
93
|
+
button:focus {
|
94
|
+
outline: 3px solid $focus-colour;
|
95
|
+
}
|
96
|
+
|
97
|
+
// Link styles
|
98
|
+
a:link {
|
99
|
+
color: $link-colour;
|
100
|
+
}
|
101
|
+
|
102
|
+
a:visited {
|
103
|
+
color: $link-visited-colour;
|
104
|
+
}
|
105
|
+
|
106
|
+
a:hover {
|
107
|
+
color: $link-hover-colour;
|
108
|
+
}
|
109
|
+
|
110
|
+
a:active {
|
111
|
+
color: $link-active-colour;
|
112
|
+
}
|
113
|
+
|
114
|
+
// External link styles
|
115
|
+
a[rel="external"] {
|
116
|
+
@include external-link-default;
|
117
|
+
@include external-link-19;
|
118
|
+
@include media-down(mobile) {
|
119
|
+
@include external-link-16;
|
120
|
+
}
|
121
|
+
}
|
122
|
+
|
123
|
+
.external-link {
|
124
|
+
@include external-link-12-no-hover;
|
125
|
+
@include external-link-heading;
|
126
|
+
}
|
@@ -1,15 +1,14 @@
|
|
1
1
|
// Buttons
|
2
2
|
// ==========================================================================
|
3
|
-
// GOV.UK front end toolkit dependencies
|
4
|
-
@import "design-patterns/buttons";
|
5
|
-
@import "measurements";
|
6
|
-
@import "typography";
|
7
3
|
|
8
4
|
.button {
|
9
5
|
@include button ($button-colour);
|
10
|
-
|
6
|
+
@include box-sizing (border-box);
|
11
7
|
padding: em(10) em(15) em(5) em(15);
|
12
8
|
vertical-align: top;
|
9
|
+
@include media (mobile) {
|
10
|
+
width: 100%;
|
11
|
+
}
|
13
12
|
}
|
14
13
|
|
15
14
|
// Fix unwanted button padding in Firefox
|
@@ -32,6 +31,7 @@
|
|
32
31
|
}
|
33
32
|
|
34
33
|
// Start now buttons
|
34
|
+
.button-start,
|
35
35
|
.button-get-started {
|
36
36
|
@include bold-24;
|
37
37
|
background-image: file-url("icons/icon-pointer.png");
|
@@ -1,7 +1,5 @@
|
|
1
1
|
// Details
|
2
2
|
// ==========================================================================
|
3
|
-
// GOV.UK front end toolkit dependencies
|
4
|
-
@import "colours";
|
5
3
|
|
6
4
|
details {
|
7
5
|
display: block;
|
@@ -21,20 +19,16 @@ details {
|
|
21
19
|
outline: 3px solid $focus-colour;
|
22
20
|
}
|
23
21
|
}
|
24
|
-
|
22
|
+
|
25
23
|
// Underline only summary text (not the arrow)
|
26
24
|
.summary {
|
27
25
|
text-decoration: underline;
|
28
26
|
}
|
29
|
-
|
27
|
+
|
30
28
|
// Match fallback arrow spacing with -webkit default
|
31
29
|
.arrow {
|
32
30
|
margin-right: .35em;
|
33
31
|
font-style: normal;
|
34
32
|
}
|
35
|
-
|
36
|
-
// Remove top margin from bordered panel
|
37
|
-
.panel-indent {
|
38
|
-
margin-top: 0;
|
39
|
-
}
|
33
|
+
|
40
34
|
}
|
@@ -1,10 +1,6 @@
|
|
1
1
|
// Typography
|
2
2
|
// ==========================================================================
|
3
3
|
|
4
|
-
// GOV.UK front end toolkit dependencies
|
5
|
-
@import "typography";
|
6
|
-
@import "colours";
|
7
|
-
|
8
4
|
// Increase the base font size to 19px for the main content area
|
9
5
|
// Using the core-19 mixin from the govuk_toolkit _typography.scss file
|
10
6
|
|
@@ -178,15 +174,112 @@ p {
|
|
178
174
|
color: $link-colour;
|
179
175
|
}
|
180
176
|
|
177
|
+
// Back link styles - with left pointing arrow
|
178
|
+
|
179
|
+
.link-back {
|
180
|
+
@include inline-block;
|
181
|
+
position: relative;
|
182
|
+
|
183
|
+
@include core-16;
|
184
|
+
|
185
|
+
margin-top: $gutter-half;
|
186
|
+
margin-bottom: $gutter-half;
|
187
|
+
padding-left: 14px;
|
188
|
+
|
189
|
+
color: $black;
|
190
|
+
|
191
|
+
&:link,
|
192
|
+
&:visited,
|
193
|
+
&:hover,
|
194
|
+
&:active {
|
195
|
+
color: $black;
|
196
|
+
}
|
197
|
+
|
198
|
+
text-decoration: none;
|
199
|
+
border-bottom: 1px solid $black;
|
200
|
+
|
201
|
+
// Back arrow - left pointing black arrow
|
202
|
+
&::before {
|
203
|
+
content: '';
|
204
|
+
display: block;
|
205
|
+
width: 0;
|
206
|
+
height: 0;
|
207
|
+
|
208
|
+
border-top: 5px solid transparent;
|
209
|
+
border-right: 6px solid #0b0c0c;
|
210
|
+
border-bottom: 5px solid transparent;
|
211
|
+
|
212
|
+
position: absolute;
|
213
|
+
left: 0;
|
214
|
+
top: 50%;
|
215
|
+
margin-top: -6px;
|
216
|
+
}
|
217
|
+
|
218
|
+
// Fallback
|
219
|
+
// IE8 doesn't support rgba and only supports the single colon syntax for :before
|
220
|
+
// IE7 doesn't support pseudo-elements, let's fallback to an image instead.
|
221
|
+
// Ref: http://caniuse.com/#search=%3Abefore, http://caniuse.com/#search=rgba
|
222
|
+
@include ie-lte(8) {
|
223
|
+
background: file-url("icon-arrow-left.png") no-repeat 0 4px;
|
224
|
+
}
|
225
|
+
|
226
|
+
}
|
227
|
+
|
181
228
|
// Code styles
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
229
|
+
.code {
|
230
|
+
color: black;
|
231
|
+
text-shadow: 0 1px white;
|
232
|
+
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
233
|
+
font-size: 14px;
|
234
|
+
direction: ltr;
|
235
|
+
text-align: left;
|
236
|
+
white-space: pre;
|
237
|
+
word-spacing: normal;
|
238
|
+
word-break: normal;
|
239
|
+
line-height: 1.5;
|
240
|
+
|
241
|
+
-moz-tab-size: 4;
|
242
|
+
-o-tab-size: 4;
|
243
|
+
tab-size: 4;
|
244
|
+
|
245
|
+
-webkit-hyphens: none;
|
246
|
+
-moz-hyphens: none;
|
247
|
+
-ms-hyphens: none;
|
248
|
+
hyphens: none;
|
249
|
+
|
186
250
|
color: $black;
|
187
251
|
background-color: $highlight-colour;
|
188
252
|
border: 1px solid $border-colour;
|
189
|
-
padding:
|
253
|
+
padding: 4px 4px 2px 4px;
|
190
254
|
}
|
191
255
|
|
256
|
+
// Horizontal rule style
|
257
|
+
hr {
|
258
|
+
display: block;
|
259
|
+
background: $border-colour;
|
260
|
+
border: 0;
|
261
|
+
height: 1px;
|
262
|
+
margin-top: $gutter;
|
263
|
+
margin-bottom: $gutter;
|
264
|
+
padding: 0;
|
265
|
+
@include ie-lte(7) {
|
266
|
+
color: $border-colour;
|
267
|
+
}
|
268
|
+
}
|
192
269
|
|
270
|
+
// Notice, text with an icon to the left
|
271
|
+
.notice {
|
272
|
+
@extend %contain-floats;
|
273
|
+
position: relative;
|
274
|
+
.icon {
|
275
|
+
position: absolute;
|
276
|
+
left: 0;
|
277
|
+
top: 50%;
|
278
|
+
margin-top: -17px; // Half the height of the important icon
|
279
|
+
}
|
280
|
+
strong {
|
281
|
+
display: block;
|
282
|
+
padding-left: (35 + 30)+px;
|
283
|
+
margin-left: -$gutter-half;
|
284
|
+
}
|
285
|
+
}
|
@@ -1,8 +1,17 @@
|
|
1
1
|
// Forms
|
2
2
|
// ==========================================================================
|
3
|
-
|
4
|
-
|
5
|
-
|
3
|
+
|
4
|
+
// Contents:
|
5
|
+
//
|
6
|
+
// 1. Helpers
|
7
|
+
// 2. Form wrappers
|
8
|
+
// 3. Form labels
|
9
|
+
// 4. Form hints
|
10
|
+
// 5. Form controls
|
11
|
+
// 6. Form control widths
|
12
|
+
|
13
|
+
// 1. Helpers
|
14
|
+
// ==========================================================================
|
6
15
|
|
7
16
|
// Fieldset is used to group more than one .form-group
|
8
17
|
fieldset {
|
@@ -17,12 +26,23 @@ fieldset {
|
|
17
26
|
}
|
18
27
|
}
|
19
28
|
|
29
|
+
// Remove margin under textarea in Chrome and FF
|
30
|
+
textarea{
|
31
|
+
display: block;
|
32
|
+
}
|
33
|
+
|
34
|
+
|
35
|
+
// 2. Form wrappers
|
36
|
+
// ==========================================================================
|
37
|
+
|
20
38
|
// Form group is used to wrap label and input pairs
|
21
39
|
.form-group {
|
22
40
|
@extend %contain-floats;
|
23
41
|
@include box-sizing(border-box);
|
42
|
+
|
24
43
|
float: left;
|
25
44
|
width: 100%;
|
45
|
+
|
26
46
|
margin-bottom: $gutter-half;
|
27
47
|
|
28
48
|
@include media(tablet) {
|
@@ -30,6 +50,7 @@ fieldset {
|
|
30
50
|
}
|
31
51
|
}
|
32
52
|
|
53
|
+
// Form group related is used to reduce the space between label and input pairs
|
33
54
|
.form-group-related {
|
34
55
|
margin-bottom: 10px;
|
35
56
|
|
@@ -44,19 +65,11 @@ fieldset {
|
|
44
65
|
}
|
45
66
|
|
46
67
|
|
47
|
-
// Form
|
48
|
-
|
49
|
-
margin-bottom: $gutter;
|
50
|
-
|
51
|
-
@include media(tablet) {
|
52
|
-
margin-bottom: ($gutter*1.5);
|
53
|
-
}
|
54
|
-
}
|
55
|
-
|
56
|
-
|
57
|
-
// Labels
|
68
|
+
// 3. Form labels
|
69
|
+
// ==========================================================================
|
58
70
|
|
59
71
|
// Form labels, or for legends styled to look like labels
|
72
|
+
// TODO: Amend so there is only one label style
|
60
73
|
.form-label,
|
61
74
|
.form-label-bold {
|
62
75
|
display: block;
|
@@ -80,6 +93,7 @@ legend {
|
|
80
93
|
}
|
81
94
|
|
82
95
|
// Remove spacing when error messages are shown
|
96
|
+
// TODO: Move into /forms/_form-validation.scss
|
83
97
|
.error legend {
|
84
98
|
.form-label,
|
85
99
|
.form-label-bold {
|
@@ -87,23 +101,25 @@ legend {
|
|
87
101
|
}
|
88
102
|
}
|
89
103
|
|
90
|
-
// Used for
|
104
|
+
// Used for the 'or' in between block label options
|
91
105
|
.form-block {
|
92
106
|
@extend %contain-floats;
|
93
107
|
float: left;
|
94
108
|
width: 100%;
|
95
109
|
|
110
|
+
margin-top: -5px;
|
96
111
|
margin-bottom: 5px;
|
97
112
|
|
98
113
|
@include media(tablet) {
|
99
|
-
margin-top:
|
114
|
+
margin-top: 0;
|
115
|
+
margin-bottom: 10px;
|
100
116
|
}
|
101
117
|
}
|
102
118
|
|
119
|
+
// 4. Form hints
|
120
|
+
// ==========================================================================
|
103
121
|
|
104
|
-
//
|
105
|
-
|
106
|
-
// Form hints & examples are light grey and sit above a form control
|
122
|
+
// Form hints and example text are light grey and sit above a form control
|
107
123
|
.form-hint {
|
108
124
|
@include core-19;
|
109
125
|
display: block;
|
@@ -112,7 +128,9 @@ legend {
|
|
112
128
|
margin-bottom: 5px;
|
113
129
|
}
|
114
130
|
|
115
|
-
|
131
|
+
|
132
|
+
// 5. Form controls
|
133
|
+
// ==========================================================================
|
116
134
|
|
117
135
|
// By default, form controls are 50% width for desktop,
|
118
136
|
// and 100% width for mobile
|
@@ -123,44 +141,16 @@ legend {
|
|
123
141
|
|
124
142
|
padding: 4px;
|
125
143
|
background-color: $white;
|
126
|
-
border:
|
127
|
-
|
128
|
-
// Disable webkit appearance and remove rounded corners
|
129
|
-
-webkit-appearance: none;
|
130
|
-
border-radius: 0;
|
144
|
+
border: 2px solid $grey-1;
|
131
145
|
|
146
|
+
// TODO: Remove 50% width set for tablet and up
|
147
|
+
// !! BREAKING CHANGE !!
|
132
148
|
@include media(tablet) {
|
133
149
|
width: 50%;
|
134
150
|
}
|
135
|
-
}
|
136
151
|
|
137
|
-
|
138
|
-
// Form control widths
|
139
|
-
.form-control-3-4 {
|
140
|
-
width: 100%;
|
141
|
-
|
142
|
-
@include media(tablet) {
|
143
|
-
width: 75%;
|
144
|
-
}
|
145
152
|
}
|
146
153
|
|
147
|
-
.form-control-1-2 {
|
148
|
-
width: 100%;
|
149
|
-
|
150
|
-
@include media(tablet) {
|
151
|
-
width: 50%;
|
152
|
-
}
|
153
|
-
}
|
154
|
-
|
155
|
-
.form-control-1-4 {
|
156
|
-
width: 25%;
|
157
|
-
}
|
158
|
-
|
159
|
-
.form-control-1-8 {
|
160
|
-
width: 12.5%;
|
161
|
-
}
|
162
|
-
|
163
|
-
|
164
154
|
// Radio buttons
|
165
155
|
.form-radio {
|
166
156
|
display: block;
|
@@ -172,7 +162,6 @@ legend {
|
|
172
162
|
}
|
173
163
|
}
|
174
164
|
|
175
|
-
|
176
165
|
// Checkboxes
|
177
166
|
.form-checkbox {
|
178
167
|
display: block;
|
@@ -185,18 +174,52 @@ legend {
|
|
185
174
|
}
|
186
175
|
|
187
176
|
|
188
|
-
//
|
189
|
-
|
190
|
-
|
191
|
-
|
177
|
+
// 6. Form control widths
|
178
|
+
// ==========================================================================
|
179
|
+
|
180
|
+
// TODO: Update these
|
181
|
+
// Form control widths
|
182
|
+
|
183
|
+
.form-control-3-4 {
|
184
|
+
width: 100%;
|
185
|
+
|
186
|
+
@include media(tablet) {
|
187
|
+
width: 75%;
|
192
188
|
}
|
193
189
|
}
|
194
190
|
|
191
|
+
.form-control-2-3 {
|
192
|
+
width: 100%;
|
193
|
+
@include media(tablet) {
|
194
|
+
width: 66.66%;
|
195
|
+
}
|
196
|
+
}
|
195
197
|
|
196
|
-
|
197
|
-
|
198
|
+
.form-control-1-2 {
|
199
|
+
width: 100%;
|
198
200
|
|
201
|
+
@include media(tablet) {
|
202
|
+
width: 50%;
|
203
|
+
}
|
204
|
+
}
|
205
|
+
|
206
|
+
.form-control-1-3 {
|
207
|
+
width: 100%;
|
208
|
+
@include media(tablet) {
|
209
|
+
width: 33.33%;
|
210
|
+
}
|
211
|
+
}
|
212
|
+
|
213
|
+
.form-control-1-4 {
|
214
|
+
width: 100%;
|
215
|
+
@include media(tablet) {
|
216
|
+
width: 25%;
|
217
|
+
}
|
218
|
+
}
|
199
219
|
|
200
|
-
|
201
|
-
|
202
|
-
@
|
220
|
+
.form-control-1-8 {
|
221
|
+
width: 100%;
|
222
|
+
@include media(tablet) {
|
223
|
+
width: 12.5%;
|
224
|
+
}
|
225
|
+
}
|