govuk_elements_rails 2.1.2 → 2.2.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
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 70bd2636957bf7e617a72fdef3fdf32c431e2d13
|
|
4
|
+
data.tar.gz: 2accab8ad5ea0e71d8d48ce8acc881eb8efd1ee4
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 8e1bd0065a8e755b951977d894a6b1fa280764520ea3529be9a7772103f4e486ea9332b7382cf070117b85c7fa18b461615012cca65f706b365f46d0b6b22aef
|
|
7
|
+
data.tar.gz: cf4867b9d1620d6efc53118dd321caafc1e6173656b9429aef9fac2d50c630b696b955229137835602939f804c88fa1e796b33d20a081a934a90887a2177f8ee
|
|
@@ -145,9 +145,9 @@ textarea {
|
|
|
145
145
|
@include core-19;
|
|
146
146
|
width: 100%;
|
|
147
147
|
|
|
148
|
-
padding: 4px;
|
|
149
|
-
background-color:
|
|
150
|
-
border: 2px solid
|
|
148
|
+
padding: 5px 4px 4px;
|
|
149
|
+
background-color: transparent;
|
|
150
|
+
border: 2px solid;
|
|
151
151
|
|
|
152
152
|
// TODO: Remove 50% width set for tablet and up
|
|
153
153
|
// !! BREAKING CHANGE !!
|
|
@@ -22,8 +22,7 @@
|
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
// Hide, but not for screenreaders
|
|
25
|
-
|
|
26
|
-
.visuallyhidden {
|
|
25
|
+
@mixin visually-hidden {
|
|
27
26
|
position: absolute;
|
|
28
27
|
overflow: hidden;
|
|
29
28
|
clip: rect(0 0 0 0);
|
|
@@ -33,3 +32,8 @@
|
|
|
33
32
|
padding: 0;
|
|
34
33
|
border: 0;
|
|
35
34
|
}
|
|
35
|
+
|
|
36
|
+
.visually-hidden,
|
|
37
|
+
.visuallyhidden {
|
|
38
|
+
@include visually-hidden;
|
|
39
|
+
}
|
|
@@ -9,36 +9,116 @@
|
|
|
9
9
|
clear: left;
|
|
10
10
|
position: relative;
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
padding: (18px $gutter $gutter-half $gutter * 1.8);
|
|
12
|
+
padding: (8px $gutter-one-third 9px 50px);
|
|
13
|
+
margin-bottom: $gutter-one-third;
|
|
15
14
|
|
|
16
|
-
margin-bottom: 10px;
|
|
17
15
|
cursor: pointer; // Encourage clicking on block labels
|
|
18
16
|
|
|
19
17
|
@include media(tablet) {
|
|
20
18
|
float: left;
|
|
19
|
+
padding-top: 7px;
|
|
20
|
+
padding-bottom: 7px;
|
|
21
21
|
// width: 25%; - Test : check that text within labels will wrap
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
// Absolutely position inputs within label, to allow text to wrap
|
|
25
25
|
input {
|
|
26
26
|
position: absolute;
|
|
27
|
-
top: 15px;
|
|
28
|
-
left: $gutter-half;
|
|
29
27
|
cursor: pointer;
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
28
|
+
left: 0;
|
|
29
|
+
top: 0;
|
|
30
|
+
width: 38px;
|
|
31
|
+
height: 38px;
|
|
32
|
+
|
|
33
|
+
// IE8 doesn’t support pseudoelements, so we don’t want to hide native elements there.
|
|
34
|
+
@if ($is-ie == false) or ($ie-version == 9) {
|
|
35
|
+
.js-enabled & {
|
|
36
|
+
margin: 0;
|
|
37
|
+
@include opacity(0);
|
|
38
|
+
}
|
|
36
39
|
}
|
|
37
40
|
}
|
|
38
41
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
+
.js-enabled & {
|
|
43
|
+
&.selection-button-radio::before {
|
|
44
|
+
content: "";
|
|
45
|
+
border: 2px solid;
|
|
46
|
+
background: transparent;
|
|
47
|
+
width: 34px;
|
|
48
|
+
height: 34px;
|
|
49
|
+
position: absolute;
|
|
50
|
+
top: 0;
|
|
51
|
+
left: 0;
|
|
52
|
+
@include border-radius(50%);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
&.selection-button-radio::after {
|
|
56
|
+
content: "";
|
|
57
|
+
border: 10px solid;
|
|
58
|
+
width: 0;
|
|
59
|
+
height: 0;
|
|
60
|
+
position: absolute;
|
|
61
|
+
top: 9px;
|
|
62
|
+
left: 9px;
|
|
63
|
+
@include border-radius(50%);
|
|
64
|
+
@include opacity(0);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
&.selection-button-checkbox::before {
|
|
68
|
+
content: "";
|
|
69
|
+
border: 2px solid;
|
|
70
|
+
background: transparent;
|
|
71
|
+
width: 34px;
|
|
72
|
+
height: 34px;
|
|
73
|
+
position: absolute;
|
|
74
|
+
top: 0;
|
|
75
|
+
left: 0;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
&.selection-button-checkbox::after {
|
|
79
|
+
content: "";
|
|
80
|
+
border: solid;
|
|
81
|
+
border-width: 0 0 5px 5px;
|
|
82
|
+
background: transparent;
|
|
83
|
+
width: 17px;
|
|
84
|
+
height: 7px;
|
|
85
|
+
position: absolute;
|
|
86
|
+
top: 10px;
|
|
87
|
+
left: 8px;
|
|
88
|
+
-moz-transform: rotate(-45deg); // Firefox 15 compatibility
|
|
89
|
+
-o-transform: rotate(-45deg); // Opera 12.0 compatibility
|
|
90
|
+
-webkit-transform: rotate(-45deg); // Safari 8 compatibility
|
|
91
|
+
-ms-transform: rotate(-45deg); // IE9 compatibility
|
|
92
|
+
transform: rotate(-45deg);
|
|
93
|
+
@include opacity(0);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
// Focused state
|
|
97
|
+
&.selection-button-radio,
|
|
98
|
+
&.selection-button-checkbox {
|
|
99
|
+
&.focused::before {
|
|
100
|
+
@include box-shadow(0 0 0 5px $focus-colour);
|
|
101
|
+
}
|
|
102
|
+
// IE8 focus outline should stay as a border around the entire label
|
|
103
|
+
// Lack of padding doesn’t matter as IE8 won’t resize the inputs.
|
|
104
|
+
@include ie-lte(8) {
|
|
105
|
+
&.focused {
|
|
106
|
+
outline: 3px solid $focus-colour;
|
|
107
|
+
|
|
108
|
+
input:focus {
|
|
109
|
+
outline: none;
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
// Selected state
|
|
116
|
+
&.selection-button-radio,
|
|
117
|
+
&.selection-button-checkbox {
|
|
118
|
+
&.selected::after {
|
|
119
|
+
@include opacity(1);
|
|
120
|
+
}
|
|
121
|
+
}
|
|
42
122
|
}
|
|
43
123
|
|
|
44
124
|
&:last-child,
|
|
@@ -53,29 +133,6 @@
|
|
|
53
133
|
|
|
54
134
|
@include media (tablet) {
|
|
55
135
|
margin-bottom: 0;
|
|
56
|
-
margin-right:
|
|
136
|
+
margin-right: $gutter;
|
|
57
137
|
}
|
|
58
138
|
}
|
|
59
|
-
|
|
60
|
-
// Selected and focused states
|
|
61
|
-
|
|
62
|
-
// Allow a qualifying element for the selected state
|
|
63
|
-
// scss-lint:disable QualifyingElement
|
|
64
|
-
|
|
65
|
-
// Add selected state
|
|
66
|
-
.js-enabled label.selected {
|
|
67
|
-
background: $white;
|
|
68
|
-
border-color: $black;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
// Add focus to block labels
|
|
72
|
-
.js-enabled label.focused {
|
|
73
|
-
outline: 3px solid $focus-colour;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
// scss-lint:enable QualifyingElement
|
|
77
|
-
|
|
78
|
-
// Remove focus from radio/checkboxes
|
|
79
|
-
.js-enabled .focused input:focus {
|
|
80
|
-
outline: none;
|
|
81
|
-
}
|
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: 2.
|
|
4
|
+
version: 2.2.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: 2016-11-
|
|
12
|
+
date: 2016-11-18 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.0
|
|
56
56
|
description: |-
|
|
57
|
-
A gem wrapper around govuk_elements v2.
|
|
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 v2.2.0
|
|
58
|
+
that pulls stylesheet and javascript files into a Rails app. Changelog: https://github.com/alphagov/govuk_elements/blob/fcd9b5098162750e633a3d462c468ad146c8991b
|
|
59
59
|
/CHANGELOG.md
|
|
60
60
|
email: robin.whittleton@digital.cabinet-office.gov.uk
|
|
61
61
|
executables: []
|