dxw_govuk_frontend_rails 3.3.1 → 3.8.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CONTRIBUTING.md +1 -0
- data/Gemfile.lock +5 -4
- data/README.md +45 -42
- data/dxw_govuk_frontend_rails.gemspec +1 -1
- data/lib/dxw_govuk_frontend_rails/version.rb +1 -1
- data/package-lock.json +3 -3
- data/package.json +1 -1
- data/vendor/assets/javascripts/govuk_frontend_rails.js +194 -118
- data/vendor/assets/stylesheets/_base.scss +3 -0
- data/vendor/assets/stylesheets/all.scss +1 -3
- data/vendor/assets/stylesheets/components/_all.scss +31 -29
- data/vendor/assets/stylesheets/components/accordion/_accordion.scss +2 -208
- data/vendor/assets/stylesheets/components/accordion/_index.scss +207 -0
- data/vendor/assets/stylesheets/components/back-link/_back-link.scss +2 -62
- data/vendor/assets/stylesheets/components/back-link/_index.scss +112 -0
- data/vendor/assets/stylesheets/components/breadcrumbs/_breadcrumbs.scss +2 -118
- data/vendor/assets/stylesheets/components/breadcrumbs/_index.scss +138 -0
- data/vendor/assets/stylesheets/components/button/_button.scss +2 -290
- data/vendor/assets/stylesheets/components/button/_index.scss +280 -0
- data/vendor/assets/stylesheets/components/character-count/_character-count.scss +2 -31
- data/vendor/assets/stylesheets/components/character-count/_index.scss +28 -0
- data/vendor/assets/stylesheets/components/checkboxes/_checkboxes.scss +2 -308
- data/vendor/assets/stylesheets/components/checkboxes/_index.scss +305 -0
- data/vendor/assets/stylesheets/components/date-input/_date-input.scss +2 -30
- data/vendor/assets/stylesheets/components/date-input/_index.scss +26 -0
- data/vendor/assets/stylesheets/components/details/_details.scss +2 -88
- data/vendor/assets/stylesheets/components/details/_index.scss +84 -0
- data/vendor/assets/stylesheets/components/error-message/_error-message.scss +2 -15
- data/vendor/assets/stylesheets/components/error-message/_index.scss +11 -0
- data/vendor/assets/stylesheets/components/error-summary/_error-summary.scss +2 -59
- data/vendor/assets/stylesheets/components/error-summary/_index.scss +55 -0
- data/vendor/assets/stylesheets/components/fieldset/_fieldset.scss +2 -68
- data/vendor/assets/stylesheets/components/fieldset/_index.scss +64 -0
- data/vendor/assets/stylesheets/components/file-upload/_file-upload.scss +2 -81
- data/vendor/assets/stylesheets/components/file-upload/_index.scss +50 -0
- data/vendor/assets/stylesheets/components/footer/_footer.scss +2 -269
- data/vendor/assets/stylesheets/components/footer/_index.scss +235 -0
- data/vendor/assets/stylesheets/components/header/_header.scss +2 -318
- data/vendor/assets/stylesheets/components/header/_index.scss +312 -0
- data/vendor/assets/stylesheets/components/hint/_hint.scss +2 -50
- data/vendor/assets/stylesheets/components/hint/_index.scss +46 -0
- data/vendor/assets/stylesheets/components/input/_index.scss +96 -0
- data/vendor/assets/stylesheets/components/input/_input.scss +2 -103
- data/vendor/assets/stylesheets/components/inset-text/_index.scss +24 -0
- data/vendor/assets/stylesheets/components/inset-text/_inset-text.scss +2 -28
- data/vendor/assets/stylesheets/components/label/_index.scss +41 -0
- data/vendor/assets/stylesheets/components/label/_label.scss +2 -45
- data/vendor/assets/stylesheets/components/panel/_index.scss +40 -0
- data/vendor/assets/stylesheets/components/panel/_panel.scss +2 -44
- data/vendor/assets/stylesheets/components/phase-banner/_index.scss +27 -0
- data/vendor/assets/stylesheets/components/phase-banner/_phase-banner.scss +2 -31
- data/vendor/assets/stylesheets/components/radios/_index.scss +342 -0
- data/vendor/assets/stylesheets/components/radios/_radios.scss +2 -346
- data/vendor/assets/stylesheets/components/select/_index.scss +50 -0
- data/vendor/assets/stylesheets/components/select/_select.scss +2 -57
- data/vendor/assets/stylesheets/components/skip-link/_index.scss +34 -0
- data/vendor/assets/stylesheets/components/skip-link/_skip-link.scss +2 -31
- data/vendor/assets/stylesheets/components/summary-list/_index.scss +153 -0
- data/vendor/assets/stylesheets/components/summary-list/_summary-list.scss +2 -157
- data/vendor/assets/stylesheets/components/table/_index.scss +50 -0
- data/vendor/assets/stylesheets/components/table/_table.scss +2 -54
- data/vendor/assets/stylesheets/components/tabs/_index.scss +138 -0
- data/vendor/assets/stylesheets/components/tabs/_tabs.scss +2 -142
- data/vendor/assets/stylesheets/components/tag/_index.scss +87 -0
- data/vendor/assets/stylesheets/components/tag/_tag.scss +2 -44
- data/vendor/assets/stylesheets/components/textarea/_index.scss +48 -0
- data/vendor/assets/stylesheets/components/textarea/_textarea.scss +2 -55
- data/vendor/assets/stylesheets/components/warning-text/_index.scss +58 -0
- data/vendor/assets/stylesheets/components/warning-text/_warning-text.scss +2 -60
- data/vendor/assets/stylesheets/core/_global-styles.scss +5 -3
- data/vendor/assets/stylesheets/core/_links.scss +5 -3
- data/vendor/assets/stylesheets/core/_lists.scss +17 -3
- data/vendor/assets/stylesheets/core/_section-break.scss +5 -3
- data/vendor/assets/stylesheets/core/_template.scss +5 -3
- data/vendor/assets/stylesheets/core/_typography.scss +5 -3
- data/vendor/assets/stylesheets/helpers/_clearfix.scss +1 -1
- data/vendor/assets/stylesheets/helpers/_colour.scss +1 -1
- data/vendor/assets/stylesheets/helpers/_focused.scss +1 -1
- data/vendor/assets/stylesheets/helpers/_grid.scss +2 -1
- data/vendor/assets/stylesheets/helpers/_links.scss +1 -1
- data/vendor/assets/stylesheets/helpers/_media-queries.scss +1 -1
- data/vendor/assets/stylesheets/helpers/_shape-arrow.scss +1 -1
- data/vendor/assets/stylesheets/helpers/_spacing.scss +5 -5
- data/vendor/assets/stylesheets/helpers/_typography.scss +6 -6
- data/vendor/assets/stylesheets/helpers/_visually-hidden.scss +30 -30
- data/vendor/assets/stylesheets/objects/_form-group.scss +1 -3
- data/vendor/assets/stylesheets/objects/_grid.scss +1 -3
- data/vendor/assets/stylesheets/objects/_main-wrapper.scss +5 -3
- data/vendor/assets/stylesheets/objects/_width-container.scss +34 -13
- data/vendor/assets/stylesheets/overrides/_display.scss +11 -3
- data/vendor/assets/stylesheets/overrides/_spacing.scss +5 -3
- data/vendor/assets/stylesheets/overrides/_typography.scss +5 -3
- data/vendor/assets/stylesheets/overrides/_width.scss +5 -3
- data/vendor/assets/stylesheets/settings/_colours-applied.scss +2 -2
- data/vendor/assets/stylesheets/settings/_colours-palette.scss +1 -1
- data/vendor/assets/stylesheets/settings/_ie8.scss +1 -1
- data/vendor/assets/stylesheets/settings/_measurements.scss +4 -1
- data/vendor/assets/stylesheets/tools/_compatibility.scss +1 -1
- data/vendor/assets/stylesheets/tools/_font-url.scss +1 -1
- data/vendor/assets/stylesheets/tools/_ie8.scss +1 -1
- data/vendor/assets/stylesheets/tools/_iff.scss +3 -1
- data/vendor/assets/stylesheets/tools/_image-url.scss +1 -1
- data/vendor/assets/stylesheets/tools/_px-to-em.scss +1 -1
- data/vendor/assets/stylesheets/tools/_px-to-rem.scss +1 -1
- metadata +36 -5
@@ -1,55 +1,2 @@
|
|
1
|
-
@import "../../
|
2
|
-
@import "
|
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/textarea") {
|
10
|
-
.govuk-textarea {
|
11
|
-
@include govuk-font($size: 19, $line-height: 1.25);
|
12
|
-
|
13
|
-
box-sizing: border-box; // should this be global?
|
14
|
-
display: block;
|
15
|
-
width: 100%;
|
16
|
-
min-height: 40px;
|
17
|
-
@include govuk-responsive-margin(6, "bottom");
|
18
|
-
padding: govuk-spacing(1);
|
19
|
-
|
20
|
-
resize: vertical;
|
21
|
-
|
22
|
-
border: $govuk-border-width-form-element solid $govuk-input-border-colour;
|
23
|
-
border-radius: 0;
|
24
|
-
|
25
|
-
-webkit-appearance: none;
|
26
|
-
|
27
|
-
&:focus {
|
28
|
-
outline: $govuk-focus-width solid $govuk-focus-colour;
|
29
|
-
// Ensure outline appears outside of the element
|
30
|
-
outline-offset: 0;
|
31
|
-
// Double the border by adding its width again. Use `box-shadow` to do
|
32
|
-
// this instead of changing `border-width` (which changes element size) and
|
33
|
-
// since `outline` is already used for the yellow focus state.
|
34
|
-
box-shadow: inset 0 0 0 $govuk-border-width-form-element;
|
35
|
-
|
36
|
-
@include govuk-if-ie8 {
|
37
|
-
// IE8 doesn't support `box-shadow` so double the border with
|
38
|
-
// `border-width`.
|
39
|
-
border-width: $govuk-border-width-form-element * 2;
|
40
|
-
}
|
41
|
-
}
|
42
|
-
}
|
43
|
-
|
44
|
-
.govuk-textarea--error {
|
45
|
-
border: $govuk-border-width-form-element-error solid $govuk-error-colour;
|
46
|
-
|
47
|
-
&:focus {
|
48
|
-
border-color: $govuk-input-border-colour;
|
49
|
-
// Remove `box-shadow` inherited from `:focus` as `textarea--error`
|
50
|
-
// already has the thicker border.
|
51
|
-
box-shadow: none;
|
52
|
-
}
|
53
|
-
|
54
|
-
}
|
55
|
-
}
|
1
|
+
@import "../../base";
|
2
|
+
@import "./index";
|
@@ -0,0 +1,58 @@
|
|
1
|
+
@include govuk-exports("govuk/component/warning-text") {
|
2
|
+
|
3
|
+
.govuk-warning-text {
|
4
|
+
position: relative;
|
5
|
+
@include govuk-responsive-margin(6, "bottom");
|
6
|
+
padding: govuk-spacing(2) 0;
|
7
|
+
}
|
8
|
+
|
9
|
+
.govuk-warning-text__assistive {
|
10
|
+
@include govuk-visually-hidden;
|
11
|
+
}
|
12
|
+
|
13
|
+
.govuk-warning-text__icon {
|
14
|
+
@include govuk-font($size: false, $weight: bold);
|
15
|
+
|
16
|
+
box-sizing: border-box;
|
17
|
+
|
18
|
+
display: inline-block;
|
19
|
+
|
20
|
+
position: absolute;
|
21
|
+
left: 0;
|
22
|
+
|
23
|
+
min-width: 35px;
|
24
|
+
min-height: 35px;
|
25
|
+
margin-top: -7px;
|
26
|
+
|
27
|
+
@include govuk-media-query($from: tablet) {
|
28
|
+
margin-top: -5px;
|
29
|
+
}
|
30
|
+
|
31
|
+
// When a user customises their colours the background colour will often be removed.
|
32
|
+
// Adding a border to the component keeps it's shape as a circle.
|
33
|
+
border: 3px solid govuk-colour("black");
|
34
|
+
border-radius: 50%;
|
35
|
+
|
36
|
+
color: govuk-colour("white");
|
37
|
+
background: govuk-colour("black");
|
38
|
+
|
39
|
+
font-size: 30px;
|
40
|
+
line-height: 29px;
|
41
|
+
|
42
|
+
text-align: center;
|
43
|
+
|
44
|
+
// Prevent the exclamation mark from being included when the warning text
|
45
|
+
// is copied, for example.
|
46
|
+
-webkit-user-select: none;
|
47
|
+
-moz-user-select: none;
|
48
|
+
-ms-user-select: none;
|
49
|
+
user-select: none;
|
50
|
+
}
|
51
|
+
|
52
|
+
.govuk-warning-text__text {
|
53
|
+
@include govuk-font($size: 19, $weight: bold);
|
54
|
+
@include govuk-text-colour;
|
55
|
+
display: block;
|
56
|
+
padding-left: 45px;
|
57
|
+
}
|
58
|
+
}
|
@@ -1,60 +1,2 @@
|
|
1
|
-
@import "../../
|
2
|
-
@import "
|
3
|
-
@import "../../helpers/all";
|
4
|
-
|
5
|
-
@include govuk-exports("govuk/component/warning-text") {
|
6
|
-
|
7
|
-
.govuk-warning-text {
|
8
|
-
position: relative;
|
9
|
-
@include govuk-responsive-margin(6, "bottom");
|
10
|
-
padding: govuk-spacing(2) 0;
|
11
|
-
}
|
12
|
-
|
13
|
-
.govuk-warning-text__assistive {
|
14
|
-
@include govuk-visually-hidden;
|
15
|
-
}
|
16
|
-
|
17
|
-
.govuk-warning-text__icon {
|
18
|
-
@include govuk-font($size: false, $weight: bold);
|
19
|
-
|
20
|
-
display: inline-block;
|
21
|
-
|
22
|
-
position: absolute;
|
23
|
-
left: 0;
|
24
|
-
|
25
|
-
min-width: 29px;
|
26
|
-
min-height: 29px;
|
27
|
-
margin-top: -7px;
|
28
|
-
|
29
|
-
@include govuk-media-query($from: tablet) {
|
30
|
-
margin-top: -5px;
|
31
|
-
}
|
32
|
-
|
33
|
-
// When a user customises their colours the background colour will often be removed.
|
34
|
-
// Adding a border to the component keeps it's shape as a circle.
|
35
|
-
border: 3px solid govuk-colour("black");
|
36
|
-
border-radius: 50%;
|
37
|
-
|
38
|
-
color: govuk-colour("white");
|
39
|
-
background: govuk-colour("black");
|
40
|
-
|
41
|
-
font-size: 30px;
|
42
|
-
line-height: 29px;
|
43
|
-
|
44
|
-
text-align: center;
|
45
|
-
|
46
|
-
// Prevent the exclamation mark from being included when the warning text
|
47
|
-
// is copied, for example.
|
48
|
-
-webkit-user-select: none;
|
49
|
-
-moz-user-select: none;
|
50
|
-
-ms-user-select: none;
|
51
|
-
user-select: none;
|
52
|
-
}
|
53
|
-
|
54
|
-
.govuk-warning-text__text {
|
55
|
-
@include govuk-font($size: 19, $weight: bold);
|
56
|
-
@include govuk-text-colour;
|
57
|
-
display: block;
|
58
|
-
padding-left: 45px;
|
59
|
-
}
|
60
|
-
}
|
1
|
+
@import "../../base";
|
2
|
+
@import "./index";
|
@@ -1,6 +1,8 @@
|
|
1
|
-
@
|
2
|
-
@
|
3
|
-
|
1
|
+
@if not mixin-exists("govuk-exports") {
|
2
|
+
@warn "Importing items from the core layer without first importing `base` is deprecated, and will no longer work as of GOV.UK Frontend v4.0.";
|
3
|
+
}
|
4
|
+
|
5
|
+
@import "../base";
|
4
6
|
|
5
7
|
@import "links";
|
6
8
|
@import "typography";
|
@@ -1,6 +1,8 @@
|
|
1
|
-
@
|
2
|
-
@
|
3
|
-
|
1
|
+
@if not mixin-exists("govuk-exports") {
|
2
|
+
@warn "Importing items from the core layer without first importing `base` is deprecated, and will no longer work as of GOV.UK Frontend v4.0.";
|
3
|
+
}
|
4
|
+
|
5
|
+
@import "../base";
|
4
6
|
|
5
7
|
@include govuk-exports("govuk/core/links") {
|
6
8
|
|
@@ -1,6 +1,8 @@
|
|
1
|
-
@
|
2
|
-
@
|
3
|
-
|
1
|
+
@if not mixin-exists("govuk-exports") {
|
2
|
+
@warn "Importing items from the core layer without first importing `base` is deprecated, and will no longer work as of GOV.UK Frontend v4.0.";
|
3
|
+
}
|
4
|
+
|
5
|
+
@import "../base";
|
4
6
|
|
5
7
|
@include govuk-exports("govuk/core/lists") {
|
6
8
|
|
@@ -48,6 +50,14 @@
|
|
48
50
|
}
|
49
51
|
}
|
50
52
|
|
53
|
+
%govuk-list--spaced > li {
|
54
|
+
margin-bottom: govuk-spacing(2);
|
55
|
+
|
56
|
+
@include govuk-media-query($from: tablet) {
|
57
|
+
margin-bottom: govuk-spacing(3);
|
58
|
+
}
|
59
|
+
}
|
60
|
+
|
51
61
|
.govuk-list--bullet {
|
52
62
|
@extend %govuk-list--bullet;
|
53
63
|
}
|
@@ -55,4 +65,8 @@
|
|
55
65
|
.govuk-list--number {
|
56
66
|
@extend %govuk-list--number;
|
57
67
|
}
|
68
|
+
|
69
|
+
.govuk-list--spaced {
|
70
|
+
@extend %govuk-list--spaced;
|
71
|
+
}
|
58
72
|
}
|
@@ -1,6 +1,8 @@
|
|
1
|
-
@
|
2
|
-
@
|
3
|
-
|
1
|
+
@if not mixin-exists("govuk-exports") {
|
2
|
+
@warn "Importing items from the core layer without first importing `base` is deprecated, and will no longer work as of GOV.UK Frontend v4.0.";
|
3
|
+
}
|
4
|
+
|
5
|
+
@import "../base";
|
4
6
|
|
5
7
|
@include govuk-exports("govuk/core/section-break") {
|
6
8
|
|
@@ -1,6 +1,8 @@
|
|
1
|
-
@
|
2
|
-
@
|
3
|
-
|
1
|
+
@if not mixin-exists("govuk-exports") {
|
2
|
+
@warn "Importing items from the core layer without first importing `base` is deprecated, and will no longer work as of GOV.UK Frontend v4.0.";
|
3
|
+
}
|
4
|
+
|
5
|
+
@import "../base";
|
4
6
|
|
5
7
|
@include govuk-exports("govuk/core/template") {
|
6
8
|
|
@@ -1,6 +1,8 @@
|
|
1
|
-
@
|
2
|
-
@
|
3
|
-
|
1
|
+
@if not mixin-exists("govuk-exports") {
|
2
|
+
@warn "Importing items from the core layer without first importing `base` is deprecated, and will no longer work as of GOV.UK Frontend v4.0.";
|
3
|
+
}
|
4
|
+
|
5
|
+
@import "../base";
|
4
6
|
|
5
7
|
@include govuk-exports("govuk/core/typography") {
|
6
8
|
|
@@ -52,7 +52,7 @@
|
|
52
52
|
/// colour will be returned which meets contrast requirements . If you want to
|
53
53
|
/// use the non-websafe version you can set this to `false` but your should
|
54
54
|
/// ensure that you still meets contrast requirements for accessibility - for
|
55
|
-
/// example,
|
55
|
+
/// example, do not use the non-websafe version for text.
|
56
56
|
///
|
57
57
|
/// @return {Colour} Representation of colour for organisation
|
58
58
|
/// @throw if `$organisation` is not a known organisation
|
@@ -1,5 +1,5 @@
|
|
1
1
|
////
|
2
|
-
/// @group helpers
|
2
|
+
/// @group helpers/layout
|
3
3
|
////
|
4
4
|
|
5
5
|
/// Grid width percentage
|
@@ -44,6 +44,7 @@
|
|
44
44
|
/// @example scss - Customising the float direction
|
45
45
|
/// .govuk-grid-column-one-half-right {
|
46
46
|
/// @include govuk-grid-column(two-thirds, $float: right);
|
47
|
+
/// }
|
47
48
|
///
|
48
49
|
/// @access public
|
49
50
|
|
@@ -1,5 +1,5 @@
|
|
1
1
|
////
|
2
|
-
/// @group helpers
|
2
|
+
/// @group helpers/spacing
|
3
3
|
////
|
4
4
|
|
5
5
|
/// Single point spacing
|
@@ -82,16 +82,16 @@
|
|
82
82
|
@if $breakpoint == null {
|
83
83
|
|
84
84
|
@if $direction == all {
|
85
|
-
#{$property}: $breakpoint-value
|
85
|
+
#{$property}: $breakpoint-value if($important, !important, null);
|
86
86
|
} @else {
|
87
|
-
#{$property}-#{$direction}: $breakpoint-value
|
87
|
+
#{$property}-#{$direction}: $breakpoint-value if($important, !important, null);
|
88
88
|
}
|
89
89
|
} @else {
|
90
90
|
@include govuk-media-query($from: $breakpoint) {
|
91
91
|
@if $direction == all {
|
92
|
-
#{$property}: $breakpoint-value
|
92
|
+
#{$property}: $breakpoint-value if($important, !important, null);
|
93
93
|
} @else {
|
94
|
-
#{$property}-#{$direction}: $breakpoint-value
|
94
|
+
#{$property}-#{$direction}: $breakpoint-value if($important, !important, null);
|
95
95
|
}
|
96
96
|
}
|
97
97
|
}
|
@@ -1,5 +1,5 @@
|
|
1
1
|
////
|
2
|
-
/// @group helpers
|
2
|
+
/// @group helpers/typography
|
3
3
|
////
|
4
4
|
|
5
5
|
@import "../tools/px-to-rem";
|
@@ -53,7 +53,7 @@
|
|
53
53
|
/// @access public
|
54
54
|
|
55
55
|
@mixin govuk-typography-weight-regular($important: false) {
|
56
|
-
font-weight: $govuk-font-weight-regular
|
56
|
+
font-weight: $govuk-font-weight-regular if($important, !important, null);
|
57
57
|
}
|
58
58
|
|
59
59
|
/// Bold font weight helper
|
@@ -63,7 +63,7 @@
|
|
63
63
|
/// @access public
|
64
64
|
|
65
65
|
@mixin govuk-typography-weight-bold($important: false) {
|
66
|
-
font-weight: $govuk-font-weight-bold
|
66
|
+
font-weight: $govuk-font-weight-bold if($important, !important, null);
|
67
67
|
}
|
68
68
|
|
69
69
|
/// Convert line-heights specified in pixels into a relative value, unless
|
@@ -137,9 +137,9 @@
|
|
137
137
|
// Mark rules as !important if $important is true - this will result in
|
138
138
|
// these variables becoming strings, so this needs to happen *after* they
|
139
139
|
// are used in calculations
|
140
|
-
$font-size: $font-size
|
141
|
-
$font-size-rem: $font-size-rem
|
142
|
-
$line-height: $line-height
|
140
|
+
$font-size: $font-size if($important, !important, null);
|
141
|
+
$font-size-rem: $font-size-rem if($important, !important, null);
|
142
|
+
$line-height: $line-height if($important, !important, null);
|
143
143
|
|
144
144
|
@if $breakpoint == null {
|
145
145
|
font-size: $font-size; // sass-lint:disable no-duplicate-properties
|
@@ -1,5 +1,5 @@
|
|
1
1
|
////
|
2
|
-
/// @group helpers
|
2
|
+
/// @group helpers/accessibility
|
3
3
|
////
|
4
4
|
|
5
5
|
/// Hide an element visually, but have it available for screen readers
|
@@ -14,26 +14,26 @@
|
|
14
14
|
/// @access public
|
15
15
|
|
16
16
|
@mixin govuk-visually-hidden($important: true) {
|
17
|
-
position: absolute
|
17
|
+
position: absolute if($important, !important, null);
|
18
18
|
|
19
|
-
width: 1px
|
20
|
-
height: 1px
|
19
|
+
width: 1px if($important, !important, null);
|
20
|
+
height: 1px if($important, !important, null);
|
21
21
|
// If margin is set to a negative value it can cause text to be announced in
|
22
22
|
// the wrong order in VoiceOver for OSX
|
23
|
-
margin: 0
|
24
|
-
padding: 0
|
23
|
+
margin: 0 if($important, !important, null);
|
24
|
+
padding: 0 if($important, !important, null);
|
25
25
|
|
26
|
-
overflow: hidden
|
27
|
-
clip: rect(0 0 0 0)
|
28
|
-
-webkit-clip-path: inset(50%)
|
29
|
-
clip-path: inset(50%)
|
26
|
+
overflow: hidden if($important, !important, null);
|
27
|
+
clip: rect(0 0 0 0) if($important, !important, null);
|
28
|
+
-webkit-clip-path: inset(50%) if($important, !important, null);
|
29
|
+
clip-path: inset(50%) if($important, !important, null);
|
30
30
|
|
31
|
-
border: 0
|
31
|
+
border: 0 if($important, !important, null);
|
32
32
|
|
33
33
|
// For long content, line feeds are not interpreted as spaces and small width
|
34
34
|
// causes content to wrap 1 word per line:
|
35
35
|
// https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
|
36
|
-
white-space: nowrap
|
36
|
+
white-space: nowrap if($important, !important, null);
|
37
37
|
}
|
38
38
|
|
39
39
|
/// Hide an element visually, but have it available for screen readers whilst
|
@@ -48,37 +48,37 @@
|
|
48
48
|
/// @access public
|
49
49
|
|
50
50
|
@mixin govuk-visually-hidden-focusable($important: true) {
|
51
|
-
position: absolute
|
51
|
+
position: absolute if($important, !important, null);
|
52
52
|
|
53
|
-
width: 1px
|
54
|
-
height: 1px
|
53
|
+
width: 1px if($important, !important, null);
|
54
|
+
height: 1px if($important, !important, null);
|
55
55
|
// If margin is set to a negative value it can cause text to be announced in
|
56
56
|
// the wrong order in VoiceOver for OSX
|
57
|
-
margin: 0
|
57
|
+
margin: 0 if($important, !important, null);
|
58
58
|
|
59
|
-
overflow: hidden
|
60
|
-
clip: rect(0 0 0 0)
|
61
|
-
-webkit-clip-path: inset(50%)
|
62
|
-
clip-path: inset(50%)
|
59
|
+
overflow: hidden if($important, !important, null);
|
60
|
+
clip: rect(0 0 0 0) if($important, !important, null);
|
61
|
+
-webkit-clip-path: inset(50%) if($important, !important, null);
|
62
|
+
clip-path: inset(50%) if($important, !important, null);
|
63
63
|
|
64
64
|
// For long content, line feeds are not interpreted as spaces and small width
|
65
65
|
// causes content to wrap 1 word per line:
|
66
66
|
// https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
|
67
|
-
white-space: nowrap
|
67
|
+
white-space: nowrap if($important, !important, null);
|
68
68
|
|
69
69
|
&:active,
|
70
70
|
&:focus {
|
71
|
-
position: static
|
71
|
+
position: static if($important, !important, null);
|
72
72
|
|
73
|
-
width: auto
|
74
|
-
height: auto
|
75
|
-
margin: inherit
|
73
|
+
width: auto if($important, !important, null);
|
74
|
+
height: auto if($important, !important, null);
|
75
|
+
margin: inherit if($important, !important, null);
|
76
76
|
|
77
|
-
overflow: visible
|
78
|
-
clip: auto
|
79
|
-
-webkit-clip-path: none
|
80
|
-
clip-path: none
|
77
|
+
overflow: visible if($important, !important, null);
|
78
|
+
clip: auto if($important, !important, null);
|
79
|
+
-webkit-clip-path: none if($important, !important, null);
|
80
|
+
clip-path: none if($important, !important, null);
|
81
81
|
|
82
|
-
white-space: inherit
|
82
|
+
white-space: inherit if($important, !important, null);
|
83
83
|
}
|
84
84
|
}
|