moj_internal_template 0.1.0
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/LICENCE.txt +24 -0
- data/README.md +39 -0
- data/app/assets/fonts/Bliss2Rg.eot +0 -0
- data/app/assets/fonts/Bliss2Rg.ttf +0 -0
- data/app/assets/fonts/Bliss2Rg.woff +0 -0
- data/app/assets/images/moj_logotype_crest.png +0 -0
- data/app/assets/javascripts/modules/moj.cookie-message.js +82 -0
- data/app/assets/javascripts/modules/moj.tabs.js +83 -0
- data/app/assets/javascripts/moj.js +54 -0
- data/app/assets/javascripts/vendor/jquery/jquery-1.11.0.min.js +4 -0
- data/app/assets/stylesheets/elements/_buttons.scss +56 -0
- data/app/assets/stylesheets/elements/_colours.scss +34 -0
- data/app/assets/stylesheets/elements/_forms.scss +171 -0
- data/app/assets/stylesheets/elements/_helpers.scss +51 -0
- data/app/assets/stylesheets/elements/_icons.scss +222 -0
- data/app/assets/stylesheets/elements/_layout.scss +151 -0
- data/app/assets/stylesheets/elements/_lists.scss +32 -0
- data/app/assets/stylesheets/elements/_panels.scss +30 -0
- data/app/assets/stylesheets/elements/_reset.scss +33 -0
- data/app/assets/stylesheets/elements/_shame.scss +79 -0
- data/app/assets/stylesheets/elements/_tables.scss +22 -0
- data/app/assets/stylesheets/elements/_typography.scss +150 -0
- data/app/assets/stylesheets/elements/forms/_form-chunky-labels.scss +62 -0
- data/app/assets/stylesheets/elements/forms/_form-date-of-birth.scss +45 -0
- data/app/assets/stylesheets/elements/forms/_form-validation.scss +64 -0
- data/app/assets/stylesheets/moj-internal-ie6.scss +5 -0
- data/app/assets/stylesheets/moj-internal-ie7.scss +4 -0
- data/app/assets/stylesheets/moj-internal-ie8.scss +4 -0
- data/app/assets/stylesheets/moj-internal.scss +56 -0
- data/app/assets/stylesheets/moj/_fonts.scss +12 -0
- data/app/assets/stylesheets/moj/_header.scss +126 -0
- data/app/assets/stylesheets/moj/_typography.scss +72 -0
- data/app/helpers/moj_helper.rb +5 -0
- data/app/views/layouts/moj_internal_template.html.erb +114 -0
- data/app/views/layouts/partials/_after_header.html.erb +14 -0
- data/app/views/layouts/partials/_body_classes.html.erb +1 -0
- data/app/views/layouts/partials/_body_end.html.erb +10 -0
- data/app/views/layouts/partials/_content.html.erb +11 -0
- data/app/views/layouts/partials/_cookie_message.html.erb +5 -0
- data/app/views/layouts/partials/_footer_support_links.html.erb +15 -0
- data/app/views/layouts/partials/_header_class.html.erb +1 -0
- data/app/views/layouts/partials/_page_title.html.erb +1 -0
- data/lib/moj_internal_template.rb +5 -0
- data/lib/moj_internal_template/engine.rb +11 -0
- data/lib/moj_internal_template/version.rb +3 -0
- metadata +173 -0
@@ -0,0 +1,30 @@
|
|
1
|
+
// Panels
|
2
|
+
// ==========================================================================
|
3
|
+
|
4
|
+
// Indented panels with a grey left hand border
|
5
|
+
.panel-indent {
|
6
|
+
@include contain-floats;
|
7
|
+
clear: both;
|
8
|
+
border-left: 5px solid $panel-colour;
|
9
|
+
|
10
|
+
padding-top: 10px;
|
11
|
+
padding-bottom: 10px;
|
12
|
+
|
13
|
+
padding-left: $gutter-half;
|
14
|
+
@include media(tablet){
|
15
|
+
padding-left: 20px;
|
16
|
+
}
|
17
|
+
margin: ($gutter $gutter-half $gutter*1.5 0);
|
18
|
+
}
|
19
|
+
|
20
|
+
.panel-indent legend {
|
21
|
+
margin-top: 0;
|
22
|
+
}
|
23
|
+
|
24
|
+
.panel-indent p:only-child {
|
25
|
+
margin-bottom: 0;
|
26
|
+
}
|
27
|
+
|
28
|
+
.panel-indent .form-group:last-child {
|
29
|
+
margin-bottom: 0;
|
30
|
+
}
|
@@ -0,0 +1,33 @@
|
|
1
|
+
// Reset
|
2
|
+
// ==========================================================================
|
3
|
+
// flatten all browser defaults and styles inherited from gov.uk template
|
4
|
+
|
5
|
+
/* Borrowed from http://meyerweb.com/eric/tools/css/reset/ */
|
6
|
+
div, span,
|
7
|
+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
8
|
+
a, abbr, acronym, address, big, cite, code,
|
9
|
+
del, dfn, em, img, ins, kbd, q, s, samp,
|
10
|
+
small, strike, strong, sub, sup, tt, var,
|
11
|
+
b, u, i, center,
|
12
|
+
dl, dt, dd, ol, ul, li,
|
13
|
+
fieldset, form, label, legend,
|
14
|
+
table, caption, tbody, tfoot, thead, tr, th, td,
|
15
|
+
article, aside, canvas, details, embed,
|
16
|
+
figure, figcaption, footer, header, hgroup,
|
17
|
+
menu, nav, output, ruby, section, summary,
|
18
|
+
time, mark {
|
19
|
+
border: none;
|
20
|
+
margin: 0;
|
21
|
+
padding: 0;
|
22
|
+
}
|
23
|
+
|
24
|
+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
25
|
+
small, strike, strong, sub, sup, tt, var,
|
26
|
+
b, u, i, center,
|
27
|
+
input, textarea,
|
28
|
+
table, caption, tbody, tfoot, thead, tr, th, td {
|
29
|
+
font-size: inherit;
|
30
|
+
font-family: inherit;
|
31
|
+
line-height: inherit;
|
32
|
+
font-weight: normal;
|
33
|
+
}
|
@@ -0,0 +1,79 @@
|
|
1
|
+
// Shame
|
2
|
+
// ==========================================================================
|
3
|
+
// http://csswizardry.com/2013/04/shame-css/
|
4
|
+
// This file is for changes awaiting merge into the govuk_frontend_toolkit
|
5
|
+
|
6
|
+
// New phase banner
|
7
|
+
// Awaiting merge of pull request
|
8
|
+
// https://github.com/alphagov/govuk_frontend_toolkit/pull/112
|
9
|
+
|
10
|
+
// Phase banner usage:
|
11
|
+
//
|
12
|
+
// .phase-banner {
|
13
|
+
// @include phase-banner($state: beta);
|
14
|
+
// }
|
15
|
+
|
16
|
+
@mixin phase-banner($state: alpha) {
|
17
|
+
padding: 10px 0 8px 0;
|
18
|
+
@include media(tablet) {
|
19
|
+
padding-bottom: 10px;
|
20
|
+
}
|
21
|
+
border-bottom: 1px solid $border-colour;
|
22
|
+
|
23
|
+
p {
|
24
|
+
margin: 0;
|
25
|
+
color: $banner-text-colour;
|
26
|
+
@include core-16;
|
27
|
+
}
|
28
|
+
|
29
|
+
.phase-tag {
|
30
|
+
@include phase-tag($state);
|
31
|
+
}
|
32
|
+
|
33
|
+
span {
|
34
|
+
@include inline-block;
|
35
|
+
width: 75%;
|
36
|
+
vertical-align: top;
|
37
|
+
|
38
|
+
@include media(tablet) {
|
39
|
+
width: auto;
|
40
|
+
vertical-align: baseline;
|
41
|
+
}
|
42
|
+
}
|
43
|
+
}
|
44
|
+
|
45
|
+
// Phase tag usage:
|
46
|
+
//
|
47
|
+
// Alpha
|
48
|
+
// .phase-tag {
|
49
|
+
// @include phase-tag;
|
50
|
+
// }
|
51
|
+
//
|
52
|
+
// Beta
|
53
|
+
// .phase-tag {
|
54
|
+
// @include phase-tag(beta);
|
55
|
+
// }
|
56
|
+
|
57
|
+
@mixin phase-tag($state: alpha) {
|
58
|
+
@include inline-block;
|
59
|
+
vertical-align: top;
|
60
|
+
|
61
|
+
@include media(tablet){
|
62
|
+
vertical-align: baseline;
|
63
|
+
}
|
64
|
+
|
65
|
+
margin: 0 8px 0 0;
|
66
|
+
padding: 2px 5px 0;
|
67
|
+
|
68
|
+
@include bold-16($line-height: 20/16);
|
69
|
+
text-transform: uppercase;
|
70
|
+
letter-spacing: 1px;
|
71
|
+
text-decoration: none;
|
72
|
+
|
73
|
+
color: #fff;
|
74
|
+
@if $state == alpha {
|
75
|
+
background-color: $alpha-colour;
|
76
|
+
} @else if $state == beta {
|
77
|
+
background-color: $beta-colour;
|
78
|
+
}
|
79
|
+
}
|
@@ -0,0 +1,22 @@
|
|
1
|
+
// Tables
|
2
|
+
// ==========================================================================
|
3
|
+
|
4
|
+
table {
|
5
|
+
border-collapse: collapse;
|
6
|
+
border-spacing: 0;
|
7
|
+
width: 100%;
|
8
|
+
}
|
9
|
+
|
10
|
+
table th,
|
11
|
+
table td {
|
12
|
+
@include core-16;
|
13
|
+
padding: em(14) em(20) em(10) 0;
|
14
|
+
|
15
|
+
text-align: left;
|
16
|
+
color: #0b0c0c;
|
17
|
+
border-bottom: 1px solid $border-colour;
|
18
|
+
}
|
19
|
+
|
20
|
+
table th {
|
21
|
+
font-weight: 700;
|
22
|
+
}
|
@@ -0,0 +1,150 @@
|
|
1
|
+
// Typography
|
2
|
+
// ==========================================================================
|
3
|
+
|
4
|
+
// Increase the base font size to 19px
|
5
|
+
// Using the core-19 mixin from the govuk_toolkit _typography.scss file
|
6
|
+
|
7
|
+
#content {
|
8
|
+
@include core-19;
|
9
|
+
-webkit-font-smoothing: antialiased;
|
10
|
+
}
|
11
|
+
|
12
|
+
// Core font sizes
|
13
|
+
.font-xxlarge {
|
14
|
+
@include core-80;
|
15
|
+
}
|
16
|
+
.font-xlarge {
|
17
|
+
@include core-48;
|
18
|
+
}
|
19
|
+
.font-large {
|
20
|
+
@include core-36;
|
21
|
+
}
|
22
|
+
.font-medium {
|
23
|
+
@include core-24;
|
24
|
+
}
|
25
|
+
.font-small {
|
26
|
+
@include core-19;
|
27
|
+
}
|
28
|
+
.font-xsmall {
|
29
|
+
@include core-16;
|
30
|
+
}
|
31
|
+
|
32
|
+
// Bold font sizes
|
33
|
+
.bold-xxlarge {
|
34
|
+
@include bold-80();
|
35
|
+
}
|
36
|
+
.bold-xlarge {
|
37
|
+
@include bold-48();
|
38
|
+
}
|
39
|
+
.bold-large {
|
40
|
+
@include bold-36();
|
41
|
+
}
|
42
|
+
.bold-medium {
|
43
|
+
@include bold-24();
|
44
|
+
}
|
45
|
+
.bold-small {
|
46
|
+
@include bold-19();
|
47
|
+
}
|
48
|
+
.bold-xsmall {
|
49
|
+
@include bold-16();
|
50
|
+
}
|
51
|
+
|
52
|
+
// Common heading sizes
|
53
|
+
// Using the bold-xx mixins from the govuk_toolkit _typography.scss file
|
54
|
+
// Spacing is set in em, using the px to em function in the elements _helpers.scss file
|
55
|
+
|
56
|
+
// Headings
|
57
|
+
.heading-xlarge {
|
58
|
+
@include bold-48();
|
59
|
+
|
60
|
+
margin-top: em(15, 32);
|
61
|
+
margin-bottom: em(30, 32);
|
62
|
+
|
63
|
+
@include media(tablet) {
|
64
|
+
margin-top: em(30, 48);
|
65
|
+
margin-bottom: em(60, 48);
|
66
|
+
}
|
67
|
+
|
68
|
+
.heading-secondary {
|
69
|
+
@include core-27();
|
70
|
+
|
71
|
+
display: block;
|
72
|
+
color: $secondary-text-colour;
|
73
|
+
}
|
74
|
+
|
75
|
+
}
|
76
|
+
|
77
|
+
.heading-large {
|
78
|
+
@include bold-36();
|
79
|
+
|
80
|
+
margin-top: em(25, 24);
|
81
|
+
margin-bottom: em(10, 24);
|
82
|
+
|
83
|
+
@include media(tablet) {
|
84
|
+
margin-top: em(45, 36 );
|
85
|
+
margin-bottom: em(20, 36);
|
86
|
+
}
|
87
|
+
|
88
|
+
}
|
89
|
+
|
90
|
+
.heading-medium {
|
91
|
+
@include bold-24();
|
92
|
+
|
93
|
+
margin-top: em(25, 20);
|
94
|
+
margin-bottom: em(10, 20);
|
95
|
+
|
96
|
+
@include media(tablet) {
|
97
|
+
margin-top: em(45, 24);
|
98
|
+
margin-bottom: em(20, 24);
|
99
|
+
}
|
100
|
+
|
101
|
+
}
|
102
|
+
|
103
|
+
.heading-small {
|
104
|
+
@include bold-19();
|
105
|
+
|
106
|
+
margin-top: em(10, 16);
|
107
|
+
margin-bottom: em(5, 16);
|
108
|
+
|
109
|
+
@include media(tablet) {
|
110
|
+
margin-top: em(20, 19);
|
111
|
+
}
|
112
|
+
|
113
|
+
}
|
114
|
+
|
115
|
+
// Text
|
116
|
+
p {
|
117
|
+
margin-top: em(5, 16 );
|
118
|
+
margin-bottom: em(20, 16);
|
119
|
+
|
120
|
+
@include media(tablet) {
|
121
|
+
margin-top: em(5);
|
122
|
+
margin-bottom: em(20);
|
123
|
+
}
|
124
|
+
|
125
|
+
}
|
126
|
+
|
127
|
+
// Lede, or intro text
|
128
|
+
.lede {
|
129
|
+
@include core-24;
|
130
|
+
}
|
131
|
+
|
132
|
+
// Set a max-width for text blocks
|
133
|
+
// Less than 75 characters per line of text
|
134
|
+
.text {
|
135
|
+
max-width: 30em;
|
136
|
+
}
|
137
|
+
|
138
|
+
|
139
|
+
// Code styles
|
140
|
+
pre,
|
141
|
+
code {
|
142
|
+
font-size: 13px;
|
143
|
+
line-height: 19px;
|
144
|
+
color: $black;
|
145
|
+
background-color: $highlight-colour;
|
146
|
+
border: 1px solid $border-colour;
|
147
|
+
padding: 3px 7px;
|
148
|
+
}
|
149
|
+
|
150
|
+
|
@@ -0,0 +1,62 @@
|
|
1
|
+
// Large hit area
|
2
|
+
// Radio buttons & checkboxes
|
3
|
+
|
4
|
+
// By default, block labels stack vertically
|
5
|
+
.block-label {
|
6
|
+
|
7
|
+
display: block;
|
8
|
+
float: none;
|
9
|
+
clear: left;
|
10
|
+
position: relative;
|
11
|
+
|
12
|
+
background: $panel-colour;
|
13
|
+
border: 1px solid $panel-colour;
|
14
|
+
padding: (18px $gutter $gutter-half $gutter*1.5);
|
15
|
+
margin-top: 10px;
|
16
|
+
margin-bottom: 10px;
|
17
|
+
|
18
|
+
cursor: pointer; // Encourage clicking on block labels
|
19
|
+
|
20
|
+
@include media(tablet) {
|
21
|
+
float: left;
|
22
|
+
margin-top: 5px;
|
23
|
+
margin-bottom: 5px;
|
24
|
+
// width: 25%; - Test : check that text within labels will wrap
|
25
|
+
}
|
26
|
+
}
|
27
|
+
|
28
|
+
.block-label:hover {
|
29
|
+
border-color: $black;
|
30
|
+
}
|
31
|
+
|
32
|
+
// Position checkbox within label, to allow text to wrap
|
33
|
+
.block-label input {
|
34
|
+
position: absolute;
|
35
|
+
top: 18px;
|
36
|
+
left: $gutter-half;
|
37
|
+
cursor: pointer;
|
38
|
+
}
|
39
|
+
|
40
|
+
// Use inline, to sit block labels next to each other
|
41
|
+
.inline .block-label {
|
42
|
+
clear: none;
|
43
|
+
margin-right: $gutter-half;
|
44
|
+
}
|
45
|
+
|
46
|
+
// Only if JavaScript is enabled
|
47
|
+
|
48
|
+
// Add focus styles to block labels
|
49
|
+
.js-enabled .add-focus {
|
50
|
+
outline: 3px solid $yellow;
|
51
|
+
}
|
52
|
+
|
53
|
+
// Remove focus styles from radio and checkbox inputs
|
54
|
+
.js-enabled .block-label input:focus {
|
55
|
+
outline: none;
|
56
|
+
}
|
57
|
+
|
58
|
+
// Add selected state to block labels
|
59
|
+
.js-enabled .selected {
|
60
|
+
background: $white;
|
61
|
+
border-color: $black;
|
62
|
+
}
|
@@ -0,0 +1,45 @@
|
|
1
|
+
// Date of birth
|
2
|
+
|
3
|
+
.date-of-birth label {
|
4
|
+
display: block;
|
5
|
+
margin-bottom: 5px;
|
6
|
+
}
|
7
|
+
|
8
|
+
.date-of-birth .form-group {
|
9
|
+
width: 50px;
|
10
|
+
float: left;
|
11
|
+
margin-right: 20px;
|
12
|
+
clear: none;
|
13
|
+
}
|
14
|
+
|
15
|
+
.date-of-birth .form-group-year {
|
16
|
+
width: 70px;
|
17
|
+
}
|
18
|
+
|
19
|
+
.date-of-birth .form-group input {
|
20
|
+
width: 100%;
|
21
|
+
}
|
22
|
+
|
23
|
+
|
24
|
+
// Use Modernizr to detect for touch events
|
25
|
+
// Build: http://modernizr.com/download/#-touch-cssclasses-teststyles-prefixes
|
26
|
+
|
27
|
+
// Hide date of birth
|
28
|
+
.touch .date-of-birth {
|
29
|
+
display: none;
|
30
|
+
}
|
31
|
+
|
32
|
+
// Hide native date of birth
|
33
|
+
.no-touch .native-date-of-birth {
|
34
|
+
display: none;
|
35
|
+
}
|
36
|
+
|
37
|
+
// Show native date of birth
|
38
|
+
.touch .native-date-of-birth {
|
39
|
+
display: block;
|
40
|
+
}
|
41
|
+
|
42
|
+
// Set a minimum height for date inputs
|
43
|
+
.touch input[type="date"] {
|
44
|
+
min-height: 36px;
|
45
|
+
}
|
@@ -0,0 +1,64 @@
|
|
1
|
+
@import "../colours";
|
2
|
+
|
3
|
+
// Validation summary box
|
4
|
+
.validation-summary {
|
5
|
+
border: 3px solid $error-colour;
|
6
|
+
padding: $gutter-half $gutter;
|
7
|
+
margin-bottom: $gutter;
|
8
|
+
|
9
|
+
@include ie-lte(6){
|
10
|
+
zoom: 1;
|
11
|
+
}
|
12
|
+
}
|
13
|
+
|
14
|
+
.validation-summary ul {
|
15
|
+
margin-top: 10px;
|
16
|
+
}
|
17
|
+
|
18
|
+
.validation-summary li,
|
19
|
+
.validation-summary p {
|
20
|
+
@include core-16;
|
21
|
+
}
|
22
|
+
|
23
|
+
.validation-summary p {
|
24
|
+
margin-top: $gutter-half;
|
25
|
+
margin-bottom: 5px;
|
26
|
+
}
|
27
|
+
|
28
|
+
.validation-summary a {
|
29
|
+
color: $error-colour;
|
30
|
+
@include ie-lte(6) {
|
31
|
+
color: $error-colour !important;
|
32
|
+
}
|
33
|
+
}
|
34
|
+
|
35
|
+
.validation-summary .heading-small {
|
36
|
+
margin-top: $gutter-half;
|
37
|
+
}
|
38
|
+
|
39
|
+
|
40
|
+
// Validation error message box
|
41
|
+
// .validation-error {
|
42
|
+
// clear: both;
|
43
|
+
// @include contain-floats;
|
44
|
+
// border-left: 3px solid $error-colour;
|
45
|
+
// padding: $gutter- $gutter;
|
46
|
+
// margin-bottom: $gutter-half;
|
47
|
+
// margin-left: -($gutter);
|
48
|
+
// }
|
49
|
+
|
50
|
+
// .validation-error .form-group {
|
51
|
+
// margin-bottom: 20px;
|
52
|
+
// }
|
53
|
+
|
54
|
+
// .validation-error p {
|
55
|
+
// margin-bottom: 10px;
|
56
|
+
// }
|
57
|
+
|
58
|
+
|
59
|
+
// Validation message
|
60
|
+
.validation-message {
|
61
|
+
display: block;
|
62
|
+
@include core-16;
|
63
|
+
color: $error-colour;
|
64
|
+
}
|