dvla_internal_frontend_toolkit 0.2.1
Sign up to get free protection for your applications and to get access to all the features.
- 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;
|