govuk_publishing_components 21.54.0 → 21.55.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (116) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/images/govuk_publishing_components/action-link--nhs.png +0 -0
  3. data/app/assets/images/govuk_publishing_components/action-link--nhs.svg +1 -0
  4. data/app/assets/images/govuk_publishing_components/action-link-arrow--dark.png +0 -0
  5. data/app/assets/images/govuk_publishing_components/action-link-arrow--simple.png +0 -0
  6. data/app/assets/images/govuk_publishing_components/action-link-arrow.png +0 -0
  7. data/app/assets/stylesheets/govuk_publishing_components/components/_action-link.scss +38 -7
  8. data/app/assets/stylesheets/govuk_publishing_components/components/_back-link.scss +0 -38
  9. data/app/views/govuk_publishing_components/components/_action_link.html.erb +23 -3
  10. data/app/views/govuk_publishing_components/components/docs/action_link.yml +43 -15
  11. data/lib/govuk_publishing_components/presenters/breadcrumb_selector.rb +1 -1
  12. data/lib/govuk_publishing_components/presenters/contextual_navigation.rb +1 -1
  13. data/lib/govuk_publishing_components/presenters/machine_readable/faq_page_schema.rb +7 -6
  14. data/lib/govuk_publishing_components/presenters/machine_readable/html_publication_schema.rb +77 -0
  15. data/lib/govuk_publishing_components/presenters/schema_org.rb +24 -16
  16. data/lib/govuk_publishing_components/version.rb +1 -1
  17. data/node_modules/govuk-frontend/README.md +6 -6
  18. data/node_modules/govuk-frontend/govuk/_base.scss +3 -0
  19. data/node_modules/govuk-frontend/govuk/all.js +1 -1
  20. data/node_modules/govuk-frontend/govuk/all.scss +1 -3
  21. data/node_modules/govuk-frontend/govuk/components/_all.scss +31 -29
  22. data/node_modules/govuk-frontend/govuk/components/accordion/_accordion.scss +2 -208
  23. data/node_modules/govuk-frontend/govuk/components/accordion/_index.scss +207 -0
  24. data/node_modules/govuk-frontend/govuk/components/accordion/accordion.js +1 -1
  25. data/node_modules/govuk-frontend/govuk/components/back-link/_back-link.scss +2 -65
  26. data/node_modules/govuk-frontend/govuk/components/back-link/_index.scss +112 -0
  27. data/node_modules/govuk-frontend/govuk/components/breadcrumbs/_breadcrumbs.scss +2 -118
  28. data/node_modules/govuk-frontend/govuk/components/breadcrumbs/_index.scss +138 -0
  29. data/node_modules/govuk-frontend/govuk/components/breadcrumbs/macro-options.json +6 -0
  30. data/node_modules/govuk-frontend/govuk/components/breadcrumbs/template.njk +12 -1
  31. data/node_modules/govuk-frontend/govuk/components/button/_button.scss +2 -284
  32. data/node_modules/govuk-frontend/govuk/components/button/_index.scss +280 -0
  33. data/node_modules/govuk-frontend/govuk/components/character-count/_character-count.scss +2 -31
  34. data/node_modules/govuk-frontend/govuk/components/character-count/_index.scss +28 -0
  35. data/node_modules/govuk-frontend/govuk/components/checkboxes/_checkboxes.scss +2 -308
  36. data/node_modules/govuk-frontend/govuk/components/checkboxes/_index.scss +304 -0
  37. data/node_modules/govuk-frontend/govuk/components/date-input/_date-input.scss +2 -30
  38. data/node_modules/govuk-frontend/govuk/components/date-input/_index.scss +26 -0
  39. data/node_modules/govuk-frontend/govuk/components/details/_details.scss +2 -88
  40. data/node_modules/govuk-frontend/govuk/components/details/_index.scss +84 -0
  41. data/node_modules/govuk-frontend/govuk/components/error-message/_error-message.scss +2 -15
  42. data/node_modules/govuk-frontend/govuk/components/error-message/_index.scss +11 -0
  43. data/node_modules/govuk-frontend/govuk/components/error-summary/_error-summary.scss +2 -59
  44. data/node_modules/govuk-frontend/govuk/components/error-summary/_index.scss +55 -0
  45. data/node_modules/govuk-frontend/govuk/components/fieldset/_fieldset.scss +2 -68
  46. data/node_modules/govuk-frontend/govuk/components/fieldset/_index.scss +64 -0
  47. data/node_modules/govuk-frontend/govuk/components/file-upload/_file-upload.scss +2 -81
  48. data/node_modules/govuk-frontend/govuk/components/file-upload/_index.scss +77 -0
  49. data/node_modules/govuk-frontend/govuk/components/footer/_footer.scss +2 -244
  50. data/node_modules/govuk-frontend/govuk/components/footer/_index.scss +238 -0
  51. data/node_modules/govuk-frontend/govuk/components/header/_header.scss +2 -318
  52. data/node_modules/govuk-frontend/govuk/components/header/_index.scss +312 -0
  53. data/node_modules/govuk-frontend/govuk/components/header/macro-options.json +7 -1
  54. data/node_modules/govuk-frontend/govuk/components/header/template.njk +2 -2
  55. data/node_modules/govuk-frontend/govuk/components/hint/_hint.scss +2 -50
  56. data/node_modules/govuk-frontend/govuk/components/hint/_index.scss +46 -0
  57. data/node_modules/govuk-frontend/govuk/components/input/_index.scss +99 -0
  58. data/node_modules/govuk-frontend/govuk/components/input/_input.scss +2 -103
  59. data/node_modules/govuk-frontend/govuk/components/inset-text/_index.scss +24 -0
  60. data/node_modules/govuk-frontend/govuk/components/inset-text/_inset-text.scss +2 -28
  61. data/node_modules/govuk-frontend/govuk/components/label/_index.scss +41 -0
  62. data/node_modules/govuk-frontend/govuk/components/label/_label.scss +2 -45
  63. data/node_modules/govuk-frontend/govuk/components/panel/_index.scss +40 -0
  64. data/node_modules/govuk-frontend/govuk/components/panel/_panel.scss +2 -44
  65. data/node_modules/govuk-frontend/govuk/components/phase-banner/_index.scss +27 -0
  66. data/node_modules/govuk-frontend/govuk/components/phase-banner/_phase-banner.scss +2 -31
  67. data/node_modules/govuk-frontend/govuk/components/radios/_index.scss +342 -0
  68. data/node_modules/govuk-frontend/govuk/components/radios/_radios.scss +2 -346
  69. data/node_modules/govuk-frontend/govuk/components/select/_index.scss +53 -0
  70. data/node_modules/govuk-frontend/govuk/components/select/_select.scss +2 -57
  71. data/node_modules/govuk-frontend/govuk/components/skip-link/_index.scss +33 -0
  72. data/node_modules/govuk-frontend/govuk/components/skip-link/_skip-link.scss +2 -37
  73. data/node_modules/govuk-frontend/govuk/components/summary-list/_index.scss +153 -0
  74. data/node_modules/govuk-frontend/govuk/components/summary-list/_summary-list.scss +2 -157
  75. data/node_modules/govuk-frontend/govuk/components/table/_index.scss +50 -0
  76. data/node_modules/govuk-frontend/govuk/components/table/_table.scss +2 -54
  77. data/node_modules/govuk-frontend/govuk/components/tabs/_index.scss +138 -0
  78. data/node_modules/govuk-frontend/govuk/components/tabs/_tabs.scss +2 -142
  79. data/node_modules/govuk-frontend/govuk/components/tag/_index.scss +87 -0
  80. data/node_modules/govuk-frontend/govuk/components/tag/_tag.scss +2 -91
  81. data/node_modules/govuk-frontend/govuk/components/textarea/_index.scss +51 -0
  82. data/node_modules/govuk-frontend/govuk/components/textarea/_textarea.scss +2 -55
  83. data/node_modules/govuk-frontend/govuk/components/warning-text/_index.scss +56 -0
  84. data/node_modules/govuk-frontend/govuk/components/warning-text/_warning-text.scss +2 -60
  85. data/node_modules/govuk-frontend/govuk/core/_global-styles.scss +5 -3
  86. data/node_modules/govuk-frontend/govuk/core/_links.scss +5 -3
  87. data/node_modules/govuk-frontend/govuk/core/_lists.scss +17 -3
  88. data/node_modules/govuk-frontend/govuk/core/_section-break.scss +5 -3
  89. data/node_modules/govuk-frontend/govuk/core/_template.scss +5 -3
  90. data/node_modules/govuk-frontend/govuk/core/_typography.scss +5 -3
  91. data/node_modules/govuk-frontend/govuk/helpers/_clearfix.scss +1 -1
  92. data/node_modules/govuk-frontend/govuk/helpers/_focused.scss +1 -1
  93. data/node_modules/govuk-frontend/govuk/helpers/_grid.scss +2 -1
  94. data/node_modules/govuk-frontend/govuk/helpers/_links.scss +1 -1
  95. data/node_modules/govuk-frontend/govuk/helpers/_media-queries.scss +1 -1
  96. data/node_modules/govuk-frontend/govuk/helpers/_shape-arrow.scss +1 -1
  97. data/node_modules/govuk-frontend/govuk/helpers/_spacing.scss +1 -1
  98. data/node_modules/govuk-frontend/govuk/helpers/_typography.scss +1 -1
  99. data/node_modules/govuk-frontend/govuk/helpers/_visually-hidden.scss +1 -1
  100. data/node_modules/govuk-frontend/govuk/objects/_form-group.scss +1 -3
  101. data/node_modules/govuk-frontend/govuk/objects/_grid.scss +1 -3
  102. data/node_modules/govuk-frontend/govuk/objects/_main-wrapper.scss +5 -3
  103. data/node_modules/govuk-frontend/govuk/objects/_width-container.scss +2 -4
  104. data/node_modules/govuk-frontend/govuk/overrides/_display.scss +5 -3
  105. data/node_modules/govuk-frontend/govuk/overrides/_spacing.scss +5 -3
  106. data/node_modules/govuk-frontend/govuk/overrides/_typography.scss +5 -3
  107. data/node_modules/govuk-frontend/govuk/overrides/_width.scss +5 -3
  108. data/node_modules/govuk-frontend/govuk/settings/_ie8.scss +1 -1
  109. data/node_modules/govuk-frontend/govuk/tools/_compatibility.scss +1 -1
  110. data/node_modules/govuk-frontend/govuk/tools/_font-url.scss +1 -1
  111. data/node_modules/govuk-frontend/govuk/tools/_ie8.scss +1 -1
  112. data/node_modules/govuk-frontend/govuk/tools/_image-url.scss +1 -1
  113. data/node_modules/govuk-frontend/govuk/tools/_px-to-em.scss +1 -1
  114. data/node_modules/govuk-frontend/govuk/tools/_px-to-rem.scss +1 -1
  115. data/node_modules/govuk-frontend/package.json +21 -21
  116. metadata +49 -2
@@ -1,346 +1,2 @@
1
- @import "../../settings/all";
2
- @import "../../tools/all";
3
- @import "../../helpers/all";
4
-
5
- @import "../error-message/error-message";
6
- @import "../fieldset/fieldset";
7
- @import "../hint/hint";
8
- @import "../label/label";
9
-
10
- @include govuk-exports("govuk/component/radios") {
11
-
12
- $govuk-touch-target-size: 44px;
13
- $govuk-radios-size: 40px;
14
- $govuk-small-radios-size: 24px;
15
- $govuk-radios-label-padding-left-right: govuk-spacing(3);
16
- // When the default focus width is used on a curved edge it looks visually smaller.
17
- // So for the circular radios we bump the default to make it look visually consistent.
18
- $govuk-radios-focus-width: $govuk-focus-width + 1px;
19
-
20
- .govuk-radios__item {
21
- @include govuk-font($size: 19);
22
-
23
- display: block;
24
- position: relative;
25
-
26
- min-height: $govuk-radios-size;
27
-
28
- margin-bottom: govuk-spacing(2);
29
- padding-left: $govuk-radios-size;
30
-
31
- clear: left;
32
- }
33
-
34
- .govuk-radios__item:last-child,
35
- .govuk-radios__item:last-of-type {
36
- margin-bottom: 0;
37
- }
38
-
39
- .govuk-radios__input {
40
- $input-offset: ($govuk-touch-target-size - $govuk-radios-size) / 2;
41
-
42
- cursor: pointer;
43
-
44
- // IE8 doesn’t support pseudo-elements, so we don’t want to hide native
45
- // elements there.
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;
55
- margin: 0;
56
-
57
- opacity: 0;
58
- }
59
-
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
67
- &:focus {
68
- outline: $govuk-focus-width solid $govuk-focus-colour;
69
- }
70
- }
71
- }
72
-
73
- .govuk-radios__label {
74
- display: inline-block;
75
- margin-bottom: 0;
76
- padding: 8px $govuk-radios-label-padding-left-right govuk-spacing(1);
77
- cursor: pointer;
78
- // remove 300ms pause on mobile
79
- -ms-touch-action: manipulation;
80
- touch-action: manipulation;
81
- }
82
-
83
- // ( ) Radio ring
84
- .govuk-radios__label::before {
85
- content: "";
86
- box-sizing: border-box;
87
- position: absolute;
88
- top: 0;
89
- left: 0;
90
-
91
- width: $govuk-radios-size;
92
- height: $govuk-radios-size;
93
-
94
- border: $govuk-border-width-form-element solid currentColor;
95
- border-radius: 50%;
96
- background: transparent;
97
- }
98
-
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 {
104
- content: "";
105
-
106
- position: absolute;
107
- top: govuk-spacing(2);
108
- left: govuk-spacing(2);
109
-
110
- width: 0;
111
- height: 0;
112
-
113
- border: govuk-spacing(2) solid currentColor;
114
- border-radius: 50%;
115
- opacity: 0;
116
- background: currentColor;
117
- }
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
-
125
- // Focused state
126
- .govuk-radios__input:focus + .govuk-radios__label::before {
127
- border-width: 4px;
128
- box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour;
129
- }
130
-
131
- // Selected state
132
- .govuk-radios__input:checked + .govuk-radios__label::after {
133
- opacity: 1;
134
- }
135
-
136
- // Disabled state
137
- .govuk-radios__input:disabled,
138
- .govuk-radios__input:disabled + .govuk-radios__label {
139
- cursor: default;
140
- }
141
-
142
- .govuk-radios__input:disabled + .govuk-radios__label {
143
- opacity: .5;
144
- }
145
-
146
- // =========================================================
147
- // Inline radios
148
- // =========================================================
149
-
150
- .govuk-radios--inline {
151
- @include govuk-media-query ($from: tablet) {
152
- @include govuk-clearfix;
153
-
154
- .govuk-radios__item {
155
- margin-right: govuk-spacing(4);
156
- float: left;
157
- clear: none;
158
- }
159
- }
160
-
161
- // Prevent inline modifier being used with conditional reveals
162
- &.govuk-radios--conditional {
163
- .govuk-radios__item {
164
- margin-right: 0;
165
- float: none;
166
- }
167
- }
168
- }
169
-
170
- // =========================================================
171
- // Dividers ('or')
172
- // =========================================================
173
-
174
- .govuk-radios__divider {
175
- $govuk-divider-size: $govuk-radios-size !default;
176
- @include govuk-font($size: 19);
177
- @include govuk-text-colour;
178
- width: $govuk-divider-size;
179
- margin-bottom: govuk-spacing(2);
180
- text-align: center;
181
- }
182
-
183
- // =========================================================
184
- // Conditional reveals
185
- // =========================================================
186
-
187
- // The narrow border is used in the conditional reveals because the border has
188
- // to be an even number in order to be centred under the 40px checkbox or radio.
189
- $conditional-border-width: $govuk-border-width-narrow;
190
- // Calculate the amount of padding needed to keep the border centered against the radios.
191
- $conditional-border-padding: ($govuk-radios-size / 2) - ($conditional-border-width / 2);
192
- // Move the border centered with the radios
193
- $conditional-margin-left: $conditional-border-padding;
194
- // Move the contents of the conditional inline with the label
195
- $conditional-padding-left: $conditional-border-padding + $govuk-radios-label-padding-left-right;
196
-
197
- .govuk-radios__conditional {
198
- @include govuk-responsive-margin(4, "bottom");
199
- margin-left: $conditional-margin-left;
200
- padding-left: $conditional-padding-left;
201
- border-left: $conditional-border-width solid $govuk-border-colour;
202
-
203
- .js-enabled &--hidden {
204
- display: none;
205
- }
206
-
207
- & > :last-child {
208
- margin-bottom: 0;
209
- }
210
- }
211
-
212
- // =========================================================
213
- // Small checkboxes
214
- // =========================================================
215
-
216
- .govuk-radios--small {
217
-
218
- $input-offset: ($govuk-touch-target-size - $govuk-small-radios-size) / 2;
219
- $label-offset: $govuk-touch-target-size - $input-offset;
220
-
221
- .govuk-radios__item {
222
- @include govuk-clearfix;
223
- min-height: 0;
224
- margin-bottom: 0;
225
- padding-left: $label-offset;
226
- float: left;
227
- }
228
-
229
- // Shift the touch target into the left margin so that the visible edge of
230
- // the control is aligned
231
- //
232
- // ┆Which colour is your favourite?
233
- // ┌┆───┐
234
- // │┆() │ Purple
235
- // └┆▲──┘
236
- // ▲┆└─ Radio pseudo element, aligned with margin
237
- // └─── Touch target (invisible input), shifted into the margin
238
- .govuk-radios__input {
239
- @include govuk-not-ie8 {
240
- left: $input-offset * -1;
241
- }
242
-
243
- @include govuk-if-ie8 {
244
- margin-left: $govuk-small-radios-size * -1;
245
- }
246
- }
247
-
248
- // Adjust the size and position of the label.
249
- //
250
- // Unlike larger radios, we also have to float the label in order to
251
- // 'shrink' it, preventing the hover state from kicking in across the full
252
- // width of the parent element.
253
- .govuk-radios__label {
254
- margin-top: -2px;
255
- padding: 13px govuk-spacing(3) 13px 1px;
256
- float: left;
257
-
258
- @include govuk-media-query($from: tablet) {
259
- padding: 11px govuk-spacing(3) 10px 1px;
260
- }
261
- }
262
-
263
- // ( ) Radio ring
264
- //
265
- // Reduce the size of the control [1], vertically centering it within the
266
- // touch target [2]
267
- .govuk-radios__label::before {
268
- top: $input-offset - $govuk-border-width-form-element; // 2
269
- width: $govuk-small-radios-size; // 1
270
- height: $govuk-small-radios-size; // 1
271
- }
272
-
273
- // • Radio button
274
- //
275
- // Reduce the size of the 'button' and center it within the ring
276
- .govuk-radios__label::after {
277
- top: 15px;
278
- left: 7px;
279
- border-width: 5px;
280
- }
281
-
282
- // Fix position of hint with small radios
283
- //
284
- // Do not use hints with small radios – because they're within the input
285
- // wrapper they trigger the hover state, but clicking them doesn't actually
286
- // activate the control.
287
- //
288
- // (If you do use them, they won't look completely broken... but seriously,
289
- // don't use them)
290
- .govuk-radios__hint {
291
- padding: 0;
292
- clear: both;
293
- pointer-events: none;
294
- }
295
-
296
- // Align conditional reveals with small radios
297
- .govuk-radios__conditional {
298
- $margin-left: ($govuk-small-radios-size / 2) - ($conditional-border-width / 2);
299
- margin-left: $margin-left;
300
- padding-left: $label-offset - ($margin-left + $conditional-border-width);
301
- clear: both;
302
- }
303
-
304
- .govuk-radios__divider {
305
- width: $govuk-small-radios-size;
306
- margin-bottom: govuk-spacing(1);
307
- }
308
-
309
- // Hover state for small radios.
310
- //
311
- // We use a hover state for small radios because the touch target size
312
- // is so much larger than their visible size, and so we need to provide
313
- // feedback to the user as to which radio they will select when their
314
- // cursor is outside of the visible area.
315
- .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label::before {
316
- box-shadow: 0 0 0 $govuk-hover-width $govuk-hover-colour;
317
- }
318
-
319
- // Because we've overridden the border-shadow provided by the focus state,
320
- // we need to redefine that too.
321
- //
322
- // We use two box shadows, one that restores the original focus state [1]
323
- // and another that then applies the hover state [2].
324
- .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before {
325
- // sass-lint:disable indentation
326
- box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour, // 1
327
- 0 0 0 $govuk-hover-width $govuk-hover-colour; // 2
328
- }
329
-
330
- // For devices that explicitly don't support hover, don't provide a hover
331
- // state (e.g. on touch devices like iOS).
332
- //
333
- // We can't use `@media (hover: hover)` because we wouldn't get the hover
334
- // state in browsers that don't support `@media (hover)` (like Internet
335
- // Explorer) – so we have to 'undo' the hover state instead.
336
- @media (hover: none), (pointer: coarse) {
337
- .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label::before {
338
- box-shadow: initial;
339
- }
340
-
341
- .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before {
342
- box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour;
343
- }
344
- }
345
- }
346
- }
1
+ @import "../../base";
2
+ @import "./index";
@@ -0,0 +1,53 @@
1
+ @import "../error-message/index";
2
+ @import "../hint/index";
3
+ @import "../label/index";
4
+
5
+ @include govuk-exports("govuk/component/select") {
6
+ .govuk-select {
7
+ @include govuk-font($size: 19, $line-height: 1.25);
8
+
9
+ box-sizing: border-box; // should this be global?
10
+ max-width: 100%;
11
+ height: 40px;
12
+ @if $govuk-typography-use-rem {
13
+ height: govuk-px-to-rem(40px);
14
+ }
15
+ padding: govuk-spacing(1); // was 5px 4px 4px - size of it should be adjusted to match other form elements
16
+ border: $govuk-border-width-form-element solid $govuk-input-border-colour;
17
+
18
+ &:focus {
19
+ outline: $govuk-focus-width solid $govuk-focus-colour;
20
+ // Ensure outline appears outside of the element
21
+ outline-offset: 0;
22
+ // Double the border by adding its width again. Use `box-shadow` to do
23
+ // this instead of changing `border-width` (which changes element size) and
24
+ // since `outline` is already used for the yellow focus state.
25
+ box-shadow: inset 0 0 0 $govuk-border-width-form-element;
26
+
27
+ @include govuk-if-ie8 {
28
+ // IE8 doesn't support `box-shadow` so double the border with
29
+ // `border-width`.
30
+ border-width: $govuk-border-width-form-element * 2;
31
+ }
32
+ }
33
+ }
34
+
35
+ .govuk-select option:active,
36
+ .govuk-select option:checked,
37
+ .govuk-select:focus::-ms-value {
38
+ color: govuk-colour("white");
39
+ background-color: govuk-colour("blue");
40
+ }
41
+
42
+ .govuk-select--error {
43
+ border: $govuk-border-width-form-element-error solid $govuk-error-colour;
44
+
45
+ &:focus {
46
+ border-color: $govuk-input-border-colour;
47
+ // Remove `box-shadow` inherited from `:focus` as `select--error`
48
+ // already has the thicker border.
49
+ box-shadow: none;
50
+ }
51
+ }
52
+
53
+ }
@@ -1,57 +1,2 @@
1
- @import "../../settings/all";
2
- @import "../../tools/all";
3
- @import "../../helpers/all";
4
-
5
- @import "../error-message/error-message";
6
- @import "../hint/hint";
7
- @import "../label/label";
8
-
9
- @include govuk-exports("govuk/component/select") {
10
- .govuk-select {
11
- @include govuk-font($size: 19, $line-height: 1.25);
12
-
13
- box-sizing: border-box; // should this be global?
14
- max-width: 100%;
15
- height: 40px;
16
- @if $govuk-typography-use-rem {
17
- height: govuk-px-to-rem(40px);
18
- }
19
- padding: govuk-spacing(1); // was 5px 4px 4px - size of it should be adjusted to match other form elements
20
- border: $govuk-border-width-form-element solid $govuk-input-border-colour;
21
-
22
- &:focus {
23
- outline: $govuk-focus-width solid $govuk-focus-colour;
24
- // Ensure outline appears outside of the element
25
- outline-offset: 0;
26
- // Double the border by adding its width again. Use `box-shadow` to do
27
- // this instead of changing `border-width` (which changes element size) and
28
- // since `outline` is already used for the yellow focus state.
29
- box-shadow: inset 0 0 0 $govuk-border-width-form-element;
30
-
31
- @include govuk-if-ie8 {
32
- // IE8 doesn't support `box-shadow` so double the border with
33
- // `border-width`.
34
- border-width: $govuk-border-width-form-element * 2;
35
- }
36
- }
37
- }
38
-
39
- .govuk-select option:active,
40
- .govuk-select option:checked,
41
- .govuk-select:focus::-ms-value {
42
- color: govuk-colour("white");
43
- background-color: govuk-colour("blue");
44
- }
45
-
46
- .govuk-select--error {
47
- border: $govuk-border-width-form-element-error solid $govuk-error-colour;
48
-
49
- &:focus {
50
- border-color: $govuk-input-border-colour;
51
- // Remove `box-shadow` inherited from `:focus` as `select--error`
52
- // already has the thicker border.
53
- box-shadow: none;
54
- }
55
- }
56
-
57
- }
1
+ @import "../../base";
2
+ @import "./index";