govuk_elements_rails 2.2.1 → 3.0.0
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.
- checksums.yaml +4 -4
- data/vendor/assets/stylesheets/_govuk-elements.scss +1 -1
- data/vendor/assets/stylesheets/elements/_forms.scss +3 -25
- data/vendor/assets/stylesheets/elements/_phase-banner.scss +5 -1
- data/vendor/assets/stylesheets/elements/forms/_form-multiple-choice.scss +134 -0
- data/vendor/assets/stylesheets/elements/forms/_form-validation.scss +7 -12
- metadata +5 -5
- data/vendor/assets/stylesheets/elements/forms/_form-block-labels.scss +0 -142
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 98e163e8d9c74a1f8d1dd40a8951297568302395
|
|
4
|
+
data.tar.gz: 93d6a7d8cc5efab531a7e7de055b73aefdc26f3d
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 54bef5cf5d60faf3c56bc93921ffe783426853e21a344d56de8c2934963f623b73f55b37fd3a5b3eb45fd6e8f64a449e085b7508e8598c80f64f2a902b4711f3
|
|
7
|
+
data.tar.gz: 9898675f1941cbe8125ef9a7eec538cf551efb44cb07edeb0c8734d26cf9e293d39626a29e755a7a2f92799cc3998a5c0d5d81b7ff2cc72778c01a954785ec9c
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
@import "elements/details"; // Details summary
|
|
47
47
|
@import "elements/panels"; // Panels with a left grey border
|
|
48
48
|
@import "elements/forms"; // Form - wrappers, inputs, labels
|
|
49
|
-
@import "elements/forms/form-
|
|
49
|
+
@import "elements/forms/form-multiple-choice"; // Custom radio buttons and checkboxes
|
|
50
50
|
@import "elements/forms/form-date"; // Date of birth pattern
|
|
51
51
|
@import "elements/forms/form-validation"; // Errors and validation
|
|
52
52
|
@import "elements/breadcrumbs"; // Breadcrumbs
|
|
@@ -146,9 +146,9 @@ textarea {
|
|
|
146
146
|
width: 100%;
|
|
147
147
|
|
|
148
148
|
padding: 5px 4px 4px;
|
|
149
|
-
color
|
|
150
|
-
background-color
|
|
151
|
-
border: 2px solid;
|
|
149
|
+
// setting any background-color makes text invisible when changing colours to dark backgrounds in Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=1335476)
|
|
150
|
+
// as background-color and color need to always be set together, color should not be set either
|
|
151
|
+
border: 2px solid $text-colour;
|
|
152
152
|
|
|
153
153
|
// TODO: Remove 50% width set for tablet and up
|
|
154
154
|
// !! BREAKING CHANGE !!
|
|
@@ -169,28 +169,6 @@ textarea.form-control {
|
|
|
169
169
|
}
|
|
170
170
|
// scss-lint:enable QualifyingElement
|
|
171
171
|
|
|
172
|
-
// Radio buttons
|
|
173
|
-
.form-radio {
|
|
174
|
-
display: block;
|
|
175
|
-
margin: 10px 0;
|
|
176
|
-
|
|
177
|
-
input {
|
|
178
|
-
vertical-align: middle;
|
|
179
|
-
margin: -4px 5px 0 0;
|
|
180
|
-
}
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
// Checkboxes
|
|
184
|
-
.form-checkbox {
|
|
185
|
-
display: block;
|
|
186
|
-
margin: $gutter-half 0;
|
|
187
|
-
|
|
188
|
-
input {
|
|
189
|
-
vertical-align: middle;
|
|
190
|
-
margin: -2px 5px 0 0;
|
|
191
|
-
}
|
|
192
|
-
}
|
|
193
|
-
|
|
194
172
|
|
|
195
173
|
// 6. Form control widths
|
|
196
174
|
// ==========================================================================
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// Phase banners
|
|
1
|
+
// Phase banners and tags
|
|
2
2
|
// ==========================================================================
|
|
3
3
|
|
|
4
4
|
.phase-banner {
|
|
@@ -11,3 +11,7 @@
|
|
|
11
11
|
.phase-banner-beta {
|
|
12
12
|
@include phase-banner();
|
|
13
13
|
}
|
|
14
|
+
|
|
15
|
+
.phase-tag {
|
|
16
|
+
@include phase-tag();
|
|
17
|
+
}
|
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
// Radio buttons & checkboxes
|
|
2
|
+
|
|
3
|
+
// By default, multiple choice inputs stack vertically
|
|
4
|
+
.multiple-choice {
|
|
5
|
+
|
|
6
|
+
display: block;
|
|
7
|
+
float: none;
|
|
8
|
+
clear: left;
|
|
9
|
+
position: relative;
|
|
10
|
+
|
|
11
|
+
padding: (8px $gutter-one-third 9px 50px);
|
|
12
|
+
margin-bottom: $gutter-one-third;
|
|
13
|
+
|
|
14
|
+
cursor: pointer; // Encourage clicking on the label
|
|
15
|
+
|
|
16
|
+
// remove 300ms pause on mobile
|
|
17
|
+
-ms-touch-action: manipulation;
|
|
18
|
+
touch-action: manipulation;
|
|
19
|
+
|
|
20
|
+
@include media(tablet) {
|
|
21
|
+
float: left;
|
|
22
|
+
padding-top: 7px;
|
|
23
|
+
padding-bottom: 7px;
|
|
24
|
+
// width: 25%; - Test : check that text within labels will wrap
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
// Absolutely position inputs within label, to allow text to wrap
|
|
28
|
+
input {
|
|
29
|
+
position: absolute;
|
|
30
|
+
cursor: pointer;
|
|
31
|
+
left: 0;
|
|
32
|
+
top: 0;
|
|
33
|
+
width: 38px;
|
|
34
|
+
height: 38px;
|
|
35
|
+
z-index: 1;
|
|
36
|
+
|
|
37
|
+
// IE8 doesn’t support pseudoelements, so we don’t want to hide native elements there.
|
|
38
|
+
@if ($is-ie == false) or ($ie-version == 9) {
|
|
39
|
+
margin: 0;
|
|
40
|
+
@include opacity(0);
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
label {
|
|
45
|
+
cursor: pointer;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
[type=radio] + label::before {
|
|
49
|
+
content: "";
|
|
50
|
+
border: 2px solid;
|
|
51
|
+
background: transparent;
|
|
52
|
+
width: 34px;
|
|
53
|
+
height: 34px;
|
|
54
|
+
position: absolute;
|
|
55
|
+
top: 0;
|
|
56
|
+
left: 0;
|
|
57
|
+
@include border-radius(50%);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
[type=radio] + label::after {
|
|
61
|
+
content: "";
|
|
62
|
+
border: 10px solid;
|
|
63
|
+
width: 0;
|
|
64
|
+
height: 0;
|
|
65
|
+
position: absolute;
|
|
66
|
+
top: 9px;
|
|
67
|
+
left: 9px;
|
|
68
|
+
@include border-radius(50%);
|
|
69
|
+
@include opacity(0);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
[type=checkbox] + label::before {
|
|
73
|
+
content: "";
|
|
74
|
+
border: 2px solid;
|
|
75
|
+
background: transparent;
|
|
76
|
+
width: 34px;
|
|
77
|
+
height: 34px;
|
|
78
|
+
position: absolute;
|
|
79
|
+
top: 0;
|
|
80
|
+
left: 0;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
[type=checkbox] + label::after {
|
|
84
|
+
content: "";
|
|
85
|
+
border: solid;
|
|
86
|
+
border-width: 0 0 5px 5px;
|
|
87
|
+
background: transparent;
|
|
88
|
+
width: 17px;
|
|
89
|
+
height: 7px;
|
|
90
|
+
position: absolute;
|
|
91
|
+
top: 10px;
|
|
92
|
+
left: 8px;
|
|
93
|
+
-moz-transform: rotate(-45deg); // Firefox 15 compatibility
|
|
94
|
+
-o-transform: rotate(-45deg); // Opera 12.0 compatibility
|
|
95
|
+
-webkit-transform: rotate(-45deg); // Safari 8 compatibility
|
|
96
|
+
-ms-transform: rotate(-45deg); // IE9 compatibility
|
|
97
|
+
transform: rotate(-45deg);
|
|
98
|
+
@include opacity(0);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
// Focused state
|
|
102
|
+
[type=radio]:focus + label::before {
|
|
103
|
+
@include box-shadow(0 0 0 4px $focus-colour);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
[type=checkbox]:focus + label::before {
|
|
107
|
+
@include box-shadow(0 0 0 3px $focus-colour);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
// Selected state
|
|
111
|
+
input:checked + label::after {
|
|
112
|
+
@include opacity(1);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
// Disabled state
|
|
116
|
+
input:disabled + label {
|
|
117
|
+
@include opacity(0.5);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
&:last-child,
|
|
121
|
+
&:last-of-type {
|
|
122
|
+
margin-bottom: 0;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
// To sit multiple choice inputs next to each other, use .inline on parent
|
|
127
|
+
.inline .multiple-choice {
|
|
128
|
+
clear: none;
|
|
129
|
+
|
|
130
|
+
@include media (tablet) {
|
|
131
|
+
margin-bottom: 0;
|
|
132
|
+
margin-right: $gutter;
|
|
133
|
+
}
|
|
134
|
+
}
|
|
@@ -1,19 +1,9 @@
|
|
|
1
1
|
// Form validation
|
|
2
2
|
// ==========================================================================
|
|
3
3
|
|
|
4
|
-
// Use error to add a red border to the left of a .form-group
|
|
5
|
-
.error {
|
|
6
|
-
|
|
7
|
-
// Ensure the .error class is applied to .form-group, otherwise box-sizing(border-box) will need to be used
|
|
8
|
-
// @include box-sizing(border-box);
|
|
4
|
+
// Use .form-group-error to add a red border to the left of a .form-group
|
|
5
|
+
.form-group-error {
|
|
9
6
|
margin-right: 15px;
|
|
10
|
-
|
|
11
|
-
// Form inputs should have a red border
|
|
12
|
-
// Add a red border to .form-controls that are direct descendants
|
|
13
|
-
> .form-control {
|
|
14
|
-
border: 4px solid $error-colour;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
7
|
border-left: 4px solid $error-colour;
|
|
18
8
|
padding-left: 10px;
|
|
19
9
|
|
|
@@ -21,9 +11,14 @@
|
|
|
21
11
|
border-left: 5px solid $error-colour;
|
|
22
12
|
padding-left: $gutter-half;
|
|
23
13
|
}
|
|
14
|
+
}
|
|
24
15
|
|
|
16
|
+
// Use .form-control-error to add a red border to .form-control
|
|
17
|
+
.form-control-error {
|
|
18
|
+
border: 4px solid $error-colour;
|
|
25
19
|
}
|
|
26
20
|
|
|
21
|
+
|
|
27
22
|
// Error messages should be red and bold
|
|
28
23
|
.error-message {
|
|
29
24
|
@include bold-19;
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: govuk_elements_rails
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version:
|
|
4
|
+
version: 3.0.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Rob McKinnon
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date:
|
|
12
|
+
date: 2017-03-16 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: rails
|
|
@@ -54,8 +54,8 @@ dependencies:
|
|
|
54
54
|
- !ruby/object:Gem::Version
|
|
55
55
|
version: 5.0.2
|
|
56
56
|
description: |-
|
|
57
|
-
A gem wrapper around govuk_elements
|
|
58
|
-
that pulls stylesheet and javascript files into a Rails app. Changelog: https://github.com/alphagov/govuk_elements/blob/
|
|
57
|
+
A gem wrapper around govuk_elements v3.0.0
|
|
58
|
+
that pulls stylesheet and javascript files into a Rails app. Changelog: https://github.com/alphagov/govuk_elements/blob/7b3b47dc20827311aad103445e26aa51ebe82941
|
|
59
59
|
/CHANGELOG.md
|
|
60
60
|
email: robin.whittleton@digital.cabinet-office.gov.uk
|
|
61
61
|
executables: []
|
|
@@ -83,8 +83,8 @@ files:
|
|
|
83
83
|
- vendor/assets/stylesheets/elements/_reset.scss
|
|
84
84
|
- vendor/assets/stylesheets/elements/_shame.scss
|
|
85
85
|
- vendor/assets/stylesheets/elements/_tables.scss
|
|
86
|
-
- vendor/assets/stylesheets/elements/forms/_form-block-labels.scss
|
|
87
86
|
- vendor/assets/stylesheets/elements/forms/_form-date.scss
|
|
87
|
+
- vendor/assets/stylesheets/elements/forms/_form-multiple-choice.scss
|
|
88
88
|
- vendor/assets/stylesheets/elements/forms/_form-validation.scss
|
|
89
89
|
- lib/govuk_elements_rails/engine.rb
|
|
90
90
|
- lib/govuk_elements_rails.rb
|
|
@@ -1,142 +0,0 @@
|
|
|
1
|
-
// Large hit area
|
|
2
|
-
// Radio buttons & checkboxes
|
|
3
|
-
|
|
4
|
-
// By default, block labels stack vertically
|
|
5
|
-
.block-label {
|
|
6
|
-
|
|
7
|
-
display: block;
|
|
8
|
-
float: none;
|
|
9
|
-
clear: left;
|
|
10
|
-
position: relative;
|
|
11
|
-
|
|
12
|
-
padding: (8px $gutter-one-third 9px 50px);
|
|
13
|
-
margin-bottom: $gutter-one-third;
|
|
14
|
-
|
|
15
|
-
cursor: pointer; // Encourage clicking on block labels
|
|
16
|
-
|
|
17
|
-
// remove 300ms pause on mobile
|
|
18
|
-
-ms-touch-action: manipulation;
|
|
19
|
-
touch-action: manipulation;
|
|
20
|
-
|
|
21
|
-
@include media(tablet) {
|
|
22
|
-
float: left;
|
|
23
|
-
padding-top: 7px;
|
|
24
|
-
padding-bottom: 7px;
|
|
25
|
-
// width: 25%; - Test : check that text within labels will wrap
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
// Absolutely position inputs within label, to allow text to wrap
|
|
29
|
-
input {
|
|
30
|
-
position: absolute;
|
|
31
|
-
cursor: pointer;
|
|
32
|
-
left: 0;
|
|
33
|
-
top: 0;
|
|
34
|
-
width: 38px;
|
|
35
|
-
height: 38px;
|
|
36
|
-
|
|
37
|
-
// IE8 doesn’t support pseudoelements, so we don’t want to hide native elements there.
|
|
38
|
-
@if ($is-ie == false) or ($ie-version == 9) {
|
|
39
|
-
.js-enabled & {
|
|
40
|
-
margin: 0;
|
|
41
|
-
@include opacity(0);
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
.js-enabled & {
|
|
47
|
-
&.selection-button-radio::before {
|
|
48
|
-
content: "";
|
|
49
|
-
border: 2px solid;
|
|
50
|
-
background: transparent;
|
|
51
|
-
width: 34px;
|
|
52
|
-
height: 34px;
|
|
53
|
-
position: absolute;
|
|
54
|
-
top: 0;
|
|
55
|
-
left: 0;
|
|
56
|
-
@include border-radius(50%);
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
&.selection-button-radio::after {
|
|
60
|
-
content: "";
|
|
61
|
-
border: 10px solid;
|
|
62
|
-
width: 0;
|
|
63
|
-
height: 0;
|
|
64
|
-
position: absolute;
|
|
65
|
-
top: 9px;
|
|
66
|
-
left: 9px;
|
|
67
|
-
@include border-radius(50%);
|
|
68
|
-
@include opacity(0);
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
&.selection-button-checkbox::before {
|
|
72
|
-
content: "";
|
|
73
|
-
border: 2px solid;
|
|
74
|
-
background: transparent;
|
|
75
|
-
width: 34px;
|
|
76
|
-
height: 34px;
|
|
77
|
-
position: absolute;
|
|
78
|
-
top: 0;
|
|
79
|
-
left: 0;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
&.selection-button-checkbox::after {
|
|
83
|
-
content: "";
|
|
84
|
-
border: solid;
|
|
85
|
-
border-width: 0 0 5px 5px;
|
|
86
|
-
background: transparent;
|
|
87
|
-
width: 17px;
|
|
88
|
-
height: 7px;
|
|
89
|
-
position: absolute;
|
|
90
|
-
top: 10px;
|
|
91
|
-
left: 8px;
|
|
92
|
-
-moz-transform: rotate(-45deg); // Firefox 15 compatibility
|
|
93
|
-
-o-transform: rotate(-45deg); // Opera 12.0 compatibility
|
|
94
|
-
-webkit-transform: rotate(-45deg); // Safari 8 compatibility
|
|
95
|
-
-ms-transform: rotate(-45deg); // IE9 compatibility
|
|
96
|
-
transform: rotate(-45deg);
|
|
97
|
-
@include opacity(0);
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
// Focused state
|
|
101
|
-
&.selection-button-radio,
|
|
102
|
-
&.selection-button-checkbox {
|
|
103
|
-
&.focused::before {
|
|
104
|
-
@include box-shadow(0 0 0 5px $focus-colour);
|
|
105
|
-
}
|
|
106
|
-
// IE8 focus outline should stay as a border around the entire label
|
|
107
|
-
// Lack of padding doesn’t matter as IE8 won’t resize the inputs.
|
|
108
|
-
@include ie-lte(8) {
|
|
109
|
-
&.focused {
|
|
110
|
-
outline: 3px solid $focus-colour;
|
|
111
|
-
|
|
112
|
-
input:focus {
|
|
113
|
-
outline: none;
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
// Selected state
|
|
120
|
-
&.selection-button-radio,
|
|
121
|
-
&.selection-button-checkbox {
|
|
122
|
-
&.selected::after {
|
|
123
|
-
@include opacity(1);
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
&:last-child,
|
|
129
|
-
&:last-of-type {
|
|
130
|
-
margin-bottom: 0;
|
|
131
|
-
}
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
// To stack horizontally, use .inline on parent, to sit block labels next to each other
|
|
135
|
-
.inline .block-label {
|
|
136
|
-
clear: none;
|
|
137
|
-
|
|
138
|
-
@include media (tablet) {
|
|
139
|
-
margin-bottom: 0;
|
|
140
|
-
margin-right: $gutter;
|
|
141
|
-
}
|
|
142
|
-
}
|