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.
Files changed (106) hide show
  1. checksums.yaml +4 -4
  2. data/CONTRIBUTING.md +1 -0
  3. data/Gemfile.lock +5 -4
  4. data/README.md +45 -42
  5. data/dxw_govuk_frontend_rails.gemspec +1 -1
  6. data/lib/dxw_govuk_frontend_rails/version.rb +1 -1
  7. data/package-lock.json +3 -3
  8. data/package.json +1 -1
  9. data/vendor/assets/javascripts/govuk_frontend_rails.js +194 -118
  10. data/vendor/assets/stylesheets/_base.scss +3 -0
  11. data/vendor/assets/stylesheets/all.scss +1 -3
  12. data/vendor/assets/stylesheets/components/_all.scss +31 -29
  13. data/vendor/assets/stylesheets/components/accordion/_accordion.scss +2 -208
  14. data/vendor/assets/stylesheets/components/accordion/_index.scss +207 -0
  15. data/vendor/assets/stylesheets/components/back-link/_back-link.scss +2 -62
  16. data/vendor/assets/stylesheets/components/back-link/_index.scss +112 -0
  17. data/vendor/assets/stylesheets/components/breadcrumbs/_breadcrumbs.scss +2 -118
  18. data/vendor/assets/stylesheets/components/breadcrumbs/_index.scss +138 -0
  19. data/vendor/assets/stylesheets/components/button/_button.scss +2 -290
  20. data/vendor/assets/stylesheets/components/button/_index.scss +280 -0
  21. data/vendor/assets/stylesheets/components/character-count/_character-count.scss +2 -31
  22. data/vendor/assets/stylesheets/components/character-count/_index.scss +28 -0
  23. data/vendor/assets/stylesheets/components/checkboxes/_checkboxes.scss +2 -308
  24. data/vendor/assets/stylesheets/components/checkboxes/_index.scss +305 -0
  25. data/vendor/assets/stylesheets/components/date-input/_date-input.scss +2 -30
  26. data/vendor/assets/stylesheets/components/date-input/_index.scss +26 -0
  27. data/vendor/assets/stylesheets/components/details/_details.scss +2 -88
  28. data/vendor/assets/stylesheets/components/details/_index.scss +84 -0
  29. data/vendor/assets/stylesheets/components/error-message/_error-message.scss +2 -15
  30. data/vendor/assets/stylesheets/components/error-message/_index.scss +11 -0
  31. data/vendor/assets/stylesheets/components/error-summary/_error-summary.scss +2 -59
  32. data/vendor/assets/stylesheets/components/error-summary/_index.scss +55 -0
  33. data/vendor/assets/stylesheets/components/fieldset/_fieldset.scss +2 -68
  34. data/vendor/assets/stylesheets/components/fieldset/_index.scss +64 -0
  35. data/vendor/assets/stylesheets/components/file-upload/_file-upload.scss +2 -81
  36. data/vendor/assets/stylesheets/components/file-upload/_index.scss +50 -0
  37. data/vendor/assets/stylesheets/components/footer/_footer.scss +2 -269
  38. data/vendor/assets/stylesheets/components/footer/_index.scss +235 -0
  39. data/vendor/assets/stylesheets/components/header/_header.scss +2 -318
  40. data/vendor/assets/stylesheets/components/header/_index.scss +312 -0
  41. data/vendor/assets/stylesheets/components/hint/_hint.scss +2 -50
  42. data/vendor/assets/stylesheets/components/hint/_index.scss +46 -0
  43. data/vendor/assets/stylesheets/components/input/_index.scss +96 -0
  44. data/vendor/assets/stylesheets/components/input/_input.scss +2 -103
  45. data/vendor/assets/stylesheets/components/inset-text/_index.scss +24 -0
  46. data/vendor/assets/stylesheets/components/inset-text/_inset-text.scss +2 -28
  47. data/vendor/assets/stylesheets/components/label/_index.scss +41 -0
  48. data/vendor/assets/stylesheets/components/label/_label.scss +2 -45
  49. data/vendor/assets/stylesheets/components/panel/_index.scss +40 -0
  50. data/vendor/assets/stylesheets/components/panel/_panel.scss +2 -44
  51. data/vendor/assets/stylesheets/components/phase-banner/_index.scss +27 -0
  52. data/vendor/assets/stylesheets/components/phase-banner/_phase-banner.scss +2 -31
  53. data/vendor/assets/stylesheets/components/radios/_index.scss +342 -0
  54. data/vendor/assets/stylesheets/components/radios/_radios.scss +2 -346
  55. data/vendor/assets/stylesheets/components/select/_index.scss +50 -0
  56. data/vendor/assets/stylesheets/components/select/_select.scss +2 -57
  57. data/vendor/assets/stylesheets/components/skip-link/_index.scss +34 -0
  58. data/vendor/assets/stylesheets/components/skip-link/_skip-link.scss +2 -31
  59. data/vendor/assets/stylesheets/components/summary-list/_index.scss +153 -0
  60. data/vendor/assets/stylesheets/components/summary-list/_summary-list.scss +2 -157
  61. data/vendor/assets/stylesheets/components/table/_index.scss +50 -0
  62. data/vendor/assets/stylesheets/components/table/_table.scss +2 -54
  63. data/vendor/assets/stylesheets/components/tabs/_index.scss +138 -0
  64. data/vendor/assets/stylesheets/components/tabs/_tabs.scss +2 -142
  65. data/vendor/assets/stylesheets/components/tag/_index.scss +87 -0
  66. data/vendor/assets/stylesheets/components/tag/_tag.scss +2 -44
  67. data/vendor/assets/stylesheets/components/textarea/_index.scss +48 -0
  68. data/vendor/assets/stylesheets/components/textarea/_textarea.scss +2 -55
  69. data/vendor/assets/stylesheets/components/warning-text/_index.scss +58 -0
  70. data/vendor/assets/stylesheets/components/warning-text/_warning-text.scss +2 -60
  71. data/vendor/assets/stylesheets/core/_global-styles.scss +5 -3
  72. data/vendor/assets/stylesheets/core/_links.scss +5 -3
  73. data/vendor/assets/stylesheets/core/_lists.scss +17 -3
  74. data/vendor/assets/stylesheets/core/_section-break.scss +5 -3
  75. data/vendor/assets/stylesheets/core/_template.scss +5 -3
  76. data/vendor/assets/stylesheets/core/_typography.scss +5 -3
  77. data/vendor/assets/stylesheets/helpers/_clearfix.scss +1 -1
  78. data/vendor/assets/stylesheets/helpers/_colour.scss +1 -1
  79. data/vendor/assets/stylesheets/helpers/_focused.scss +1 -1
  80. data/vendor/assets/stylesheets/helpers/_grid.scss +2 -1
  81. data/vendor/assets/stylesheets/helpers/_links.scss +1 -1
  82. data/vendor/assets/stylesheets/helpers/_media-queries.scss +1 -1
  83. data/vendor/assets/stylesheets/helpers/_shape-arrow.scss +1 -1
  84. data/vendor/assets/stylesheets/helpers/_spacing.scss +5 -5
  85. data/vendor/assets/stylesheets/helpers/_typography.scss +6 -6
  86. data/vendor/assets/stylesheets/helpers/_visually-hidden.scss +30 -30
  87. data/vendor/assets/stylesheets/objects/_form-group.scss +1 -3
  88. data/vendor/assets/stylesheets/objects/_grid.scss +1 -3
  89. data/vendor/assets/stylesheets/objects/_main-wrapper.scss +5 -3
  90. data/vendor/assets/stylesheets/objects/_width-container.scss +34 -13
  91. data/vendor/assets/stylesheets/overrides/_display.scss +11 -3
  92. data/vendor/assets/stylesheets/overrides/_spacing.scss +5 -3
  93. data/vendor/assets/stylesheets/overrides/_typography.scss +5 -3
  94. data/vendor/assets/stylesheets/overrides/_width.scss +5 -3
  95. data/vendor/assets/stylesheets/settings/_colours-applied.scss +2 -2
  96. data/vendor/assets/stylesheets/settings/_colours-palette.scss +1 -1
  97. data/vendor/assets/stylesheets/settings/_ie8.scss +1 -1
  98. data/vendor/assets/stylesheets/settings/_measurements.scss +4 -1
  99. data/vendor/assets/stylesheets/tools/_compatibility.scss +1 -1
  100. data/vendor/assets/stylesheets/tools/_font-url.scss +1 -1
  101. data/vendor/assets/stylesheets/tools/_ie8.scss +1 -1
  102. data/vendor/assets/stylesheets/tools/_iff.scss +3 -1
  103. data/vendor/assets/stylesheets/tools/_image-url.scss +1 -1
  104. data/vendor/assets/stylesheets/tools/_px-to-em.scss +1 -1
  105. data/vendor/assets/stylesheets/tools/_px-to-rem.scss +1 -1
  106. metadata +36 -5
@@ -0,0 +1,3 @@
1
+ @import "settings/all";
2
+ @import "tools/all";
3
+ @import "helpers/all";
@@ -1,6 +1,4 @@
1
- @import "settings/all";
2
- @import "tools/all";
3
- @import "helpers/all";
1
+ @import "base";
4
2
 
5
3
  @import "core/all";
6
4
  @import "objects/all";
@@ -1,29 +1,31 @@
1
- @import "accordion/accordion";
2
- @import "back-link/back-link";
3
- @import "breadcrumbs/breadcrumbs";
4
- @import "button/button";
5
- @import "checkboxes/checkboxes";
6
- @import "character-count/character-count";
7
- @import "summary-list/summary-list";
8
- @import "date-input/date-input";
9
- @import "details/details";
10
- @import "error-message/error-message";
11
- @import "error-summary/error-summary";
12
- @import "fieldset/fieldset";
13
- @import "file-upload/file-upload";
14
- @import "footer/footer";
15
- @import "hint/hint";
16
- @import "header/header";
17
- @import "input/input";
18
- @import "inset-text/inset-text";
19
- @import "label/label";
20
- @import "panel/panel";
21
- @import "phase-banner/phase-banner";
22
- @import "tabs/tabs";
23
- @import "tag/tag";
24
- @import "radios/radios";
25
- @import "select/select";
26
- @import "skip-link/skip-link";
27
- @import "table/table";
28
- @import "textarea/textarea";
29
- @import "warning-text/warning-text";
1
+ @import "../base";
2
+
3
+ @import "accordion/index";
4
+ @import "back-link/index";
5
+ @import "breadcrumbs/index";
6
+ @import "button/index";
7
+ @import "checkboxes/index";
8
+ @import "character-count/index";
9
+ @import "summary-list/index";
10
+ @import "date-input/index";
11
+ @import "details/index";
12
+ @import "error-message/index";
13
+ @import "error-summary/index";
14
+ @import "fieldset/index";
15
+ @import "file-upload/index";
16
+ @import "footer/index";
17
+ @import "hint/index";
18
+ @import "header/index";
19
+ @import "input/index";
20
+ @import "inset-text/index";
21
+ @import "label/index";
22
+ @import "panel/index";
23
+ @import "phase-banner/index";
24
+ @import "tabs/index";
25
+ @import "tag/index";
26
+ @import "radios/index";
27
+ @import "select/index";
28
+ @import "skip-link/index";
29
+ @import "table/index";
30
+ @import "textarea/index";
31
+ @import "warning-text/index";
@@ -1,208 +1,2 @@
1
- @import "../../settings/all";
2
- @import "../../tools/all";
3
- @import "../../helpers/all";
4
-
5
-
6
- @include govuk-exports("govuk/component/accordion") {
7
-
8
- $govuk-accordion-link-colour: $govuk-link-colour;
9
- $govuk-accordion-link-hover-colour: govuk-colour("light-blue");
10
- $govuk-accordion-border-width: 3px;
11
-
12
- .govuk-accordion {
13
- @include govuk-responsive-margin(6, "bottom");
14
- }
15
-
16
- // Borders between accordion sections
17
- .govuk-accordion__section {
18
- padding-top: govuk-spacing(3);
19
- }
20
-
21
- .govuk-accordion__section-header {
22
- padding-top: govuk-spacing(3);
23
- padding-bottom: govuk-spacing(3);
24
- }
25
-
26
- .govuk-accordion__section-heading {
27
- margin-top: 0; // Override browser default
28
- margin-bottom: 0; // Override browser default
29
- }
30
-
31
- // Buttons within the sections don’t need default styling
32
- .govuk-accordion__section-button {
33
- @include govuk-font($size: 24, $weight: bold);
34
- display: inline-block;
35
- margin-bottom: 0;
36
- padding-top: govuk-spacing(3);
37
- }
38
-
39
- .govuk-accordion__section-summary {
40
- margin-top: govuk-spacing(2);
41
- margin-bottom: 0;
42
- }
43
-
44
- // Remove the bottom margin from the last item inside the content
45
- .govuk-accordion__section-content > :last-child {
46
- margin-bottom: 0;
47
- }
48
-
49
- // JavaScript enabled
50
- .js-enabled {
51
-
52
- .govuk-accordion {
53
- // Border at the bottom of the whole accordion
54
- border-bottom: 1px solid $govuk-border-colour;
55
- }
56
-
57
- // Borders between accordion sections
58
- .govuk-accordion__section {
59
- padding-top: 0;
60
- }
61
-
62
- // Hide the body of collapsed sections
63
- .govuk-accordion__section-content {
64
- display: none;
65
- @include govuk-responsive-padding(3, "top");
66
- @include govuk-responsive-padding(3, "bottom");
67
- }
68
-
69
- // Show the body of expanded sections
70
- .govuk-accordion__section--expanded .govuk-accordion__section-content {
71
- display: block;
72
- }
73
-
74
- // This is styled to look like a link not a button
75
- .govuk-accordion__open-all {
76
- @include govuk-font($size: 16);
77
- position: relative;
78
- z-index: 1;
79
- margin: 0;
80
- padding: 0;
81
- border-width: 0;
82
- color: $govuk-link-colour;
83
- background: none;
84
- cursor: pointer;
85
- -webkit-appearance: none;
86
-
87
- @include govuk-link-common;
88
- @include govuk-link-style-default;
89
-
90
- // Remove default button focus outline in Firefox
91
- &::-moz-focus-inner {
92
- padding: 0;
93
- border: 0;
94
- }
95
- }
96
-
97
- // Section headers have a pointer cursor as an additional affordance
98
- .govuk-accordion__section-header {
99
- position: relative;
100
- // Safe area on the right to avoid clashing with icon
101
- padding-right: 40px;
102
- border-top: 1px solid $govuk-border-colour;
103
- color: $govuk-accordion-link-colour;
104
- cursor: pointer;
105
- }
106
-
107
- // For devices that can't hover such as touch devices,
108
- // remove hover state as it can be stuck in that state (iOS).
109
- @media (hover: none) {
110
- .govuk-accordion__section-header:hover {
111
- border-top-color: $govuk-accordion-link-colour;
112
- box-shadow: inset 0 $govuk-accordion-border-width 0 0 $govuk-accordion-link-colour;
113
- }
114
- }
115
-
116
- // Buttons within the headers don’t need default styling
117
- .govuk-accordion__section-button {
118
- @include govuk-typography-common;
119
- margin-top: 0;
120
- margin-bottom: 0;
121
- margin-left: 0;
122
- padding: 0;
123
- border-width: 0;
124
- color: inherit;
125
- background: none;
126
- text-align: left;
127
- cursor: pointer;
128
- -webkit-appearance: none;
129
-
130
- &:focus {
131
- @include govuk-focused-text;
132
- }
133
-
134
- // Remove default button focus outline in Firefox
135
- &::-moz-focus-inner {
136
- padding: 0;
137
- border: 0;
138
- }
139
- }
140
-
141
- // Extend the touch area of the button to span the section header
142
- .govuk-accordion__section-button:after {
143
- content: "";
144
- position: absolute;
145
- top: 0;
146
- right: 0;
147
- bottom: 0;
148
- left: 0;
149
- }
150
-
151
- .govuk-accordion__section-button:hover:not(:focus) {
152
- text-decoration: underline;
153
- }
154
-
155
- // For devices that can't hover such as touch devices,
156
- // remove hover state as it can be stuck in that state (iOS).
157
- @media (hover: none) {
158
- .govuk-accordion__section-button:hover {
159
- text-decoration: none;
160
- }
161
- }
162
-
163
- .govuk-accordion__controls {
164
- text-align: right;
165
- }
166
-
167
- // Display an icon to the right of each header to indicate open/closed status,
168
- // and as an additional affordance.
169
- .govuk-accordion__icon {
170
- position: absolute;
171
- top: 50%;
172
- right: 15px;
173
- width: 16px;
174
- height: 16px;
175
- margin-top: -8px;
176
- }
177
-
178
- .govuk-accordion__icon:after,
179
- .govuk-accordion__icon:before {
180
- content: "";
181
- box-sizing: border-box;
182
- position: absolute;
183
- top: 0;
184
- right: 0;
185
- bottom: 0;
186
- left: 0;
187
- width: 25%;
188
- height: 25%;
189
- margin: auto;
190
- border: 2px solid transparent;
191
- background-color: govuk-colour("black");
192
- }
193
-
194
- .govuk-accordion__icon:before {
195
- width: 100%;
196
- }
197
-
198
- .govuk-accordion__icon:after {
199
- height: 100%;
200
- }
201
-
202
- // Vertical bar should be hidden when section is open, to display a '-' icon
203
- .govuk-accordion__section--expanded .govuk-accordion__icon:after {
204
- content: " ";
205
- display: none;
206
- }
207
- }
208
- }
1
+ @import "../../base";
2
+ @import "./index";
@@ -0,0 +1,207 @@
1
+ @include govuk-exports("govuk/component/accordion") {
2
+
3
+ $govuk-accordion-link-colour: $govuk-link-colour;
4
+ $govuk-accordion-link-hover-colour: govuk-colour("light-blue");
5
+ $govuk-accordion-border-width: 3px;
6
+
7
+ .govuk-accordion {
8
+ @include govuk-responsive-margin(6, "bottom");
9
+ }
10
+
11
+ // Borders between accordion sections
12
+ .govuk-accordion__section {
13
+ padding-top: govuk-spacing(3);
14
+ }
15
+
16
+ .govuk-accordion__section-header {
17
+ padding-top: govuk-spacing(3);
18
+ padding-bottom: govuk-spacing(3);
19
+ }
20
+
21
+ .govuk-accordion__section-heading {
22
+ // Override browser defaults to ensure consistent element height
23
+ // Font size is set in .govuk-accordion__section-button
24
+ @include govuk-font(24);
25
+
26
+ margin-top: 0; // Override browser default
27
+ margin-bottom: 0; // Override browser default
28
+ }
29
+
30
+ // Buttons within the sections don’t need default styling
31
+ .govuk-accordion__section-button {
32
+ @include govuk-font($size: 24, $weight: bold);
33
+ display: inline-block;
34
+ margin-bottom: 0;
35
+ padding-top: govuk-spacing(3);
36
+ }
37
+
38
+ .govuk-accordion__section-summary {
39
+ margin-top: govuk-spacing(2);
40
+ margin-bottom: 0;
41
+ }
42
+
43
+ // Remove the bottom margin from the last item inside the content
44
+ .govuk-accordion__section-content > :last-child {
45
+ margin-bottom: 0;
46
+ }
47
+
48
+ // JavaScript enabled
49
+ .js-enabled {
50
+
51
+ .govuk-accordion {
52
+ // Border at the bottom of the whole accordion
53
+ border-bottom: 1px solid $govuk-border-colour;
54
+ }
55
+
56
+ // Borders between accordion sections
57
+ .govuk-accordion__section {
58
+ padding-top: 0;
59
+ }
60
+
61
+ // Hide the body of collapsed sections
62
+ .govuk-accordion__section-content {
63
+ display: none;
64
+ @include govuk-responsive-padding(3, "top");
65
+ @include govuk-responsive-padding(3, "bottom");
66
+ }
67
+
68
+ // Show the body of expanded sections
69
+ .govuk-accordion__section--expanded .govuk-accordion__section-content {
70
+ display: block;
71
+ }
72
+
73
+ // This is styled to look like a link not a button
74
+ .govuk-accordion__open-all {
75
+ @include govuk-font($size: 16);
76
+ position: relative;
77
+ z-index: 1;
78
+ margin: 0;
79
+ padding: 0;
80
+ border-width: 0;
81
+ color: $govuk-link-colour;
82
+ background: none;
83
+ cursor: pointer;
84
+ -webkit-appearance: none;
85
+
86
+ @include govuk-link-common;
87
+ @include govuk-link-style-default;
88
+
89
+ // Remove default button focus outline in Firefox
90
+ &::-moz-focus-inner {
91
+ padding: 0;
92
+ border: 0;
93
+ }
94
+ }
95
+
96
+ // Section headers have a pointer cursor as an additional affordance
97
+ .govuk-accordion__section-header {
98
+ position: relative;
99
+ // Safe area on the right to avoid clashing with icon
100
+ padding-right: 40px;
101
+ border-top: 1px solid $govuk-border-colour;
102
+ color: $govuk-accordion-link-colour;
103
+ cursor: pointer;
104
+ }
105
+
106
+ // For devices that can't hover such as touch devices,
107
+ // remove hover state as it can be stuck in that state (iOS).
108
+ @media (hover: none) {
109
+ .govuk-accordion__section-header:hover {
110
+ border-top-color: $govuk-accordion-link-colour;
111
+ box-shadow: inset 0 $govuk-accordion-border-width 0 0 $govuk-accordion-link-colour;
112
+ }
113
+ }
114
+
115
+ // Buttons within the headers don’t need default styling
116
+ .govuk-accordion__section-button {
117
+ @include govuk-typography-common;
118
+ margin-top: 0;
119
+ margin-bottom: 0;
120
+ margin-left: 0;
121
+ padding: 0;
122
+ border-width: 0;
123
+ color: inherit;
124
+ background: none;
125
+ text-align: left;
126
+ cursor: pointer;
127
+ -webkit-appearance: none;
128
+
129
+ &:focus {
130
+ @include govuk-focused-text;
131
+ }
132
+
133
+ // Remove default button focus outline in Firefox
134
+ &::-moz-focus-inner {
135
+ padding: 0;
136
+ border: 0;
137
+ }
138
+ }
139
+
140
+ // Extend the touch area of the button to span the section header
141
+ .govuk-accordion__section-button:after {
142
+ content: "";
143
+ position: absolute;
144
+ top: 0;
145
+ right: 0;
146
+ bottom: 0;
147
+ left: 0;
148
+ }
149
+
150
+ .govuk-accordion__section-button:hover:not(:focus) {
151
+ text-decoration: underline;
152
+ }
153
+
154
+ // For devices that can't hover such as touch devices,
155
+ // remove hover state as it can be stuck in that state (iOS).
156
+ @media (hover: none) {
157
+ .govuk-accordion__section-button:hover {
158
+ text-decoration: none;
159
+ }
160
+ }
161
+
162
+ .govuk-accordion__controls {
163
+ text-align: right;
164
+ }
165
+
166
+ // Display an icon to the right of each header to indicate open/closed status,
167
+ // and as an additional affordance.
168
+ .govuk-accordion__icon {
169
+ position: absolute;
170
+ top: 50%;
171
+ right: 15px;
172
+ width: 16px;
173
+ height: 16px;
174
+ margin-top: -8px;
175
+ }
176
+
177
+ .govuk-accordion__icon:after,
178
+ .govuk-accordion__icon:before {
179
+ content: "";
180
+ box-sizing: border-box;
181
+ position: absolute;
182
+ top: 0;
183
+ right: 0;
184
+ bottom: 0;
185
+ left: 0;
186
+ width: 25%;
187
+ height: 25%;
188
+ margin: auto;
189
+ border: 2px solid transparent;
190
+ background-color: govuk-colour("black");
191
+ }
192
+
193
+ .govuk-accordion__icon:before {
194
+ width: 100%;
195
+ }
196
+
197
+ .govuk-accordion__icon:after {
198
+ height: 100%;
199
+ }
200
+
201
+ // Vertical bar should be hidden when section is open, to display a '-' icon
202
+ .govuk-accordion__section--expanded .govuk-accordion__icon:after {
203
+ content: " ";
204
+ display: none;
205
+ }
206
+ }
207
+ }