katalyst-govuk-formbuilder 1.3.2 → 1.5.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +8 -0
- data/app/assets/builds/katalyst/govuk/formbuilder.css +58 -5
- data/app/assets/builds/katalyst/govuk/formbuilder.js +98 -64
- data/app/assets/builds/katalyst/govuk/formbuilder.min.js +1 -1
- data/app/assets/stylesheets/katalyst/govuk/components/richtextarea/_index.scss +7 -6
- data/app/assets/stylesheets/katalyst/govuk/formbuilder.scss +1 -1
- data/lib/katalyst/govuk/formbuilder/engine.rb +1 -0
- data/lib/katalyst/govuk/formbuilder/version.rb +1 -1
- data/vendor/assets/stylesheets/govuk-frontend/govuk/_base.scss +3 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/all-ie8.scss +14 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/all.scss +9 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/_all.scss +34 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/accordion/_accordion.scss +2 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/accordion/_index.scss +392 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/back-link/_back-link.scss +2 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/back-link/_index.scss +99 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/breadcrumbs/_breadcrumbs.scss +2 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/breadcrumbs/_index.scss +147 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/button/_button.scss +2 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/button/_index.scss +297 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/character-count/_character-count.scss +2 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/character-count/_index.scss +34 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/checkboxes/_checkboxes.scss +2 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/checkboxes/_index.scss +335 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/cookie-banner/_cookie-banner.scss +2 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/cookie-banner/_index.scss +49 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/date-input/_date-input.scss +2 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/date-input/_index.scss +26 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/details/_details.scss +2 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/details/_index.scss +88 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/error-message/_error-message.scss +2 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/error-message/_index.scss +12 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/error-summary/_error-summary.scss +2 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/error-summary/_index.scss +43 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/fieldset/_fieldset.scss +2 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/fieldset/_index.scss +64 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/file-upload/_file-upload.scss +2 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/file-upload/_index.scss +55 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/footer/_footer.scss +2 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/footer/_index.scss +193 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/header/_header.scss +2 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/header/_index.scss +349 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/hint/_hint.scss +2 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/hint/_index.scss +42 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/input/_index.scss +193 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/input/_input.scss +2 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/inset-text/_index.scss +24 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/inset-text/_inset-text.scss +2 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/label/_index.scss +41 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/label/_label.scss +2 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/notification-banner/_index.scss +89 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/notification-banner/_notification-banner.scss +2 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/pagination/_index.scss +247 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/pagination/_pagination.scss +2 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/panel/_index.scss +56 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/panel/_panel.scss +2 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/phase-banner/_index.scss +27 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/phase-banner/_phase-banner.scss +2 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/radios/_index.scss +349 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/radios/_radios.scss +2 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/select/_index.scss +66 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/select/_select.scss +2 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/skip-link/_index.scss +47 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/skip-link/_skip-link.scss +2 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/summary-list/_index.scss +276 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/summary-list/_summary-list.scss +2 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/table/_index.scss +71 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/table/_table.scss +2 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/tabs/_index.scss +130 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/tabs/_tabs.scss +2 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/tag/_index.scss +81 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/tag/_tag.scss +2 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/textarea/_index.scss +54 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/textarea/_textarea.scss +2 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/warning-text/_index.scss +66 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/components/warning-text/_warning-text.scss +2 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/core/_all.scss +6 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/core/_global-styles.scss +19 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/core/_govuk-frontend-version.scss +5 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/core/_links.scss +35 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/core/_lists.scss +66 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/core/_section-break.scss +56 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/core/_typography.scss +186 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/helpers/_all.scss +12 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/helpers/_clearfix.scss +15 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/helpers/_colour.scss +98 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/helpers/_device-pixels.scss +37 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/helpers/_focused.scss +33 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/helpers/_font-faces.scss +41 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/helpers/_grid.scss +61 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/helpers/_links.scss +429 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/helpers/_media-queries.scss +91 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/helpers/_shape-arrow.scss +80 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/helpers/_spacing.scss +171 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/helpers/_typography.scss +214 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/helpers/_visually-hidden.scss +84 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/objects/_all.scss +6 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/objects/_button-group.scss +85 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/objects/_form-group.scss +23 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/objects/_grid.scss +24 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/objects/_main-wrapper.scss +53 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/objects/_template.scss +32 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/objects/_width-container.scss +84 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/overrides/_all.scss +5 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/overrides/_display.scss +24 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/overrides/_spacing.scss +102 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/overrides/_text-align.scss +14 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/overrides/_typography.scss +21 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/overrides/_width.scss +46 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/settings/_all.scss +24 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/settings/_assets.scss +82 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/settings/_colours-applied.scss +155 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/settings/_colours-organisations.scss +146 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/settings/_colours-palette.scss +120 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/settings/_compatibility.scss +100 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/settings/_global-styles.scss +13 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/settings/_ie8.scss +34 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/settings/_links.scss +66 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/settings/_measurements.scss +95 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/settings/_media-queries.scss +23 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/settings/_spacing.scss +76 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/settings/_typography-font-families.scss +32 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/settings/_typography-font.scss +112 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/settings/_typography-responsive.scss +195 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/settings/_warnings.scss +53 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/tools/_all.scss +7 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/tools/_compatibility.scss +50 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/tools/_exports.scss +33 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/tools/_font-url.scss +25 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/tools/_ie8.scss +87 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/tools/_image-url.scss +25 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/tools/_px-to-em.scss +20 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/tools/_px-to-rem.scss +20 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/utilities/_all.scss +2 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/utilities/_clearfix.scss +5 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/utilities/_visually-hidden.scss +9 -0
- data/vendor/assets/stylesheets/govuk-frontend/govuk/vendor/_sass-mq.scss +347 -0
- metadata +132 -4
- data/app/assets/builds/katalyst/govuk/formbuilder.min.css +0 -1
@@ -0,0 +1,19 @@
|
|
1
|
+
@import "links";
|
2
|
+
@import "typography";
|
3
|
+
|
4
|
+
@mixin govuk-global-styles {
|
5
|
+
a {
|
6
|
+
@extend %govuk-link;
|
7
|
+
}
|
8
|
+
|
9
|
+
p {
|
10
|
+
@extend %govuk-body-m;
|
11
|
+
}
|
12
|
+
}
|
13
|
+
|
14
|
+
@include govuk-exports("govuk/core/global-styles") {
|
15
|
+
|
16
|
+
@if $govuk-global-styles == true {
|
17
|
+
@include govuk-global-styles;
|
18
|
+
}
|
19
|
+
}
|
@@ -0,0 +1,35 @@
|
|
1
|
+
@include govuk-exports("govuk/core/links") {
|
2
|
+
|
3
|
+
%govuk-link {
|
4
|
+
@include govuk-link-common;
|
5
|
+
@include govuk-link-style-default;
|
6
|
+
@include govuk-link-print-friendly;
|
7
|
+
}
|
8
|
+
|
9
|
+
.govuk-link {
|
10
|
+
@extend %govuk-link;
|
11
|
+
}
|
12
|
+
|
13
|
+
// Variant classes should always be used in conjunction with the .govuk-link
|
14
|
+
// class, so we do not need the common link styles as they will be inherited.
|
15
|
+
|
16
|
+
.govuk-link--muted {
|
17
|
+
@include govuk-link-style-muted;
|
18
|
+
}
|
19
|
+
|
20
|
+
.govuk-link--text-colour {
|
21
|
+
@include govuk-link-style-text;
|
22
|
+
}
|
23
|
+
|
24
|
+
.govuk-link--inverse {
|
25
|
+
@include govuk-link-style-inverse;
|
26
|
+
}
|
27
|
+
|
28
|
+
.govuk-link--no-underline {
|
29
|
+
@include govuk-link-style-no-underline;
|
30
|
+
}
|
31
|
+
|
32
|
+
.govuk-link--no-visited-state {
|
33
|
+
@include govuk-link-style-no-visited-state;
|
34
|
+
}
|
35
|
+
}
|
@@ -0,0 +1,66 @@
|
|
1
|
+
@include govuk-exports("govuk/core/lists") {
|
2
|
+
|
3
|
+
%govuk-list {
|
4
|
+
@include govuk-font($size: 19);
|
5
|
+
@include govuk-text-colour;
|
6
|
+
margin-top: 0;
|
7
|
+
@include govuk-responsive-margin(4, "bottom");
|
8
|
+
padding-left: 0;
|
9
|
+
list-style-type: none;
|
10
|
+
|
11
|
+
// Add a top margin for nested lists
|
12
|
+
%govuk-list {
|
13
|
+
margin-top: govuk-spacing(2);
|
14
|
+
}
|
15
|
+
}
|
16
|
+
|
17
|
+
%govuk-list > li {
|
18
|
+
// Lists without numbers or bullets should always have extra space between
|
19
|
+
// list items. Lists with numbers or bullets only have this extra space on
|
20
|
+
// tablet and above
|
21
|
+
margin-bottom: govuk-spacing(1);
|
22
|
+
}
|
23
|
+
|
24
|
+
.govuk-list {
|
25
|
+
@extend %govuk-list;
|
26
|
+
}
|
27
|
+
|
28
|
+
%govuk-list--bullet {
|
29
|
+
padding-left: govuk-spacing(4);
|
30
|
+
list-style-type: disc;
|
31
|
+
}
|
32
|
+
|
33
|
+
%govuk-list--number {
|
34
|
+
padding-left: govuk-spacing(4);
|
35
|
+
list-style-type: decimal;
|
36
|
+
}
|
37
|
+
|
38
|
+
%govuk-list--bullet > li,
|
39
|
+
%govuk-list--number > li {
|
40
|
+
margin-bottom: 0;
|
41
|
+
|
42
|
+
@include govuk-media-query($from: tablet) {
|
43
|
+
margin-bottom: govuk-spacing(1);
|
44
|
+
}
|
45
|
+
}
|
46
|
+
|
47
|
+
%govuk-list--spaced > li {
|
48
|
+
margin-bottom: govuk-spacing(2);
|
49
|
+
|
50
|
+
@include govuk-media-query($from: tablet) {
|
51
|
+
margin-bottom: govuk-spacing(3);
|
52
|
+
}
|
53
|
+
}
|
54
|
+
|
55
|
+
.govuk-list--bullet {
|
56
|
+
@extend %govuk-list--bullet;
|
57
|
+
}
|
58
|
+
|
59
|
+
.govuk-list--number {
|
60
|
+
@extend %govuk-list--number;
|
61
|
+
}
|
62
|
+
|
63
|
+
.govuk-list--spaced {
|
64
|
+
@extend %govuk-list--spaced;
|
65
|
+
}
|
66
|
+
}
|
@@ -0,0 +1,56 @@
|
|
1
|
+
@include govuk-exports("govuk/core/section-break") {
|
2
|
+
|
3
|
+
%govuk-section-break {
|
4
|
+
margin: 0;
|
5
|
+
border: 0;
|
6
|
+
|
7
|
+
// fix double-width section break and forced visible section break
|
8
|
+
// when combined with styles from alphagov/elements
|
9
|
+
@include _govuk-compatibility(govuk_elements) {
|
10
|
+
height: 0;
|
11
|
+
}
|
12
|
+
}
|
13
|
+
|
14
|
+
.govuk-section-break {
|
15
|
+
@extend %govuk-section-break;
|
16
|
+
}
|
17
|
+
|
18
|
+
// Sizes
|
19
|
+
|
20
|
+
%govuk-section-break--xl {
|
21
|
+
@include govuk-responsive-margin(8, "top");
|
22
|
+
@include govuk-responsive-margin(8, "bottom");
|
23
|
+
}
|
24
|
+
|
25
|
+
.govuk-section-break--xl {
|
26
|
+
@extend %govuk-section-break--xl;
|
27
|
+
}
|
28
|
+
|
29
|
+
%govuk-section-break--l {
|
30
|
+
@include govuk-responsive-margin(6, "top");
|
31
|
+
@include govuk-responsive-margin(6, "bottom");
|
32
|
+
}
|
33
|
+
|
34
|
+
.govuk-section-break--l {
|
35
|
+
@extend %govuk-section-break--l;
|
36
|
+
}
|
37
|
+
|
38
|
+
%govuk-section-break--m {
|
39
|
+
@include govuk-responsive-margin(4, "top");
|
40
|
+
@include govuk-responsive-margin(4, "bottom");
|
41
|
+
}
|
42
|
+
|
43
|
+
.govuk-section-break--m {
|
44
|
+
@extend %govuk-section-break--m;
|
45
|
+
}
|
46
|
+
|
47
|
+
// Visible variant
|
48
|
+
|
49
|
+
%govuk-section-break--visible {
|
50
|
+
border-bottom: 1px solid $govuk-border-colour;
|
51
|
+
}
|
52
|
+
|
53
|
+
.govuk-section-break--visible {
|
54
|
+
@extend %govuk-section-break--visible;
|
55
|
+
}
|
56
|
+
}
|
@@ -0,0 +1,186 @@
|
|
1
|
+
@include govuk-exports("govuk/core/typography") {
|
2
|
+
|
3
|
+
// Headings
|
4
|
+
|
5
|
+
%govuk-heading-xl {
|
6
|
+
@include govuk-text-colour;
|
7
|
+
@include govuk-font($size: 48, $weight: bold);
|
8
|
+
|
9
|
+
display: block;
|
10
|
+
|
11
|
+
margin-top: 0;
|
12
|
+
@include govuk-responsive-margin(8, "bottom");
|
13
|
+
}
|
14
|
+
|
15
|
+
.govuk-heading-xl {
|
16
|
+
@extend %govuk-heading-xl;
|
17
|
+
}
|
18
|
+
|
19
|
+
%govuk-heading-l {
|
20
|
+
@include govuk-text-colour;
|
21
|
+
@include govuk-font($size: 36, $weight: bold);
|
22
|
+
|
23
|
+
display: block;
|
24
|
+
|
25
|
+
margin-top: 0;
|
26
|
+
@include govuk-responsive-margin(6, "bottom");
|
27
|
+
}
|
28
|
+
|
29
|
+
.govuk-heading-l {
|
30
|
+
@extend %govuk-heading-l;
|
31
|
+
}
|
32
|
+
|
33
|
+
%govuk-heading-m {
|
34
|
+
@include govuk-text-colour;
|
35
|
+
@include govuk-font($size: 24, $weight: bold);
|
36
|
+
|
37
|
+
display: block;
|
38
|
+
|
39
|
+
margin-top: 0;
|
40
|
+
@include govuk-responsive-margin(4, "bottom");
|
41
|
+
}
|
42
|
+
|
43
|
+
.govuk-heading-m {
|
44
|
+
@extend %govuk-heading-m;
|
45
|
+
}
|
46
|
+
|
47
|
+
%govuk-heading-s {
|
48
|
+
@include govuk-text-colour;
|
49
|
+
@include govuk-font($size: 19, $weight: bold);
|
50
|
+
|
51
|
+
display: block;
|
52
|
+
|
53
|
+
margin-top: 0;
|
54
|
+
@include govuk-responsive-margin(4, "bottom");
|
55
|
+
}
|
56
|
+
|
57
|
+
.govuk-heading-s {
|
58
|
+
@extend %govuk-heading-s;
|
59
|
+
}
|
60
|
+
|
61
|
+
// Captions to be used inside headings
|
62
|
+
|
63
|
+
.govuk-caption-xl {
|
64
|
+
@include govuk-font($size: 27);
|
65
|
+
|
66
|
+
display: block;
|
67
|
+
|
68
|
+
margin-bottom: govuk-spacing(1);
|
69
|
+
|
70
|
+
color: $govuk-secondary-text-colour;
|
71
|
+
}
|
72
|
+
|
73
|
+
.govuk-caption-l {
|
74
|
+
@include govuk-font($size: 24);
|
75
|
+
|
76
|
+
display: block;
|
77
|
+
|
78
|
+
margin-bottom: govuk-spacing(1);
|
79
|
+
color: $govuk-secondary-text-colour;
|
80
|
+
|
81
|
+
@include govuk-media-query($from: tablet) {
|
82
|
+
margin-bottom: 0;
|
83
|
+
}
|
84
|
+
}
|
85
|
+
|
86
|
+
.govuk-caption-m {
|
87
|
+
@include govuk-font($size: 19);
|
88
|
+
|
89
|
+
display: block;
|
90
|
+
|
91
|
+
color: $govuk-secondary-text-colour;
|
92
|
+
}
|
93
|
+
|
94
|
+
// Body (paragraphs)
|
95
|
+
|
96
|
+
%govuk-body-l {
|
97
|
+
@include govuk-text-colour;
|
98
|
+
@include govuk-font($size: 24);
|
99
|
+
|
100
|
+
margin-top: 0;
|
101
|
+
@include govuk-responsive-margin(6, "bottom");
|
102
|
+
}
|
103
|
+
|
104
|
+
.govuk-body-l {
|
105
|
+
@extend %govuk-body-l;
|
106
|
+
}
|
107
|
+
|
108
|
+
%govuk-body-m {
|
109
|
+
@include govuk-text-colour;
|
110
|
+
@include govuk-font($size: 19);
|
111
|
+
|
112
|
+
margin-top: 0;
|
113
|
+
@include govuk-responsive-margin(4, "bottom");
|
114
|
+
}
|
115
|
+
|
116
|
+
.govuk-body-m {
|
117
|
+
@extend %govuk-body-m;
|
118
|
+
}
|
119
|
+
|
120
|
+
%govuk-body-s {
|
121
|
+
@include govuk-text-colour;
|
122
|
+
@include govuk-font($size: 16);
|
123
|
+
|
124
|
+
margin-top: 0;
|
125
|
+
@include govuk-responsive-margin(4, "bottom");
|
126
|
+
}
|
127
|
+
|
128
|
+
.govuk-body-s {
|
129
|
+
@extend %govuk-body-s;
|
130
|
+
}
|
131
|
+
|
132
|
+
%govuk-body-xs {
|
133
|
+
@include govuk-text-colour;
|
134
|
+
@include govuk-font($size: 14);
|
135
|
+
|
136
|
+
margin-top: 0;
|
137
|
+
@include govuk-responsive-margin(4, "bottom");
|
138
|
+
}
|
139
|
+
|
140
|
+
.govuk-body-xs {
|
141
|
+
@extend %govuk-body-xs;
|
142
|
+
}
|
143
|
+
|
144
|
+
// Usage aliases
|
145
|
+
|
146
|
+
// Using extend to alias means we also inherit any contextual adjustments that
|
147
|
+
// refer to the 'original' class name
|
148
|
+
|
149
|
+
.govuk-body-lead {
|
150
|
+
@extend %govuk-body-l;
|
151
|
+
}
|
152
|
+
|
153
|
+
.govuk-body {
|
154
|
+
@extend %govuk-body-m;
|
155
|
+
}
|
156
|
+
|
157
|
+
// Contextual adjustments
|
158
|
+
// Add top padding to headings that appear directly after paragraphs.
|
159
|
+
|
160
|
+
%govuk-body-l + %govuk-heading-l {
|
161
|
+
padding-top: govuk-spacing(1);
|
162
|
+
|
163
|
+
@include govuk-media-query($from: tablet) {
|
164
|
+
padding-top: govuk-spacing(2);
|
165
|
+
}
|
166
|
+
}
|
167
|
+
|
168
|
+
%govuk-body-m + %govuk-heading-l,
|
169
|
+
%govuk-body-s + %govuk-heading-l,
|
170
|
+
%govuk-list + %govuk-heading-l {
|
171
|
+
@include govuk-responsive-padding(4, "top");
|
172
|
+
}
|
173
|
+
|
174
|
+
%govuk-body-m + %govuk-heading-m,
|
175
|
+
%govuk-body-s + %govuk-heading-m,
|
176
|
+
%govuk-list + %govuk-heading-m,
|
177
|
+
%govuk-body-m + %govuk-heading-s,
|
178
|
+
%govuk-body-s + %govuk-heading-s,
|
179
|
+
%govuk-list + %govuk-heading-s {
|
180
|
+
padding-top: govuk-spacing(1);
|
181
|
+
|
182
|
+
@include govuk-media-query($from: tablet) {
|
183
|
+
padding-top: govuk-spacing(2);
|
184
|
+
}
|
185
|
+
}
|
186
|
+
}
|
@@ -0,0 +1,12 @@
|
|
1
|
+
@import "clearfix";
|
2
|
+
@import "colour";
|
3
|
+
@import "device-pixels";
|
4
|
+
@import "focused";
|
5
|
+
@import "font-faces";
|
6
|
+
@import "grid";
|
7
|
+
@import "links";
|
8
|
+
@import "media-queries";
|
9
|
+
@import "shape-arrow";
|
10
|
+
@import "spacing";
|
11
|
+
@import "typography";
|
12
|
+
@import "visually-hidden";
|
@@ -0,0 +1,98 @@
|
|
1
|
+
@import "../settings/compatibility";
|
2
|
+
@import "../settings/colours-palette";
|
3
|
+
@import "../settings/colours-organisations";
|
4
|
+
|
5
|
+
////
|
6
|
+
/// @group helpers/colour
|
7
|
+
////
|
8
|
+
|
9
|
+
/// Get colour
|
10
|
+
///
|
11
|
+
/// @param {String | Colour} $colour - Name of colour from the colour palette
|
12
|
+
/// (`$govuk-colours`)
|
13
|
+
/// @param {String} $legacy - Either the name of colour from the legacy palette
|
14
|
+
/// or a colour literal, to return instead when in 'legacy mode' - matching
|
15
|
+
/// the palette from GOV.UK Template, Elements or Frontend Toolkit
|
16
|
+
/// @return {Colour} Representation of named colour
|
17
|
+
///
|
18
|
+
/// @example scss - Using legacy colours from the palette
|
19
|
+
/// .foo {
|
20
|
+
/// background-colour: govuk-colour("mid-grey", $legacy: "grey-2");
|
21
|
+
/// }
|
22
|
+
///
|
23
|
+
/// @example scss - Using legacy colour literals
|
24
|
+
/// .foo {
|
25
|
+
/// background-colour: govuk-colour("green", $legacy: #BADA55);
|
26
|
+
/// }
|
27
|
+
///
|
28
|
+
/// @throw if `$colour` is not a colour from the colour palette
|
29
|
+
/// @access public
|
30
|
+
|
31
|
+
@function govuk-colour($colour, $legacy: false) {
|
32
|
+
@if $govuk-use-legacy-palette and $legacy {
|
33
|
+
@if type-of($legacy) == "color" {
|
34
|
+
@return $legacy;
|
35
|
+
}
|
36
|
+
$colour: $legacy;
|
37
|
+
}
|
38
|
+
|
39
|
+
@if type-of($colour) == "color" {
|
40
|
+
// stylelint-disable-next-line scss/function-quote-no-quoted-strings-inside
|
41
|
+
$colour: quote("#{$colour}");
|
42
|
+
}
|
43
|
+
|
44
|
+
@if not map-has-key($govuk-colours, $colour) {
|
45
|
+
@error "Unknown colour `#{$colour}`";
|
46
|
+
}
|
47
|
+
|
48
|
+
@return map-get($govuk-colours, $colour);
|
49
|
+
}
|
50
|
+
|
51
|
+
/// Get the colour for a government organisation
|
52
|
+
///
|
53
|
+
/// @param {String} $organisation - Organisation name, lowercase, hyphenated
|
54
|
+
/// @param {Boolean} $websafe [true] - By default a 'websafe' version of the
|
55
|
+
/// colour will be returned which meets contrast requirements . If you want to
|
56
|
+
/// use the non-websafe version you can set this to `false` but your should
|
57
|
+
/// ensure that you still meets contrast requirements for accessibility - for
|
58
|
+
/// example, do not use the non-websafe version for text.
|
59
|
+
///
|
60
|
+
/// @return {Colour} Representation of colour for organisation
|
61
|
+
/// @throw if `$organisation` is not a known organisation
|
62
|
+
/// @access public
|
63
|
+
|
64
|
+
@function govuk-organisation-colour($organisation, $websafe: true) {
|
65
|
+
@if not map-has-key($govuk-colours-organisations, $organisation) {
|
66
|
+
@error "Unknown organisation `#{$organisation}`";
|
67
|
+
}
|
68
|
+
|
69
|
+
$org-colour: map-get($govuk-colours-organisations, $organisation);
|
70
|
+
|
71
|
+
@if $websafe and map-has-key($org-colour, colour-websafe) {
|
72
|
+
@return map-get($org-colour, colour-websafe);
|
73
|
+
} @else {
|
74
|
+
@return map-get($org-colour, colour);
|
75
|
+
}
|
76
|
+
}
|
77
|
+
|
78
|
+
/// Make a colour darker by mixing it with black
|
79
|
+
///
|
80
|
+
/// @param {Colour} $colour - colour to shade
|
81
|
+
/// @param {Number} $percentage - percentage of black to mix with $colour
|
82
|
+
/// @return {Colour}
|
83
|
+
/// @access public
|
84
|
+
|
85
|
+
@function govuk-shade($colour, $percentage) {
|
86
|
+
@return mix(#000000, $colour, $percentage);
|
87
|
+
}
|
88
|
+
|
89
|
+
/// Make a colour lighter by mixing it with white
|
90
|
+
///
|
91
|
+
/// @param {Colour} $colour - colour to tint
|
92
|
+
/// @param {Number} $percentage - percentage of white to mix with $colour
|
93
|
+
/// @return {Colour}
|
94
|
+
/// @access public
|
95
|
+
|
96
|
+
@function govuk-tint($colour, $percentage) {
|
97
|
+
@return mix(govuk-colour("white"), $colour, $percentage);
|
98
|
+
}
|
@@ -0,0 +1,37 @@
|
|
1
|
+
////
|
2
|
+
/// @group helpers
|
3
|
+
////
|
4
|
+
|
5
|
+
/// Media query for retina images (device-pixel-ratio)
|
6
|
+
///
|
7
|
+
/// @param {Number} $ratio [2] - Device pixel ratio
|
8
|
+
/// @content Passed content will be outputted within the media query
|
9
|
+
///
|
10
|
+
/// @example scss - Providing a @2x image for screens that support it
|
11
|
+
/// background-image: govuk-image-url("my-image.png");
|
12
|
+
///
|
13
|
+
/// @include govuk-device-pixel-ratio {
|
14
|
+
/// background-image: govuk-image-url("my-image-2x.png");
|
15
|
+
/// }
|
16
|
+
///
|
17
|
+
/// @example scss - Using a custom ratio
|
18
|
+
/// background-image: govuk-image-url("my-image.png");
|
19
|
+
///
|
20
|
+
/// @include govuk-device-pixel-ratio {
|
21
|
+
/// background-image: govuk-image-url("my-image-2x.png");
|
22
|
+
/// }
|
23
|
+
///
|
24
|
+
/// @include govuk-device-pixel-ratio(3) {
|
25
|
+
/// background-image: govuk-image-url("my-image-3x.png");
|
26
|
+
/// }
|
27
|
+
///
|
28
|
+
/// @access public
|
29
|
+
|
30
|
+
@mixin govuk-device-pixel-ratio($ratio: 2) {
|
31
|
+
// stylelint-disable indentation
|
32
|
+
@media only screen and (-webkit-min-device-pixel-ratio: $ratio),
|
33
|
+
only screen and (min-resolution: #{($ratio * 96)}dpi),
|
34
|
+
only screen and (min-resolution: #{$ratio}dppx) {
|
35
|
+
@content;
|
36
|
+
}
|
37
|
+
}
|
@@ -0,0 +1,33 @@
|
|
1
|
+
////
|
2
|
+
/// @group helpers/accessibility
|
3
|
+
////
|
4
|
+
|
5
|
+
/// Focused text
|
6
|
+
///
|
7
|
+
/// Provides an outline to clearly indicate when the target element is focused.
|
8
|
+
/// Used for interactive text-based elements.
|
9
|
+
///
|
10
|
+
/// @access public
|
11
|
+
|
12
|
+
@mixin govuk-focused-text {
|
13
|
+
// When colours are overridden, for example when users have a dark mode,
|
14
|
+
// backgrounds and box-shadows disappear, so we need to ensure there's a
|
15
|
+
// transparent outline which will be set to a visible colour.
|
16
|
+
|
17
|
+
// Since Internet Explorer 8 does not support box-shadow, we want to force the
|
18
|
+
// user-agent outlines
|
19
|
+
@include _govuk-not-ie8 {
|
20
|
+
outline: $govuk-focus-width solid transparent;
|
21
|
+
}
|
22
|
+
color: $govuk-focus-text-colour;
|
23
|
+
background-color: $govuk-focus-colour;
|
24
|
+
box-shadow: 0 -2px $govuk-focus-colour, 0 4px $govuk-focus-text-colour;
|
25
|
+
// When link is focussed, hide the default underline since the
|
26
|
+
// box shadow adds the "underline"
|
27
|
+
text-decoration: none;
|
28
|
+
|
29
|
+
// When a focused box is broken by e.g. a line break, ensure that the
|
30
|
+
// box-shadow is applied to each fragment independently.
|
31
|
+
-webkit-box-decoration-break: clone;
|
32
|
+
box-decoration-break: clone;
|
33
|
+
}
|
@@ -0,0 +1,41 @@
|
|
1
|
+
////
|
2
|
+
/// @group helpers
|
3
|
+
////
|
4
|
+
|
5
|
+
@import "../tools/exports";
|
6
|
+
|
7
|
+
/// Font Face - GDS Transport
|
8
|
+
///
|
9
|
+
/// Outputs the font-face declaration for GDS Transport at the root of the CSS document
|
10
|
+
/// the first time it is called.
|
11
|
+
///
|
12
|
+
/// @access private
|
13
|
+
|
14
|
+
@mixin _govuk-font-face-gds-transport {
|
15
|
+
@include _govuk-not-ie8 { // In IE8, which cannot render WOFF format, we fall back to system fonts
|
16
|
+
@include govuk-exports("govuk/helpers/font-faces") {
|
17
|
+
@at-root {
|
18
|
+
/*! Copyright (c) 2011 by Margaret Calvert & Henrik Kubel. All rights reserved. The font has been customised for exclusive use on gov.uk. This cut is not commercially available. */ /* stylelint-disable-line scss/comment-no-loud */
|
19
|
+
@font-face {
|
20
|
+
font-family: "GDS Transport";
|
21
|
+
font-style: normal;
|
22
|
+
font-weight: normal;
|
23
|
+
src:
|
24
|
+
govuk-font-url("light-94a07e06a1-v2.woff2") format("woff2"),
|
25
|
+
govuk-font-url("light-f591b13f7d-v2.woff") format("woff");
|
26
|
+
font-display: fallback;
|
27
|
+
}
|
28
|
+
|
29
|
+
@font-face {
|
30
|
+
font-family: "GDS Transport";
|
31
|
+
font-style: normal;
|
32
|
+
font-weight: bold;
|
33
|
+
src:
|
34
|
+
govuk-font-url("bold-b542beb274-v2.woff2") format("woff2"),
|
35
|
+
govuk-font-url("bold-affa96571d-v2.woff") format("woff");
|
36
|
+
font-display: fallback;
|
37
|
+
}
|
38
|
+
}
|
39
|
+
}
|
40
|
+
}
|
41
|
+
}
|
@@ -0,0 +1,61 @@
|
|
1
|
+
////
|
2
|
+
/// @group helpers/layout
|
3
|
+
////
|
4
|
+
|
5
|
+
/// Grid width percentage
|
6
|
+
///
|
7
|
+
/// @param {String} $key - Name of grid width (e.g. two-thirds)
|
8
|
+
/// @return {Number} Percentage width
|
9
|
+
/// @throw if `$key` is not a valid grid width
|
10
|
+
/// @access public
|
11
|
+
|
12
|
+
@function govuk-grid-width($key) {
|
13
|
+
@if map-has-key($govuk-grid-widths, $key) {
|
14
|
+
@return map-get($govuk-grid-widths, $key);
|
15
|
+
}
|
16
|
+
|
17
|
+
@error "Unknown grid width `#{$key}`";
|
18
|
+
}
|
19
|
+
|
20
|
+
/// Generate grid column styles
|
21
|
+
///
|
22
|
+
/// Creates a grid column with standard gutter between the columns.
|
23
|
+
///
|
24
|
+
/// Grid widths are defined in the `$govuk-grid-widths` map.
|
25
|
+
///
|
26
|
+
/// By default the column width changes from 100% to specified width at the
|
27
|
+
/// 'tablet' breakpoint, but other breakpoints can be specified using the `$at`
|
28
|
+
/// parameter.
|
29
|
+
///
|
30
|
+
/// @param {String} $width [full] name of a grid width from $govuk-grid-widths
|
31
|
+
/// @param {String} $float [left] left | right
|
32
|
+
/// @param {String} $at [tablet] - mobile | tablet | desktop | any custom breakpoint
|
33
|
+
///
|
34
|
+
/// @example scss - Default
|
35
|
+
/// .govuk-grid-column-two-thirds {
|
36
|
+
/// @include govuk-grid-column(two-thirds)
|
37
|
+
/// }
|
38
|
+
///
|
39
|
+
/// @example scss - Customising the breakpoint where width percentage is applied
|
40
|
+
/// .govuk-grid-column-one-half-at-desktop {
|
41
|
+
/// @include govuk-grid-column(one-half, $at: desktop);
|
42
|
+
/// }
|
43
|
+
///
|
44
|
+
/// @example scss - Customising the float direction
|
45
|
+
/// .govuk-grid-column-one-half-right {
|
46
|
+
/// @include govuk-grid-column(two-thirds, $float: right);
|
47
|
+
/// }
|
48
|
+
///
|
49
|
+
/// @access public
|
50
|
+
|
51
|
+
@mixin govuk-grid-column($width: full, $float: left, $at: tablet) {
|
52
|
+
box-sizing: border-box;
|
53
|
+
@if $at != desktop {
|
54
|
+
width: 100%;
|
55
|
+
}
|
56
|
+
padding: 0 $govuk-gutter-half;
|
57
|
+
@include govuk-media-query($from: $at) {
|
58
|
+
width: govuk-grid-width($width);
|
59
|
+
float: $float;
|
60
|
+
}
|
61
|
+
}
|