govuk_elements_rails 1.1.2 → 1.1.4
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +145 -99
- data/vendor/assets/stylesheets/_govuk-elements.scss +1 -1
- data/vendor/assets/stylesheets/elements/_buttons.scss +2 -1
- data/vendor/assets/stylesheets/elements/_components.scss +2 -2
- data/vendor/assets/stylesheets/elements/_elements-typography.scss +12 -9
- data/vendor/assets/stylesheets/elements/_forms.scss +5 -1
- data/vendor/assets/stylesheets/elements/{_base.scss → _govuk-template-base.scss} +63 -30
- data/vendor/assets/stylesheets/elements/_helpers.scss +0 -11
- data/vendor/assets/stylesheets/elements/_icons.scss +2 -0
- data/vendor/assets/stylesheets/elements/_layout.scss +7 -6
- data/vendor/assets/stylesheets/elements/_panels.scss +2 -2
- data/vendor/assets/stylesheets/elements/_reset.scss +105 -19
- data/vendor/assets/stylesheets/elements/_tables.scss +20 -3
- data/vendor/assets/stylesheets/elements/forms/_form-block-labels.scss +8 -1
- data/vendor/assets/stylesheets/elements/forms/_form-validation.scss +2 -2
- metadata +11 -28
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 0e6914fde28e84188afc03cf441efc6b2f83ef4c
|
4
|
+
data.tar.gz: 5af89f3be0bca9c2d286da4bc347164024e0bdf9
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 98b3b08aa92c33383b297eb50f53a42e2456dc7568c9f4dd1fba213d586a3becfd507a830456c6ae48680849a8efd872b2127cb632ad2de7a687d71af9fd1d08
|
7
|
+
data.tar.gz: 8bbcda4cd7716993e796373e31b917a7819c597eb22124970582e397b209a1bfd96873c843576a9953a2a1039423a2e8ee07789d3dd5a33de154ad74ba23d68f
|
data/README.md
CHANGED
@@ -7,7 +7,9 @@ that pulls stylesheet and javascript files into a Rails app.
|
|
7
7
|
|
8
8
|
Just include `govuk_elements_rails` in your Rails application `Gemfile`:
|
9
9
|
|
10
|
-
|
10
|
+
```ruby
|
11
|
+
gem 'govuk_elements_rails'
|
12
|
+
```
|
11
13
|
|
12
14
|
It automatically attaches itself to your asset path so the static/SCSS
|
13
15
|
files will be available to the asset pipeline.
|
@@ -25,15 +27,19 @@ The gem assumes you have `govuk_template` base HTML styles in your SASS.
|
|
25
27
|
But the [govuk_template gem](https://rubygems.org/gems/govuk_template) is not a
|
26
28
|
dependency. Either require `govuk_template` in your `Gemfile`:
|
27
29
|
|
28
|
-
|
30
|
+
```ruby
|
31
|
+
gem 'govuk_template'
|
32
|
+
```
|
29
33
|
|
30
34
|
or include the following in a Sass file, see Usage section for details:
|
31
35
|
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
36
|
+
```sass
|
37
|
+
// Base (unclassed HTML elements)
|
38
|
+
// These are predefined by govuk_template
|
39
|
+
// If you're not using govuk_template, uncomment the line below.
|
40
|
+
// HTML elements, set by the GOV.UK template
|
41
|
+
@import 'elements/base'
|
42
|
+
```
|
37
43
|
|
38
44
|
## Usage
|
39
45
|
|
@@ -48,45 +54,47 @@ to include the file for the mixins you require.
|
|
48
54
|
For example here are possible imports, remember to add semicolons to the end of
|
49
55
|
lines if you are using the `scss` format instead of `sass`:
|
50
56
|
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
57
|
+
```sass
|
58
|
+
// From GDS's alphagov/govuk_frontend_toolkit
|
59
|
+
@import 'colours'
|
60
|
+
@import 'font_stack'
|
61
|
+
@import 'measurements'
|
62
|
+
@import 'conditionals'
|
63
|
+
@import 'device-pixels'
|
64
|
+
@import 'grid_layout'
|
65
|
+
@import 'typography'
|
66
|
+
@import 'shims'
|
67
|
+
|
68
|
+
@import 'design-patterns/alpha-beta'
|
69
|
+
@import 'design-patterns/buttons'
|
70
|
+
@import 'design-patterns/breadcrumbs'
|
71
|
+
|
72
|
+
// From GDS's alphagov/govuk_elements
|
73
|
+
@import 'elements/helpers'
|
74
|
+
@import 'elements/reset'
|
75
|
+
|
76
|
+
// Base (unclassed HTML elements)
|
77
|
+
// These are predefined by govuk_template
|
78
|
+
// If you're not using govuk_template, uncomment the line below.
|
79
|
+
// HTML elements, set by the GOV.UK template
|
80
|
+
// @import 'elements/base'
|
81
|
+
|
82
|
+
@import 'elements/layout'
|
83
|
+
@import 'elements/elements-typography'
|
84
|
+
@import 'elements/buttons'
|
85
|
+
// @import 'elements/icons'
|
86
|
+
@import 'elements/lists'
|
87
|
+
// @import 'elements/tables'
|
88
|
+
@import 'elements/details'
|
89
|
+
@import 'elements/panels'
|
90
|
+
@import 'elements/forms'
|
91
|
+
@import 'elements/forms/form-block-labels'
|
92
|
+
@import 'elements/forms/form-date'
|
93
|
+
@import 'elements/forms/form-validation'
|
94
|
+
@import 'elements/breadcrumbs'
|
95
|
+
@import 'elements/phase-banner'
|
96
|
+
@import 'elements/components'
|
97
|
+
```
|
90
98
|
|
91
99
|
For further detailed information on usage see the
|
92
100
|
[govuk_elements README](https://github.com/alphagov/govuk_elements#govuk-elements).
|
@@ -97,8 +105,10 @@ In the `app/assets/javascripts/application.js` file in your Rails project use
|
|
97
105
|
`require` rule to include the files for the javascript enhancements you require.
|
98
106
|
For example here are all the requires possible at present:
|
99
107
|
|
100
|
-
|
101
|
-
|
108
|
+
```javascript
|
109
|
+
// from govuk_elements gem
|
110
|
+
//= require details.polyfill
|
111
|
+
```
|
102
112
|
|
103
113
|
### Javascript from govuk_frontend_toolkit
|
104
114
|
|
@@ -106,15 +116,19 @@ In the `app/assets/javascripts/application.js` file in your Rails project use
|
|
106
116
|
`require` rule to include javascript from the `govuk_frontend_toolkit` gem. For
|
107
117
|
example:
|
108
118
|
|
109
|
-
|
110
|
-
|
111
|
-
|
119
|
+
```javascript
|
120
|
+
// from govuk_frontend_toolkit gem
|
121
|
+
//= require vendor/polyfills/bind
|
122
|
+
//= require govuk/selection-buttons
|
123
|
+
```
|
112
124
|
|
113
125
|
To include all of the govuk javascript, require `govuk_toolkit`, i.e.
|
114
126
|
|
115
|
-
|
116
|
-
|
117
|
-
|
127
|
+
```javascript
|
128
|
+
// from govuk_frontend_toolkit gem
|
129
|
+
//= require vendor/polyfills/bind
|
130
|
+
//= require govuk_toolkit
|
131
|
+
```
|
118
132
|
|
119
133
|
See the
|
120
134
|
[govuk_frontend_toolkit documentation](https://github.com/alphagov/govuk_frontend_toolkit#documentation)
|
@@ -123,82 +137,114 @@ for details of what javascript is available.
|
|
123
137
|
## Alternate ways to reuse GOV.UK Elements
|
124
138
|
|
125
139
|
There are other alternate ways to include GOV.UK Elements implementations in a Rails
|
126
|
-
project, for example via [NPM](https://www.npmjs.com/package/govuk-elements-sass)
|
127
|
-
or [Mojular](https://github.com/mojular/govuk-elements).
|
140
|
+
project, for example via [NPM](https://www.npmjs.com/package/govuk-elements-sass).
|
128
141
|
|
129
142
|
Feel free to use an alternate approach when it's more appropriate for your team.
|
130
143
|
|
131
144
|
## Making updates to the gem itself
|
132
145
|
|
133
146
|
You only need to look at this section if you want to update the gem with changes
|
134
|
-
from the govuk-elements repo.
|
147
|
+
from the `govuk-elements` repo.
|
135
148
|
|
136
149
|
If you just want to use the gem in your Rails application, don't follow these steps.
|
137
150
|
|
138
151
|
If you are working on the gem itself, clone and download submodules like this:
|
139
152
|
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
153
|
+
```sh
|
154
|
+
git clone git@github.com:alphagov/govuk_elements_rails.git
|
155
|
+
cd govuk_elements_rails
|
156
|
+
git submodule init
|
157
|
+
git submodule update
|
158
|
+
```
|
144
159
|
|
145
160
|
To update govuk_elements to a specific tag:
|
146
161
|
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
162
|
+
```sh
|
163
|
+
cd govuk_elements
|
164
|
+
git fetch origin
|
165
|
+
git describe --tags # shows current tag
|
166
|
+
git tag -l # lists available tags
|
167
|
+
git checkout master
|
168
|
+
latest_tag=`git describe --abbrev=0 --tags`
|
169
|
+
echo $latest_tag
|
170
|
+
git checkout $latest_tag # change to most recent tag
|
171
|
+
cd ..
|
172
|
+
```
|
173
|
+
|
174
|
+
Check that the symlinks under `vendor/assets` still point to the `govuk_elements` files.
|
175
|
+
|
176
|
+
```sh
|
177
|
+
ls -lat vendor/assets/javascripts/
|
178
|
+
ls -lat vendor/assets/stylesheets/
|
179
|
+
```
|
180
|
+
|
181
|
+
To add a javascript file to gem, create new symlink to `govuk_elements` file, like in this example:
|
182
|
+
|
183
|
+
```sh
|
184
|
+
cd vendor/assets/javascripts/
|
185
|
+
ls -l
|
186
|
+
ln -s ../../../govuk_elements/public/javascripts/vendor/details.polyfill.js .
|
187
|
+
ls -l
|
188
|
+
cd ../../..
|
189
|
+
git add vendor/javascripts/details.polyfill.js
|
190
|
+
```
|
157
191
|
|
158
192
|
To create the gem for local testing:
|
159
193
|
|
160
|
-
|
161
|
-
|
194
|
+
```sh
|
195
|
+
rake clean
|
196
|
+
rake gemspec
|
197
|
+
rake gem
|
198
|
+
```
|
199
|
+
|
200
|
+
If you're happy all's ok, you can create a branch and commit:
|
201
|
+
|
202
|
+
```sh
|
203
|
+
cd govuk_elements
|
204
|
+
tag_sha=`git rev-parse HEAD`
|
205
|
+
echo $tag_sha
|
206
|
+
cd ..
|
162
207
|
|
163
|
-
|
208
|
+
branch_name="update-$latest_tag"
|
209
|
+
echo $branch_name
|
210
|
+
git branch $branch_name
|
211
|
+
git checkout $branch_name
|
212
|
+
git push -u origin $branch_name
|
164
213
|
|
165
|
-
|
166
|
-
|
167
|
-
commit_msg="Upgrade to govuk_elements $latest_tag"
|
168
|
-
commit_msg2="See govuk_elements $latest_tag changelog for details:"
|
169
|
-
commit_msg3="https://github.com/alphagov/govuk_elements/blob/$tag_sha/CHANGELOG.md"
|
214
|
+
git add govuk_elements_rails.gemspec
|
215
|
+
git add govuk_elements
|
170
216
|
|
171
|
-
|
172
|
-
|
173
|
-
|
174
|
-
cd ..
|
175
|
-
git add govuk_elements
|
176
|
-
git commit -m "$commit_msg" -m "$commit_msg2" -m "$commit_msg3"
|
217
|
+
commit_msg="Upgrade to govuk_elements $latest_tag"
|
218
|
+
commit_msg2="See govuk_elements $latest_tag changelog for details:"
|
219
|
+
commit_msg3="https://github.com/alphagov/govuk_elements/blob/$tag_sha/CHANGELOG.md"
|
177
220
|
|
178
|
-
|
221
|
+
echo $commit_msg
|
222
|
+
echo $commit_msg2
|
223
|
+
echo $commit_msg3
|
179
224
|
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
ls -l
|
184
|
-
cd ../../..
|
185
|
-
git add vendor/javascripts/details.polyfill.js
|
225
|
+
git commit -m "$commit_msg" -m "$commit_msg2" -m "$commit_msg3"
|
226
|
+
git push
|
227
|
+
```
|
186
228
|
|
187
|
-
|
229
|
+
Create a new pull request for the release:
|
188
230
|
|
189
|
-
|
190
|
-
|
191
|
-
|
231
|
+
```sh
|
232
|
+
open "https://github.com/alphagov/govuk_elements_rails/compare/master...$branch_name"
|
233
|
+
```
|
192
234
|
|
193
235
|
To tag and publish the gem to rubygems.org:
|
194
236
|
|
195
|
-
|
237
|
+
```sh
|
238
|
+
rake publish
|
239
|
+
```
|
196
240
|
|
197
241
|
If you are installing from git for testing, ensure you enable submodules in your Gemfile
|
198
242
|
require like so:
|
199
243
|
|
200
|
-
|
244
|
+
```ruby
|
245
|
+
gem 'govuk_elements_rails', git: "https://github.com/alphagov/govuk_elements_rails.git", submodules: true
|
246
|
+
```
|
201
247
|
|
202
248
|
## Feedback
|
203
249
|
|
204
|
-
Please provide feedback via [GitHub issues](https://github.com/
|
250
|
+
Please provide feedback via [GitHub issues](https://github.com/alphagov/govuk_elements_rails/issues).
|
@@ -32,7 +32,7 @@
|
|
32
32
|
// Base (unclassed HTML elements)
|
33
33
|
// These are predefined by govuk_template
|
34
34
|
// If you're not using govuk_template, uncomment the line below.
|
35
|
-
|
35
|
+
@import "elements/govuk-template-base"; // Base styles set by GOV.UK template
|
36
36
|
|
37
37
|
// Objects (unstyled design patterns)
|
38
38
|
@import "elements/layout"; // Main content container. Grid layout - rows and column widths
|
@@ -1,8 +1,8 @@
|
|
1
1
|
// Box with turquoise background and white text
|
2
2
|
// Used for transaction end pages, and Bank Holidays
|
3
3
|
.govuk-box-highlight {
|
4
|
-
margin: 1em 0
|
5
|
-
padding: 2em 0 1em
|
4
|
+
margin: 1em 0;
|
5
|
+
padding: 2em 0 1em;
|
6
6
|
color: $white;
|
7
7
|
background: $turquoise;
|
8
8
|
text-align: center;
|
@@ -206,7 +206,7 @@ p {
|
|
206
206
|
height: 0;
|
207
207
|
|
208
208
|
border-top: 5px solid transparent;
|
209
|
-
border-right: 6px solid
|
209
|
+
border-right: 6px solid $text-colour;
|
210
210
|
border-bottom: 5px solid transparent;
|
211
211
|
|
212
212
|
position: absolute;
|
@@ -220,15 +220,17 @@ p {
|
|
220
220
|
// IE7 doesn't support pseudo-elements, let's fallback to an image instead.
|
221
221
|
// Ref: http://caniuse.com/#search=%3Abefore, http://caniuse.com/#search=rgba
|
222
222
|
@include ie-lte(8) {
|
223
|
-
|
223
|
+
background: file-url("icon-arrow-left.png") no-repeat 0 4px;
|
224
224
|
}
|
225
225
|
|
226
226
|
}
|
227
227
|
|
228
228
|
// Code styles
|
229
229
|
.code {
|
230
|
-
color:
|
231
|
-
|
230
|
+
color: $text-colour;
|
231
|
+
background-color: $highlight-colour;
|
232
|
+
|
233
|
+
text-shadow: 0 1px $page-colour;
|
232
234
|
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
233
235
|
font-size: 14px;
|
234
236
|
direction: ltr;
|
@@ -247,10 +249,8 @@ p {
|
|
247
249
|
-ms-hyphens: none;
|
248
250
|
hyphens: none;
|
249
251
|
|
250
|
-
color: $black;
|
251
|
-
background-color: $highlight-colour;
|
252
252
|
border: 1px solid $border-colour;
|
253
|
-
padding: 4px 4px 2px
|
253
|
+
padding: 4px 4px 2px;
|
254
254
|
}
|
255
255
|
|
256
256
|
// Horizontal rule style
|
@@ -262,6 +262,7 @@ hr {
|
|
262
262
|
margin-top: $gutter;
|
263
263
|
margin-bottom: $gutter;
|
264
264
|
padding: 0;
|
265
|
+
|
265
266
|
@include ie-lte(7) {
|
266
267
|
color: $border-colour;
|
267
268
|
}
|
@@ -271,15 +272,17 @@ hr {
|
|
271
272
|
.notice {
|
272
273
|
@extend %contain-floats;
|
273
274
|
position: relative;
|
275
|
+
|
274
276
|
.icon {
|
275
277
|
position: absolute;
|
276
278
|
left: 0;
|
277
279
|
top: 50%;
|
278
280
|
margin-top: -17px; // Half the height of the important icon
|
279
281
|
}
|
282
|
+
|
280
283
|
strong {
|
281
284
|
display: block;
|
282
|
-
padding-left: (35 + 30)+px;
|
285
|
+
padding-left: (35 + 30) + px;
|
283
286
|
margin-left: -$gutter-half;
|
284
287
|
}
|
285
|
-
}
|
288
|
+
}
|
@@ -27,7 +27,7 @@ fieldset {
|
|
27
27
|
}
|
28
28
|
|
29
29
|
// Remove margin under textarea in Chrome and FF
|
30
|
-
textarea{
|
30
|
+
textarea {
|
31
31
|
display: block;
|
32
32
|
}
|
33
33
|
|
@@ -190,6 +190,7 @@ legend {
|
|
190
190
|
|
191
191
|
.form-control-2-3 {
|
192
192
|
width: 100%;
|
193
|
+
|
193
194
|
@include media(tablet) {
|
194
195
|
width: 66.66%;
|
195
196
|
}
|
@@ -205,6 +206,7 @@ legend {
|
|
205
206
|
|
206
207
|
.form-control-1-3 {
|
207
208
|
width: 100%;
|
209
|
+
|
208
210
|
@include media(tablet) {
|
209
211
|
width: 33.33%;
|
210
212
|
}
|
@@ -212,6 +214,7 @@ legend {
|
|
212
214
|
|
213
215
|
.form-control-1-4 {
|
214
216
|
width: 100%;
|
217
|
+
|
215
218
|
@include media(tablet) {
|
216
219
|
width: 25%;
|
217
220
|
}
|
@@ -219,6 +222,7 @@ legend {
|
|
219
222
|
|
220
223
|
.form-control-1-8 {
|
221
224
|
width: 100%;
|
225
|
+
|
222
226
|
@include media(tablet) {
|
223
227
|
width: 12.5%;
|
224
228
|
}
|
@@ -1,7 +1,32 @@
|
|
1
|
-
html,
|
1
|
+
html,
|
2
|
+
body,
|
3
|
+
button,
|
4
|
+
input,
|
5
|
+
table,
|
6
|
+
td,
|
7
|
+
th {
|
8
|
+
// Allow uppercase letters in font stack variable names
|
9
|
+
// scss-lint:disable NameFormat
|
10
|
+
font-family: $NTA-Light;
|
11
|
+
}
|
2
12
|
|
3
13
|
// basic styles for HTML5 and other elements
|
4
|
-
html,
|
14
|
+
html,
|
15
|
+
body,
|
16
|
+
div,
|
17
|
+
h1,
|
18
|
+
h2,
|
19
|
+
h3,
|
20
|
+
h4,
|
21
|
+
h5,
|
22
|
+
h6,
|
23
|
+
article,
|
24
|
+
aside,
|
25
|
+
footer,
|
26
|
+
header,
|
27
|
+
hgroup,
|
28
|
+
nav,
|
29
|
+
section {
|
5
30
|
margin: 0;
|
6
31
|
padding: 0;
|
7
32
|
vertical-align: baseline;
|
@@ -20,17 +45,18 @@ main {
|
|
20
45
|
// 3. Removes Android and iOS tap highlight color to prevent entire container being highlighted
|
21
46
|
// www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/
|
22
47
|
// 4. Prevents iOS text size adjust after orientation change, without disabling user zoom.
|
48
|
+
// 5. Force the scrollbar to always display in IE10/11
|
23
49
|
|
24
50
|
html {
|
25
|
-
font-size: 62.5%;
|
51
|
+
font-size: 62.5%; // 1
|
26
52
|
overflow-y: scroll; // 2
|
27
|
-
|
53
|
+
// Allow RGBA here, this line has been copied from govuk_template
|
54
|
+
// scss-lint:disable ColorVariable
|
55
|
+
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 3
|
28
56
|
-webkit-text-size-adjust: 100%; // 4
|
29
57
|
-ms-text-size-adjust: 100%; // 4
|
30
|
-
|
31
|
-
background-color: $
|
32
|
-
// Force the scrollbar to always display in IE10/11
|
33
|
-
-ms-overflow-style: scrollbar;
|
58
|
+
-ms-overflow-style: scrollbar; // 5
|
59
|
+
background-color: $white;
|
34
60
|
}
|
35
61
|
|
36
62
|
// 1. Font-size increased to compensate for change to html element font-size in
|
@@ -41,6 +67,7 @@ html {
|
|
41
67
|
body {
|
42
68
|
font-size: 160%; // 1
|
43
69
|
margin: 0; // 2
|
70
|
+
|
44
71
|
background: $white;
|
45
72
|
color: $text-colour;
|
46
73
|
line-height: 1.5;
|
@@ -49,7 +76,10 @@ body {
|
|
49
76
|
-moz-osx-font-smoothing: grayscale;
|
50
77
|
}
|
51
78
|
|
52
|
-
ol,
|
79
|
+
ol,
|
80
|
+
ul,
|
81
|
+
nav ol,
|
82
|
+
nav ul {
|
53
83
|
list-style: inherit;
|
54
84
|
}
|
55
85
|
|
@@ -69,7 +99,7 @@ img {
|
|
69
99
|
|
70
100
|
@include ie-lte(7) {
|
71
101
|
button {
|
72
|
-
overflow:visible;
|
102
|
+
overflow: visible;
|
73
103
|
}
|
74
104
|
}
|
75
105
|
|
@@ -77,23 +107,6 @@ abbr[title] {
|
|
77
107
|
cursor: help;
|
78
108
|
}
|
79
109
|
|
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
110
|
// Link styles
|
98
111
|
a:link {
|
99
112
|
color: $link-colour;
|
@@ -114,9 +127,10 @@ a:active {
|
|
114
127
|
// External link styles
|
115
128
|
a[rel="external"] {
|
116
129
|
@include external-link-default;
|
117
|
-
@include external-link-
|
118
|
-
|
119
|
-
|
130
|
+
@include external-link-16;
|
131
|
+
|
132
|
+
@include media(tablet) {
|
133
|
+
@include external-link-19;
|
120
134
|
}
|
121
135
|
}
|
122
136
|
|
@@ -124,3 +138,22 @@ a[rel="external"] {
|
|
124
138
|
@include external-link-12-no-hover;
|
125
139
|
@include external-link-heading;
|
126
140
|
}
|
141
|
+
|
142
|
+
// Set focus styles
|
143
|
+
a {
|
144
|
+
// Allow RGBA here, this line has been copied from govuk_template
|
145
|
+
// scss-lint:disable ColorVariable
|
146
|
+
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);
|
147
|
+
}
|
148
|
+
|
149
|
+
a:focus {
|
150
|
+
background-color: $focus-colour;
|
151
|
+
outline: 3px solid $focus-colour;
|
152
|
+
}
|
153
|
+
|
154
|
+
input:focus,
|
155
|
+
textarea:focus,
|
156
|
+
select:focus,
|
157
|
+
button:focus {
|
158
|
+
outline: 3px solid $focus-colour;
|
159
|
+
}
|
@@ -26,12 +26,6 @@
|
|
26
26
|
|
27
27
|
}
|
28
28
|
|
29
|
-
// Hide for both screenreaders and browsers
|
30
|
-
.hidden {
|
31
|
-
display: none;
|
32
|
-
visibility: hidden;
|
33
|
-
}
|
34
|
-
|
35
29
|
// Hide, but not for screenreaders
|
36
30
|
.visually-hidden,
|
37
31
|
.visuallyhidden {
|
@@ -44,8 +38,3 @@
|
|
44
38
|
padding: 0;
|
45
39
|
border: 0;
|
46
40
|
}
|
47
|
-
|
48
|
-
// Hide, only when JavaScript is enabled
|
49
|
-
.js-enabled .js-hidden {
|
50
|
-
display: none;
|
51
|
-
}
|
@@ -4,14 +4,15 @@
|
|
4
4
|
// Content
|
5
5
|
// ==========================================================================
|
6
6
|
|
7
|
-
//
|
7
|
+
// Allow an ID here, this is useful as it matches the GOV.UK template skiplink
|
8
|
+
// scss-lint:disable IdSelector
|
8
9
|
#content {
|
9
10
|
@extend %site-width-container;
|
10
11
|
@extend %contain-floats;
|
11
12
|
padding-bottom: $gutter;
|
12
13
|
|
13
14
|
@include media(desktop) {
|
14
|
-
padding-bottom: $gutter*3;
|
15
|
+
padding-bottom: $gutter * 3;
|
15
16
|
}
|
16
17
|
}
|
17
18
|
|
@@ -40,19 +41,19 @@
|
|
40
41
|
// By default grid columns break to become full width at tablet size
|
41
42
|
.column-quarter,
|
42
43
|
.column-one-quarter {
|
43
|
-
@include grid-column(1/4);
|
44
|
+
@include grid-column(1 / 4);
|
44
45
|
}
|
45
46
|
|
46
47
|
.column-half,
|
47
48
|
.column-one-half {
|
48
|
-
@include grid-column(1/2);
|
49
|
+
@include grid-column(1 / 2);
|
49
50
|
}
|
50
51
|
|
51
52
|
.column-third,
|
52
53
|
.column-one-third {
|
53
|
-
@include grid-column(1/3);
|
54
|
+
@include grid-column(1 / 3);
|
54
55
|
}
|
55
56
|
|
56
57
|
.column-two-thirds {
|
57
|
-
@include grid-column(2/3);
|
58
|
+
@include grid-column(2 / 3);
|
58
59
|
}
|
@@ -2,30 +2,116 @@
|
|
2
2
|
// ==========================================================================
|
3
3
|
// flatten all browser defaults and styles inherited from gov.uk template
|
4
4
|
|
5
|
-
|
6
|
-
div,
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
5
|
+
// Borrowed from http://meyerweb.com/eric/tools/css/reset/
|
6
|
+
div,
|
7
|
+
span,
|
8
|
+
h1,
|
9
|
+
h2,
|
10
|
+
h3,
|
11
|
+
h4,
|
12
|
+
h5,
|
13
|
+
h6,
|
14
|
+
p,
|
15
|
+
blockquote,
|
16
|
+
pre,
|
17
|
+
a,
|
18
|
+
abbr,
|
19
|
+
acronym,
|
20
|
+
address,
|
21
|
+
big,
|
22
|
+
cite,
|
23
|
+
code,
|
24
|
+
del,
|
25
|
+
dfn,
|
26
|
+
em,
|
27
|
+
img,
|
28
|
+
ins,
|
29
|
+
kbd,
|
30
|
+
q,
|
31
|
+
s,
|
32
|
+
samp,
|
33
|
+
small,
|
34
|
+
strike,
|
35
|
+
strong,
|
36
|
+
sub,
|
37
|
+
sup,
|
38
|
+
tt,
|
39
|
+
var,
|
40
|
+
b,
|
41
|
+
u,
|
42
|
+
i,
|
43
|
+
center,
|
44
|
+
dl,
|
45
|
+
dt,
|
46
|
+
dd,
|
47
|
+
ol,
|
48
|
+
ul,
|
49
|
+
li,
|
50
|
+
fieldset,
|
51
|
+
form,
|
52
|
+
label,
|
53
|
+
legend,
|
54
|
+
table,
|
55
|
+
caption,
|
56
|
+
tbody,
|
57
|
+
tfoot,
|
58
|
+
thead,
|
59
|
+
tr,
|
60
|
+
th,
|
61
|
+
td,
|
62
|
+
article,
|
63
|
+
aside,
|
64
|
+
canvas,
|
65
|
+
details,
|
66
|
+
embed,
|
67
|
+
figure,
|
68
|
+
figcaption,
|
69
|
+
footer,
|
70
|
+
header,
|
71
|
+
hgroup,
|
72
|
+
menu,
|
73
|
+
nav,
|
74
|
+
output,
|
75
|
+
ruby,
|
76
|
+
section,
|
77
|
+
summary,
|
78
|
+
time,
|
79
|
+
mark {
|
19
80
|
border: none;
|
20
81
|
margin: 0;
|
21
82
|
padding: 0;
|
22
83
|
}
|
23
84
|
|
24
|
-
h1,
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
85
|
+
h1,
|
86
|
+
h2,
|
87
|
+
h3,
|
88
|
+
h4,
|
89
|
+
h5,
|
90
|
+
h6,
|
91
|
+
p,
|
92
|
+
blockquote,
|
93
|
+
pre,
|
94
|
+
small,
|
95
|
+
strike,
|
96
|
+
strong,
|
97
|
+
sub,
|
98
|
+
sup,
|
99
|
+
tt,
|
100
|
+
var,
|
101
|
+
b,
|
102
|
+
u,
|
103
|
+
i,
|
104
|
+
center,
|
105
|
+
input,
|
106
|
+
textarea,
|
107
|
+
table,
|
108
|
+
caption,
|
109
|
+
tbody,
|
110
|
+
tfoot,
|
111
|
+
thead,
|
112
|
+
tr,
|
113
|
+
th,
|
114
|
+
td {
|
29
115
|
font-size: inherit;
|
30
116
|
font-family: inherit;
|
31
117
|
line-height: inherit;
|
@@ -8,8 +8,8 @@ table {
|
|
8
8
|
|
9
9
|
th,
|
10
10
|
td {
|
11
|
-
@include core-
|
12
|
-
padding: em(12,
|
11
|
+
@include core-19;
|
12
|
+
padding: em(12, 19) em(20, 19) em(9, 19) 0;
|
13
13
|
|
14
14
|
text-align: left;
|
15
15
|
color: $black;
|
@@ -24,9 +24,26 @@ table {
|
|
24
24
|
}
|
25
25
|
}
|
26
26
|
|
27
|
-
//
|
27
|
+
// Allow a qualifying element, only table data cells should use tabular numbers
|
28
|
+
// scss-lint:disable QualifyingElement
|
28
29
|
td.numeric {
|
29
30
|
@include core-16($tabular-numbers: true);
|
30
31
|
text-align: right;
|
31
32
|
}
|
32
33
|
}
|
34
|
+
|
35
|
+
.table-font-xsmall {
|
36
|
+
|
37
|
+
th {
|
38
|
+
@include bold-16;
|
39
|
+
}
|
40
|
+
|
41
|
+
td {
|
42
|
+
@include core-16;
|
43
|
+
}
|
44
|
+
|
45
|
+
th,
|
46
|
+
td {
|
47
|
+
padding: em(12, 16) em(20, 16) em(9, 16) 0;
|
48
|
+
}
|
49
|
+
}
|
@@ -11,7 +11,7 @@
|
|
11
11
|
|
12
12
|
background: $panel-colour;
|
13
13
|
border: 1px solid $panel-colour;
|
14
|
-
padding: (18px $gutter $gutter-half $gutter*1.8);
|
14
|
+
padding: (18px $gutter $gutter-half $gutter * 1.8);
|
15
15
|
|
16
16
|
margin-bottom: 10px;
|
17
17
|
cursor: pointer; // Encourage clicking on block labels
|
@@ -30,6 +30,7 @@
|
|
30
30
|
margin: 0;
|
31
31
|
width: 29px;
|
32
32
|
height: 29px;
|
33
|
+
|
33
34
|
@include ie(8) {
|
34
35
|
top: 12px;
|
35
36
|
}
|
@@ -39,6 +40,7 @@
|
|
39
40
|
&:hover {
|
40
41
|
border-color: $black;
|
41
42
|
}
|
43
|
+
|
42
44
|
}
|
43
45
|
|
44
46
|
.block-label:last-child {
|
@@ -53,6 +55,9 @@
|
|
53
55
|
|
54
56
|
// Selected and focused states
|
55
57
|
|
58
|
+
// Allow a qualifying element for the selected state
|
59
|
+
// scss-lint:disable QualifyingElement
|
60
|
+
|
56
61
|
// Add selected state
|
57
62
|
.js-enabled label.selected {
|
58
63
|
background: $white;
|
@@ -64,6 +69,8 @@
|
|
64
69
|
outline: 3px solid $focus-colour;
|
65
70
|
}
|
66
71
|
|
72
|
+
// scss-lint:enable QualifyingElement
|
73
|
+
|
67
74
|
// Remove focus from radio/checkboxes
|
68
75
|
.js-enabled .focused input:focus {
|
69
76
|
outline: none;
|
@@ -45,7 +45,7 @@
|
|
45
45
|
clear: both;
|
46
46
|
|
47
47
|
margin: 0;
|
48
|
-
padding: 5px 0 7px
|
48
|
+
padding: 5px 0 7px;
|
49
49
|
}
|
50
50
|
|
51
51
|
// Summary of multiple error messages
|
@@ -65,7 +65,7 @@
|
|
65
65
|
margin-top: $gutter;
|
66
66
|
margin-bottom: $gutter;
|
67
67
|
|
68
|
-
padding:
|
68
|
+
padding: $gutter-two-thirds $gutter-half $gutter-half;
|
69
69
|
}
|
70
70
|
|
71
71
|
@include ie-lte(6) {
|
metadata
CHANGED
@@ -1,22 +1,20 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: govuk_elements_rails
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 1.1.
|
4
|
+
version: 1.1.4
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Rob McKinnon
|
8
|
+
- Government Digital Service
|
8
9
|
autorequire:
|
9
10
|
bindir: bin
|
10
11
|
cert_chain: []
|
11
|
-
date: 2016-
|
12
|
+
date: 2016-05-06 00:00:00.000000000 Z
|
12
13
|
dependencies:
|
13
14
|
- !ruby/object:Gem::Dependency
|
14
15
|
name: rails
|
15
16
|
requirement: !ruby/object:Gem::Requirement
|
16
17
|
requirements:
|
17
|
-
- - "~>"
|
18
|
-
- !ruby/object:Gem::Version
|
19
|
-
version: '4.1'
|
20
18
|
- - ">="
|
21
19
|
- !ruby/object:Gem::Version
|
22
20
|
version: 4.1.0
|
@@ -24,9 +22,6 @@ dependencies:
|
|
24
22
|
prerelease: false
|
25
23
|
version_requirements: !ruby/object:Gem::Requirement
|
26
24
|
requirements:
|
27
|
-
- - "~>"
|
28
|
-
- !ruby/object:Gem::Version
|
29
|
-
version: '4.1'
|
30
25
|
- - ">="
|
31
26
|
- !ruby/object:Gem::Version
|
32
27
|
version: 4.1.0
|
@@ -34,9 +29,6 @@ dependencies:
|
|
34
29
|
name: sass
|
35
30
|
requirement: !ruby/object:Gem::Requirement
|
36
31
|
requirements:
|
37
|
-
- - "~>"
|
38
|
-
- !ruby/object:Gem::Version
|
39
|
-
version: '3.2'
|
40
32
|
- - ">="
|
41
33
|
- !ruby/object:Gem::Version
|
42
34
|
version: 3.2.0
|
@@ -44,9 +36,6 @@ dependencies:
|
|
44
36
|
prerelease: false
|
45
37
|
version_requirements: !ruby/object:Gem::Requirement
|
46
38
|
requirements:
|
47
|
-
- - "~>"
|
48
|
-
- !ruby/object:Gem::Version
|
49
|
-
version: '3.2'
|
50
39
|
- - ">="
|
51
40
|
- !ruby/object:Gem::Version
|
52
41
|
version: 3.2.0
|
@@ -54,27 +43,21 @@ dependencies:
|
|
54
43
|
name: govuk_frontend_toolkit
|
55
44
|
requirement: !ruby/object:Gem::Requirement
|
56
45
|
requirements:
|
57
|
-
- - "~>"
|
58
|
-
- !ruby/object:Gem::Version
|
59
|
-
version: 4.6.1
|
60
46
|
- - ">="
|
61
47
|
- !ruby/object:Gem::Version
|
62
|
-
version: 4.
|
48
|
+
version: 4.10.0
|
63
49
|
type: :runtime
|
64
50
|
prerelease: false
|
65
51
|
version_requirements: !ruby/object:Gem::Requirement
|
66
52
|
requirements:
|
67
|
-
- - "~>"
|
68
|
-
- !ruby/object:Gem::Version
|
69
|
-
version: 4.6.1
|
70
53
|
- - ">="
|
71
54
|
- !ruby/object:Gem::Version
|
72
|
-
version: 4.
|
55
|
+
version: 4.10.0
|
73
56
|
description: |-
|
74
|
-
A gem wrapper around govuk_elements v1.1.
|
75
|
-
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 v1.1.4
|
58
|
+
that pulls stylesheet and javascript files into a Rails app. Changelog: https://github.com/alphagov/govuk_elements/blob/3aa9092185b5a018bd122d8270cdffc7a1f3e6e9
|
76
59
|
/CHANGELOG.md
|
77
|
-
email:
|
60
|
+
email: robin.whittleton@digital.cabinet-office.gov.uk
|
78
61
|
executables: []
|
79
62
|
extensions: []
|
80
63
|
extra_rdoc_files:
|
@@ -86,13 +69,13 @@ files:
|
|
86
69
|
- lib/govuk_elements_rails/engine.rb
|
87
70
|
- vendor/assets/javascripts/details.polyfill.js
|
88
71
|
- vendor/assets/stylesheets/_govuk-elements.scss
|
89
|
-
- vendor/assets/stylesheets/elements/_base.scss
|
90
72
|
- vendor/assets/stylesheets/elements/_breadcrumbs.scss
|
91
73
|
- vendor/assets/stylesheets/elements/_buttons.scss
|
92
74
|
- vendor/assets/stylesheets/elements/_components.scss
|
93
75
|
- vendor/assets/stylesheets/elements/_details.scss
|
94
76
|
- vendor/assets/stylesheets/elements/_elements-typography.scss
|
95
77
|
- vendor/assets/stylesheets/elements/_forms.scss
|
78
|
+
- vendor/assets/stylesheets/elements/_govuk-template-base.scss
|
96
79
|
- vendor/assets/stylesheets/elements/_helpers.scss
|
97
80
|
- vendor/assets/stylesheets/elements/_icons.scss
|
98
81
|
- vendor/assets/stylesheets/elements/_layout.scss
|
@@ -104,7 +87,7 @@ files:
|
|
104
87
|
- vendor/assets/stylesheets/elements/forms/_form-block-labels.scss
|
105
88
|
- vendor/assets/stylesheets/elements/forms/_form-date.scss
|
106
89
|
- vendor/assets/stylesheets/elements/forms/_form-validation.scss
|
107
|
-
homepage: https://github.com/
|
90
|
+
homepage: https://github.com/alphagov/govuk_elements_rails
|
108
91
|
licenses: []
|
109
92
|
metadata: {}
|
110
93
|
post_install_message:
|
@@ -126,7 +109,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
126
109
|
version: '0'
|
127
110
|
requirements: []
|
128
111
|
rubyforge_project:
|
129
|
-
rubygems_version: 2.
|
112
|
+
rubygems_version: 2.5.1
|
130
113
|
signing_key:
|
131
114
|
specification_version: 4
|
132
115
|
summary: A gem wrapper around http://github.com/alphagov/govuk_elements that pulls
|