dxw_govuk_frontend_rails 2.9.0.pre.alpha.1 → 2.10.0.pre
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +3 -16
- data/lib/dxw_govuk_frontend_rails/version.rb +1 -1
- data/package-lock.json +3 -3
- data/package.json +1 -1
- data/vendor/assets/stylesheets/components/checkboxes/_checkboxes.scss +174 -25
- data/vendor/assets/stylesheets/components/radios/_radios.scss +186 -25
- data/vendor/assets/stylesheets/objects/_form-group.scss +1 -0
- data/vendor/assets/stylesheets/settings/_colours-applied.scss +8 -0
- data/vendor/assets/stylesheets/settings/_measurements.scss +7 -0
- metadata +3 -4
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 83eceaa459d525ea2aaf6ea4f5843f34f87eb032125328b9dfd6eef696c82ab0
|
4
|
+
data.tar.gz: 0e21045e97f80902b92555505ce8ff8844832d79348639f29959446e5c93c3f5
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 0a684d3740d0b35ae5274f898fbd989ce7d8b90c6045d066c70421847fb232022193cae6945e924dce436f8913c66051bb8944662ddc6c9d8a17f22de6b146f2
|
7
|
+
data.tar.gz: 886675f75d66c39331bdff409b1e35fb73ddd2b7b6f4b1b85ada51c6ba1ff0ea478bc6e3fccb19ba2a8653f2329aeda1c2104181586586ffed20b50607f51b11
|
data/README.md
CHANGED
@@ -26,11 +26,9 @@ And then execute:
|
|
26
26
|
## Usage
|
27
27
|
Your Rails app will need to have sass enabled.
|
28
28
|
|
29
|
-
|
29
|
+
### Basic usage
|
30
30
|
|
31
|
-
|
32
|
-
|
33
|
-
If the service you are building does not need to modify or extend the GOVUK Frontend all you need to do is import the main sass file into your Rails app:
|
31
|
+
If the service you are building does not need to modify or extend the GOVUK Frontend all you need to do is import the main sass and javascript files into your Rails app:
|
34
32
|
|
35
33
|
- create a sass file in your application:
|
36
34
|
```
|
@@ -58,23 +56,12 @@ window.onload = function() {
|
|
58
56
|
window.GOVUKFrontend.initAll()
|
59
57
|
};
|
60
58
|
```
|
59
|
+
- update your application markup to use the GOVUK Frontend class names
|
61
60
|
|
62
61
|
IMPORTANT: You cannot use the GOVUK Frontend without changes if the service you are building is not on GOV.UK, read and understand the guidance here:
|
63
62
|
|
64
63
|
https://www.gov.uk/service-manual/design/making-your-service-look-like-govuk#if-your-service-isnt-on-govuk
|
65
64
|
|
66
|
-
See below for the recommended approach to changing the settings and extending the styles.
|
67
|
-
|
68
|
-
### Changing the settings
|
69
|
-
If you only need to change minor settings, the font for example, you can do that with the GOVUK Frontend settings:
|
70
|
-
|
71
|
-
[Changing the GOVUK Frontend settings in your application](docs/change_settings.md)
|
72
|
-
|
73
|
-
### Changing the settings and extending the components
|
74
|
-
If you need to extend the GOVUK components you can add your own to your application:
|
75
|
-
|
76
|
-
[Extend the GOVUK Frontend in your application](docs/extend.md)
|
77
|
-
|
78
65
|
## Tracking version
|
79
66
|
We aim to tracking the version of GOVUK Frontend.
|
80
67
|
|
data/package-lock.json
CHANGED
@@ -5,9 +5,9 @@
|
|
5
5
|
"requires": true,
|
6
6
|
"dependencies": {
|
7
7
|
"govuk-frontend": {
|
8
|
-
"version": "2.
|
9
|
-
"resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-2.
|
10
|
-
"integrity": "sha512-
|
8
|
+
"version": "2.10.0",
|
9
|
+
"resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-2.10.0.tgz",
|
10
|
+
"integrity": "sha512-Tfo76yz5ybFMX1heojeiWAyxUx0gABM2/hfMk1zu+9hWvApmfxeTaQOJkje4jeo1ybRo+FhgKFqqAzkBOOUnqg=="
|
11
11
|
}
|
12
12
|
}
|
13
13
|
}
|
data/package.json
CHANGED
@@ -8,7 +8,10 @@
|
|
8
8
|
@import "../label/label";
|
9
9
|
|
10
10
|
@include govuk-exports("govuk/component/checkboxes") {
|
11
|
-
|
11
|
+
|
12
|
+
$govuk-touch-target-size: 44px;
|
13
|
+
$govuk-checkboxes-size: 40px;
|
14
|
+
$govuk-small-checkboxes-size: 24px;
|
12
15
|
$govuk-checkboxes-label-padding-left-right: govuk-spacing(3);
|
13
16
|
|
14
17
|
.govuk-checkboxes__item {
|
@@ -20,7 +23,7 @@
|
|
20
23
|
min-height: $govuk-checkboxes-size;
|
21
24
|
|
22
25
|
margin-bottom: govuk-spacing(2);
|
23
|
-
padding:
|
26
|
+
padding-left: $govuk-checkboxes-size;
|
24
27
|
|
25
28
|
clear: left;
|
26
29
|
}
|
@@ -31,25 +34,33 @@
|
|
31
34
|
}
|
32
35
|
|
33
36
|
.govuk-checkboxes__input {
|
34
|
-
|
35
|
-
|
36
|
-
z-index: 1;
|
37
|
-
top: 0;
|
38
|
-
left: 0;
|
39
|
-
|
40
|
-
width: $govuk-checkboxes-size;
|
41
|
-
height: $govuk-checkboxes-size;
|
37
|
+
$input-offset: ($govuk-touch-target-size - $govuk-checkboxes-size) / 2;
|
42
38
|
|
43
39
|
cursor: pointer;
|
44
40
|
|
45
|
-
// IE8 doesn’t support
|
41
|
+
// IE8 doesn’t support pseudo-elements, so we don’t want to hide native
|
42
|
+
// elements there.
|
46
43
|
@include govuk-not-ie8 {
|
44
|
+
position: absolute;
|
45
|
+
|
46
|
+
z-index: 1;
|
47
|
+
top: $input-offset * -1;
|
48
|
+
left: $input-offset * -1;
|
49
|
+
|
50
|
+
width: $govuk-touch-target-size;
|
51
|
+
height: $govuk-touch-target-size;
|
47
52
|
margin: 0;
|
53
|
+
|
48
54
|
opacity: 0;
|
49
55
|
}
|
50
56
|
|
51
|
-
// add focus outline to input element for IE8
|
52
57
|
@include govuk-if-ie8 {
|
58
|
+
margin-top: 10px;
|
59
|
+
margin-right: $govuk-checkboxes-size / -2;
|
60
|
+
margin-left: $govuk-checkboxes-size / -2;
|
61
|
+
float: left;
|
62
|
+
|
63
|
+
// add focus outline to input
|
53
64
|
&:focus {
|
54
65
|
outline: $govuk-focus-width solid $govuk-focus-colour;
|
55
66
|
}
|
@@ -63,16 +74,11 @@
|
|
63
74
|
cursor: pointer;
|
64
75
|
// remove 300ms pause on mobile
|
65
76
|
-ms-touch-action: manipulation;
|
66
|
-
|
77
|
+
touch-action: manipulation;
|
67
78
|
}
|
68
79
|
|
69
|
-
|
70
|
-
|
71
|
-
padding-right: $govuk-checkboxes-label-padding-left-right;
|
72
|
-
padding-left: $govuk-checkboxes-label-padding-left-right;
|
73
|
-
}
|
74
|
-
|
75
|
-
.govuk-checkboxes__input + .govuk-checkboxes__label::before {
|
80
|
+
// [ ] Check box
|
81
|
+
.govuk-checkboxes__label::before {
|
76
82
|
content: "";
|
77
83
|
box-sizing: border-box;
|
78
84
|
position: absolute;
|
@@ -82,11 +88,13 @@
|
|
82
88
|
height: $govuk-checkboxes-size;
|
83
89
|
border: $govuk-border-width-form-element solid currentColor;
|
84
90
|
background: transparent;
|
85
|
-
|
86
|
-
// padding-bottom: 1px;
|
87
91
|
}
|
88
92
|
|
89
|
-
|
93
|
+
// ✔ Check mark
|
94
|
+
//
|
95
|
+
// The check mark is a box with a border on the left and bottom side (└──),
|
96
|
+
// rotated 45 degrees
|
97
|
+
.govuk-checkboxes__label::after {
|
90
98
|
content: "";
|
91
99
|
|
92
100
|
position: absolute;
|
@@ -111,10 +119,16 @@
|
|
111
119
|
background: transparent;
|
112
120
|
}
|
113
121
|
|
122
|
+
.govuk-checkboxes__hint {
|
123
|
+
display: block;
|
124
|
+
padding-right: $govuk-checkboxes-label-padding-left-right;
|
125
|
+
padding-left: $govuk-checkboxes-label-padding-left-right;
|
126
|
+
}
|
127
|
+
|
114
128
|
// Focused state
|
115
129
|
.govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {
|
116
|
-
// Since box-shadows are removed when users customise their colours
|
117
|
-
//
|
130
|
+
// Since box-shadows are removed when users customise their colours, we set
|
131
|
+
// a transparent outline that is shown instead.
|
118
132
|
// https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/
|
119
133
|
outline: $govuk-focus-width solid transparent;
|
120
134
|
outline-offset: $govuk-focus-width;
|
@@ -136,6 +150,10 @@
|
|
136
150
|
opacity: .5;
|
137
151
|
}
|
138
152
|
|
153
|
+
// =========================================================
|
154
|
+
// Conditional reveals
|
155
|
+
// =========================================================
|
156
|
+
|
139
157
|
$conditional-border-width: $govuk-border-width-mobile;
|
140
158
|
// Calculate the amount of padding needed to keep the border centered against the checkbox.
|
141
159
|
$conditional-border-padding: ($govuk-checkboxes-size / 2) - ($conditional-border-width / 2);
|
@@ -158,4 +176,135 @@
|
|
158
176
|
margin-bottom: 0;
|
159
177
|
}
|
160
178
|
}
|
179
|
+
|
180
|
+
// =========================================================
|
181
|
+
// Small checkboxes
|
182
|
+
// =========================================================
|
183
|
+
|
184
|
+
.govuk-checkboxes--small {
|
185
|
+
|
186
|
+
$input-offset: ($govuk-touch-target-size - $govuk-small-checkboxes-size) / 2;
|
187
|
+
$label-offset: $govuk-touch-target-size - $input-offset;
|
188
|
+
|
189
|
+
.govuk-checkboxes__item {
|
190
|
+
@include govuk-clearfix;
|
191
|
+
min-height: 0;
|
192
|
+
margin-bottom: 0;
|
193
|
+
padding-left: $label-offset;
|
194
|
+
float: left;
|
195
|
+
}
|
196
|
+
|
197
|
+
// Shift the touch target into the left margin so that the visible edge of
|
198
|
+
// the control is aligned
|
199
|
+
//
|
200
|
+
// ┆What colours do you like?
|
201
|
+
// ┌┆───┐
|
202
|
+
// │┆[] │ Purple
|
203
|
+
// └┆▲──┘
|
204
|
+
// ▲┆└─ Check box pseudo element, aligned with margin
|
205
|
+
// └─── Touch target (invisible input), shifted into the margin
|
206
|
+
.govuk-checkboxes__input {
|
207
|
+
@include govuk-not-ie8 {
|
208
|
+
left: $input-offset * -1;
|
209
|
+
}
|
210
|
+
|
211
|
+
@include govuk-if-ie8 {
|
212
|
+
margin-left: $govuk-small-checkboxes-size * -1;
|
213
|
+
}
|
214
|
+
}
|
215
|
+
|
216
|
+
// Adjust the size and position of the label.
|
217
|
+
//
|
218
|
+
// Unlike larger checkboxes, we also have to float the label in order to
|
219
|
+
// 'shrink' it, preventing the hover state from kicking in across the full
|
220
|
+
// width of the parent element.
|
221
|
+
.govuk-checkboxes__label {
|
222
|
+
margin-top: -2px;
|
223
|
+
padding: 13px govuk-spacing(3) 13px 1px;
|
224
|
+
float: left;
|
225
|
+
|
226
|
+
@include govuk-media-query($from: tablet) {
|
227
|
+
padding: 11px govuk-spacing(3) 10px 1px;
|
228
|
+
}
|
229
|
+
}
|
230
|
+
|
231
|
+
// [ ] Check box
|
232
|
+
//
|
233
|
+
// Reduce the size of the check box [1], vertically center it within the
|
234
|
+
// touch target [2]
|
235
|
+
.govuk-checkboxes__label::before {
|
236
|
+
top: $input-offset - $govuk-border-width-form-element; // 2
|
237
|
+
width: $govuk-small-checkboxes-size; // 1
|
238
|
+
height: $govuk-small-checkboxes-size; // 1
|
239
|
+
}
|
240
|
+
|
241
|
+
// ✔ Check mark
|
242
|
+
//
|
243
|
+
// Reduce the size of the check mark and re-align within the checkbox
|
244
|
+
.govuk-checkboxes__label::after {
|
245
|
+
top: 15px;
|
246
|
+
left: 6px;
|
247
|
+
width: 9px;
|
248
|
+
height: 3.5px;
|
249
|
+
border-width: 0 0 3px 3px;
|
250
|
+
}
|
251
|
+
|
252
|
+
// Fix position of hint with small checkboxes
|
253
|
+
//
|
254
|
+
// Do not use hints with small checkboxes – because they're within the input
|
255
|
+
// wrapper they trigger the hover state, but clicking them doesn't actually
|
256
|
+
// activate the control.
|
257
|
+
//
|
258
|
+
// (If you do use them, they won't look completely broken... but seriously,
|
259
|
+
// don't use them)
|
260
|
+
.govuk-checkboxes__hint {
|
261
|
+
padding: 0;
|
262
|
+
clear: both;
|
263
|
+
}
|
264
|
+
|
265
|
+
// Align conditional reveals with small checkboxes
|
266
|
+
.govuk-checkboxes__conditional {
|
267
|
+
$margin-left: ($govuk-small-checkboxes-size / 2) - ($conditional-border-width / 2);
|
268
|
+
margin-left: $margin-left;
|
269
|
+
padding-left: $label-offset - ($margin-left + $conditional-border-width);
|
270
|
+
clear: both;
|
271
|
+
}
|
272
|
+
|
273
|
+
// Hover state for small checkboxes.
|
274
|
+
//
|
275
|
+
// We use a hover state for small checkboxes because the touch target size
|
276
|
+
// is so much larger than their visible size, and so we need to provide
|
277
|
+
// feedback to the user as to which checkbox they will select when their
|
278
|
+
// cursor is outside of the visible area.
|
279
|
+
.govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before {
|
280
|
+
box-shadow: 0 0 0 $govuk-hover-width $govuk-hover-colour;
|
281
|
+
}
|
282
|
+
|
283
|
+
// Because we've overridden the border-shadow provided by the focus state,
|
284
|
+
// we need to redefine that too.
|
285
|
+
//
|
286
|
+
// We use two box shadows, one that restores the original focus state [1]
|
287
|
+
// and another that then applies the hover state [2].
|
288
|
+
.govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {
|
289
|
+
// sass-lint:disable indentation
|
290
|
+
box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour, // 1
|
291
|
+
0 0 0 $govuk-hover-width $govuk-hover-colour; // 2
|
292
|
+
}
|
293
|
+
|
294
|
+
// For devices that explicitly don't support hover, don't provide a hover
|
295
|
+
// state (e.g. on touch devices like iOS).
|
296
|
+
//
|
297
|
+
// We can't use `@media (hover: hover)` because we wouldn't get the hover
|
298
|
+
// state in browsers that don't support `@media (hover)` (like Internet
|
299
|
+
// Explorer) – so we have to 'undo' the hover state instead.
|
300
|
+
@media (hover: none), (pointer: coarse) {
|
301
|
+
.govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before {
|
302
|
+
box-shadow: initial;
|
303
|
+
}
|
304
|
+
|
305
|
+
.govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {
|
306
|
+
box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour;
|
307
|
+
}
|
308
|
+
}
|
309
|
+
}
|
161
310
|
}
|
@@ -8,7 +8,10 @@
|
|
8
8
|
@import "../label/label";
|
9
9
|
|
10
10
|
@include govuk-exports("govuk/component/radios") {
|
11
|
-
|
11
|
+
|
12
|
+
$govuk-touch-target-size: 44px;
|
13
|
+
$govuk-radios-size: 40px;
|
14
|
+
$govuk-small-radios-size: 24px;
|
12
15
|
$govuk-radios-label-padding-left-right: govuk-spacing(3);
|
13
16
|
// When the default focus width is used on a curved edge it looks visually smaller.
|
14
17
|
// So for the circular radios we bump the default to make it look visually consistent.
|
@@ -18,13 +21,12 @@
|
|
18
21
|
@include govuk-font($size: 19);
|
19
22
|
|
20
23
|
display: block;
|
21
|
-
|
22
24
|
position: relative;
|
23
25
|
|
24
26
|
min-height: $govuk-radios-size;
|
25
27
|
|
26
28
|
margin-bottom: govuk-spacing(2);
|
27
|
-
padding:
|
29
|
+
padding-left: $govuk-radios-size;
|
28
30
|
|
29
31
|
clear: left;
|
30
32
|
}
|
@@ -35,25 +37,33 @@
|
|
35
37
|
}
|
36
38
|
|
37
39
|
.govuk-radios__input {
|
38
|
-
|
39
|
-
|
40
|
-
z-index: 1;
|
41
|
-
top: 0;
|
42
|
-
left: 0;
|
43
|
-
|
44
|
-
width: $govuk-radios-size;
|
45
|
-
height: $govuk-radios-size;
|
40
|
+
$input-offset: ($govuk-touch-target-size - $govuk-radios-size) / 2;
|
46
41
|
|
47
42
|
cursor: pointer;
|
48
43
|
|
49
|
-
// IE8 doesn’t support
|
44
|
+
// IE8 doesn’t support pseudo-elements, so we don’t want to hide native
|
45
|
+
// elements there.
|
50
46
|
@include govuk-not-ie8 {
|
47
|
+
position: absolute;
|
48
|
+
|
49
|
+
z-index: 1;
|
50
|
+
top: $input-offset * -1;
|
51
|
+
left: $input-offset * -1;
|
52
|
+
|
53
|
+
width: $govuk-touch-target-size;
|
54
|
+
height: $govuk-touch-target-size;
|
51
55
|
margin: 0;
|
56
|
+
|
52
57
|
opacity: 0;
|
53
58
|
}
|
54
59
|
|
55
|
-
// add focus outline to input element for IE8
|
56
60
|
@include govuk-if-ie8 {
|
61
|
+
margin-top: 10px;
|
62
|
+
margin-right: $govuk-radios-size / -2;
|
63
|
+
margin-left: $govuk-radios-size / -2;
|
64
|
+
float: left;
|
65
|
+
|
66
|
+
// add focus outline to input
|
57
67
|
&:focus {
|
58
68
|
outline: $govuk-focus-width solid $govuk-focus-colour;
|
59
69
|
}
|
@@ -67,16 +77,11 @@
|
|
67
77
|
cursor: pointer;
|
68
78
|
// remove 300ms pause on mobile
|
69
79
|
-ms-touch-action: manipulation;
|
70
|
-
|
71
|
-
}
|
72
|
-
|
73
|
-
.govuk-radios__hint {
|
74
|
-
display: block;
|
75
|
-
padding-right: $govuk-radios-label-padding-left-right;
|
76
|
-
padding-left: $govuk-radios-label-padding-left-right;
|
80
|
+
touch-action: manipulation;
|
77
81
|
}
|
78
82
|
|
79
|
-
|
83
|
+
// ( ) Radio ring
|
84
|
+
.govuk-radios__label::before {
|
80
85
|
content: "";
|
81
86
|
box-sizing: border-box;
|
82
87
|
position: absolute;
|
@@ -91,7 +96,11 @@
|
|
91
96
|
background: transparent;
|
92
97
|
}
|
93
98
|
|
94
|
-
|
99
|
+
// • Radio button
|
100
|
+
//
|
101
|
+
// We create the 'button' entirely out of 'border' so that they remain
|
102
|
+
// 'filled' even when colours are overridden in the browser.
|
103
|
+
.govuk-radios__label::after {
|
95
104
|
content: "";
|
96
105
|
|
97
106
|
position: absolute;
|
@@ -107,10 +116,16 @@
|
|
107
116
|
background: currentColor;
|
108
117
|
}
|
109
118
|
|
119
|
+
.govuk-radios__hint {
|
120
|
+
display: block;
|
121
|
+
padding-right: $govuk-radios-label-padding-left-right;
|
122
|
+
padding-left: $govuk-radios-label-padding-left-right;
|
123
|
+
}
|
124
|
+
|
110
125
|
// Focused state
|
111
126
|
.govuk-radios__input:focus + .govuk-radios__label::before {
|
112
|
-
// Since box-shadows are removed when users customise their colours
|
113
|
-
//
|
127
|
+
// Since box-shadows are removed when users customise their colours we set a
|
128
|
+
// transparent outline that is shown instead.
|
114
129
|
// https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/
|
115
130
|
outline: $govuk-focus-width solid transparent;
|
116
131
|
outline-offset: $govuk-focus-width;
|
@@ -132,7 +147,10 @@
|
|
132
147
|
opacity: .5;
|
133
148
|
}
|
134
149
|
|
135
|
-
//
|
150
|
+
// =========================================================
|
151
|
+
// Inline radios
|
152
|
+
// =========================================================
|
153
|
+
|
136
154
|
.govuk-radios--inline {
|
137
155
|
@include mq ($from: tablet) {
|
138
156
|
@include govuk-clearfix;
|
@@ -153,6 +171,10 @@
|
|
153
171
|
}
|
154
172
|
}
|
155
173
|
|
174
|
+
// =========================================================
|
175
|
+
// Dividers ('or')
|
176
|
+
// =========================================================
|
177
|
+
|
156
178
|
.govuk-radios__divider {
|
157
179
|
$govuk-divider-size: $govuk-radios-size !default;
|
158
180
|
@include govuk-font($size: 19);
|
@@ -162,6 +184,10 @@
|
|
162
184
|
text-align: center;
|
163
185
|
}
|
164
186
|
|
187
|
+
// =========================================================
|
188
|
+
// Conditional reveals
|
189
|
+
// =========================================================
|
190
|
+
|
165
191
|
$conditional-border-width: $govuk-border-width-mobile;
|
166
192
|
// Calculate the amount of padding needed to keep the border centered against the radios.
|
167
193
|
$conditional-border-padding: ($govuk-radios-size / 2) - ($conditional-border-width / 2);
|
@@ -184,4 +210,139 @@
|
|
184
210
|
margin-bottom: 0;
|
185
211
|
}
|
186
212
|
}
|
213
|
+
|
214
|
+
// =========================================================
|
215
|
+
// Small checkboxes
|
216
|
+
// =========================================================
|
217
|
+
|
218
|
+
.govuk-radios--small {
|
219
|
+
|
220
|
+
$input-offset: ($govuk-touch-target-size - $govuk-small-radios-size) / 2;
|
221
|
+
$label-offset: $govuk-touch-target-size - $input-offset;
|
222
|
+
|
223
|
+
.govuk-radios__item {
|
224
|
+
@include govuk-clearfix;
|
225
|
+
min-height: 0;
|
226
|
+
margin-bottom: 0;
|
227
|
+
padding-left: $label-offset;
|
228
|
+
float: left;
|
229
|
+
}
|
230
|
+
|
231
|
+
// Shift the touch target into the left margin so that the visible edge of
|
232
|
+
// the control is aligned
|
233
|
+
//
|
234
|
+
// ┆Which colour is your favourite?
|
235
|
+
// ┌┆───┐
|
236
|
+
// │┆() │ Purple
|
237
|
+
// └┆▲──┘
|
238
|
+
// ▲┆└─ Radio pseudo element, aligned with margin
|
239
|
+
// └─── Touch target (invisible input), shifted into the margin
|
240
|
+
.govuk-radios__input {
|
241
|
+
@include govuk-not-ie8 {
|
242
|
+
left: $input-offset * -1;
|
243
|
+
}
|
244
|
+
|
245
|
+
@include govuk-if-ie8 {
|
246
|
+
margin-left: $govuk-small-radios-size * -1;
|
247
|
+
}
|
248
|
+
}
|
249
|
+
|
250
|
+
// Adjust the size and position of the label.
|
251
|
+
//
|
252
|
+
// Unlike larger radios, we also have to float the label in order to
|
253
|
+
// 'shrink' it, preventing the hover state from kicking in across the full
|
254
|
+
// width of the parent element.
|
255
|
+
.govuk-radios__label {
|
256
|
+
margin-top: -2px;
|
257
|
+
padding: 13px govuk-spacing(3) 13px 1px;
|
258
|
+
float: left;
|
259
|
+
|
260
|
+
@include govuk-media-query($from: tablet) {
|
261
|
+
padding: 11px govuk-spacing(3) 10px 1px;
|
262
|
+
}
|
263
|
+
}
|
264
|
+
|
265
|
+
// ( ) Radio ring
|
266
|
+
//
|
267
|
+
// Reduce the size of the control [1], vertically centering it within the
|
268
|
+
// touch target [2]
|
269
|
+
.govuk-radios__label::before {
|
270
|
+
top: $input-offset - $govuk-border-width-form-element; // 2
|
271
|
+
width: $govuk-small-radios-size; // 1
|
272
|
+
height: $govuk-small-radios-size; // 1
|
273
|
+
}
|
274
|
+
|
275
|
+
// • Radio button
|
276
|
+
//
|
277
|
+
// Reduce the size of the 'button' and center it within the ring
|
278
|
+
.govuk-radios__label::after {
|
279
|
+
top: 14px;
|
280
|
+
left: 6px;
|
281
|
+
border-width: 6px;
|
282
|
+
}
|
283
|
+
|
284
|
+
// Fix position of hint with small radios
|
285
|
+
//
|
286
|
+
// Do not use hints with small radios – because they're within the input
|
287
|
+
// wrapper they trigger the hover state, but clicking them doesn't actually
|
288
|
+
// activate the control.
|
289
|
+
//
|
290
|
+
// (If you do use them, they won't look completely broken... but seriously,
|
291
|
+
// don't use them)
|
292
|
+
.govuk-radios__hint {
|
293
|
+
padding: 0;
|
294
|
+
clear: both;
|
295
|
+
pointer-events: none;
|
296
|
+
}
|
297
|
+
|
298
|
+
// Align conditional reveals with small radios
|
299
|
+
.govuk-radios__conditional {
|
300
|
+
$margin-left: ($govuk-small-radios-size / 2) - ($conditional-border-width / 2);
|
301
|
+
margin-left: $margin-left;
|
302
|
+
padding-left: $label-offset - ($margin-left + $conditional-border-width);
|
303
|
+
clear: both;
|
304
|
+
}
|
305
|
+
|
306
|
+
.govuk-radios__divider {
|
307
|
+
width: $govuk-small-radios-size;
|
308
|
+
margin-bottom: govuk-spacing(1);
|
309
|
+
}
|
310
|
+
|
311
|
+
// Hover state for small radios.
|
312
|
+
//
|
313
|
+
// We use a hover state for small radios because the touch target size
|
314
|
+
// is so much larger than their visible size, and so we need to provide
|
315
|
+
// feedback to the user as to which radio they will select when their
|
316
|
+
// cursor is outside of the visible area.
|
317
|
+
.govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label::before {
|
318
|
+
box-shadow: 0 0 0 $govuk-hover-width $govuk-hover-colour;
|
319
|
+
}
|
320
|
+
|
321
|
+
// Because we've overridden the border-shadow provided by the focus state,
|
322
|
+
// we need to redefine that too.
|
323
|
+
//
|
324
|
+
// We use two box shadows, one that restores the original focus state [1]
|
325
|
+
// and another that then applies the hover state [2].
|
326
|
+
.govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before {
|
327
|
+
// sass-lint:disable indentation
|
328
|
+
box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour, // 1
|
329
|
+
0 0 0 $govuk-hover-width $govuk-hover-colour; // 2
|
330
|
+
}
|
331
|
+
|
332
|
+
// For devices that explicitly don't support hover, don't provide a hover
|
333
|
+
// state (e.g. on touch devices like iOS).
|
334
|
+
//
|
335
|
+
// We can't use `@media (hover: hover)` because we wouldn't get the hover
|
336
|
+
// state in browsers that don't support `@media (hover)` (like Internet
|
337
|
+
// Explorer) – so we have to 'undo' the hover state instead.
|
338
|
+
@media (hover: none), (pointer: coarse) {
|
339
|
+
.govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label::before {
|
340
|
+
box-shadow: initial;
|
341
|
+
}
|
342
|
+
|
343
|
+
.govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before {
|
344
|
+
box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour;
|
345
|
+
}
|
346
|
+
}
|
347
|
+
}
|
187
348
|
}
|
@@ -105,6 +105,14 @@ $govuk-border-colour: govuk-colour("grey-2") !default;
|
|
105
105
|
|
106
106
|
$govuk-input-border-colour: govuk-colour("black") !default;
|
107
107
|
|
108
|
+
/// Input hover colour
|
109
|
+
///
|
110
|
+
/// Used for hover states on form controls
|
111
|
+
///
|
112
|
+
/// @type Colour
|
113
|
+
/// @access public
|
114
|
+
|
115
|
+
$govuk-hover-colour: govuk-colour("grey-3") !default;
|
108
116
|
|
109
117
|
|
110
118
|
// =============================================================================
|
@@ -97,3 +97,10 @@ $govuk-border-width-form-group-error: $govuk-border-width !default;
|
|
97
97
|
/// @access public
|
98
98
|
|
99
99
|
$govuk-focus-width: 3px !default;
|
100
|
+
|
101
|
+
/// Hover width for form controls with a hover state
|
102
|
+
///
|
103
|
+
/// @type Number
|
104
|
+
/// @access public
|
105
|
+
|
106
|
+
$govuk-hover-width: 10px !default;
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: dxw_govuk_frontend_rails
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 2.
|
4
|
+
version: 2.10.0.pre
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- mec
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: exe
|
11
11
|
cert_chain: []
|
12
|
-
date: 2019-
|
12
|
+
date: 2019-04-15 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: bundler
|
@@ -196,8 +196,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
196
196
|
- !ruby/object:Gem::Version
|
197
197
|
version: 1.3.1
|
198
198
|
requirements: []
|
199
|
-
|
200
|
-
rubygems_version: 2.7.6
|
199
|
+
rubygems_version: 3.0.3
|
201
200
|
signing_key:
|
202
201
|
specification_version: 4
|
203
202
|
summary: Adds the GOVUK frontend to a Rails application.
|