dvla_internal_frontend_toolkit 0.3.2 → 0.3.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (19) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/fonts/dvla-icons.woff +0 -0
  3. data/app/assets/stylesheets/_dvla-internal-elements.scss +1 -0
  4. data/app/assets/stylesheets/constants/_colours.scss +1 -1
  5. data/app/assets/stylesheets/dvla-internal-elements-styles.min.css +1 -1
  6. data/app/assets/stylesheets/elements/_data.scss +18 -0
  7. data/app/assets/stylesheets/elements/_forms.scss +314 -15
  8. data/app/assets/stylesheets/elements/_layout.scss +6 -3
  9. data/app/assets/stylesheets/elements/_navigation.scss +11 -2
  10. data/app/assets/stylesheets/elements/_typography.scss +29 -9
  11. data/app/assets/stylesheets/elements/_validation.scss +1 -0
  12. data/app/assets/stylesheets/styleguide/_styleguide.scss +74 -0
  13. data/app/views/layouts/erb/layout-fluid-tabs-left.html.erb +1 -1
  14. data/app/views/layouts/erb/layout-fluid-tabs-top.html.erb +1 -1
  15. data/app/views/layouts/erb/layout-fluid-tabs.html.erb +2 -2
  16. data/app/views/layouts/nunjucks/layout-fluid-tabs-left.html +1 -1
  17. data/app/views/layouts/nunjucks/layout-fluid-tabs.html +1 -1
  18. data/lib/dvla_internal_frontend_toolkit/version.rb +1 -1
  19. metadata +3 -2
data/app/assets/stylesheets/elements/_navigation.scss CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  ol {
6
6
  list-style-type: none;
7
- padding: 8px 8px 0;
7
+ padding: 16px 8px 0;
8
8
  margin: 0;
9
9
 
10
10
  li {
@@ -68,7 +68,7 @@
68
68
  }
69
69
  }
70
70
 
71
- #side-bar{
71
+ .side-bar{
72
72
  position: fixed;
73
73
  left: 0;
74
74
  width: 280px;
@@ -95,6 +95,15 @@
95
95
  text-decoration: underline;
96
96
  }
97
97
 
98
+ a{
99
+ text-decoration: none;
100
+ color: $primary;
101
+ &:visited{
102
+ text-decoration: none;
103
+ color: $primary;
104
+ }
105
+ }
106
+
98
107
  &:active, &.active{
99
108
  color: $primary;
100
109
  border-left: 8px solid $primary;
data/app/assets/stylesheets/elements/_typography.scss CHANGED
@@ -4,38 +4,47 @@ body {
4
4
  }
5
5
 
6
6
  @mixin heading() {
7
- font-weight: bold;
8
- color: $text-primary-colour;
7
+ font-weight: 500;
8
+ color: $primary;
9
+ margin-top: 1.25em;
10
+ margin-bottom: 0.25em;
9
11
  }
10
12
 
11
13
  h1 {
14
+ @include heading();
12
15
  font-size: 40px;
13
16
  line-height: 48px;
14
- color: $primary;
17
+ letter-spacing: -0.3px;
18
+ margin-top: 1em;
19
+ margin-bottom: 0.2em;
15
20
  }
16
21
 
17
22
  h2 {
23
+ @include heading();
18
24
  font-size: 32px;
19
25
  line-height: 40px;
20
- color: $primary;
26
+ letter-spacing: -0.2px;
21
27
  }
22
28
 
23
29
  h3 {
30
+ @include heading();
24
31
  font-size: 28px;
25
- line-height: 36px;
26
- color: $primary;
32
+ line-height: 32px;
33
+ letter-spacing: -0.1px;
27
34
  }
28
35
 
29
36
  h4 {
37
+ @include heading();
30
38
  font-size: 24px;
31
- line-height: 32px;
32
- color: $primary;
39
+ line-height: 28px;
40
+ letter-spacing: 0;
33
41
  }
34
42
 
35
43
  h5 {
44
+ @include heading();
36
45
  font-size: 20px;
37
46
  line-height: 24px;
38
- color: $primary;
47
+ letter-spacing: 0.1px;
39
48
  }
40
49
 
41
50
  .text-large {
@@ -52,6 +61,17 @@ h5 {
52
61
  font-weight: normal;
53
62
  }
54
63
 
64
+ .lede {
65
+ font-size: 24px;
66
+ line-height: 36px;
67
+ letter-spacing: 0.3px;
68
+ font-weight: normal;
69
+ }
70
+
71
+ h1 + p, h2 + p, h3 + p, h4 + p, h5 + p {
72
+ margin-top: 0;
73
+ }
74
+
55
75
  ul, ol {
56
76
  &.list-bulleted {
57
77
  list-style-type: disc;
data/app/assets/stylesheets/elements/_validation.scss CHANGED
@@ -54,6 +54,7 @@
54
54
  content: '\e90c';
55
55
  color: white;
56
56
  background: $warning;
57
+ padding-left: 2px;
57
58
  }
58
59
  }
59
60
  }
data/app/assets/stylesheets/styleguide/_styleguide.scss CHANGED
@@ -237,3 +237,77 @@ pre.language-markup{
237
237
  }
238
238
  }
239
239
  }
240
+
241
+ .icon-swatch-wrapper{
242
+ margin: 24px 16px;
243
+ display: inline-block;
244
+ width: 20%;
245
+ text-align: center;
246
+ span{
247
+ display: block;
248
+ &.code{
249
+ font-style: italic;
250
+ }
251
+ }
252
+
253
+ .swatch{
254
+ margin: 8px;
255
+ margin-left: 33%;
256
+ width: 60px;
257
+ height: 60px;
258
+ border-radius: 100%;
259
+ // background: $primary-light;
260
+ color: black;
261
+ position: relative;
262
+ padding-top: 18px;
263
+ text-align: center;
264
+ font-family: $icon-font;
265
+ font-size: 24px;
266
+ border: 1px solid $grey-2;
267
+
268
+ &.swatch-add::before{
269
+ content: '\e900';
270
+ }
271
+ &.swatch-calendar::before{
272
+ content: '\e901';
273
+ }
274
+ &.swatch-download::before{
275
+ content: '\e902';
276
+ }
277
+ &.swatch-info::before{
278
+ content: '\e903';
279
+ }
280
+ &.swatch-key::before{
281
+ content: '\e904';
282
+ }
283
+ &.swatch-manufacturer::before{
284
+ content: '\e905';
285
+ }
286
+ &.swatch-refresh::before{
287
+ content: '\e906';
288
+ }
289
+ &.swatch-retrospective-registration::before{
290
+ content: '\e907';
291
+ }
292
+ &.swatch-search::before{
293
+ content: '\e908';
294
+ }
295
+ &.swatch-tag::before{
296
+ content: '\e909';
297
+ }
298
+ &.swatch-tick::before{
299
+ content: '\e90a';
300
+ }
301
+ &.swatch-user::before{
302
+ content: '\e90b';
303
+ }
304
+ &.swatch-warning::before{
305
+ content: '\e90c';
306
+ }
307
+ }
308
+
309
+ }
310
+
311
+ .btn-pushdown{
312
+ margin-top: 8px;
313
+ }
data/app/views/layouts/erb/layout-fluid-tabs-left.html.erb CHANGED
@@ -34,7 +34,7 @@
34
34
  <main id="content">
35
35
  <div id="side-bar">
36
36
  <% if content_for?(:tabs_left) %>
37
- <% yield :tabs_left %>
37
+ <%= yield :tabs_left %>
38
38
  <% else %>
39
39
  <ul>
40
40
  <li>Tab title one</li>
data/app/views/layouts/erb/layout-fluid-tabs-top.html.erb CHANGED
@@ -28,7 +28,7 @@
28
28
  </div>
29
29
  </div>
30
30
  <% if content_for?(:tabs_top) %>
31
- <% yield :tabs_top %>
31
+ <%= yield :tabs_top %>
32
32
  <% else %>
33
33
  <ul>
34
34
  <li>Tab title one</li>
data/app/views/layouts/erb/layout-fluid-tabs.html.erb CHANGED
@@ -28,7 +28,7 @@
28
28
  </div>
29
29
  </div>
30
30
  <% if content_for?(:tabs_top) %>
31
- <% yield :tabs_top %>
31
+ <%= yield :tabs_top %>
32
32
  <% else %>
33
33
  <ul>
34
34
  <li>Tab title one</li>
@@ -44,7 +44,7 @@
44
44
  <main id="content">
45
45
  <div id="side-bar">
46
46
  <% if content_for?(:tabs_left) %>
47
- <% yield :tabs_left %>
47
+ <%= yield :tabs_left %>
48
48
  <% else %>
49
49
  <ul>
50
50
  <li>Tab title one</li>
data/app/views/layouts/nunjucks/layout-fluid-tabs-left.html CHANGED
@@ -34,7 +34,7 @@
34
34
  {% endblock %}
35
35
 
36
36
  <main id="content">
37
- <div id="side-bar">
37
+ <div class="side-bar">
38
38
  {% block tabs_left %}
39
39
  <ul>
40
40
  <li>Tab title one</li>
data/app/views/layouts/nunjucks/layout-fluid-tabs.html CHANGED
@@ -41,7 +41,7 @@
41
41
  {% endblock %}
42
42
 
43
43
  <main id="content">
44
- <div id="side-bar">
44
+ <div class="side-bar">
45
45
  {% block tabs_left %}
46
46
  <ul>
47
47
  <li>Tab title one</li>
data/lib/dvla_internal_frontend_toolkit/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module DvlaInternalFrontendToolkit
2
- VERSION = "0.3.2"
2
+ VERSION = "0.3.3"
3
3
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: dvla_internal_frontend_toolkit
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.3.2
4
+ version: 0.3.3
5
5
  platform: ruby
6
6
  authors:
7
7
  - Liam Betsworth
@@ -10,7 +10,7 @@ authors:
10
10
  autorequire:
11
11
  bindir: exe
12
12
  cert_chain: []
13
- date: 2017-10-19 00:00:00.000000000 Z
13
+ date: 2017-10-25 00:00:00.000000000 Z
14
14
  dependencies:
15
15
  - !ruby/object:Gem::Dependency
16
16
  name: railties
@@ -79,6 +79,7 @@ files:
79
79
  - app/assets/stylesheets/dvla-internal-elements-styles.min.css
80
80
  - app/assets/stylesheets/dvla-internal-elements-styles.scss
81
81
  - app/assets/stylesheets/elements/_buttons.scss
82
+ - app/assets/stylesheets/elements/_data.scss
82
83
  - app/assets/stylesheets/elements/_forms.scss
83
84
  - app/assets/stylesheets/elements/_layout.scss
84
85
  - app/assets/stylesheets/elements/_lists.scss