dvla_internal_frontend_toolkit 0.2.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (32) hide show
  1. checksums.yaml +7 -0
  2. data/LICENSE +19 -0
  3. data/README.md +7 -0
  4. data/lib/dvla_internal_frontend_toolkit/version.rb +3 -0
  5. data/lib/dvla_internal_frontend_toolkit.rb +6 -0
  6. data/vendor/assets/fonts/Inter-UI-Bold.woff +0 -0
  7. data/vendor/assets/fonts/Inter-UI-Medium.woff +0 -0
  8. data/vendor/assets/fonts/Inter-UI-Regular.woff +0 -0
  9. data/vendor/assets/fonts/dvla-icons.woff +0 -0
  10. data/vendor/assets/images/coat-of-arms-logo.svg +71 -0
  11. data/vendor/assets/images/separator.png +0 -0
  12. data/vendor/assets/images/triangle-caret-down.svg +12 -0
  13. data/vendor/assets/javascripts/stickyfill.js +6 -0
  14. data/vendor/assets/layouts/layout-dialog.html +51 -0
  15. data/vendor/assets/layouts/layout-fixed.html +50 -0
  16. data/vendor/assets/layouts/layout-fluid.html +49 -0
  17. data/vendor/assets/stylesheets/_dvla-internal-elements.scss +13 -0
  18. data/vendor/assets/stylesheets/constants/_colours.scss +80 -0
  19. data/vendor/assets/stylesheets/constants/_fonts.scss +31 -0
  20. data/vendor/assets/stylesheets/constants/_measurements.scss +1 -0
  21. data/vendor/assets/stylesheets/dvla-internal-elements-styles.min.css +1 -0
  22. data/vendor/assets/stylesheets/dvla-internal-elements-styles.scss +2 -0
  23. data/vendor/assets/stylesheets/elements/_buttons.scss +148 -0
  24. data/vendor/assets/stylesheets/elements/_forms.scss +50 -0
  25. data/vendor/assets/stylesheets/elements/_layout.scss +250 -0
  26. data/vendor/assets/stylesheets/elements/_lists.scss +56 -0
  27. data/vendor/assets/stylesheets/elements/_navigation.scss +72 -0
  28. data/vendor/assets/stylesheets/elements/_tables.scss +155 -0
  29. data/vendor/assets/stylesheets/elements/_tabs.scss +105 -0
  30. data/vendor/assets/stylesheets/elements/_typography.scss +120 -0
  31. data/vendor/assets/stylesheets/elements/_validation.scss +59 -0
  32. metadata +118 -0
@@ -0,0 +1,155 @@
1
+ table {
2
+ width: 100%;
3
+ font-size: 16px;
4
+ text-align: left;
5
+ border-spacing: 0;
6
+ border-collapse: collapse;
7
+
8
+ thead {
9
+ th {
10
+ height: 48px;
11
+ font-weight: bold;
12
+ border-color: $grey-2;
13
+ border-width: 1px 0;
14
+ border-style: solid;
15
+
16
+ &:first-child {
17
+ padding-left: 16px;
18
+ }
19
+ }
20
+ }
21
+
22
+ tbody {
23
+ tr {
24
+ td {
25
+ background: $grey-4;
26
+ height: 48px;
27
+ border-color: $grey-2;
28
+ border-width: 0 0 1px 0;
29
+ border-style: solid;
30
+
31
+ &:first-child {
32
+ padding-left: 16px;
33
+ }
34
+ }
35
+ }
36
+ }
37
+ }
38
+
39
+ table.tachonet-queue {
40
+ width: 100%;
41
+ font-size: 16px;
42
+ border-collapse: separate;
43
+ border-spacing: 0 0.5em;
44
+
45
+ thead {
46
+ th {
47
+ min-height: 48px;
48
+ border: none;
49
+ vertical-align: bottom;
50
+ padding-bottom: 0.5em;
51
+
52
+ &:last-child {
53
+ text-align: center;
54
+ }
55
+ }
56
+ }
57
+
58
+ tbody {
59
+ tr {
60
+
61
+ &.disabled {
62
+ td {
63
+ background: $grey-4;
64
+ }
65
+ }
66
+
67
+ &.urgent {
68
+ td:first-child {
69
+ border-left-color: $mellow-red;
70
+ }
71
+
72
+ .bubble {
73
+ background: mix($mellow-red, white, 22%);
74
+ }
75
+ }
76
+
77
+ &.waiting {
78
+ td:first-child {
79
+ border-left-color: $warning;
80
+ }
81
+
82
+ .bubble {
83
+ background: mix($warning, white, 22%);
84
+ }
85
+ }
86
+
87
+ &.parked {
88
+ td:first-child {
89
+ border-left-color: $secondary;
90
+ }
91
+
92
+ .bubble {
93
+ background: mix($secondary, white, 22%);
94
+ }
95
+ }
96
+
97
+ &.completed {
98
+ td:first-child {
99
+ border-left-color: $success;
100
+ }
101
+
102
+ .bubble {
103
+ color: white;
104
+ background: $success;
105
+ &::before{
106
+ font-family: $icon-font;
107
+ content: '\e90a';
108
+ }
109
+ }
110
+ }
111
+
112
+ td {
113
+ background: white;
114
+ border-width: 1px 0 2px 0;
115
+ border-style: solid;
116
+ border-color: $grey-2;
117
+
118
+ &.transaction-type {
119
+ font-weight: bold;
120
+ }
121
+
122
+ &.tacho-number {
123
+ font-weight: bold;
124
+ }
125
+
126
+ &.status {
127
+ text-align: center;
128
+ font-weight: bold;
129
+
130
+ .bubble {
131
+ width: 32px;
132
+ height: 32px;
133
+ line-height: 34px;
134
+ border-radius: 16px;
135
+ display: inline-block;
136
+ padding-left: 1px;
137
+ }
138
+ }
139
+
140
+
141
+ &:first-child {
142
+ border-left-width: 6px;
143
+ border-top-left-radius: 4px;
144
+ border-bottom-left-radius: 4px;
145
+ }
146
+
147
+ &:last-child {
148
+ border-top-right-radius: 4px;
149
+ border-bottom-right-radius: 4px;
150
+ border-right: 1px solid $grey-2;
151
+ }
152
+ }
153
+ }
154
+ }
155
+ }
@@ -0,0 +1,105 @@
1
+ .tabs {
2
+ display: block;
3
+ padding-left: 0px;
4
+ height: 48px;
5
+ line-height: 48px;
6
+ box-sizing: border-box;
7
+ font-size: 0;
8
+ font-weight: 500;
9
+ border-bottom: 1px solid $grey-2;
10
+
11
+ .tab {
12
+ display: inline-block;
13
+ background: $grey-4;
14
+ border: 1px solid $grey-2;
15
+ font-size: 16px;
16
+ margin-right: -1px;
17
+ color: $black;
18
+
19
+ &:hover {
20
+ background: $grey-3;
21
+ }
22
+
23
+ &.active {
24
+ color: $primary;
25
+ background: white;
26
+ border-bottom: 1px solid white;
27
+
28
+ &:hover {
29
+ background: white;
30
+ }
31
+
32
+ a {
33
+ &:visited {
34
+ color: $primary;
35
+ }
36
+ }
37
+
38
+ }
39
+
40
+
41
+ a {
42
+ display: block;
43
+ height: calc(100% - 1px);
44
+ text-decoration: none;
45
+ padding: 0 24px;
46
+
47
+ &:visited {
48
+ color: $black;
49
+ }
50
+ }
51
+ }
52
+
53
+ .action{
54
+ list-style: none;
55
+ // display: inline-block;
56
+ float: right;
57
+ line-height: normal;
58
+ margin-top: 8px;
59
+ }
60
+ }
61
+
62
+ .sub-tabs {
63
+ margin-top: 32px;
64
+ display: block;
65
+ height: 40px;
66
+ line-height: 40px;
67
+ box-sizing: border-box;
68
+ font-size: 0;
69
+ font-weight: 500;
70
+ border-bottom: 1px solid $grey-2;
71
+
72
+ .sub-tab {
73
+ display: inline-block;
74
+ font-size: 16px;
75
+ margin-right: -1px;
76
+ color: $black;
77
+
78
+ &:hover {
79
+ border-bottom: 2px solid $grey-2;
80
+ }
81
+
82
+ &.active {
83
+ color: $primary;
84
+ border-bottom: 2px solid $primary;
85
+
86
+ a {
87
+ &:visited {
88
+ color: $primary;
89
+ }
90
+ }
91
+
92
+ }
93
+
94
+ a {
95
+ display: block;
96
+ height: calc(100% - 1px);
97
+ text-decoration: none;
98
+ padding: 0 32px;
99
+
100
+ &:visited {
101
+ color: $black;
102
+ }
103
+ }
104
+ }
105
+ }
@@ -0,0 +1,120 @@
1
+ body {
2
+ font-size: 16px;
3
+ line-height: 24px;
4
+ }
5
+
6
+ @mixin heading() {
7
+ font-weight: bold;
8
+ color: $text-primary-colour;
9
+ }
10
+
11
+ h1 {
12
+ font-size: 40px;
13
+ line-height: 48px;
14
+ color: $primary;
15
+ }
16
+
17
+ h2 {
18
+ font-size: 32px;
19
+ line-height: 40px;
20
+ color: $primary;
21
+ }
22
+
23
+ h3 {
24
+ font-size: 28px;
25
+ line-height: 36px;
26
+ color: $primary;
27
+ }
28
+
29
+ h4 {
30
+ font-size: 24px;
31
+ line-height: 32px;
32
+ color: $primary;
33
+ }
34
+
35
+ h5 {
36
+ font-size: 20px;
37
+ line-height: 24px;
38
+ color: $primary;
39
+ }
40
+
41
+ .text-large {
42
+ color: $text-primary-colour;
43
+ line-height: 32px;
44
+ font-size: 20px;
45
+ font-weight: normal;
46
+ }
47
+
48
+ .text-small {
49
+ color: $text-primary-colour;
50
+ line-height: 24px;
51
+ font-size: 16px;
52
+ font-weight: normal;
53
+ }
54
+
55
+ ul, ol {
56
+ &.list-bulleted {
57
+ list-style-type: disc;
58
+ }
59
+
60
+ &.list-numbered {
61
+ list-style-type: decimal;
62
+ }
63
+
64
+ &.list-bulleted, &.list-numbered {
65
+ color: $text-primary-colour;
66
+ line-height: 28px;
67
+
68
+ &.text-large {
69
+ line-height: 32px;
70
+ font-size: 20px;
71
+ }
72
+ }
73
+ }
74
+
75
+ .inset {
76
+ border-left: 6px solid $grey-3;
77
+ padding-left: 16px;
78
+ display: block;
79
+ }
80
+
81
+ .important {
82
+ font-weight: bold;
83
+ position: relative;
84
+ display: inline-block;
85
+ &:before {
86
+ padding-top: 4px;
87
+ padding-left: 9px;
88
+ font-family: $icon-font;
89
+ content: '\e90c';
90
+ left: 0;
91
+ top: 0;
92
+ background: black;
93
+ color: white;
94
+ width: 32px;
95
+ height: 32px;
96
+ border-radius: 16px;
97
+ display: inline-block;
98
+ }
99
+
100
+ p, div, span {
101
+ margin-top: -32px;
102
+ padding-left: 48px;
103
+ line-height: 32px;
104
+ }
105
+ }
106
+
107
+ a {
108
+ color: $link-colour;
109
+
110
+ &:visited {
111
+ color: $visited-colour;
112
+ }
113
+ &:hover {
114
+ color: $link-hover-colour;
115
+ }
116
+ &:focus {
117
+ outline: 3px solid $focus-colour;
118
+ background: $focus-colour;
119
+ }
120
+ }
@@ -0,0 +1,59 @@
1
+ @mixin alert-icon() {
2
+ font-size: 22px;
3
+ font-family: $icon-font;
4
+ height: 32px;
5
+ width: 32px;
6
+ display: inline-block;
7
+ border-radius: 50%;
8
+ vertical-align: bottom;
9
+ margin-right: 4px;
10
+ }
11
+
12
+ .alert {
13
+ width: 100%;
14
+ text-align: center;
15
+ border-top-width: 4px;
16
+ border-top-style: solid;
17
+ font-weight: 500;
18
+ font-size: 24px;
19
+ line-height: 32px;
20
+ color: $black;
21
+ padding: 40px 32px 44px 32px;
22
+
23
+ &.success {
24
+ border-top-color: $success;
25
+ background: $success-lightest;
26
+
27
+ &:before {
28
+ @include alert-icon();
29
+ font-size: 18px;
30
+ content: '\e90a';
31
+ color: white;
32
+ background: $success;
33
+ }
34
+ }
35
+
36
+ &.info {
37
+ border-top-color: $secondary;
38
+ background: $secondary-lightest;
39
+
40
+ &:before {
41
+ @include alert-icon();
42
+ content: '\e903';
43
+ color: white;
44
+ background: $secondary;
45
+ }
46
+ }
47
+
48
+ &.warning {
49
+ border-top-color: $warning;
50
+ background: $warning-lightest;
51
+
52
+ &:before {
53
+ @include alert-icon();
54
+ content: '\e90c';
55
+ color: white;
56
+ background: $warning;
57
+ }
58
+ }
59
+ }
metadata ADDED
@@ -0,0 +1,118 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: dvla_internal_frontend_toolkit
3
+ version: !ruby/object:Gem::Version
4
+ version: 0.2.1
5
+ platform: ruby
6
+ authors:
7
+ - Liam Betsworth
8
+ - Lewis Campbell
9
+ - Driver and Vehicle Licencing Agency
10
+ autorequire:
11
+ bindir: exe
12
+ cert_chain: []
13
+ date: 2017-10-16 00:00:00.000000000 Z
14
+ dependencies:
15
+ - !ruby/object:Gem::Dependency
16
+ name: railties
17
+ requirement: !ruby/object:Gem::Requirement
18
+ requirements:
19
+ - - "~>"
20
+ - !ruby/object:Gem::Version
21
+ version: '5.1'
22
+ type: :runtime
23
+ prerelease: false
24
+ version_requirements: !ruby/object:Gem::Requirement
25
+ requirements:
26
+ - - "~>"
27
+ - !ruby/object:Gem::Version
28
+ version: '5.1'
29
+ - !ruby/object:Gem::Dependency
30
+ name: bundler
31
+ requirement: !ruby/object:Gem::Requirement
32
+ requirements:
33
+ - - "~>"
34
+ - !ruby/object:Gem::Version
35
+ version: '1.15'
36
+ type: :development
37
+ prerelease: false
38
+ version_requirements: !ruby/object:Gem::Requirement
39
+ requirements:
40
+ - - "~>"
41
+ - !ruby/object:Gem::Version
42
+ version: '1.15'
43
+ - !ruby/object:Gem::Dependency
44
+ name: rake
45
+ requirement: !ruby/object:Gem::Requirement
46
+ requirements:
47
+ - - "~>"
48
+ - !ruby/object:Gem::Version
49
+ version: '10.0'
50
+ type: :development
51
+ prerelease: false
52
+ version_requirements: !ruby/object:Gem::Requirement
53
+ requirements:
54
+ - - "~>"
55
+ - !ruby/object:Gem::Version
56
+ version: '10.0'
57
+ description: A gem for https://github.com/liam-betsworth/dvla_internal_frontend_toolkit
58
+ email:
59
+ - liam.betsworth@gofore.com
60
+ executables: []
61
+ extensions: []
62
+ extra_rdoc_files: []
63
+ files:
64
+ - LICENSE
65
+ - README.md
66
+ - lib/dvla_internal_frontend_toolkit.rb
67
+ - lib/dvla_internal_frontend_toolkit/version.rb
68
+ - vendor/assets/fonts/Inter-UI-Bold.woff
69
+ - vendor/assets/fonts/Inter-UI-Medium.woff
70
+ - vendor/assets/fonts/Inter-UI-Regular.woff
71
+ - vendor/assets/fonts/dvla-icons.woff
72
+ - vendor/assets/images/coat-of-arms-logo.svg
73
+ - vendor/assets/images/separator.png
74
+ - vendor/assets/images/triangle-caret-down.svg
75
+ - vendor/assets/javascripts/stickyfill.js
76
+ - vendor/assets/layouts/layout-dialog.html
77
+ - vendor/assets/layouts/layout-fixed.html
78
+ - vendor/assets/layouts/layout-fluid.html
79
+ - vendor/assets/stylesheets/_dvla-internal-elements.scss
80
+ - vendor/assets/stylesheets/constants/_colours.scss
81
+ - vendor/assets/stylesheets/constants/_fonts.scss
82
+ - vendor/assets/stylesheets/constants/_measurements.scss
83
+ - vendor/assets/stylesheets/dvla-internal-elements-styles.min.css
84
+ - vendor/assets/stylesheets/dvla-internal-elements-styles.scss
85
+ - vendor/assets/stylesheets/elements/_buttons.scss
86
+ - vendor/assets/stylesheets/elements/_forms.scss
87
+ - vendor/assets/stylesheets/elements/_layout.scss
88
+ - vendor/assets/stylesheets/elements/_lists.scss
89
+ - vendor/assets/stylesheets/elements/_navigation.scss
90
+ - vendor/assets/stylesheets/elements/_tables.scss
91
+ - vendor/assets/stylesheets/elements/_tabs.scss
92
+ - vendor/assets/stylesheets/elements/_typography.scss
93
+ - vendor/assets/stylesheets/elements/_validation.scss
94
+ homepage: https://github.com/liam-betsworth/dvla_internal_frontend_toolkit
95
+ licenses:
96
+ - MIT
97
+ metadata: {}
98
+ post_install_message:
99
+ rdoc_options: []
100
+ require_paths:
101
+ - lib
102
+ required_ruby_version: !ruby/object:Gem::Requirement
103
+ requirements:
104
+ - - ">="
105
+ - !ruby/object:Gem::Version
106
+ version: '0'
107
+ required_rubygems_version: !ruby/object:Gem::Requirement
108
+ requirements:
109
+ - - ">="
110
+ - !ruby/object:Gem::Version
111
+ version: '0'
112
+ requirements: []
113
+ rubyforge_project:
114
+ rubygems_version: 2.6.13
115
+ signing_key:
116
+ specification_version: 4
117
+ summary: DVLA Internal Frontend Toolkit
118
+ test_files: []