dxw_govuk_frontend_rails 2.9.0.pre.alpha.1

Sign up to get free protection for your applications and to get access to all the features.
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
+ }