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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: daa6ca3a658ac82f5376402f7b2340a632d51c8e
4
- data.tar.gz: 444a393037f86a9829f34cf65bc832c635ac84a0
3
+ metadata.gz: 0e6914fde28e84188afc03cf441efc6b2f83ef4c
4
+ data.tar.gz: 5af89f3be0bca9c2d286da4bc347164024e0bdf9
5
5
  SHA512:
6
- metadata.gz: 89b63c571f1666b85d2ecc654840c04c75b1398410738c254640aee1c792930796ee98a818bbbaa9605f251079dd1ddb53668800bdcd6b9ec728f7702ac7e8bc
7
- data.tar.gz: 99471d0e0cf3d42df8d2659fcb223bf9a658543697a1a1650d6d128eb8cb454fc3c7c75a9ee5adffb35a5c8c014915d82ce65afed6124e04657c24e106a88bca
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
- gem 'govuk_elements_rails'
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
- gem 'govuk_template'
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
- // Base (unclassed HTML elements)
33
- // These are predefined by govuk_template
34
- // If you're not using govuk_template, uncomment the line below.
35
- // HTML elements, set by the GOV.UK template
36
- @import 'elements/base'
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
- // From GDS's alphagov/govuk_frontend_toolkit
52
- @import 'colours'
53
- @import 'font_stack'
54
- @import 'measurements'
55
- @import 'conditionals'
56
- @import 'device-pixels'
57
- @import 'grid_layout'
58
- @import 'typography'
59
- @import 'shims'
60
-
61
- @import 'design-patterns/alpha-beta'
62
- @import 'design-patterns/buttons'
63
- @import 'design-patterns/breadcrumbs'
64
-
65
- // From GDS's alphagov/govuk_elements
66
- @import 'elements/helpers'
67
- @import 'elements/reset'
68
-
69
- // Base (unclassed HTML elements)
70
- // These are predefined by govuk_template
71
- // If you're not using govuk_template, uncomment the line below.
72
- // HTML elements, set by the GOV.UK template
73
- // @import 'elements/base'
74
-
75
- @import 'elements/layout'
76
- @import 'elements/elements-typography'
77
- @import 'elements/buttons'
78
- // @import 'elements/icons'
79
- @import 'elements/lists'
80
- // @import 'elements/tables'
81
- @import 'elements/details'
82
- @import 'elements/panels'
83
- @import 'elements/forms'
84
- @import 'elements/forms/form-block-labels'
85
- @import 'elements/forms/form-date'
86
- @import 'elements/forms/form-validation'
87
- @import 'elements/breadcrumbs'
88
- @import 'elements/phase-banner'
89
- @import 'elements/components'
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
- // from govuk_elements gem
101
- //= require details.polyfill
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
- // from govuk_frontend_toolkit gem
110
- //= require vendor/polyfills/bind
111
- //= require govuk/selection-buttons
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
- // from govuk_frontend_toolkit gem
116
- //= require vendor/polyfills/bind
117
- //= require govuk_toolkit
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
- git clone https://github.com/ministryofjustice/govuk_elements_rails.git
141
- cd govuk_elements_rails
142
- git submodule init
143
- git submodule update
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
- cd govuk_elements
148
- git fetch origin
149
- git describe --tags # shows current tag
150
- git tag -l # lists available tags
151
- git checkout master
152
- latest_tag=`git describe --abbrev=0 --tags`
153
- git checkout $latest_tag # change to most recent tag
154
- cd ..
155
-
156
- Check that the symlinks under `vendor/assets` still point to the govuk_elements files.
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
- rake clean
161
- rake gem
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
- If you're happy all's ok, you can commit:
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
- cd govuk_elements
166
- tag_sha=`git rev-parse HEAD`
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
- echo $commit_msg
172
- echo $commit_msg2
173
- echo $commit_msg3
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
- To add a javascript file to gem, create new symlink to govuk_elements file like in this example:
221
+ echo $commit_msg
222
+ echo $commit_msg2
223
+ echo $commit_msg3
179
224
 
180
- cd vendor/assets/javascripts/
181
- ls -l
182
- ln -s ../../../govuk_elements/public/javascripts/vendor/details.polyfill.js .
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
- To update version number, edit version.rb, and repackage:
229
+ Create a new pull request for the release:
188
230
 
189
- vi lib/govuk_elements_rails/version.rb
190
- rake clean
191
- rake package
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
- rake publish
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
- gem 'govuk_elements_rails', :git => "https://github.com/ministryofjustice/govuk_elements_rails.git", :submodules => true
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/ministryofjustice/govuk_elements_rails/issues).
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
- // @import "elements/base"; // HTML elements, set by the GOV.UK template
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
@@ -4,8 +4,9 @@
4
4
  .button {
5
5
  @include button ($button-colour);
6
6
  @include box-sizing (border-box);
7
- padding: em(10) em(15) em(5) em(15);
7
+ padding: em(10) em(15) em(5);
8
8
  vertical-align: top;
9
+
9
10
  @include media (mobile) {
10
11
  width: 100%;
11
12
  }
@@ -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 1em 0;
5
- padding: 2em 0 1em 0;
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 #0b0c0c;
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
- background: file-url("icon-arrow-left.png") no-repeat 0 4px;
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: black;
231
- text-shadow: 0 1px white;
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 4px;
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, body, button, input, table, td, th { font-family: $NTA-Light; }
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, body, div, h1, h2, h3, h4, h5, h6, article, aside, footer, header, hgroup, nav, section {
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%; // 1
51
+ font-size: 62.5%; // 1
26
52
  overflow-y: scroll; // 2
27
- -webkit-tap-highlight-color: rgba(0,0,0,0); // 3
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
- // 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;
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, ul, nav ol, nav ul {
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-19;
118
- @include media-down(mobile) {
119
- @include external-link-16;
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
- }
@@ -81,6 +81,8 @@
81
81
  background: $black;
82
82
  color: $white;
83
83
 
84
+ // Allow uppercase letters in font stack variable names
85
+ // scss-lint:disable NameFormat
84
86
  font-family: $NTA-Light-Tabular;
85
87
  font-size: 12px;
86
88
  font-weight: bold;
@@ -4,14 +4,15 @@
4
4
  // Content
5
5
  // ==========================================================================
6
6
 
7
- // Content wraps the entire site content block
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
  }
@@ -7,8 +7,8 @@
7
7
  border-left-style: solid;
8
8
  border-color: $border-colour;
9
9
 
10
- padding: em(15,19);
11
- margin-bottom: em(15,19);
10
+ padding: em(15, 19);
11
+ margin-bottom: em(15, 19);
12
12
 
13
13
  :first-child {
14
14
  margin-top: 0;
@@ -2,30 +2,116 @@
2
2
  // ==========================================================================
3
3
  // flatten all browser defaults and styles inherited from gov.uk template
4
4
 
5
- /* Borrowed from http://meyerweb.com/eric/tools/css/reset/ */
6
- div, span,
7
- h1, h2, h3, h4, h5, h6, p, blockquote, pre,
8
- a, abbr, acronym, address, big, cite, code,
9
- del, dfn, em, img, ins, kbd, q, s, samp,
10
- small, strike, strong, sub, sup, tt, var,
11
- b, u, i, center,
12
- dl, dt, dd, ol, ul, li,
13
- fieldset, form, label, legend,
14
- table, caption, tbody, tfoot, thead, tr, th, td,
15
- article, aside, canvas, details, embed,
16
- figure, figcaption, footer, header, hgroup,
17
- menu, nav, output, ruby, section, summary,
18
- time, mark {
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, h2, h3, h4, h5, h6, p, blockquote, pre,
25
- small, strike, strong, sub, sup, tt, var,
26
- b, u, i, center,
27
- input, textarea,
28
- table, caption, tbody, tfoot, thead, tr, th, td {
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-16;
12
- padding: em(12, 16) em(20, 16) em(9, 16) 0;
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
- // Use tabular numbers for numeric table cells
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 0;
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: 20px $gutter-half $gutter-half $gutter-half;
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.2
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-02-12 00:00:00.000000000 Z
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.6.1
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.6.1
55
+ version: 4.10.0
73
56
  description: |-
74
- A gem wrapper around govuk_elements v1.1.2
75
- that pulls stylesheet and javascript files into a Rails app. Changelog: https://github.com/alphagov/govuk_elements/blob/c19cf54ebf507b7e22b8a5e4df030b4f480f765d
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: rob.mckinnon ~@nospam@~ digital.justice.gov.uk
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/ministryofjustice/govuk_elements_rails
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.2.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