dxw_govuk_frontend_rails 2.9.0.pre.alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (134) hide show
  1. checksums.yaml +7 -0
  2. data/.circleci/config.yml +33 -0
  3. data/.circleci/setup-rubygems.sh +3 -0
  4. data/.gitignore +9 -0
  5. data/CODE_OF_CONDUCT.md +74 -0
  6. data/Gemfile +4 -0
  7. data/LICENSE.txt +21 -0
  8. data/README.md +91 -0
  9. data/Rakefile +50 -0
  10. data/bin/console +14 -0
  11. data/bin/setup +8 -0
  12. data/dxw_govuk_frontend_rails.gemspec +27 -0
  13. data/lib/dxw_govuk_frontend_rails/version.rb +3 -0
  14. data/lib/dxw_govuk_frontend_rails.rb +12 -0
  15. data/package-lock.json +13 -0
  16. data/package.json +26 -0
  17. data/vendor/assets/fonts/bold-a2452cb66f-v1.woff2 +0 -0
  18. data/vendor/assets/fonts/bold-f38c792ac2-v1.woff +0 -0
  19. data/vendor/assets/fonts/bold-fb2676462a-v1.eot +0 -0
  20. data/vendor/assets/fonts/bold-tabular-357fdfbcc3-v1.eot +0 -0
  21. data/vendor/assets/fonts/bold-tabular-784c21afb8-v1.woff +0 -0
  22. data/vendor/assets/fonts/bold-tabular-b89238d840-v1.woff2 +0 -0
  23. data/vendor/assets/fonts/light-2c037cf7e1-v1.eot +0 -0
  24. data/vendor/assets/fonts/light-458f8ea81c-v1.woff +0 -0
  25. data/vendor/assets/fonts/light-f38ad40456-v1.woff2 +0 -0
  26. data/vendor/assets/fonts/light-tabular-498ea8ffe2-v1.eot +0 -0
  27. data/vendor/assets/fonts/light-tabular-62cc6f0a28-v1.woff +0 -0
  28. data/vendor/assets/fonts/light-tabular-851b10ccdd-v1.woff2 +0 -0
  29. data/vendor/assets/images/favicon.ico +0 -0
  30. data/vendor/assets/images/govuk-apple-touch-icon-152x152.png +0 -0
  31. data/vendor/assets/images/govuk-apple-touch-icon-167x167.png +0 -0
  32. data/vendor/assets/images/govuk-apple-touch-icon-180x180.png +0 -0
  33. data/vendor/assets/images/govuk-apple-touch-icon.png +0 -0
  34. data/vendor/assets/images/govuk-crest-2x.png +0 -0
  35. data/vendor/assets/images/govuk-crest.png +0 -0
  36. data/vendor/assets/images/govuk-logotype-crown.png +0 -0
  37. data/vendor/assets/images/govuk-mask-icon.svg +7 -0
  38. data/vendor/assets/images/govuk-opengraph-image.png +0 -0
  39. data/vendor/assets/images/icon-arrow-left.png +0 -0
  40. data/vendor/assets/images/icon-important.png +0 -0
  41. data/vendor/assets/images/icon-pointer-2x.png +0 -0
  42. data/vendor/assets/images/icon-pointer.png +0 -0
  43. data/vendor/assets/javascripts/govuk_frontend_rails.js +2358 -0
  44. data/vendor/assets/stylesheets/all-ie8.scss +6 -0
  45. data/vendor/assets/stylesheets/all.scss +11 -0
  46. data/vendor/assets/stylesheets/components/_all.scss +29 -0
  47. data/vendor/assets/stylesheets/components/accordion/_accordion.scss +188 -0
  48. data/vendor/assets/stylesheets/components/back-link/_back-link.scss +54 -0
  49. data/vendor/assets/stylesheets/components/breadcrumbs/_breadcrumbs.scss +119 -0
  50. data/vendor/assets/stylesheets/components/button/_button.scss +180 -0
  51. data/vendor/assets/stylesheets/components/character-count/_character-count.scss +31 -0
  52. data/vendor/assets/stylesheets/components/checkboxes/_checkboxes.scss +161 -0
  53. data/vendor/assets/stylesheets/components/date-input/_date-input.scss +30 -0
  54. data/vendor/assets/stylesheets/components/details/_details.scss +89 -0
  55. data/vendor/assets/stylesheets/components/error-message/_error-message.scss +15 -0
  56. data/vendor/assets/stylesheets/components/error-summary/_error-summary.scss +72 -0
  57. data/vendor/assets/stylesheets/components/fieldset/_fieldset.scss +60 -0
  58. data/vendor/assets/stylesheets/components/file-upload/_file-upload.scss +19 -0
  59. data/vendor/assets/stylesheets/components/footer/_footer.scss +233 -0
  60. data/vendor/assets/stylesheets/components/header/_header.scss +304 -0
  61. data/vendor/assets/stylesheets/components/hint/_hint.scss +50 -0
  62. data/vendor/assets/stylesheets/components/input/_input.scss +77 -0
  63. data/vendor/assets/stylesheets/components/inset-text/_inset-text.scss +28 -0
  64. data/vendor/assets/stylesheets/components/label/_label.scss +45 -0
  65. data/vendor/assets/stylesheets/components/panel/_panel.scss +44 -0
  66. data/vendor/assets/stylesheets/components/phase-banner/_phase-banner.scss +31 -0
  67. data/vendor/assets/stylesheets/components/radios/_radios.scss +187 -0
  68. data/vendor/assets/stylesheets/components/select/_select.scss +32 -0
  69. data/vendor/assets/stylesheets/components/skip-link/_skip-link.scss +26 -0
  70. data/vendor/assets/stylesheets/components/summary-list/_summary-list.scss +123 -0
  71. data/vendor/assets/stylesheets/components/table/_table.scss +53 -0
  72. data/vendor/assets/stylesheets/components/tabs/_tabs.scss +130 -0
  73. data/vendor/assets/stylesheets/components/tag/_tag.scss +33 -0
  74. data/vendor/assets/stylesheets/components/textarea/_textarea.scss +32 -0
  75. data/vendor/assets/stylesheets/components/warning-text/_warning-text.scss +59 -0
  76. data/vendor/assets/stylesheets/core/_all.scss +6 -0
  77. data/vendor/assets/stylesheets/core/_global-styles.scss +23 -0
  78. data/vendor/assets/stylesheets/core/_links.scss +31 -0
  79. data/vendor/assets/stylesheets/core/_lists.scss +58 -0
  80. data/vendor/assets/stylesheets/core/_section-break.scss +60 -0
  81. data/vendor/assets/stylesheets/core/_template.scss +35 -0
  82. data/vendor/assets/stylesheets/core/_typography.scss +190 -0
  83. data/vendor/assets/stylesheets/govuk-frontend-rails.scss +16 -0
  84. data/vendor/assets/stylesheets/helpers/_all.scss +12 -0
  85. data/vendor/assets/stylesheets/helpers/_clearfix.scss +15 -0
  86. data/vendor/assets/stylesheets/helpers/_colour.scss +51 -0
  87. data/vendor/assets/stylesheets/helpers/_device-pixels.scss +38 -0
  88. data/vendor/assets/stylesheets/helpers/_focusable.scss +34 -0
  89. data/vendor/assets/stylesheets/helpers/_font-faces.scss +67 -0
  90. data/vendor/assets/stylesheets/helpers/_grid.scss +107 -0
  91. data/vendor/assets/stylesheets/helpers/_links.scss +200 -0
  92. data/vendor/assets/stylesheets/helpers/_media-queries.scss +95 -0
  93. data/vendor/assets/stylesheets/helpers/_shape-arrow.scss +80 -0
  94. data/vendor/assets/stylesheets/helpers/_spacing.scss +152 -0
  95. data/vendor/assets/stylesheets/helpers/_typography.scss +188 -0
  96. data/vendor/assets/stylesheets/helpers/_visually-hidden.scss +82 -0
  97. data/vendor/assets/stylesheets/objects/_all.scss +4 -0
  98. data/vendor/assets/stylesheets/objects/_form-group.scss +25 -0
  99. data/vendor/assets/stylesheets/objects/_grid.scss +27 -0
  100. data/vendor/assets/stylesheets/objects/_main-wrapper.scss +53 -0
  101. data/vendor/assets/stylesheets/objects/_width-container.scss +63 -0
  102. data/vendor/assets/stylesheets/overrides/_all.scss +4 -0
  103. data/vendor/assets/stylesheets/overrides/_display.scss +18 -0
  104. data/vendor/assets/stylesheets/overrides/_spacing.scss +62 -0
  105. data/vendor/assets/stylesheets/overrides/_typography.scss +25 -0
  106. data/vendor/assets/stylesheets/overrides/_width.scss +49 -0
  107. data/vendor/assets/stylesheets/settings/_all.scss +21 -0
  108. data/vendor/assets/stylesheets/settings/_assets.scss +82 -0
  109. data/vendor/assets/stylesheets/settings/_colours-applied.scss +140 -0
  110. data/vendor/assets/stylesheets/settings/_colours-organisations.scss +136 -0
  111. data/vendor/assets/stylesheets/settings/_colours-palette.scss +37 -0
  112. data/vendor/assets/stylesheets/settings/_compatibility.scss +51 -0
  113. data/vendor/assets/stylesheets/settings/_global-styles.scss +13 -0
  114. data/vendor/assets/stylesheets/settings/_ie8.scss +18 -0
  115. data/vendor/assets/stylesheets/settings/_measurements.scss +99 -0
  116. data/vendor/assets/stylesheets/settings/_media-queries.scss +23 -0
  117. data/vendor/assets/stylesheets/settings/_spacing.scss +80 -0
  118. data/vendor/assets/stylesheets/settings/_typography-font-families.scss +22 -0
  119. data/vendor/assets/stylesheets/settings/_typography-font.scss +60 -0
  120. data/vendor/assets/stylesheets/settings/_typography-responsive.scss +180 -0
  121. data/vendor/assets/stylesheets/tools/_all.scss +8 -0
  122. data/vendor/assets/stylesheets/tools/_compatibility.scss +36 -0
  123. data/vendor/assets/stylesheets/tools/_exports.scss +33 -0
  124. data/vendor/assets/stylesheets/tools/_font-url.scss +28 -0
  125. data/vendor/assets/stylesheets/tools/_ie8.scss +51 -0
  126. data/vendor/assets/stylesheets/tools/_iff.scss +15 -0
  127. data/vendor/assets/stylesheets/tools/_image-url.scss +28 -0
  128. data/vendor/assets/stylesheets/tools/_px-to-em.scss +20 -0
  129. data/vendor/assets/stylesheets/tools/_px-to-rem.scss +20 -0
  130. data/vendor/assets/stylesheets/utilities/_all.scss +2 -0
  131. data/vendor/assets/stylesheets/utilities/_clearfix.scss +5 -0
  132. data/vendor/assets/stylesheets/utilities/_visually-hidden.scss +10 -0
  133. data/vendor/assets/stylesheets/vendor/_sass-mq.scss +351 -0
  134. metadata +204 -0
@@ -0,0 +1,23 @@
1
+ @import "../settings/all";
2
+ @import "../tools/all";
3
+ @import "../helpers/all";
4
+
5
+ @import "links";
6
+ @import "typography";
7
+
8
+ @mixin govuk-global-styles {
9
+ a {
10
+ @extend %govuk-link;
11
+ }
12
+
13
+ p {
14
+ @extend %govuk-body-m;
15
+ }
16
+ }
17
+
18
+ @include govuk-exports("govuk/core/global-styles") {
19
+
20
+ @if $govuk-global-styles == true {
21
+ @include govuk-global-styles;
22
+ }
23
+ }
@@ -0,0 +1,31 @@
1
+ @import "../settings/all";
2
+ @import "../tools/all";
3
+ @import "../helpers/all";
4
+
5
+ @include govuk-exports("govuk/core/links") {
6
+
7
+ %govuk-link {
8
+ @include govuk-link-common;
9
+ @include govuk-link-style-default;
10
+ @include govuk-link-print-friendly;
11
+ }
12
+
13
+ .govuk-link {
14
+ @extend %govuk-link;
15
+ }
16
+
17
+ // Variant classes should always be used in conjunction with the .govuk-link
18
+ // class, so we do not need the common link styles as they will be inherited.
19
+
20
+ .govuk-link--muted {
21
+ @include govuk-link-style-muted;
22
+ }
23
+
24
+ .govuk-link--text-colour {
25
+ @include govuk-link-style-text;
26
+ }
27
+
28
+ .govuk-link--no-visited-state {
29
+ @include govuk-link-style-no-visited-state;
30
+ }
31
+ }
@@ -0,0 +1,58 @@
1
+ @import "../settings/all";
2
+ @import "../tools/all";
3
+ @import "../helpers/all";
4
+
5
+ @include govuk-exports("govuk/core/lists") {
6
+
7
+ %govuk-list {
8
+ @include govuk-font($size: 19);
9
+ @include govuk-text-colour;
10
+ margin-top: 0;
11
+ @include govuk-responsive-margin(4, "bottom");
12
+ padding-left: 0;
13
+ list-style-type: none;
14
+
15
+ // Add a top margin for nested lists
16
+ %govuk-list {
17
+ margin-top: govuk-spacing(2);
18
+ }
19
+ }
20
+
21
+ %govuk-list > li {
22
+ // Lists without numbers or bullets should always have extra space between
23
+ // list items. Lists with numbers or bullets only have this extra space on
24
+ // tablet and above
25
+ margin-bottom: govuk-spacing(1);
26
+ }
27
+
28
+ .govuk-list {
29
+ @extend %govuk-list;
30
+ }
31
+
32
+ %govuk-list--bullet {
33
+ padding-left: govuk-spacing(4);
34
+ list-style-type: disc;
35
+ }
36
+
37
+ %govuk-list--number {
38
+ padding-left: govuk-spacing(4);
39
+ list-style-type: decimal;
40
+ }
41
+
42
+ %govuk-list--bullet > li,
43
+ %govuk-list--number > li {
44
+ margin-bottom: 0;
45
+
46
+ @include govuk-media-query($from: tablet) {
47
+ margin-bottom: govuk-spacing(1);
48
+ }
49
+ }
50
+
51
+ .govuk-list--bullet {
52
+ @extend %govuk-list--bullet;
53
+ }
54
+
55
+ .govuk-list--number {
56
+ @extend %govuk-list--number;
57
+ }
58
+ }
@@ -0,0 +1,60 @@
1
+ @import "../settings/all";
2
+ @import "../tools/all";
3
+ @import "../helpers/all";
4
+
5
+ @include govuk-exports("govuk/core/section-break") {
6
+
7
+ %govuk-section-break {
8
+ margin: 0;
9
+ border: 0;
10
+
11
+ // fix double-width section break and forced visible section break
12
+ // when combined with styles from alphagov/elements
13
+ @include govuk-compatibility(govuk_elements) {
14
+ height: 0;
15
+ }
16
+ }
17
+
18
+ .govuk-section-break {
19
+ @extend %govuk-section-break;
20
+ }
21
+
22
+ // Sizes
23
+
24
+ %govuk-section-break--xl {
25
+ @include govuk-responsive-margin(8, "top");
26
+ @include govuk-responsive-margin(8, "bottom");
27
+ }
28
+
29
+ .govuk-section-break--xl {
30
+ @extend %govuk-section-break--xl;
31
+ }
32
+
33
+ %govuk-section-break--l {
34
+ @include govuk-responsive-margin(6, "top");
35
+ @include govuk-responsive-margin(6, "bottom");
36
+ }
37
+
38
+ .govuk-section-break--l {
39
+ @extend %govuk-section-break--l;
40
+ }
41
+
42
+ %govuk-section-break--m {
43
+ @include govuk-responsive-margin(4, "top");
44
+ @include govuk-responsive-margin(4, "bottom");
45
+ }
46
+
47
+ .govuk-section-break--m {
48
+ @extend %govuk-section-break--m;
49
+ }
50
+
51
+ // Visible variant
52
+
53
+ %govuk-section-break--visible {
54
+ border-bottom: 1px solid $govuk-border-colour;
55
+ }
56
+
57
+ .govuk-section-break--visible {
58
+ @extend %govuk-section-break--visible;
59
+ }
60
+ }
@@ -0,0 +1,35 @@
1
+ @import "../settings/all";
2
+ @import "../tools/all";
3
+ @import "../helpers/all";
4
+
5
+ @include govuk-exports("govuk/core/template") {
6
+
7
+ // Applied to the <html> element
8
+ .govuk-template {
9
+ // Set the overall page background colour to the same colour as used by the
10
+ // footer to give the illusion of a long footer.
11
+ background-color: $govuk-canvas-background-colour;
12
+
13
+ // Prevent automatic text sizing, as we already cater for small devices and
14
+ // would like the browser to stay on 100% text zoom by default.
15
+ -webkit-text-size-adjust: 100%;
16
+ -moz-text-size-adjust: 100%;
17
+ -ms-text-size-adjust: 100%;
18
+ text-size-adjust: 100%;
19
+
20
+ // Force the scrollbar to always display in IE, to prevent horizontal page
21
+ // jumps as content height changes (e.g. autocomplete results open).
22
+ @include govuk-media-query($media-type: screen) {
23
+ overflow-y: scroll;
24
+ }
25
+ }
26
+
27
+ // Applied to the <body> element
28
+ .govuk-template__body {
29
+ // The default margins set by user-agents are not required since we have our
30
+ // own containers.
31
+ margin: 0;
32
+ // Set the overall body of the page back to the typical background colour.
33
+ background-color: $govuk-body-background-colour;
34
+ }
35
+ }
@@ -0,0 +1,190 @@
1
+ @import "../settings/all";
2
+ @import "../tools/all";
3
+ @import "../helpers/all";
4
+
5
+ @include govuk-exports("govuk/core/typography") {
6
+
7
+ // Headings
8
+
9
+ %govuk-heading-xl {
10
+ @include govuk-text-colour;
11
+ @include govuk-font($size: 48, $weight: bold);
12
+
13
+ display: block;
14
+
15
+ margin-top: 0;
16
+ @include govuk-responsive-margin(8, "bottom");
17
+ }
18
+
19
+ .govuk-heading-xl {
20
+ @extend %govuk-heading-xl;
21
+ }
22
+
23
+ %govuk-heading-l {
24
+ @include govuk-text-colour;
25
+ @include govuk-font($size: 36, $weight: bold);
26
+
27
+ display: block;
28
+
29
+ margin-top: 0;
30
+ @include govuk-responsive-margin(6, "bottom");
31
+ }
32
+
33
+ .govuk-heading-l {
34
+ @extend %govuk-heading-l;
35
+ }
36
+
37
+ %govuk-heading-m {
38
+ @include govuk-text-colour;
39
+ @include govuk-font($size: 24, $weight: bold);
40
+
41
+ display: block;
42
+
43
+ margin-top: 0;
44
+ @include govuk-responsive-margin(4, "bottom");
45
+ }
46
+
47
+ .govuk-heading-m {
48
+ @extend %govuk-heading-m;
49
+ }
50
+
51
+ %govuk-heading-s {
52
+ @include govuk-text-colour;
53
+ @include govuk-font($size: 19, $weight: bold);
54
+
55
+ display: block;
56
+
57
+ margin-top: 0;
58
+ @include govuk-responsive-margin(4, "bottom");
59
+ }
60
+
61
+ .govuk-heading-s {
62
+ @extend %govuk-heading-s;
63
+ }
64
+
65
+ // Captions to be used inside headings
66
+
67
+ .govuk-caption-xl {
68
+ @include govuk-font($size: 27);
69
+
70
+ display: block;
71
+
72
+ margin-bottom: govuk-spacing(1);
73
+
74
+ color: $govuk-secondary-text-colour;
75
+ }
76
+
77
+ .govuk-caption-l {
78
+ @include govuk-font($size: 24);
79
+
80
+ display: block;
81
+
82
+ margin-bottom: govuk-spacing(1);
83
+ color: $govuk-secondary-text-colour;
84
+
85
+ @include govuk-media-query($from: tablet) {
86
+ margin-bottom: 0;
87
+ }
88
+ }
89
+
90
+ .govuk-caption-m {
91
+ @include govuk-font($size: 19);
92
+
93
+ display: block;
94
+
95
+ color: $govuk-secondary-text-colour;
96
+ }
97
+
98
+ // Body (paragraphs)
99
+
100
+ %govuk-body-l {
101
+ @include govuk-text-colour;
102
+ @include govuk-font($size: 24);
103
+
104
+ margin-top: 0;
105
+ @include govuk-responsive-margin(6, "bottom");
106
+ }
107
+
108
+ .govuk-body-l {
109
+ @extend %govuk-body-l;
110
+ }
111
+
112
+ %govuk-body-m {
113
+ @include govuk-text-colour;
114
+ @include govuk-font($size: 19);
115
+
116
+ margin-top: 0;
117
+ @include govuk-responsive-margin(4, "bottom");
118
+ }
119
+
120
+ .govuk-body-m {
121
+ @extend %govuk-body-m;
122
+ }
123
+
124
+ %govuk-body-s {
125
+ @include govuk-text-colour;
126
+ @include govuk-font($size: 16);
127
+
128
+ margin-top: 0;
129
+ @include govuk-responsive-margin(4, "bottom");
130
+ }
131
+
132
+ .govuk-body-s {
133
+ @extend %govuk-body-s;
134
+ }
135
+
136
+ %govuk-body-xs {
137
+ @include govuk-text-colour;
138
+ @include govuk-font($size: 14);
139
+
140
+ margin-top: 0;
141
+ @include govuk-responsive-margin(4, "bottom");
142
+ }
143
+
144
+ .govuk-body-xs {
145
+ @extend %govuk-body-xs;
146
+ }
147
+
148
+ // Usage aliases
149
+
150
+ // Using extend to alias means we also inherit any contextual adjustments that
151
+ // refer to the 'original' class name
152
+
153
+ .govuk-body-lead {
154
+ @extend %govuk-body-l;
155
+ }
156
+
157
+ .govuk-body {
158
+ @extend %govuk-body-m;
159
+ }
160
+
161
+ // Contextual adjustments
162
+ // Add top padding to headings that appear directly after paragraphs.
163
+
164
+ %govuk-body-l + %govuk-heading-l {
165
+ padding-top: govuk-spacing(1);
166
+
167
+ @include govuk-media-query($from: tablet) {
168
+ padding-top: govuk-spacing(2);
169
+ }
170
+ }
171
+
172
+ %govuk-body-m + %govuk-heading-l,
173
+ %govuk-body-s + %govuk-heading-l,
174
+ %govuk-list + %govuk-heading-l {
175
+ @include govuk-responsive-padding(4, "top");
176
+ }
177
+
178
+ %govuk-body-m + %govuk-heading-m,
179
+ %govuk-body-s + %govuk-heading-m,
180
+ %govuk-list + %govuk-heading-m,
181
+ %govuk-body-m + %govuk-heading-s,
182
+ %govuk-body-s + %govuk-heading-s,
183
+ %govuk-list + %govuk-heading-s {
184
+ padding-top: govuk-spacing(1);
185
+
186
+ @include govuk-media-query($from: tablet) {
187
+ padding-top: govuk-spacing(2);
188
+ }
189
+ }
190
+ }
@@ -0,0 +1,16 @@
1
+ @import "settings/all";
2
+
3
+ // Using Rails with the asset pipeline so set the helper methods
4
+ $govuk-font-url-function: 'image-url';
5
+ $govuk-image-url-function: 'font-url';
6
+
7
+ @import "tools/all";
8
+ @import "helpers/all";
9
+
10
+ @import "core/all";
11
+ @import "objects/all";
12
+
13
+ @import "components/all";
14
+
15
+ @import "utilities/all";
16
+ @import "overrides/all";
@@ -0,0 +1,12 @@
1
+ @import "clearfix";
2
+ @import "colour";
3
+ @import "device-pixels";
4
+ @import "focusable";
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,15 @@
1
+ ////
2
+ /// @group helpers
3
+ ////
4
+
5
+ /// Clear floated content within a container using a pseudo element
6
+ ///
7
+ /// @access public
8
+
9
+ @mixin govuk-clearfix {
10
+ &:after {
11
+ content: "";
12
+ display: block;
13
+ clear: both;
14
+ }
15
+ }
@@ -0,0 +1,51 @@
1
+ @import "../settings/colours-palette";
2
+ @import "../settings/colours-organisations";
3
+
4
+ ////
5
+ /// @group helpers/colour
6
+ ////
7
+
8
+ /// Get colour
9
+ ///
10
+ /// @param {String} $colour - Name of colour from the colour palette
11
+ /// (`$govuk-colours`)
12
+ /// @return {Colour} Representation of named colour
13
+ /// @throw if `$colour` is not a colour from the colour palette
14
+ /// @access public
15
+
16
+ @function govuk-colour($colour) {
17
+ $colour: quote($colour);
18
+
19
+ @if not map-has-key($govuk-colours, $colour) {
20
+ @error "Unknown colour `#{$colour}`";
21
+ }
22
+
23
+ @return map-get($govuk-colours, $colour);
24
+ }
25
+
26
+ /// Get the colour for a government organisation
27
+ ///
28
+ /// @param {String} $organisation - Organisation name, lowercase, hyphenated
29
+ /// @param {Boolean} $websafe [true] - By default a 'websafe' version of the
30
+ /// colour will be returned which meets contrast requirements . If you want to
31
+ /// use the non-websafe version you can set this to `false` but your should
32
+ /// ensure that you still meets contrast requirements for accessibility - for
33
+ /// example, don't use the non-websafe version for text.
34
+ ///
35
+ /// @return {Colour} Representation of colour for organisation
36
+ /// @throw if `$organisation` is not a known organisation
37
+ /// @access public
38
+
39
+ @function govuk-organisation-colour($organisation, $websafe: true) {
40
+ @if not map-has-key($govuk-colours-organisations, $organisation) {
41
+ @error "Unknown organisation `#{$organisation}`";
42
+ }
43
+
44
+ $org-colour: map-get($govuk-colours-organisations, $organisation);
45
+
46
+ @if ($websafe and map-has-key($org-colour, colour-websafe)) {
47
+ @return map-get($org-colour, colour-websafe);
48
+ } @else {
49
+ @return map-get($org-colour, colour);
50
+ }
51
+ }
@@ -0,0 +1,38 @@
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
+ @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
32
+ only screen and (min--moz-device-pixel-ratio: $ratio),
33
+ only screen and ( min-device-pixel-ratio: $ratio),
34
+ only screen and ( min-resolution: #{($ratio*96)}dpi),
35
+ only screen and ( min-resolution: #{$ratio}dppx) {
36
+ @content;
37
+ }
38
+ }
@@ -0,0 +1,34 @@
1
+ ////
2
+ /// @group helpers
3
+ ////
4
+
5
+ /// Focusable helper
6
+ ///
7
+ /// Provides an additional outline to clearly indicate when the target element is
8
+ /// focussed. Used for interactive elements which themselves have some background
9
+ /// or border, such as most form elements.
10
+ ///
11
+ /// @access public
12
+
13
+ @mixin govuk-focusable {
14
+ &:focus {
15
+ outline: $govuk-focus-width solid $govuk-focus-colour;
16
+ outline-offset: 0;
17
+ }
18
+ }
19
+
20
+ /// Focusable with fill helper
21
+ ///
22
+ /// Provides an additional outline and background colour to clearly indicate when
23
+ /// the target element is focussed. Used for interactive text-based elements such
24
+ /// as links.
25
+ ///
26
+ /// @access public
27
+
28
+ @mixin govuk-focusable-fill {
29
+ &:focus {
30
+ outline: $govuk-focus-width solid $govuk-focus-colour;
31
+ outline-offset: 0;
32
+ background-color: $govuk-focus-colour;
33
+ }
34
+ }
@@ -0,0 +1,67 @@
1
+ ////
2
+ /// @group helpers
3
+ ////
4
+
5
+ // Disables linting for this file only
6
+ // sass-lint:disable no-css-comments, no-duplicate-properties, property-sort-order, indentation
7
+
8
+ @import "../tools/exports";
9
+
10
+ /// Font Face - NTA
11
+ ///
12
+ /// Outputs the font-face declaration for NTA at the root of the CSS document
13
+ /// the first time it is called.
14
+ ///
15
+ /// @access private
16
+
17
+ @mixin _govuk-font-face-nta {
18
+ @include govuk-exports("govuk/helpers/font-face") {
19
+ @at-root {
20
+ /*! 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. */
21
+
22
+ @font-face {
23
+ font-family: "nta";
24
+ src: govuk-font-url("light-2c037cf7e1-v1.eot");
25
+ src: govuk-font-url("light-2c037cf7e1-v1.eot?#iefix") format("embedded-opentype"),
26
+ govuk-font-url("light-f38ad40456-v1.woff2") format("woff2"),
27
+ govuk-font-url("light-458f8ea81c-v1.woff") format("woff");
28
+ font-weight: normal;
29
+ font-style: normal;
30
+ font-display: fallback;
31
+ }
32
+
33
+ @font-face {
34
+ font-family: "nta";
35
+ src: govuk-font-url("bold-fb2676462a-v1.eot");
36
+ src: govuk-font-url("bold-fb2676462a-v1.eot?#iefix") format("embedded-opentype"),
37
+ govuk-font-url("bold-a2452cb66f-v1.woff2") format("woff2"),
38
+ govuk-font-url("bold-f38c792ac2-v1.woff") format("woff");
39
+ font-weight: bold;
40
+ font-style: normal;
41
+ font-display: fallback;
42
+ }
43
+
44
+ @font-face {
45
+ font-family: "ntatabularnumbers";
46
+ src: govuk-font-url("light-tabular-498ea8ffe2-v1.eot");
47
+ src: govuk-font-url("light-tabular-498ea8ffe2-v1.eot?#iefix") format("embedded-opentype"),
48
+ govuk-font-url("light-tabular-851b10ccdd-v1.woff2") format("woff2"),
49
+ govuk-font-url("light-tabular-62cc6f0a28-v1.woff") format("woff");
50
+ font-weight: normal;
51
+ font-style: normal;
52
+ font-display: fallback;
53
+ }
54
+
55
+ @font-face {
56
+ font-family: "ntatabularnumbers";
57
+ src: govuk-font-url("bold-tabular-357fdfbcc3-v1.eot");
58
+ src: govuk-font-url("bold-tabular-357fdfbcc3-v1.eot?#iefix") format("embedded-opentype"),
59
+ govuk-font-url("bold-tabular-b89238d840-v1.woff2") format("woff2"),
60
+ govuk-font-url("bold-tabular-784c21afb8-v1.woff") format("woff");
61
+ font-weight: bold;
62
+ font-style: normal;
63
+ font-display: fallback;
64
+ }
65
+ }
66
+ }
67
+ }