dvla_internal_frontend_toolkit 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/LICENSE +19 -0
- data/README.md +7 -0
- data/lib/dvla_internal_frontend_toolkit/version.rb +3 -0
- data/lib/dvla_internal_frontend_toolkit.rb +6 -0
- data/vendor/assets/fonts/Inter-UI-Bold.woff +0 -0
- data/vendor/assets/fonts/Inter-UI-Medium.woff +0 -0
- data/vendor/assets/fonts/Inter-UI-Regular.woff +0 -0
- data/vendor/assets/fonts/dvla-icons.woff +0 -0
- data/vendor/assets/images/coat-of-arms-logo.svg +71 -0
- data/vendor/assets/images/separator.png +0 -0
- data/vendor/assets/images/triangle-caret-down.svg +12 -0
- data/vendor/assets/javascripts/stickyfill.js +6 -0
- data/vendor/assets/layouts/layout-dialog.html +51 -0
- data/vendor/assets/layouts/layout-fixed.html +50 -0
- data/vendor/assets/layouts/layout-fluid.html +49 -0
- data/vendor/assets/stylesheets/_dvla-internal-elements.scss +13 -0
- data/vendor/assets/stylesheets/constants/_colours.scss +80 -0
- data/vendor/assets/stylesheets/constants/_fonts.scss +31 -0
- data/vendor/assets/stylesheets/constants/_measurements.scss +1 -0
- data/vendor/assets/stylesheets/dvla-internal-elements-styles.min.css +1 -0
- data/vendor/assets/stylesheets/dvla-internal-elements-styles.scss +2 -0
- data/vendor/assets/stylesheets/elements/_buttons.scss +148 -0
- data/vendor/assets/stylesheets/elements/_forms.scss +50 -0
- data/vendor/assets/stylesheets/elements/_layout.scss +250 -0
- data/vendor/assets/stylesheets/elements/_lists.scss +56 -0
- data/vendor/assets/stylesheets/elements/_navigation.scss +72 -0
- data/vendor/assets/stylesheets/elements/_tables.scss +155 -0
- data/vendor/assets/stylesheets/elements/_tabs.scss +105 -0
- data/vendor/assets/stylesheets/elements/_typography.scss +120 -0
- data/vendor/assets/stylesheets/elements/_validation.scss +59 -0
- metadata +118 -0
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
{% block top_of_page %}{% endblock %}
|
|
2
|
+
<html>
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<title>{% block page_title %} {% endblock %}</title>
|
|
6
|
+
<meta name="viewport" content="width=device-width" />
|
|
7
|
+
<script type="text/javascript" src="/public/javascripts/stickyfill.js"></script>
|
|
8
|
+
<script type="text/javascript">
|
|
9
|
+
document.addEventListener('DOMContentLoaded', function () {
|
|
10
|
+
// your code here
|
|
11
|
+
var header = document.querySelector('#global-header');
|
|
12
|
+
console.log('header', header);
|
|
13
|
+
Stickyfill.add(header);
|
|
14
|
+
}, false);
|
|
15
|
+
</script>
|
|
16
|
+
{% block head %} {% endblock %}
|
|
17
|
+
</head>
|
|
18
|
+
|
|
19
|
+
<body class="{% block body_classes %}{% endblock %}">
|
|
20
|
+
<script>
|
|
21
|
+
document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
|
|
22
|
+
</script>
|
|
23
|
+
{% block body_start %}{% endblock %}
|
|
24
|
+
|
|
25
|
+
<header role="banner" id="global-header" class="{% block header_class %}{% endblock %}">
|
|
26
|
+
<div id="header-wrapper">
|
|
27
|
+
<div id="header-contents">
|
|
28
|
+
<div id="header-float-left">
|
|
29
|
+
<div id="header-logo">
|
|
30
|
+
<a href="/" title="Home" id="logo" class="content">
|
|
31
|
+
<div id="coat-of-arms" alt=""></div>
|
|
32
|
+
<div class="name">DVLA</div>
|
|
33
|
+
</a>
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
</div>
|
|
37
|
+
</div>
|
|
38
|
+
{% block header_bar %}{% endblock %}
|
|
39
|
+
</header>
|
|
40
|
+
|
|
41
|
+
{% block after_header %}{% endblock %}
|
|
42
|
+
|
|
43
|
+
<main id="content" class="has-bar">
|
|
44
|
+
<div class="container">
|
|
45
|
+
{% block content %}{% endblock %}
|
|
46
|
+
</div>
|
|
47
|
+
</main>
|
|
48
|
+
</body>
|
|
49
|
+
|
|
50
|
+
</html>
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
{% block top_of_page %}{% endblock %}
|
|
2
|
+
<html>
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<title>{% block page_title %} {% endblock %}</title>
|
|
6
|
+
<meta name="viewport" content="width=device-width" />
|
|
7
|
+
<script type="text/javascript" src="/public/javascripts/stickyfill.js"></script>
|
|
8
|
+
<script type="text/javascript">
|
|
9
|
+
document.addEventListener('DOMContentLoaded', function () {
|
|
10
|
+
// your code here
|
|
11
|
+
var header = document.querySelector('#global-header');
|
|
12
|
+
console.log('header', header);
|
|
13
|
+
Stickyfill.add(header);
|
|
14
|
+
}, false);
|
|
15
|
+
</script>
|
|
16
|
+
{% block head %} {% endblock %}
|
|
17
|
+
</head>
|
|
18
|
+
|
|
19
|
+
<body class="{% block body_classes %}{% endblock %}">
|
|
20
|
+
<script>
|
|
21
|
+
document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
|
|
22
|
+
</script>
|
|
23
|
+
{% block body_start %}{% endblock %}
|
|
24
|
+
|
|
25
|
+
<header role="banner" id="global-header" class="{% block header_class %}{% endblock %}">
|
|
26
|
+
<div id="header-wrapper">
|
|
27
|
+
<div id="header-contents">
|
|
28
|
+
<div id="header-float-left">
|
|
29
|
+
<div id="header-logo">
|
|
30
|
+
<a href="/" title="Home" id="logo" class="content">
|
|
31
|
+
<div id="coat-of-arms" alt=""></div>
|
|
32
|
+
<div class="name">DVLA</div>
|
|
33
|
+
</a>
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
</div>
|
|
37
|
+
</div>
|
|
38
|
+
</header>
|
|
39
|
+
|
|
40
|
+
{% block after_header %}{% endblock %}
|
|
41
|
+
|
|
42
|
+
<main id="content">
|
|
43
|
+
<div class="container-fluid">
|
|
44
|
+
{% block content %}{% endblock %}
|
|
45
|
+
</div>
|
|
46
|
+
</main>
|
|
47
|
+
</body>
|
|
48
|
+
|
|
49
|
+
</html>
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
@import "constants/colours";
|
|
2
|
+
@import "constants/fonts";
|
|
3
|
+
@import "constants/measurements";
|
|
4
|
+
|
|
5
|
+
@import "elements/buttons";
|
|
6
|
+
@import "elements/forms";
|
|
7
|
+
@import "elements/layout";
|
|
8
|
+
@import "elements/lists";
|
|
9
|
+
@import "elements/navigation";
|
|
10
|
+
@import "elements/tables";
|
|
11
|
+
@import "elements/tabs";
|
|
12
|
+
@import "elements/typography";
|
|
13
|
+
@import "elements/validation";
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
/* Primary colour */
|
|
2
|
+
$primary: #097567;
|
|
3
|
+
|
|
4
|
+
$primary-dark: mix(black, $primary, 15%);
|
|
5
|
+
$primary-darker: mix(black, $primary, 30%);
|
|
6
|
+
$primary-darkest: mix(black, $primary, 50%);
|
|
7
|
+
|
|
8
|
+
$primary-light: mix(white, $primary, 20%);
|
|
9
|
+
$primary-lighter: mix(white, $primary, 50%);
|
|
10
|
+
$primary-lightest: mix(white, $primary, 80%);
|
|
11
|
+
|
|
12
|
+
/* Secondary colour */
|
|
13
|
+
$secondary: #0070B3;
|
|
14
|
+
|
|
15
|
+
$secondary-dark: mix(black, $secondary, 15%);
|
|
16
|
+
$secondary-darker: mix(black, $secondary, 30%);
|
|
17
|
+
$secondary-darkest: mix(black, $secondary, 50%);
|
|
18
|
+
|
|
19
|
+
$secondary-light: mix(white, $secondary, 20%);
|
|
20
|
+
$secondary-lighter: mix(white, $secondary, 50%);
|
|
21
|
+
$secondary-lightest: mix(white, $secondary, 80%);
|
|
22
|
+
|
|
23
|
+
/* Success colour */
|
|
24
|
+
$success: #84BF24;
|
|
25
|
+
|
|
26
|
+
$success-dark: mix(black, $success, 15%);
|
|
27
|
+
$success-darker: mix(black, $success, 30%);
|
|
28
|
+
$success-darkest: mix(black, $success, 50%);
|
|
29
|
+
|
|
30
|
+
$success-light: mix(white, $success, 20%);
|
|
31
|
+
$success-lighter: mix(white, $success, 50%);
|
|
32
|
+
$success-lightest: mix(white, $success, 80%);
|
|
33
|
+
|
|
34
|
+
/* Error colour */
|
|
35
|
+
$error: #B10E1E;
|
|
36
|
+
|
|
37
|
+
$error-dark: mix(black, $error, 15%);
|
|
38
|
+
$error-darker: mix(black, $error, 30%);
|
|
39
|
+
$error-darkest: mix(black, $error, 50%);
|
|
40
|
+
|
|
41
|
+
$error-light: mix(white, $error, 20%);
|
|
42
|
+
$error-lighter: mix(white, $error, 50%);
|
|
43
|
+
$error-lightest: mix(white, $error, 80%);
|
|
44
|
+
|
|
45
|
+
/* Warning colour */
|
|
46
|
+
$warning: #EA890A;
|
|
47
|
+
|
|
48
|
+
$warning-dark: mix(black, $warning, 15%);
|
|
49
|
+
$warning-darker: mix(black, $warning, 30%);
|
|
50
|
+
$warning-darkest: mix(black, $warning, 50%);
|
|
51
|
+
|
|
52
|
+
$warning-light: mix(white, $warning, 20%);
|
|
53
|
+
$warning-lighter: mix(white, $warning, 50%);
|
|
54
|
+
$warning-lightest: mix(white, $warning, 80%);
|
|
55
|
+
|
|
56
|
+
/* General colours */
|
|
57
|
+
|
|
58
|
+
$text-primary-colour: #0B0C0C;
|
|
59
|
+
$text-secondary-colour: #6F777B;
|
|
60
|
+
$link-colour: #005EA5;
|
|
61
|
+
$link-hover-colour: #2B8CCC;
|
|
62
|
+
$focus-colour: #FFBF47;
|
|
63
|
+
$visited-colour: #4C2C92;
|
|
64
|
+
$black: #0B0C0C;
|
|
65
|
+
$grey-1: #6F777B;
|
|
66
|
+
$grey-2: #BFC1C3;
|
|
67
|
+
$grey-3: #DEE0E2;
|
|
68
|
+
$grey-4: #F4F4F4;
|
|
69
|
+
|
|
70
|
+
$alpha: #D54780;
|
|
71
|
+
$beta: #F47A40;
|
|
72
|
+
$discovery: #913A87;
|
|
73
|
+
$live: #85964E;
|
|
74
|
+
$gov-uk-blue: #005EA5;
|
|
75
|
+
$mellow-red: #DF3034;
|
|
76
|
+
$mauve: #6F71AF;
|
|
77
|
+
$baby-pink: #6F777B;
|
|
78
|
+
$green: #006435;
|
|
79
|
+
$light-blue: #2B8CC4;
|
|
80
|
+
$brown: #FFBF47;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
/* Interface version 2.0 – 09/09/2017 @ https://github.com/rsms/inter */
|
|
2
|
+
|
|
3
|
+
@font-face {
|
|
4
|
+
font-family: Interface;
|
|
5
|
+
src: url('/fonts/Inter-UI-Regular.woff');
|
|
6
|
+
font-weight: normal;
|
|
7
|
+
font-style: normal;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
@font-face {
|
|
11
|
+
font-family: Interface;
|
|
12
|
+
src: url('/fonts/Inter-UI-Medium.woff');
|
|
13
|
+
font-weight: 500;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
@font-face {
|
|
17
|
+
font-family: Interface;
|
|
18
|
+
src: url('/fonts/Inter-UI-Bold.woff');
|
|
19
|
+
font-weight: bold;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
@font-face{
|
|
23
|
+
font-family: dvla-icons;
|
|
24
|
+
src: url('/fonts/dvla-icons.woff');
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
$primary-font: Interface, 'Helvetica Neue', Arial sans-serif;
|
|
28
|
+
$icon-font: dvla-icons;
|
|
29
|
+
|
|
30
|
+
$normal-font-size: 16px;
|
|
31
|
+
$large-font-size: 20px;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
$gutter: 5px;
|