govuk_elements_rails 0.2.2 → 0.3.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +18 -0
- data/lib/govuk_elements_rails/version.rb +1 -1
- data/vendor/assets/javascripts/application.js +23 -0
- data/vendor/assets/javascripts/details.polyfill.js +7 -4
- data/vendor/assets/stylesheets/elements-page.scss +12 -4
- data/vendor/assets/stylesheets/elements/_buttons.scss +1 -1
- data/vendor/assets/stylesheets/elements/_details.scss +29 -29
- data/vendor/assets/stylesheets/elements/_elements-typography.scss +15 -2
- data/vendor/assets/stylesheets/elements/_forms.scss +54 -22
- data/vendor/assets/stylesheets/elements/_helpers.scss +14 -3
- data/vendor/assets/stylesheets/elements/_icons.scss +67 -45
- data/vendor/assets/stylesheets/elements/_layout.scss +9 -5
- data/vendor/assets/stylesheets/elements/_lists.scss +1 -0
- data/vendor/assets/stylesheets/elements/_panels.scss +13 -13
- data/vendor/assets/stylesheets/elements/_tables.scss +20 -21
- data/vendor/assets/stylesheets/elements/forms/_form-block-labels.scss +7 -5
- data/vendor/assets/stylesheets/elements/forms/_form-date.scss +3 -4
- data/vendor/assets/stylesheets/elements/forms/_form-validation.scss +85 -46
- metadata +4 -4
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: ed73a5758d285ea9ec1e7a0421286d74ea2792f5
|
4
|
+
data.tar.gz: 1e3187d96b39928a349a22b1d7016f5b938e78f4
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 201e1254abc711464992b54cd023d15bda0d5b3fc9ed58326493b4c18a0eeb0348be80a8744eba1e42cf993d58c948bd9ba9e162f113bd9ced2a925cb7ea021b
|
7
|
+
data.tar.gz: 95ce6ed1575e03f5d78a9ed37a07f51a4e754448d38c0afa7412f657e204df83fd073f303abcf5168bc8e0577f3ff09c4f5266e5bc444382311592ffb72fc740
|
data/README.md
CHANGED
@@ -28,6 +28,24 @@ To add a javascript file to gem, create new symlink to govuk_elements file like
|
|
28
28
|
ln -s ../../../govuk_elements/public/javascripts/application.js
|
29
29
|
ls -l
|
30
30
|
|
31
|
+
To update govuk_elements to last master commit:
|
32
|
+
|
33
|
+
cd govuk_elements
|
34
|
+
git checkout master
|
35
|
+
git pull
|
36
|
+
cd ..
|
37
|
+
git commit -am "Update govuk_elements to last master commit."
|
38
|
+
|
39
|
+
To update version number, edit version.rb, and repackage:
|
40
|
+
|
41
|
+
vi lib/govuk_elements_rails/version.rb
|
42
|
+
rake clean
|
43
|
+
rake package
|
44
|
+
|
45
|
+
To tag and publish the gem to rubygems.org:
|
46
|
+
|
47
|
+
rake publish
|
48
|
+
|
31
49
|
## Usage
|
32
50
|
|
33
51
|
At the top of a Sass file in your Rails project you should use an `@import` rule
|
@@ -132,3 +132,26 @@ $(document).ready(function() {
|
|
132
132
|
toggleContent.showHideCheckboxToggledContent();
|
133
133
|
|
134
134
|
});
|
135
|
+
|
136
|
+
$(window).load(function() {
|
137
|
+
|
138
|
+
// Only set focus for the error example pages
|
139
|
+
if ($(".js-error-example").length) {
|
140
|
+
|
141
|
+
// If there is an error summary, set focus to the summary
|
142
|
+
if ($(".error-summary").length) {
|
143
|
+
$(".error-summary").focus();
|
144
|
+
$(".error-summary a").click(function(e) {
|
145
|
+
e.preventDefault();
|
146
|
+
var href = $(this).attr("href");
|
147
|
+
$(href).focus();
|
148
|
+
});
|
149
|
+
}
|
150
|
+
// Otherwise, set focus to the field with the error
|
151
|
+
else {
|
152
|
+
$(".error input:first").focus();
|
153
|
+
}
|
154
|
+
}
|
155
|
+
|
156
|
+
});
|
157
|
+
|
@@ -26,11 +26,14 @@
|
|
26
26
|
function addClickEvent(node, callback) {
|
27
27
|
// Prevent space(32) from scrolling the page
|
28
28
|
addEvent(node, 'keypress', function (e, target) {
|
29
|
-
if (
|
30
|
-
if (e.
|
31
|
-
e.preventDefault
|
29
|
+
if (target.nodeName === "SUMMARY") {
|
30
|
+
if (e.keyCode === 32) {
|
31
|
+
if (e.preventDefault) {
|
32
|
+
e.preventDefault();
|
33
|
+
} else {
|
34
|
+
e.returnValue = false;
|
35
|
+
}
|
32
36
|
}
|
33
|
-
else { e.returnValue = false; }
|
34
37
|
}
|
35
38
|
});
|
36
39
|
// When the key comes up - check if it is enter(13) or space(32)
|
@@ -31,7 +31,7 @@
|
|
31
31
|
// Elements page styles
|
32
32
|
// ==========================================================================
|
33
33
|
|
34
|
-
// These are example styles, used only for the Elements page
|
34
|
+
// These are example styles, used only for the Elements index page
|
35
35
|
|
36
36
|
// Headings
|
37
37
|
// Used with heading-large = 36px
|
@@ -40,8 +40,8 @@
|
|
40
40
|
padding-top: em(45, 36);
|
41
41
|
}
|
42
42
|
|
43
|
-
//
|
44
|
-
.
|
43
|
+
// Use for paragraphs before lists
|
44
|
+
.lead-in {
|
45
45
|
margin-bottom: 0;
|
46
46
|
}
|
47
47
|
|
@@ -207,12 +207,20 @@ $palette: (
|
|
207
207
|
background-color: $beta-colour;
|
208
208
|
}
|
209
209
|
|
210
|
+
.swatch-discovery {
|
211
|
+
background-color: $discovery-colour;
|
212
|
+
}
|
213
|
+
|
214
|
+
.swatch-live {
|
215
|
+
background-color: $live-colour;
|
216
|
+
}
|
217
|
+
|
210
218
|
.swatch-error {
|
211
219
|
background-color: $error-colour;
|
212
220
|
}
|
213
221
|
|
214
222
|
.swatch-focus {
|
215
|
-
background-color: $
|
223
|
+
background-color: $focus-colour;
|
216
224
|
}
|
217
225
|
|
218
226
|
.swatch-button-colour {
|
@@ -5,36 +5,36 @@
|
|
5
5
|
|
6
6
|
details {
|
7
7
|
display: block;
|
8
|
-
}
|
9
8
|
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
}
|
9
|
+
summary {
|
10
|
+
display: inline-block;
|
11
|
+
color: $govuk-blue;
|
12
|
+
cursor: pointer;
|
13
|
+
position: relative;
|
14
|
+
margin-bottom: em(5);
|
17
15
|
|
18
|
-
|
19
|
-
|
20
|
-
}
|
21
|
-
|
22
|
-
details summary:focus {
|
23
|
-
outline: 3px solid $yellow;
|
24
|
-
}
|
25
|
-
|
26
|
-
// Underline only summary text (not the arrow)
|
27
|
-
details .summary {
|
28
|
-
text-decoration: underline;
|
29
|
-
}
|
30
|
-
|
31
|
-
// Match fallback arrow spacing with -webkit default
|
32
|
-
details .arrow {
|
33
|
-
margin-right: 0.35em;
|
34
|
-
font-style: normal;
|
35
|
-
}
|
16
|
+
&:hover {
|
17
|
+
color: $link-hover-colour;
|
18
|
+
}
|
36
19
|
|
37
|
-
|
38
|
-
|
39
|
-
|
20
|
+
&:focus {
|
21
|
+
outline: 3px solid $focus-colour;
|
22
|
+
}
|
23
|
+
}
|
24
|
+
|
25
|
+
// Underline only summary text (not the arrow)
|
26
|
+
.summary {
|
27
|
+
text-decoration: underline;
|
28
|
+
}
|
29
|
+
|
30
|
+
// Match fallback arrow spacing with -webkit default
|
31
|
+
.arrow {
|
32
|
+
margin-right: .35em;
|
33
|
+
font-style: normal;
|
34
|
+
}
|
35
|
+
|
36
|
+
// Remove top margin from bordered panel
|
37
|
+
.panel-indent {
|
38
|
+
margin-top: 0;
|
39
|
+
}
|
40
40
|
}
|
@@ -17,18 +17,23 @@ main {
|
|
17
17
|
.font-xxlarge {
|
18
18
|
@include core-80;
|
19
19
|
}
|
20
|
+
|
20
21
|
.font-xlarge {
|
21
22
|
@include core-48;
|
22
23
|
}
|
24
|
+
|
23
25
|
.font-large {
|
24
26
|
@include core-36;
|
25
27
|
}
|
28
|
+
|
26
29
|
.font-medium {
|
27
30
|
@include core-24;
|
28
31
|
}
|
32
|
+
|
29
33
|
.font-small {
|
30
34
|
@include core-19;
|
31
35
|
}
|
36
|
+
|
32
37
|
.font-xsmall {
|
33
38
|
@include core-16;
|
34
39
|
}
|
@@ -37,18 +42,23 @@ main {
|
|
37
42
|
.bold-xxlarge {
|
38
43
|
@include bold-80();
|
39
44
|
}
|
45
|
+
|
40
46
|
.bold-xlarge {
|
41
47
|
@include bold-48();
|
42
48
|
}
|
49
|
+
|
43
50
|
.bold-large {
|
44
51
|
@include bold-36();
|
45
52
|
}
|
53
|
+
|
46
54
|
.bold-medium {
|
47
55
|
@include bold-24();
|
48
56
|
}
|
57
|
+
|
49
58
|
.bold-small {
|
50
59
|
@include bold-19();
|
51
60
|
}
|
61
|
+
|
52
62
|
.bold-xsmall {
|
53
63
|
@include bold-16();
|
54
64
|
}
|
@@ -85,7 +95,7 @@ main {
|
|
85
95
|
margin-bottom: em(10, 24);
|
86
96
|
|
87
97
|
@include media(tablet) {
|
88
|
-
margin-top: em(45, 36
|
98
|
+
margin-top: em(45, 36);
|
89
99
|
margin-bottom: em(20, 36);
|
90
100
|
}
|
91
101
|
|
@@ -125,7 +135,7 @@ main {
|
|
125
135
|
|
126
136
|
// Text
|
127
137
|
p {
|
128
|
-
margin-top: em(5, 16
|
138
|
+
margin-top: em(5, 16);
|
129
139
|
margin-bottom: em(20, 16);
|
130
140
|
|
131
141
|
@include media(tablet) {
|
@@ -155,12 +165,15 @@ p {
|
|
155
165
|
color: $link-colour;
|
156
166
|
text-decoration: underline;
|
157
167
|
}
|
168
|
+
|
158
169
|
.link:visited {
|
159
170
|
color: $link-visited-colour;
|
160
171
|
}
|
172
|
+
|
161
173
|
.link:hover {
|
162
174
|
color: $link-hover-colour;
|
163
175
|
}
|
176
|
+
|
164
177
|
.link:active {
|
165
178
|
color: $link-colour;
|
166
179
|
}
|
@@ -6,16 +6,25 @@
|
|
6
6
|
|
7
7
|
// Fieldset is used to group more than one .form-group
|
8
8
|
fieldset {
|
9
|
-
width: 100%;
|
10
9
|
@extend %contain-floats;
|
10
|
+
width: 100%;
|
11
|
+
}
|
12
|
+
|
13
|
+
// Fix left hand gap in IE7 and below
|
14
|
+
@include ie-lte(7) {
|
15
|
+
legend {
|
16
|
+
margin-left: -7px;
|
17
|
+
}
|
11
18
|
}
|
12
19
|
|
13
20
|
// Form group is used to wrap label and input pairs
|
14
21
|
.form-group {
|
22
|
+
@extend %contain-floats;
|
23
|
+
@include box-sizing(border-box);
|
15
24
|
float: left;
|
16
25
|
width: 100%;
|
17
|
-
@extend %contain-floats;
|
18
26
|
margin-bottom: $gutter-half;
|
27
|
+
|
19
28
|
@include media(tablet) {
|
20
29
|
margin-bottom: $gutter;
|
21
30
|
}
|
@@ -23,11 +32,13 @@ fieldset {
|
|
23
32
|
|
24
33
|
.form-group-related {
|
25
34
|
margin-bottom: 10px;
|
35
|
+
|
26
36
|
@include media(tablet) {
|
27
37
|
margin-bottom: 20px;
|
28
38
|
}
|
29
39
|
}
|
30
40
|
|
41
|
+
// Form group compound is used to reduce the space between label and input pairs
|
31
42
|
.form-group-compound {
|
32
43
|
margin-bottom: 10px;
|
33
44
|
}
|
@@ -36,6 +47,7 @@ fieldset {
|
|
36
47
|
// Form title
|
37
48
|
.form-title {
|
38
49
|
margin-bottom: $gutter;
|
50
|
+
|
39
51
|
@include media(tablet) {
|
40
52
|
margin-bottom: ($gutter*1.5);
|
41
53
|
}
|
@@ -53,22 +65,39 @@ fieldset {
|
|
53
65
|
|
54
66
|
.form-label {
|
55
67
|
@include core-19;
|
56
|
-
margin-bottom: 5px;
|
57
68
|
}
|
58
69
|
|
59
70
|
.form-label-bold {
|
60
|
-
@include bold-
|
61
|
-
|
62
|
-
|
63
|
-
|
71
|
+
@include bold-19;
|
72
|
+
}
|
73
|
+
|
74
|
+
// Add spacing under spans within labels
|
75
|
+
legend {
|
76
|
+
.form-label,
|
77
|
+
.form-label-bold {
|
78
|
+
padding-bottom: 7px;
|
79
|
+
}
|
80
|
+
}
|
81
|
+
|
82
|
+
// Remove spacing when error messages are shown
|
83
|
+
.error legend {
|
84
|
+
.form-label,
|
85
|
+
.form-label-bold {
|
86
|
+
padding-bottom: 0;
|
64
87
|
}
|
65
88
|
}
|
66
89
|
|
67
90
|
// Used for paragraphs in-between form elements
|
68
91
|
.form-block {
|
92
|
+
@extend %contain-floats;
|
69
93
|
float: left;
|
70
94
|
width: 100%;
|
71
|
-
|
95
|
+
|
96
|
+
margin-bottom: 5px;
|
97
|
+
|
98
|
+
@include media(tablet) {
|
99
|
+
margin-top: 10px;
|
100
|
+
}
|
72
101
|
}
|
73
102
|
|
74
103
|
|
@@ -76,24 +105,22 @@ fieldset {
|
|
76
105
|
|
77
106
|
// Form hints & examples are light grey and sit above a form control
|
78
107
|
.form-hint {
|
108
|
+
@include core-19;
|
79
109
|
display: block;
|
80
110
|
color: $secondary-text-colour;
|
111
|
+
font-weight: normal;
|
81
112
|
margin-bottom: 5px;
|
82
|
-
@include media (tablet) {
|
83
|
-
margin-top: 8px;
|
84
|
-
}
|
85
113
|
}
|
86
114
|
|
87
|
-
|
88
115
|
// Form controls
|
89
116
|
|
90
117
|
// By default, form controls are 50% width for desktop,
|
91
118
|
// and 100% width for mobile
|
92
119
|
.form-control {
|
120
|
+
@include box-sizing(border-box);
|
93
121
|
@include core-19;
|
94
|
-
|
95
122
|
width: 100%;
|
96
|
-
|
123
|
+
|
97
124
|
padding: 4px;
|
98
125
|
background-color: $white;
|
99
126
|
border: 1px solid $border-colour;
|
@@ -111,6 +138,7 @@ fieldset {
|
|
111
138
|
// Form control widths
|
112
139
|
.form-control-3-4 {
|
113
140
|
width: 100%;
|
141
|
+
|
114
142
|
@include media(tablet) {
|
115
143
|
width: 75%;
|
116
144
|
}
|
@@ -118,6 +146,7 @@ fieldset {
|
|
118
146
|
|
119
147
|
.form-control-1-2 {
|
120
148
|
width: 100%;
|
149
|
+
|
121
150
|
@include media(tablet) {
|
122
151
|
width: 50%;
|
123
152
|
}
|
@@ -136,10 +165,11 @@ fieldset {
|
|
136
165
|
.form-radio {
|
137
166
|
display: block;
|
138
167
|
margin: 10px 0;
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
168
|
+
|
169
|
+
input {
|
170
|
+
vertical-align: middle;
|
171
|
+
margin: -4px 5px 0 0;
|
172
|
+
}
|
143
173
|
}
|
144
174
|
|
145
175
|
|
@@ -147,11 +177,13 @@ fieldset {
|
|
147
177
|
.form-checkbox {
|
148
178
|
display: block;
|
149
179
|
margin: $gutter-half 0;
|
180
|
+
|
181
|
+
input {
|
182
|
+
vertical-align: middle;
|
183
|
+
margin: -2px 5px 0 0;
|
184
|
+
}
|
150
185
|
}
|
151
|
-
|
152
|
-
vertical-align: middle;
|
153
|
-
margin: -2px 5px 0 0;
|
154
|
-
}
|
186
|
+
|
155
187
|
|
156
188
|
// Buttons
|
157
189
|
.form .button {
|
@@ -6,6 +6,12 @@
|
|
6
6
|
@import "measurements";
|
7
7
|
@import "typography";
|
8
8
|
@import "css3";
|
9
|
+
@import "url-helpers";
|
10
|
+
|
11
|
+
// Path to assets for use with file-url() is not already defined
|
12
|
+
@if ($path == false) {
|
13
|
+
$path: "/public/images/";
|
14
|
+
}
|
9
15
|
|
10
16
|
// Return ems from a pixel value
|
11
17
|
// This assumes a base of 19px
|
@@ -17,12 +23,14 @@
|
|
17
23
|
// add this class to the body to see how grid padding is set
|
18
24
|
.example-highlight-grid {
|
19
25
|
.grid-row {
|
20
|
-
background:
|
26
|
+
background: $grey-2;
|
21
27
|
}
|
28
|
+
|
22
29
|
.column-highlight {
|
23
30
|
background: $grey-3;
|
24
31
|
width: 100%;
|
25
32
|
}
|
33
|
+
|
26
34
|
}
|
27
35
|
|
28
36
|
// Used to space the "back" link on example pages
|
@@ -36,8 +44,11 @@
|
|
36
44
|
position: absolute;
|
37
45
|
overflow: hidden;
|
38
46
|
clip: rect(0 0 0 0);
|
39
|
-
height: 1px;
|
40
|
-
|
47
|
+
height: 1px;
|
48
|
+
width: 1px;
|
49
|
+
margin: -1px;
|
50
|
+
padding: 0;
|
51
|
+
border: 0;
|
41
52
|
}
|
42
53
|
|
43
54
|
// Hide, only when JavaScript is enabled
|
@@ -8,85 +8,94 @@
|
|
8
8
|
}
|
9
9
|
|
10
10
|
.icon-calendar {
|
11
|
+
width: 27px;
|
12
|
+
height: 27px;
|
11
13
|
background-image: file-url("icons/icon-calendar.png");
|
14
|
+
|
12
15
|
@include device-pixel-ratio() {
|
13
16
|
background-image: file-url("icons/icon-calendar-2x.png");
|
14
17
|
background-size: 100%;
|
15
18
|
}
|
16
|
-
width: 27px;
|
17
|
-
height: 27px;
|
18
19
|
}
|
19
20
|
|
20
21
|
.icon-download {
|
22
|
+
width: 30px;
|
23
|
+
height: 39px;
|
21
24
|
background-image: file-url("icons/icon-file-download.png");
|
25
|
+
|
22
26
|
@include device-pixel-ratio() {
|
23
27
|
background-image: file-url("icons/icon-file-download-2x.png");
|
24
28
|
background-size: 100%;
|
25
|
-
}
|
26
|
-
width: 30px;
|
27
|
-
height: 39px;
|
29
|
+
}
|
28
30
|
}
|
29
31
|
|
30
32
|
.icon-important {
|
33
|
+
width: 34px;
|
34
|
+
height: 34px;
|
31
35
|
background-image: file-url("icons/icon-important.png");
|
36
|
+
|
32
37
|
@include device-pixel-ratio() {
|
33
38
|
background-image: file-url("icons/icon-important-2x.png");
|
34
39
|
background-size: 100%;
|
35
40
|
}
|
36
|
-
width: 34px;
|
37
|
-
height: 34px;
|
38
41
|
}
|
39
42
|
|
40
43
|
.icon-information {
|
44
|
+
width: 27px;
|
45
|
+
height: 27px;
|
41
46
|
background-image: file-url("icons/icon-information.png");
|
47
|
+
|
42
48
|
@include device-pixel-ratio() {
|
43
49
|
background-image: file-url("icons/icon-information-2x.png");
|
44
50
|
background-size: 100%;
|
45
51
|
}
|
46
|
-
width: 27px;
|
47
|
-
height: 27px;
|
48
52
|
}
|
49
53
|
|
50
54
|
.icon-locator {
|
55
|
+
width: 26px;
|
56
|
+
height: 36px;
|
51
57
|
background-image: file-url("icons/icon-locator.png");
|
58
|
+
|
52
59
|
@include device-pixel-ratio() {
|
53
60
|
background-image: file-url("icons/icon-locator-2x.png");
|
54
61
|
background-size: 100%;
|
55
62
|
}
|
56
|
-
width: 26px;
|
57
|
-
height: 36px;
|
58
63
|
}
|
59
64
|
|
60
65
|
.icon-search {
|
66
|
+
width: 30px;
|
67
|
+
height: 22px;
|
68
|
+
background-color: $black;
|
61
69
|
background-image: file-url("icons/icon-search.png");
|
70
|
+
|
62
71
|
@include device-pixel-ratio() {
|
63
72
|
background-image: file-url("icons/icon-search-2x.png");
|
64
73
|
background-size: 100%;
|
65
74
|
}
|
66
|
-
width: 30px;
|
67
|
-
height: 22px;
|
68
|
-
background-color: black;
|
69
75
|
}
|
70
76
|
|
71
77
|
// GOV.UK arrow icons
|
72
78
|
.icon-pointer {
|
79
|
+
width: 30px;
|
80
|
+
height: 19px;
|
81
|
+
background-color: $black;
|
73
82
|
background-image: file-url("icons/icon-pointer.png");
|
83
|
+
|
74
84
|
@include device-pixel-ratio() {
|
75
85
|
background-image: file-url("icons/icon-pointer-2x.png");
|
76
86
|
background-size: 100%;
|
77
87
|
}
|
78
|
-
width: 30px;
|
79
|
-
height: 19px;
|
80
|
-
background-color: black;
|
81
88
|
}
|
89
|
+
|
82
90
|
.icon-pointer-black {
|
91
|
+
width: 23px;
|
92
|
+
height: 23px;
|
83
93
|
background-image: file-url("icons/icon-pointer-black.png");
|
94
|
+
|
84
95
|
@include device-pixel-ratio() {
|
85
96
|
background-image: file-url("icons/icon-pointer-black-2x.png");
|
86
97
|
background-size: 100%;
|
87
98
|
}
|
88
|
-
width: 23px;
|
89
|
-
height: 23px;
|
90
99
|
}
|
91
100
|
|
92
101
|
// GOV.UK external link icons
|
@@ -94,131 +103,144 @@
|
|
94
103
|
|
95
104
|
// GOV.UK step icons
|
96
105
|
.icon-step-1 {
|
106
|
+
width: 23px;
|
107
|
+
height: 23px;
|
97
108
|
background-image: file-url("icons/icon-steps/icon-step-1.png");
|
109
|
+
|
98
110
|
@include device-pixel-ratio() {
|
99
111
|
background-image: file-url("icons/icon-steps/icon-step-1-2x.png");
|
100
112
|
background-size: 100%;
|
101
113
|
}
|
102
|
-
width: 23px;
|
103
|
-
height: 23px;
|
104
114
|
}
|
105
115
|
|
106
116
|
.icon-step-2 {
|
117
|
+
width: 23px;
|
118
|
+
height: 23px;
|
107
119
|
background-image: file-url("icons/icon-steps/icon-step-2.png");
|
120
|
+
|
108
121
|
@include device-pixel-ratio() {
|
109
122
|
background-image: file-url("icons/icon-steps/icon-step-2-2x.png");
|
110
123
|
background-size: 100%;
|
111
124
|
}
|
112
|
-
width: 23px;
|
113
|
-
height: 23px;
|
114
125
|
}
|
115
126
|
|
116
127
|
.icon-step-3 {
|
128
|
+
width: 23px;
|
129
|
+
height: 23px;
|
117
130
|
background-image: file-url("icons/icon-steps/icon-step-3.png");
|
131
|
+
|
118
132
|
@include device-pixel-ratio() {
|
119
133
|
background-image: file-url("icons/icon-steps/icon-step-3-2x.png");
|
120
134
|
background-size: 100%;
|
121
135
|
}
|
122
|
-
width: 23px;
|
123
|
-
height: 23px;
|
124
136
|
}
|
125
137
|
|
126
138
|
.icon-step-4 {
|
139
|
+
width: 23px;
|
140
|
+
height: 23px;
|
127
141
|
background-image: file-url("icons/icon-steps/icon-step-4.png");
|
142
|
+
|
128
143
|
@include device-pixel-ratio() {
|
129
144
|
background-image: file-url("icons/icon-steps/icon-step-4-2x.png");
|
130
145
|
background-size: 100%;
|
131
146
|
}
|
132
|
-
width: 23px;
|
133
|
-
height: 23px;
|
134
147
|
}
|
135
148
|
|
136
149
|
.icon-step-5 {
|
150
|
+
width: 23px;
|
151
|
+
height: 23px;
|
137
152
|
background-image: file-url("icons/icon-steps/icon-step-5.png");
|
153
|
+
|
138
154
|
@include device-pixel-ratio() {
|
139
155
|
background-image: file-url("icons/icon-steps/icon-step-5-2x.png");
|
140
156
|
background-size: 100%;
|
141
157
|
}
|
142
|
-
width: 23px;
|
143
|
-
height: 23px;
|
144
158
|
}
|
145
159
|
|
146
160
|
.icon-step-6 {
|
161
|
+
width: 23px;
|
162
|
+
height: 23px;
|
147
163
|
background-image: file-url("icons/icon-steps/icon-step-6.png");
|
164
|
+
|
148
165
|
@include device-pixel-ratio() {
|
149
166
|
background-image: file-url("icons/icon-steps/icon-step-6-2x.png");
|
150
167
|
background-size: 100%;
|
151
168
|
}
|
152
|
-
width: 23px;
|
153
|
-
height: 23px;
|
154
169
|
}
|
155
170
|
|
156
171
|
.icon-step-7 {
|
172
|
+
width: 23px;
|
173
|
+
height: 23px;
|
157
174
|
background-image: file-url("icons/icon-steps/icon-step-7.png");
|
175
|
+
|
158
176
|
@include device-pixel-ratio() {
|
159
177
|
background-image: file-url("icons/icon-steps/icon-step-7-2x.png");
|
160
178
|
background-size: 100%;
|
161
179
|
}
|
162
|
-
width: 23px;
|
163
|
-
height: 23px;
|
164
180
|
}
|
165
181
|
|
166
182
|
.icon-step-8 {
|
183
|
+
width: 23px;
|
184
|
+
height: 23px;
|
167
185
|
background-image: file-url("icons/icon-steps/icon-step-8.png");
|
186
|
+
|
168
187
|
@include device-pixel-ratio() {
|
169
188
|
background-image: file-url("icons/icon-steps/icon-step-8-2x.png");
|
170
189
|
background-size: 100%;
|
171
190
|
}
|
172
|
-
width: 23px;
|
173
|
-
height: 23px;
|
174
191
|
}
|
175
192
|
|
176
193
|
.icon-step-9 {
|
194
|
+
width: 23px;
|
195
|
+
height: 23px;
|
177
196
|
background-image: file-url("icons/icon-steps/icon-step-9.png");
|
197
|
+
|
178
198
|
@include device-pixel-ratio() {
|
179
199
|
background-image: file-url("icons/icon-steps/icon-step-9-2x.png");
|
180
200
|
background-size: 100%;
|
181
201
|
}
|
182
|
-
width: 23px;
|
183
|
-
height: 23px;
|
184
202
|
}
|
185
203
|
|
186
204
|
.icon-step-10 {
|
205
|
+
width: 23px;
|
206
|
+
height: 23px;
|
187
207
|
background-image: file-url("icons/icon-steps/icon-step-10.png");
|
208
|
+
|
188
209
|
@include device-pixel-ratio() {
|
189
210
|
background-image: file-url("icons/icon-steps/icon-step-10-2x.png");
|
190
211
|
background-size: 100%;
|
191
212
|
}
|
192
|
-
width: 23px;
|
193
|
-
height: 23px;
|
194
213
|
}
|
195
214
|
|
196
215
|
.icon-step-11 {
|
216
|
+
width: 23px;
|
217
|
+
height: 23px;
|
197
218
|
background-image: file-url("icons/icon-steps/icon-step-11.png");
|
219
|
+
|
198
220
|
@include device-pixel-ratio() {
|
199
221
|
background-image: file-url("icons/icon-steps/icon-step-11-2x.png");
|
200
222
|
background-size: 100%;
|
201
223
|
}
|
202
|
-
width: 23px;
|
203
|
-
height: 23px;
|
204
224
|
}
|
205
225
|
|
206
226
|
.icon-step-12 {
|
227
|
+
width: 23px;
|
228
|
+
height: 23px;
|
207
229
|
background-image: file-url("icons/icon-steps/icon-step-12.png");
|
230
|
+
|
208
231
|
@include device-pixel-ratio() {
|
209
232
|
background-image: file-url("icons/icon-steps/icon-step-12-2x.png");
|
210
233
|
background-size: 100%;
|
211
234
|
}
|
212
|
-
width: 23px;
|
213
|
-
height: 23px;
|
214
235
|
}
|
215
236
|
|
216
237
|
.icon-step-13 {
|
238
|
+
width: 23px;
|
239
|
+
height: 23px;
|
217
240
|
background-image: file-url("icons/icon-steps/icon-step-13.png");
|
241
|
+
|
218
242
|
@include device-pixel-ratio() {
|
219
243
|
background-image: file-url("icons/icon-steps/icon-step-13-2x.png");
|
220
244
|
background-size: 100%;
|
221
245
|
}
|
222
|
-
width: 23px;
|
223
|
-
height: 23px;
|
224
246
|
}
|
@@ -17,6 +17,7 @@
|
|
17
17
|
@extend %site-width-container;
|
18
18
|
@extend %contain-floats;
|
19
19
|
padding-bottom: $gutter;
|
20
|
+
|
20
21
|
@include media(desktop) {
|
21
22
|
padding-bottom: $gutter*3;
|
22
23
|
}
|
@@ -26,7 +27,7 @@
|
|
26
27
|
// Phase banner
|
27
28
|
// ==========================================================================
|
28
29
|
|
29
|
-
.phase-banner
|
30
|
+
.phase-banner {
|
30
31
|
@include phase-banner(alpha);
|
31
32
|
}
|
32
33
|
|
@@ -54,14 +55,17 @@
|
|
54
55
|
// Use .grid-column to create a grid column with 15px gutter
|
55
56
|
// By default grid columns break to become full width at tablet size
|
56
57
|
.column-quarter {
|
57
|
-
@include grid-column(
|
58
|
+
@include grid-column(1/4);
|
58
59
|
}
|
60
|
+
|
59
61
|
.column-half {
|
60
|
-
@include grid-column(
|
62
|
+
@include grid-column(1/2);
|
61
63
|
}
|
64
|
+
|
62
65
|
.column-third {
|
63
|
-
@include grid-column(
|
66
|
+
@include grid-column(1/3);
|
64
67
|
}
|
68
|
+
|
65
69
|
.column-two-thirds {
|
66
|
-
@include grid-column(
|
70
|
+
@include grid-column(2/3);
|
67
71
|
}
|
@@ -12,18 +12,18 @@
|
|
12
12
|
|
13
13
|
padding: 10px 0 10px $gutter-half;
|
14
14
|
margin: ($gutter $gutter-half $gutter*1.5 0);
|
15
|
-
}
|
16
|
-
|
17
|
-
.panel-indent legend {
|
18
|
-
margin-top: 0;
|
19
|
-
}
|
20
|
-
|
21
|
-
// Remove bottom margin on last paragraph
|
22
|
-
.panel-indent p:only-child,
|
23
|
-
.panel-indent p:last-child {
|
24
|
-
margin-bottom: 0;
|
25
|
-
}
|
26
15
|
|
27
|
-
|
28
|
-
|
16
|
+
legend {
|
17
|
+
margin-top: 0;
|
18
|
+
}
|
19
|
+
|
20
|
+
// Remove bottom margin on last paragraph
|
21
|
+
p:only-child,
|
22
|
+
p:last-child {
|
23
|
+
margin-bottom: 0;
|
24
|
+
}
|
25
|
+
|
26
|
+
.form-group:last-child {
|
27
|
+
margin-bottom: 0;
|
28
|
+
}
|
29
29
|
}
|
@@ -9,29 +9,28 @@ table {
|
|
9
9
|
border-collapse: collapse;
|
10
10
|
border-spacing: 0;
|
11
11
|
width: 100%;
|
12
|
-
}
|
13
12
|
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
13
|
+
th,
|
14
|
+
td {
|
15
|
+
@include core-16;
|
16
|
+
padding: em(12, 16) em(20, 16) em(9, 16) 0;
|
18
17
|
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
}
|
18
|
+
text-align: left;
|
19
|
+
color: $black;
|
20
|
+
border-bottom: 1px solid $border-colour;
|
21
|
+
}
|
23
22
|
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
}
|
23
|
+
th {
|
24
|
+
font-weight: 700;
|
25
|
+
// Right align headings for numeric content
|
26
|
+
&.numeric {
|
27
|
+
text-align: right;
|
28
|
+
}
|
29
|
+
}
|
32
30
|
|
33
|
-
// Use tabular numbers for numeric table cells
|
34
|
-
|
35
|
-
|
36
|
-
|
31
|
+
// Use tabular numbers for numeric table cells
|
32
|
+
td.numeric {
|
33
|
+
@include core-16($tabular-numbers: true);
|
34
|
+
text-align: right;
|
35
|
+
}
|
37
36
|
}
|
@@ -5,6 +5,7 @@
|
|
5
5
|
@import "measurements";
|
6
6
|
@import "conditionals";
|
7
7
|
|
8
|
+
|
8
9
|
// By default, block labels stack vertically
|
9
10
|
.block-label {
|
10
11
|
|
@@ -16,15 +17,12 @@
|
|
16
17
|
background: $panel-colour;
|
17
18
|
border: 1px solid $panel-colour;
|
18
19
|
padding: (18px $gutter $gutter-half $gutter*1.5);
|
19
|
-
margin-top: 10px;
|
20
|
-
margin-bottom: 10px;
|
21
20
|
|
21
|
+
margin-bottom: 10px;
|
22
22
|
cursor: pointer; // Encourage clicking on block labels
|
23
23
|
|
24
24
|
@include media(tablet) {
|
25
25
|
float: left;
|
26
|
-
margin-top: 5px;
|
27
|
-
margin-bottom: 5px;
|
28
26
|
// width: 25%; - Test : check that text within labels will wrap
|
29
27
|
}
|
30
28
|
|
@@ -42,6 +40,10 @@
|
|
42
40
|
}
|
43
41
|
}
|
44
42
|
|
43
|
+
.block-label:last-child {
|
44
|
+
margin-bottom: 0;
|
45
|
+
}
|
46
|
+
|
45
47
|
// To stack horizontally, use .inline on parent, to sit block labels next to each other
|
46
48
|
.inline .block-label {
|
47
49
|
clear: none;
|
@@ -58,7 +60,7 @@
|
|
58
60
|
|
59
61
|
// Add focus to block labels
|
60
62
|
.js-enabled label.focused {
|
61
|
-
outline: 3px solid $
|
63
|
+
outline: 3px solid $focus-colour;
|
62
64
|
}
|
63
65
|
|
64
66
|
// Remove focus from radio/checkboxes
|
@@ -5,10 +5,11 @@
|
|
5
5
|
input::-webkit-outer-spin-button,
|
6
6
|
input::-webkit-inner-spin-button {
|
7
7
|
-webkit-appearance: none;
|
8
|
-
margin: 0
|
8
|
+
margin: 0;
|
9
9
|
}
|
10
|
+
|
10
11
|
input[type=number] {
|
11
|
-
-moz-appearance: textfield
|
12
|
+
-moz-appearance: textfield;
|
12
13
|
}
|
13
14
|
|
14
15
|
.form-date {
|
@@ -29,11 +30,9 @@ input[type=number] {
|
|
29
30
|
input {
|
30
31
|
width: 100%;
|
31
32
|
}
|
32
|
-
|
33
33
|
}
|
34
34
|
|
35
35
|
.form-group-year {
|
36
36
|
width: 70px;
|
37
37
|
}
|
38
|
-
|
39
38
|
}
|
@@ -1,68 +1,107 @@
|
|
1
|
-
//
|
1
|
+
// Form validation
|
2
|
+
// ==========================================================================
|
2
3
|
|
3
|
-
|
4
|
-
|
5
|
-
@import "conditionals";
|
6
|
-
@import "typography";
|
4
|
+
// Update the error colour in the govuk frontend toolkit
|
5
|
+
$error-colour: #b10e1e;
|
7
6
|
|
8
|
-
.validation
|
9
|
-
|
10
|
-
padding: $gutter-half $gutter;
|
11
|
-
margin-bottom: $gutter;
|
7
|
+
// Using the classname .error as it's shorter than .validation and easier to type!
|
8
|
+
.error {
|
12
9
|
|
13
|
-
|
14
|
-
|
10
|
+
// Ensure the .error class is applied to .form-group, otherwide box-sizing(border-box) will need to be used
|
11
|
+
// @include box-sizing(border-box);
|
12
|
+
margin-right: 15px;
|
13
|
+
|
14
|
+
// Error messages should be red and bold
|
15
|
+
.error-message {
|
16
|
+
color: $error-colour;
|
17
|
+
font-weight: bold;
|
18
|
+
}
|
19
|
+
|
20
|
+
// Form inputs should have a red border
|
21
|
+
.form-control {
|
22
|
+
border: 4px solid $error-colour;
|
15
23
|
}
|
24
|
+
|
25
|
+
.form-hint {
|
26
|
+
margin-bottom: 0;
|
27
|
+
}
|
28
|
+
|
16
29
|
}
|
17
30
|
|
18
|
-
.
|
19
|
-
|
31
|
+
.error,
|
32
|
+
.error-summary {
|
33
|
+
|
34
|
+
// Add a red border to the left of the field
|
35
|
+
border-left: 4px solid $error-colour;
|
36
|
+
padding-left: 10px;
|
37
|
+
|
38
|
+
@include media(tablet) {
|
39
|
+
border-left: 5px solid $error-colour;
|
40
|
+
padding-left: $gutter-half;
|
41
|
+
}
|
20
42
|
}
|
21
43
|
|
22
|
-
.
|
23
|
-
|
24
|
-
|
44
|
+
.error-message {
|
45
|
+
@include core-19;
|
46
|
+
|
47
|
+
display: block;
|
48
|
+
clear: both;
|
49
|
+
|
50
|
+
margin: 0;
|
51
|
+
padding: 5px 0 7px 0;
|
25
52
|
}
|
26
53
|
|
27
|
-
|
54
|
+
// Summary of multiple error messages
|
55
|
+
.error-summary {
|
56
|
+
|
57
|
+
// Error summary has a border on all sides
|
58
|
+
border: 4px solid $error-colour;
|
59
|
+
|
28
60
|
margin-top: $gutter-half;
|
29
|
-
margin-bottom:
|
30
|
-
|
61
|
+
margin-bottom: $gutter-half;
|
62
|
+
|
63
|
+
padding: $gutter-half 10px;
|
64
|
+
|
65
|
+
@include media(tablet) {
|
66
|
+
border: 5px solid $error-colour;
|
67
|
+
|
68
|
+
margin-top: $gutter;
|
69
|
+
margin-bottom: $gutter;
|
70
|
+
|
71
|
+
padding: 20px $gutter-half $gutter-half $gutter-half;
|
72
|
+
}
|
31
73
|
|
32
|
-
.validation-summary a {
|
33
|
-
color: $error-colour;
|
34
74
|
@include ie-lte(6) {
|
35
|
-
|
75
|
+
zoom: 1;
|
36
76
|
}
|
37
|
-
}
|
38
77
|
|
39
|
-
|
40
|
-
|
41
|
-
|
78
|
+
// Use the GOV.UK outline focus style
|
79
|
+
&:focus {
|
80
|
+
outline: 3px solid $focus-colour;
|
81
|
+
}
|
42
82
|
|
83
|
+
.error-summary-heading {
|
84
|
+
margin-top: 0;
|
85
|
+
}
|
43
86
|
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
// @extend %contain-floats;
|
48
|
-
// border-left: 3px solid $error-colour;
|
49
|
-
// padding: $gutter- $gutter;
|
50
|
-
// margin-bottom: $gutter-half;
|
51
|
-
// margin-left: -($gutter);
|
52
|
-
// }
|
87
|
+
p {
|
88
|
+
margin-bottom: 10px;
|
89
|
+
}
|
53
90
|
|
54
|
-
|
55
|
-
|
56
|
-
// }
|
91
|
+
.error-summary-list {
|
92
|
+
padding-left: 0;
|
57
93
|
|
58
|
-
|
59
|
-
// margin-bottom: 10px;
|
60
|
-
// }
|
94
|
+
li {
|
61
95
|
|
96
|
+
@include media(tablet) {
|
97
|
+
margin-bottom: 5px;
|
98
|
+
}
|
99
|
+
}
|
62
100
|
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
101
|
+
a {
|
102
|
+
color: $error-colour;
|
103
|
+
font-weight: bold;
|
104
|
+
text-decoration: underline;
|
105
|
+
}
|
106
|
+
}
|
68
107
|
}
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: govuk_elements_rails
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.3.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Rob McKinnon
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2015-
|
11
|
+
date: 2015-06-04 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: rails
|
@@ -50,8 +50,8 @@ dependencies:
|
|
50
50
|
- - ">="
|
51
51
|
- !ruby/object:Gem::Version
|
52
52
|
version: 3.2.0
|
53
|
-
description: A gem wrapper around SHA
|
54
|
-
(
|
53
|
+
description: A gem wrapper around SHA 281fb6b9e14129a6c3f982c46c43970e3f2f7f78 govuk_elements
|
54
|
+
(heads/master) that pulls stylesheet and javascript files into a Rails app.
|
55
55
|
email: rob.mckinnon ~@nospam@~ digital.justice.gov.uk
|
56
56
|
executables: []
|
57
57
|
extensions: []
|