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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 85648682a9e22e34cd2e42af89725178d104b997
4
- data.tar.gz: 827a92dcc7d95e073db4e2590bbe28ffbbb4ca22
3
+ metadata.gz: ed73a5758d285ea9ec1e7a0421286d74ea2792f5
4
+ data.tar.gz: 1e3187d96b39928a349a22b1d7016f5b938e78f4
5
5
  SHA512:
6
- metadata.gz: 17519e48bc499d28e907ac48025bb631b06581e87791f3086713ecd9208b69439d9cf8dd4f8a3d390e93e376a465df5faa3c2c8ac8225b0f6ac570ffab48eb87
7
- data.tar.gz: e7c7b1fb30e9f189121ff0ea168c694237b3e8354ec007f3c55ed0f3923b2398908666ed73111657095f8a7ca321597c5a297e42278ccd8a6c29997ca8028d5c
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
@@ -1,5 +1,5 @@
1
1
  module GovUKElementsRails
2
2
  def self.elements_version
3
- '0.2.2'
3
+ '0.3.0'
4
4
  end
5
5
  end
@@ -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 (e.keyCode === 32) {
30
- if (e.preventDefault) {
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 example boxes
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
- // Text
44
- .tight {
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: $yellow;
223
+ background-color: $focus-colour;
216
224
  }
217
225
 
218
226
  .swatch-button-colour {
@@ -19,7 +19,7 @@
19
19
  }
20
20
 
21
21
  .button:focus {
22
- outline: 3px solid $yellow;
22
+ outline: 3px solid $focus-colour;
23
23
  }
24
24
 
25
25
  // Disabled buttons
@@ -5,36 +5,36 @@
5
5
 
6
6
  details {
7
7
  display: block;
8
- }
9
8
 
10
- details summary {
11
- display: inline-block;
12
- color: $govuk-blue;
13
- cursor: pointer;
14
- position: relative;
15
- margin-bottom: em(5);
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
- details summary:hover {
19
- color: $link-hover-colour;
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
- // Remove top margin from bordered panel
38
- details .panel-indent {
39
- margin-top: 0;
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-24;
61
- margin-bottom: 0;
62
- .form-hint {
63
- @include core-19;
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
- @extend %contain-floats;
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
- @include box-sizing(border-box);
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
- .form-radio input {
141
- vertical-align: middle;
142
- margin: -4px 5px 0 0;
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
- .form-checkbox input {
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: $grey-2;
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; width: 1px;
40
- margin: -1px; padding: 0; border: 0;
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( 1/4 );
58
+ @include grid-column(1/4);
58
59
  }
60
+
59
61
  .column-half {
60
- @include grid-column( 1/2 );
62
+ @include grid-column(1/2);
61
63
  }
64
+
62
65
  .column-third {
63
- @include grid-column( 1/3 );
66
+ @include grid-column(1/3);
64
67
  }
68
+
65
69
  .column-two-thirds {
66
- @include grid-column( 2/3 );
70
+ @include grid-column(2/3);
67
71
  }
@@ -17,6 +17,7 @@ ol {
17
17
  .list-number {
18
18
  list-style-type: decimal;
19
19
  padding-left: 20px;
20
+
20
21
  @include ie-lte(7) {
21
22
  padding-left: 28px;
22
23
  }
@@ -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
- .panel-indent .form-group:last-child {
28
- margin-bottom: 0;
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
- table th,
15
- table td {
16
- @include core-16;
17
- padding: em(12, 16) em(20, 16) em(9, 16) 0;
13
+ th,
14
+ td {
15
+ @include core-16;
16
+ padding: em(12, 16) em(20, 16) em(9, 16) 0;
18
17
 
19
- text-align: left;
20
- color: #0b0c0c;
21
- border-bottom: 1px solid $border-colour;
22
- }
18
+ text-align: left;
19
+ color: $black;
20
+ border-bottom: 1px solid $border-colour;
21
+ }
23
22
 
24
- table th {
25
- font-weight: 700;
26
- }
27
-
28
- // Right align headings for numeric content
29
- table th.numeric {
30
- text-align: right;
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
- table td.numeric {
35
- @include core-16($tabular-numbers: true);
36
- text-align: right;
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 $yellow;
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
- // Validation summary box
1
+ // Form validation
2
+ // ==========================================================================
2
3
 
3
- @import "colours";
4
- @import "measurements";
5
- @import "conditionals";
6
- @import "typography";
4
+ // Update the error colour in the govuk frontend toolkit
5
+ $error-colour: #b10e1e;
7
6
 
8
- .validation-summary {
9
- border: 3px solid $error-colour;
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
- @include ie-lte(6){
14
- zoom: 1;
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
- .validation-summary ul {
19
- margin-top: 10px;
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
- .validation-summary li,
23
- .validation-summary p {
24
- @include core-16;
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
- .validation-summary p {
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: 5px;
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
- color: $error-colour !important;
75
+ zoom: 1;
36
76
  }
37
- }
38
77
 
39
- .validation-summary .heading-small {
40
- margin-top: $gutter-half;
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
- // Validation error message box
45
- // .validation-error {
46
- // clear: both;
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
- // .validation-error .form-group {
55
- // margin-bottom: 20px;
56
- // }
91
+ .error-summary-list {
92
+ padding-left: 0;
57
93
 
58
- // .validation-error p {
59
- // margin-bottom: 10px;
60
- // }
94
+ li {
61
95
 
96
+ @include media(tablet) {
97
+ margin-bottom: 5px;
98
+ }
99
+ }
62
100
 
63
- // Validation message
64
- .validation-message {
65
- display: block;
66
- @include core-16;
67
- color: $error-colour;
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.2.2
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-03-26 00:00:00.000000000 Z
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 caadd5a3bf04d58ab61bab5ec8e00afdba818b18 govuk_elements
54
- (remotes/origin/HEAD) that pulls stylesheet and javascript files into a Rails app.
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: []