govuk_elements_rails 0.3.0 → 1.1.2

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 (68) hide show
  1. checksums.yaml +4 -4
  2. data/LICENSE +19 -0
  3. data/README.md +165 -46
  4. data/lib/govuk_elements_rails.rb +0 -1
  5. data/lib/govuk_elements_rails/engine.rb +0 -10
  6. data/vendor/assets/javascripts/details.polyfill.js +29 -43
  7. data/vendor/assets/stylesheets/_govuk-elements.scss +54 -0
  8. data/vendor/assets/stylesheets/elements/_base.scss +126 -0
  9. data/vendor/assets/stylesheets/elements/_breadcrumbs.scss +6 -0
  10. data/vendor/assets/stylesheets/elements/_buttons.scss +5 -5
  11. data/vendor/assets/stylesheets/elements/_components.scss +9 -0
  12. data/vendor/assets/stylesheets/elements/_details.scss +3 -9
  13. data/vendor/assets/stylesheets/elements/_elements-typography.scss +102 -9
  14. data/vendor/assets/stylesheets/elements/_forms.scss +84 -61
  15. data/vendor/assets/stylesheets/elements/_helpers.scss +6 -12
  16. data/vendor/assets/stylesheets/elements/_icons.scss +63 -207
  17. data/vendor/assets/stylesheets/elements/_layout.scss +9 -22
  18. data/vendor/assets/stylesheets/elements/_lists.scss +10 -13
  19. data/vendor/assets/stylesheets/elements/_panels.scss +24 -17
  20. data/vendor/assets/stylesheets/elements/_phase-banner.scss +10 -0
  21. data/vendor/assets/stylesheets/elements/_tables.scss +1 -5
  22. data/vendor/assets/stylesheets/elements/forms/_form-block-labels.scss +8 -7
  23. data/vendor/assets/stylesheets/elements/forms/_form-validation.scss +0 -3
  24. metadata +33 -49
  25. data/LICENCE +0 -20
  26. data/app/builders/govuk_elements_form_builder.rb +0 -77
  27. data/app/builders/labelling_form_builder.rb +0 -316
  28. data/lib/govuk_elements_rails/version.rb +0 -5
  29. data/vendor/assets/images/icons/accordian-arrow-2x.png +0 -0
  30. data/vendor/assets/images/icons/accordian-arrow.png +0 -0
  31. data/vendor/assets/images/icons/arrow-sprite.png +0 -0
  32. data/vendor/assets/images/icons/icon-calendar-2x.png +0 -0
  33. data/vendor/assets/images/icons/icon-calendar.png +0 -0
  34. data/vendor/assets/images/icons/icon-file-download-2x.png +0 -0
  35. data/vendor/assets/images/icons/icon-file-download.png +0 -0
  36. data/vendor/assets/images/icons/icon-important-2x.png +0 -0
  37. data/vendor/assets/images/icons/icon-important.png +0 -0
  38. data/vendor/assets/images/icons/icon-information-2x.png +0 -0
  39. data/vendor/assets/images/icons/icon-information.png +0 -0
  40. data/vendor/assets/images/icons/icon-locator-2x.png +0 -0
  41. data/vendor/assets/images/icons/icon-locator.png +0 -0
  42. data/vendor/assets/images/icons/icon-pointer-2x.png +0 -0
  43. data/vendor/assets/images/icons/icon-pointer-black-2x.png +0 -0
  44. data/vendor/assets/images/icons/icon-pointer-black.png +0 -0
  45. data/vendor/assets/images/icons/icon-pointer-indexed.png +0 -0
  46. data/vendor/assets/images/icons/icon-pointer.png +0 -0
  47. data/vendor/assets/images/icons/icon-search-2x.png +0 -0
  48. data/vendor/assets/images/icons/icon-search.png +0 -0
  49. data/vendor/assets/images/icons/player-icon-forward.png +0 -0
  50. data/vendor/assets/images/icons/player-icon-pause.png +0 -0
  51. data/vendor/assets/images/icons/player-icon-play.png +0 -0
  52. data/vendor/assets/images/icons/player-icon-rewind.png +0 -0
  53. data/vendor/assets/images/icons/player-icon-volume.png +0 -0
  54. data/vendor/assets/javascripts/application.js +0 -157
  55. data/vendor/assets/javascripts/bind.js +0 -40
  56. data/vendor/assets/javascripts/selection-buttons.js +0 -111
  57. data/vendor/assets/stylesheets/elements-page-ie6.scss +0 -5
  58. data/vendor/assets/stylesheets/elements-page-ie7.scss +0 -4
  59. data/vendor/assets/stylesheets/elements-page-ie8.scss +0 -4
  60. data/vendor/assets/stylesheets/elements-page.scss +0 -386
  61. data/vendor/assets/stylesheets/main-ie6.scss +0 -5
  62. data/vendor/assets/stylesheets/main-ie7.scss +0 -4
  63. data/vendor/assets/stylesheets/main-ie8.scss +0 -4
  64. data/vendor/assets/stylesheets/main.scss +0 -36
  65. data/vendor/assets/stylesheets/prism.scss +0 -144
  66. data/vendor/assets/stylesheets/service-design-manual/helpers/_breadcrumbs.scss +0 -81
  67. data/vendor/assets/stylesheets/service-design-manual/helpers/_page-header.scss +0 -28
  68. data/vendor/assets/stylesheets/service-design-manual/styleguide/_colours.scss +0 -3
@@ -0,0 +1,126 @@
1
+ html, body, button, input, table, td, th { font-family: $NTA-Light; }
2
+
3
+ // basic styles for HTML5 and other elements
4
+ html, body, div, h1, h2, h3, h4, h5, h6, article, aside, footer, header, hgroup, nav, section {
5
+ margin: 0;
6
+ padding: 0;
7
+ vertical-align: baseline;
8
+ }
9
+
10
+ // HTML5 display definition
11
+ main {
12
+ display: block;
13
+ }
14
+
15
+ // 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
16
+ // http://clagnut.com/blog/348/#c790
17
+ // note - font-size reduced to 62.5% to allow simple rem/px font-sizing and fallback
18
+ // http://snook.ca/archives/html_and_css/font-size-with-rem
19
+ // 2. Keeps page centred in all browsers regardless of content height
20
+ // 3. Removes Android and iOS tap highlight color to prevent entire container being highlighted
21
+ // www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/
22
+ // 4. Prevents iOS text size adjust after orientation change, without disabling user zoom.
23
+
24
+ html {
25
+ font-size: 62.5%; // 1
26
+ overflow-y: scroll; // 2
27
+ -webkit-tap-highlight-color: rgba(0,0,0,0); // 3
28
+ -webkit-text-size-adjust: 100%; // 4
29
+ -ms-text-size-adjust: 100%; // 4
30
+ // Set background colour to match footer background
31
+ background-color: $grey-8;
32
+ // Force the scrollbar to always display in IE10/11
33
+ -ms-overflow-style: scrollbar;
34
+ }
35
+
36
+ // 1. Font-size increased to compensate for change to html element font-size in
37
+ // order to support beta typography which was set in ems
38
+ // (62.5% * 160% = 100%)
39
+ // 2. Addresses margins handled incorrectly in IE6/7
40
+
41
+ body {
42
+ font-size: 160%; // 1
43
+ margin: 0; // 2
44
+ background: $white;
45
+ color: $text-colour;
46
+ line-height: 1.5;
47
+ font-weight: 400;
48
+ -webkit-font-smoothing: antialiased;
49
+ -moz-osx-font-smoothing: grayscale;
50
+ }
51
+
52
+ ol, ul, nav ol, nav ul {
53
+ list-style: inherit;
54
+ }
55
+
56
+ fieldset {
57
+ border: none;
58
+ padding: 0;
59
+ }
60
+
61
+ b,
62
+ strong {
63
+ font-weight: 600;
64
+ }
65
+
66
+ img {
67
+ border: 0;
68
+ }
69
+
70
+ @include ie-lte(7) {
71
+ button {
72
+ overflow:visible;
73
+ }
74
+ }
75
+
76
+ abbr[title] {
77
+ cursor: help;
78
+ }
79
+
80
+ // Set focus styles
81
+ a {
82
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);
83
+ }
84
+
85
+ a:focus {
86
+ background-color: $focus-colour;
87
+ outline: 3px solid $focus-colour;
88
+ }
89
+
90
+ input:focus,
91
+ textarea:focus,
92
+ select:focus,
93
+ button:focus {
94
+ outline: 3px solid $focus-colour;
95
+ }
96
+
97
+ // Link styles
98
+ a:link {
99
+ color: $link-colour;
100
+ }
101
+
102
+ a:visited {
103
+ color: $link-visited-colour;
104
+ }
105
+
106
+ a:hover {
107
+ color: $link-hover-colour;
108
+ }
109
+
110
+ a:active {
111
+ color: $link-active-colour;
112
+ }
113
+
114
+ // External link styles
115
+ a[rel="external"] {
116
+ @include external-link-default;
117
+ @include external-link-19;
118
+ @include media-down(mobile) {
119
+ @include external-link-16;
120
+ }
121
+ }
122
+
123
+ .external-link {
124
+ @include external-link-12-no-hover;
125
+ @include external-link-heading;
126
+ }
@@ -0,0 +1,6 @@
1
+ // Breadcrumbs
2
+ // ==========================================================================
3
+
4
+ .breadcrumbs {
5
+ @include breadcrumbs;
6
+ }
@@ -1,15 +1,14 @@
1
1
  // Buttons
2
2
  // ==========================================================================
3
- // GOV.UK front end toolkit dependencies
4
- @import "design-patterns/buttons";
5
- @import "measurements";
6
- @import "typography";
7
3
 
8
4
  .button {
9
5
  @include button ($button-colour);
10
- margin: 0 $gutter-half $gutter-half 0;
6
+ @include box-sizing (border-box);
11
7
  padding: em(10) em(15) em(5) em(15);
12
8
  vertical-align: top;
9
+ @include media (mobile) {
10
+ width: 100%;
11
+ }
13
12
  }
14
13
 
15
14
  // Fix unwanted button padding in Firefox
@@ -32,6 +31,7 @@
32
31
  }
33
32
 
34
33
  // Start now buttons
34
+ .button-start,
35
35
  .button-get-started {
36
36
  @include bold-24;
37
37
  background-image: file-url("icons/icon-pointer.png");
@@ -0,0 +1,9 @@
1
+ // Box with turquoise background and white text
2
+ // Used for transaction end pages, and Bank Holidays
3
+ .govuk-box-highlight {
4
+ margin: 1em 0 1em 0;
5
+ padding: 2em 0 1em 0;
6
+ color: $white;
7
+ background: $turquoise;
8
+ text-align: center;
9
+ }
@@ -1,7 +1,5 @@
1
1
  // Details
2
2
  // ==========================================================================
3
- // GOV.UK front end toolkit dependencies
4
- @import "colours";
5
3
 
6
4
  details {
7
5
  display: block;
@@ -21,20 +19,16 @@ details {
21
19
  outline: 3px solid $focus-colour;
22
20
  }
23
21
  }
24
-
22
+
25
23
  // Underline only summary text (not the arrow)
26
24
  .summary {
27
25
  text-decoration: underline;
28
26
  }
29
-
27
+
30
28
  // Match fallback arrow spacing with -webkit default
31
29
  .arrow {
32
30
  margin-right: .35em;
33
31
  font-style: normal;
34
32
  }
35
-
36
- // Remove top margin from bordered panel
37
- .panel-indent {
38
- margin-top: 0;
39
- }
33
+
40
34
  }
@@ -1,10 +1,6 @@
1
1
  // Typography
2
2
  // ==========================================================================
3
3
 
4
- // GOV.UK front end toolkit dependencies
5
- @import "typography";
6
- @import "colours";
7
-
8
4
  // Increase the base font size to 19px for the main content area
9
5
  // Using the core-19 mixin from the govuk_toolkit _typography.scss file
10
6
 
@@ -178,15 +174,112 @@ p {
178
174
  color: $link-colour;
179
175
  }
180
176
 
177
+ // Back link styles - with left pointing arrow
178
+
179
+ .link-back {
180
+ @include inline-block;
181
+ position: relative;
182
+
183
+ @include core-16;
184
+
185
+ margin-top: $gutter-half;
186
+ margin-bottom: $gutter-half;
187
+ padding-left: 14px;
188
+
189
+ color: $black;
190
+
191
+ &:link,
192
+ &:visited,
193
+ &:hover,
194
+ &:active {
195
+ color: $black;
196
+ }
197
+
198
+ text-decoration: none;
199
+ border-bottom: 1px solid $black;
200
+
201
+ // Back arrow - left pointing black arrow
202
+ &::before {
203
+ content: '';
204
+ display: block;
205
+ width: 0;
206
+ height: 0;
207
+
208
+ border-top: 5px solid transparent;
209
+ border-right: 6px solid #0b0c0c;
210
+ border-bottom: 5px solid transparent;
211
+
212
+ position: absolute;
213
+ left: 0;
214
+ top: 50%;
215
+ margin-top: -6px;
216
+ }
217
+
218
+ // Fallback
219
+ // IE8 doesn't support rgba and only supports the single colon syntax for :before
220
+ // IE7 doesn't support pseudo-elements, let's fallback to an image instead.
221
+ // Ref: http://caniuse.com/#search=%3Abefore, http://caniuse.com/#search=rgba
222
+ @include ie-lte(8) {
223
+ background: file-url("icon-arrow-left.png") no-repeat 0 4px;
224
+ }
225
+
226
+ }
227
+
181
228
  // Code styles
182
- pre,
183
- code {
184
- font-size: 13px;
185
- line-height: 19px;
229
+ .code {
230
+ color: black;
231
+ text-shadow: 0 1px white;
232
+ font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
233
+ font-size: 14px;
234
+ direction: ltr;
235
+ text-align: left;
236
+ white-space: pre;
237
+ word-spacing: normal;
238
+ word-break: normal;
239
+ line-height: 1.5;
240
+
241
+ -moz-tab-size: 4;
242
+ -o-tab-size: 4;
243
+ tab-size: 4;
244
+
245
+ -webkit-hyphens: none;
246
+ -moz-hyphens: none;
247
+ -ms-hyphens: none;
248
+ hyphens: none;
249
+
186
250
  color: $black;
187
251
  background-color: $highlight-colour;
188
252
  border: 1px solid $border-colour;
189
- padding: 3px 7px;
253
+ padding: 4px 4px 2px 4px;
190
254
  }
191
255
 
256
+ // Horizontal rule style
257
+ hr {
258
+ display: block;
259
+ background: $border-colour;
260
+ border: 0;
261
+ height: 1px;
262
+ margin-top: $gutter;
263
+ margin-bottom: $gutter;
264
+ padding: 0;
265
+ @include ie-lte(7) {
266
+ color: $border-colour;
267
+ }
268
+ }
192
269
 
270
+ // Notice, text with an icon to the left
271
+ .notice {
272
+ @extend %contain-floats;
273
+ position: relative;
274
+ .icon {
275
+ position: absolute;
276
+ left: 0;
277
+ top: 50%;
278
+ margin-top: -17px; // Half the height of the important icon
279
+ }
280
+ strong {
281
+ display: block;
282
+ padding-left: (35 + 30)+px;
283
+ margin-left: -$gutter-half;
284
+ }
285
+ }
@@ -1,8 +1,17 @@
1
1
  // Forms
2
2
  // ==========================================================================
3
- // GOV.UK front end toolkit dependencies
4
- @import "helpers";
5
- @import "colours";
3
+
4
+ // Contents:
5
+ //
6
+ // 1. Helpers
7
+ // 2. Form wrappers
8
+ // 3. Form labels
9
+ // 4. Form hints
10
+ // 5. Form controls
11
+ // 6. Form control widths
12
+
13
+ // 1. Helpers
14
+ // ==========================================================================
6
15
 
7
16
  // Fieldset is used to group more than one .form-group
8
17
  fieldset {
@@ -17,12 +26,23 @@ fieldset {
17
26
  }
18
27
  }
19
28
 
29
+ // Remove margin under textarea in Chrome and FF
30
+ textarea{
31
+ display: block;
32
+ }
33
+
34
+
35
+ // 2. Form wrappers
36
+ // ==========================================================================
37
+
20
38
  // Form group is used to wrap label and input pairs
21
39
  .form-group {
22
40
  @extend %contain-floats;
23
41
  @include box-sizing(border-box);
42
+
24
43
  float: left;
25
44
  width: 100%;
45
+
26
46
  margin-bottom: $gutter-half;
27
47
 
28
48
  @include media(tablet) {
@@ -30,6 +50,7 @@ fieldset {
30
50
  }
31
51
  }
32
52
 
53
+ // Form group related is used to reduce the space between label and input pairs
33
54
  .form-group-related {
34
55
  margin-bottom: 10px;
35
56
 
@@ -44,19 +65,11 @@ fieldset {
44
65
  }
45
66
 
46
67
 
47
- // Form title
48
- .form-title {
49
- margin-bottom: $gutter;
50
-
51
- @include media(tablet) {
52
- margin-bottom: ($gutter*1.5);
53
- }
54
- }
55
-
56
-
57
- // Labels
68
+ // 3. Form labels
69
+ // ==========================================================================
58
70
 
59
71
  // Form labels, or for legends styled to look like labels
72
+ // TODO: Amend so there is only one label style
60
73
  .form-label,
61
74
  .form-label-bold {
62
75
  display: block;
@@ -80,6 +93,7 @@ legend {
80
93
  }
81
94
 
82
95
  // Remove spacing when error messages are shown
96
+ // TODO: Move into /forms/_form-validation.scss
83
97
  .error legend {
84
98
  .form-label,
85
99
  .form-label-bold {
@@ -87,23 +101,25 @@ legend {
87
101
  }
88
102
  }
89
103
 
90
- // Used for paragraphs in-between form elements
104
+ // Used for the 'or' in between block label options
91
105
  .form-block {
92
106
  @extend %contain-floats;
93
107
  float: left;
94
108
  width: 100%;
95
109
 
110
+ margin-top: -5px;
96
111
  margin-bottom: 5px;
97
112
 
98
113
  @include media(tablet) {
99
- margin-top: 10px;
114
+ margin-top: 0;
115
+ margin-bottom: 10px;
100
116
  }
101
117
  }
102
118
 
119
+ // 4. Form hints
120
+ // ==========================================================================
103
121
 
104
- // Hints
105
-
106
- // Form hints & examples are light grey and sit above a form control
122
+ // Form hints and example text are light grey and sit above a form control
107
123
  .form-hint {
108
124
  @include core-19;
109
125
  display: block;
@@ -112,7 +128,9 @@ legend {
112
128
  margin-bottom: 5px;
113
129
  }
114
130
 
115
- // Form controls
131
+
132
+ // 5. Form controls
133
+ // ==========================================================================
116
134
 
117
135
  // By default, form controls are 50% width for desktop,
118
136
  // and 100% width for mobile
@@ -123,44 +141,16 @@ legend {
123
141
 
124
142
  padding: 4px;
125
143
  background-color: $white;
126
- border: 1px solid $border-colour;
127
-
128
- // Disable webkit appearance and remove rounded corners
129
- -webkit-appearance: none;
130
- border-radius: 0;
144
+ border: 2px solid $grey-1;
131
145
 
146
+ // TODO: Remove 50% width set for tablet and up
147
+ // !! BREAKING CHANGE !!
132
148
  @include media(tablet) {
133
149
  width: 50%;
134
150
  }
135
- }
136
151
 
137
-
138
- // Form control widths
139
- .form-control-3-4 {
140
- width: 100%;
141
-
142
- @include media(tablet) {
143
- width: 75%;
144
- }
145
152
  }
146
153
 
147
- .form-control-1-2 {
148
- width: 100%;
149
-
150
- @include media(tablet) {
151
- width: 50%;
152
- }
153
- }
154
-
155
- .form-control-1-4 {
156
- width: 25%;
157
- }
158
-
159
- .form-control-1-8 {
160
- width: 12.5%;
161
- }
162
-
163
-
164
154
  // Radio buttons
165
155
  .form-radio {
166
156
  display: block;
@@ -172,7 +162,6 @@ legend {
172
162
  }
173
163
  }
174
164
 
175
-
176
165
  // Checkboxes
177
166
  .form-checkbox {
178
167
  display: block;
@@ -185,18 +174,52 @@ legend {
185
174
  }
186
175
 
187
176
 
188
- // Buttons
189
- .form .button {
190
- @include media(mobile) {
191
- width: 100%;
177
+ // 6. Form control widths
178
+ // ==========================================================================
179
+
180
+ // TODO: Update these
181
+ // Form control widths
182
+
183
+ .form-control-3-4 {
184
+ width: 100%;
185
+
186
+ @include media(tablet) {
187
+ width: 75%;
192
188
  }
193
189
  }
194
190
 
191
+ .form-control-2-3 {
192
+ width: 100%;
193
+ @include media(tablet) {
194
+ width: 66.66%;
195
+ }
196
+ }
195
197
 
196
- // Form validation
197
- @import "forms/form-validation";
198
+ .form-control-1-2 {
199
+ width: 100%;
198
200
 
201
+ @include media(tablet) {
202
+ width: 50%;
203
+ }
204
+ }
205
+
206
+ .form-control-1-3 {
207
+ width: 100%;
208
+ @include media(tablet) {
209
+ width: 33.33%;
210
+ }
211
+ }
212
+
213
+ .form-control-1-4 {
214
+ width: 100%;
215
+ @include media(tablet) {
216
+ width: 25%;
217
+ }
218
+ }
199
219
 
200
- // Form patterns
201
- @import "forms/form-date";
202
- @import "forms/form-block-labels";
220
+ .form-control-1-8 {
221
+ width: 100%;
222
+ @include media(tablet) {
223
+ width: 12.5%;
224
+ }
225
+ }