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,51 @@
|
|
1
|
+
// Helpers
|
2
|
+
// ==========================================================================
|
3
|
+
|
4
|
+
// Return ems from a pixel value
|
5
|
+
// This assumes a base of 19px
|
6
|
+
@function em($px, $base: 19) {
|
7
|
+
@return ($px / $base) + em;
|
8
|
+
}
|
9
|
+
|
10
|
+
// Use the contain floats mixin for this project,
|
11
|
+
// as placeholders are not supported by libsass
|
12
|
+
@mixin contain-floats {
|
13
|
+
&:after {
|
14
|
+
content: "";
|
15
|
+
display: block;
|
16
|
+
clear: both;
|
17
|
+
}
|
18
|
+
@include ie-lte(7) {
|
19
|
+
zoom: 1;
|
20
|
+
}
|
21
|
+
}
|
22
|
+
|
23
|
+
// Want to see how the grid works?
|
24
|
+
// add this class to the body to see how grid padding is set
|
25
|
+
.example-highlight-grid {
|
26
|
+
.grid-wrapper {
|
27
|
+
background: $grey-2;
|
28
|
+
}
|
29
|
+
.grid {
|
30
|
+
background: $grey-4;
|
31
|
+
}
|
32
|
+
.is-inner-block-highlight {
|
33
|
+
background: $grey-3;
|
34
|
+
width: 100%;
|
35
|
+
}
|
36
|
+
}
|
37
|
+
|
38
|
+
// Used to space the "back" link on example pages
|
39
|
+
.example-back-link {
|
40
|
+
@include inline-block;
|
41
|
+
margin-top: $gutter;
|
42
|
+
}
|
43
|
+
|
44
|
+
// Hide, but not for screenreaders
|
45
|
+
.visuallyhidden {
|
46
|
+
position: absolute;
|
47
|
+
overflow: hidden;
|
48
|
+
clip: rect(0 0 0 0);
|
49
|
+
height: 1px; width: 1px;
|
50
|
+
margin: -1px; padding: 0; border: 0;
|
51
|
+
}
|
@@ -0,0 +1,222 @@
|
|
1
|
+
// GOV.UK icons
|
2
|
+
|
3
|
+
.icon {
|
4
|
+
background-position: 0 0;
|
5
|
+
background-repeat: no-repeat;
|
6
|
+
}
|
7
|
+
|
8
|
+
.icon-calendar {
|
9
|
+
background-image: url("../images/icons/icon-calendar.png");
|
10
|
+
@include device-pixel-ratio() {
|
11
|
+
background-image: url("../images/icons/icon-calendar-2x.png");
|
12
|
+
background-size: 100%;
|
13
|
+
}
|
14
|
+
width: 27px;
|
15
|
+
height: 27px;
|
16
|
+
}
|
17
|
+
|
18
|
+
.icon-download {
|
19
|
+
background-image: url("../images/icons/icon-file-download.png");
|
20
|
+
@include device-pixel-ratio() {
|
21
|
+
background-image: url("../images/icons/icon-file-download-2x.png");
|
22
|
+
background-size: 100%;
|
23
|
+
}
|
24
|
+
width: 30px;
|
25
|
+
height: 39px;
|
26
|
+
}
|
27
|
+
|
28
|
+
.icon-important {
|
29
|
+
background-image: url("../images/icons/icon-important.png");
|
30
|
+
@include device-pixel-ratio() {
|
31
|
+
background-image: url("../images/icons/icon-important-2x.png");
|
32
|
+
background-size: 100%;
|
33
|
+
}
|
34
|
+
width: 34px;
|
35
|
+
height: 34px;
|
36
|
+
}
|
37
|
+
|
38
|
+
.icon-information {
|
39
|
+
background-image: url("../images/icons/icon-information.png");
|
40
|
+
@include device-pixel-ratio() {
|
41
|
+
background-image: url("../images/icons/icon-information-2x.png");
|
42
|
+
background-size: 100%;
|
43
|
+
}
|
44
|
+
width: 27px;
|
45
|
+
height: 27px;
|
46
|
+
}
|
47
|
+
|
48
|
+
.icon-locator {
|
49
|
+
background-image: url("../images/icons/icon-locator.png");
|
50
|
+
@include device-pixel-ratio() {
|
51
|
+
background-image: url("../images/icons/icon-locator-2x.png");
|
52
|
+
background-size: 100%;
|
53
|
+
}
|
54
|
+
width: 26px;
|
55
|
+
height: 36px;
|
56
|
+
}
|
57
|
+
|
58
|
+
.icon-search {
|
59
|
+
background-image: url("../images/icons/icon-search.png");
|
60
|
+
@include device-pixel-ratio() {
|
61
|
+
background-image: url("../images/icons/icon-search-2x.png");
|
62
|
+
background-size: 100%;
|
63
|
+
}
|
64
|
+
width: 30px;
|
65
|
+
height: 22px;
|
66
|
+
background-color: black;
|
67
|
+
}
|
68
|
+
|
69
|
+
// GOV.UK arrow icons
|
70
|
+
.icon-pointer {
|
71
|
+
background-image: url("../images/icons/icon-pointer.png");
|
72
|
+
@include device-pixel-ratio() {
|
73
|
+
background-image: url("../images/icons/icon-pointer-2x.png");
|
74
|
+
background-size: 100%;
|
75
|
+
}
|
76
|
+
width: 30px;
|
77
|
+
height: 19px;
|
78
|
+
background-color: black;
|
79
|
+
}
|
80
|
+
.icon-pointer-black {
|
81
|
+
background-image: url("../images/icons/icon-pointer-black.png");
|
82
|
+
@include device-pixel-ratio() {
|
83
|
+
background-image: url("../images/icons/icon-pointer-black-2x.png");
|
84
|
+
background-size: 100%;
|
85
|
+
}
|
86
|
+
width: 23px;
|
87
|
+
height: 23px;
|
88
|
+
}
|
89
|
+
|
90
|
+
// GOV.UK external link icons
|
91
|
+
// TODO (Are these provided by the template?)
|
92
|
+
|
93
|
+
// GOV.UK step icons
|
94
|
+
.icon-step-1 {
|
95
|
+
background-image: url("../images/icons/icon-steps/icon-step-1.png");
|
96
|
+
@include device-pixel-ratio() {
|
97
|
+
background-image: url("../images/icons/icon-steps/icon-step-1-2x.png");
|
98
|
+
background-size: 100%;
|
99
|
+
}
|
100
|
+
width: 23px;
|
101
|
+
height: 23px;
|
102
|
+
}
|
103
|
+
|
104
|
+
.icon-step-2 {
|
105
|
+
background-image: url("../images/icons/icon-steps/icon-step-2.png");
|
106
|
+
@include device-pixel-ratio() {
|
107
|
+
background-image: url("../images/icons/icon-steps/icon-step-2-2x.png");
|
108
|
+
background-size: 100%;
|
109
|
+
}
|
110
|
+
width: 23px;
|
111
|
+
height: 23px;
|
112
|
+
}
|
113
|
+
|
114
|
+
.icon-step-3 {
|
115
|
+
background-image: url("../images/icons/icon-steps/icon-step-3.png");
|
116
|
+
@include device-pixel-ratio() {
|
117
|
+
background-image: url("../images/icons/icon-steps/icon-step-3-2x.png");
|
118
|
+
background-size: 100%;
|
119
|
+
}
|
120
|
+
width: 23px;
|
121
|
+
height: 23px;
|
122
|
+
}
|
123
|
+
|
124
|
+
.icon-step-4 {
|
125
|
+
background-image: url("../images/icons/icon-steps/icon-step-4.png");
|
126
|
+
@include device-pixel-ratio() {
|
127
|
+
background-image: url("../images/icons/icon-steps/icon-step-4-2x.png");
|
128
|
+
background-size: 100%;
|
129
|
+
}
|
130
|
+
width: 23px;
|
131
|
+
height: 23px;
|
132
|
+
}
|
133
|
+
|
134
|
+
.icon-step-5 {
|
135
|
+
background-image: url("../images/icons/icon-steps/icon-step-5.png");
|
136
|
+
@include device-pixel-ratio() {
|
137
|
+
background-image: url("../images/icons/icon-steps/icon-step-5-2x.png");
|
138
|
+
background-size: 100%;
|
139
|
+
}
|
140
|
+
width: 23px;
|
141
|
+
height: 23px;
|
142
|
+
}
|
143
|
+
|
144
|
+
.icon-step-6 {
|
145
|
+
background-image: url("../images/icons/icon-steps/icon-step-6.png");
|
146
|
+
@include device-pixel-ratio() {
|
147
|
+
background-image: url("../images/icons/icon-steps/icon-step-6-2x.png");
|
148
|
+
background-size: 100%;
|
149
|
+
}
|
150
|
+
width: 23px;
|
151
|
+
height: 23px;
|
152
|
+
}
|
153
|
+
|
154
|
+
.icon-step-7 {
|
155
|
+
background-image: url("../images/icons/icon-steps/icon-step-7.png");
|
156
|
+
@include device-pixel-ratio() {
|
157
|
+
background-image: url("../images/icons/icon-steps/icon-step-7-2x.png");
|
158
|
+
background-size: 100%;
|
159
|
+
}
|
160
|
+
width: 23px;
|
161
|
+
height: 23px;
|
162
|
+
}
|
163
|
+
|
164
|
+
.icon-step-8 {
|
165
|
+
background-image: url("../images/icons/icon-steps/icon-step-8.png");
|
166
|
+
@include device-pixel-ratio() {
|
167
|
+
background-image: url("../images/icons/icon-steps/icon-step-8-2x.png");
|
168
|
+
background-size: 100%;
|
169
|
+
}
|
170
|
+
width: 23px;
|
171
|
+
height: 23px;
|
172
|
+
}
|
173
|
+
|
174
|
+
.icon-step-9 {
|
175
|
+
background-image: url("../images/icons/icon-steps/icon-step-9.png");
|
176
|
+
@include device-pixel-ratio() {
|
177
|
+
background-image: url("../images/icons/icon-steps/icon-step-9-2x.png");
|
178
|
+
background-size: 100%;
|
179
|
+
}
|
180
|
+
width: 23px;
|
181
|
+
height: 23px;
|
182
|
+
}
|
183
|
+
|
184
|
+
.icon-step-10 {
|
185
|
+
background-image: url("../images/icons/icon-steps/icon-step-10.png");
|
186
|
+
@include device-pixel-ratio() {
|
187
|
+
background-image: url("../images/icons/icon-steps/icon-step-10-2x.png");
|
188
|
+
background-size: 100%;
|
189
|
+
}
|
190
|
+
width: 23px;
|
191
|
+
height: 23px;
|
192
|
+
}
|
193
|
+
|
194
|
+
.icon-step-11 {
|
195
|
+
background-image: url("../images/icons/icon-steps/icon-step-11.png");
|
196
|
+
@include device-pixel-ratio() {
|
197
|
+
background-image: url("../images/icons/icon-steps/icon-step-11-2x.png");
|
198
|
+
background-size: 100%;
|
199
|
+
}
|
200
|
+
width: 23px;
|
201
|
+
height: 23px;
|
202
|
+
}
|
203
|
+
|
204
|
+
.icon-step-12 {
|
205
|
+
background-image: url("../images/icons/icon-steps/icon-step-12.png");
|
206
|
+
@include device-pixel-ratio() {
|
207
|
+
background-image: url("../images/icons/icon-steps/icon-step-12-2x.png");
|
208
|
+
background-size: 100%;
|
209
|
+
}
|
210
|
+
width: 23px;
|
211
|
+
height: 23px;
|
212
|
+
}
|
213
|
+
|
214
|
+
.icon-step-13 {
|
215
|
+
background-image: url("../images/icons/icon-steps/icon-step-13.png");
|
216
|
+
@include device-pixel-ratio() {
|
217
|
+
background-image: url("../images/icons/icon-steps/icon-step-13-2x.png");
|
218
|
+
background-size: 100%;
|
219
|
+
}
|
220
|
+
width: 23px;
|
221
|
+
height: 23px;
|
222
|
+
}
|
@@ -0,0 +1,151 @@
|
|
1
|
+
// Layout
|
2
|
+
// ==========================================================================
|
3
|
+
|
4
|
+
#wrapper {
|
5
|
+
text-align: center;
|
6
|
+
|
7
|
+
padding-bottom: $gutter;
|
8
|
+
@include media(desktop) {
|
9
|
+
padding-bottom: $gutter*3;
|
10
|
+
}
|
11
|
+
}
|
12
|
+
|
13
|
+
// Use .outer-block to create a max width block of 1020px,
|
14
|
+
// Use .inner-block to create padding that matches the header and footer
|
15
|
+
|
16
|
+
// .outer-block,
|
17
|
+
#content {
|
18
|
+
text-align: left;
|
19
|
+
|
20
|
+
@include outer-block;
|
21
|
+
@include contain-floats; // Repeated as %extend placeholder isn't supported
|
22
|
+
}
|
23
|
+
|
24
|
+
.inner-block {
|
25
|
+
@include inner-block(margin);
|
26
|
+
}
|
27
|
+
|
28
|
+
// Ensure .inner-block doesn't inherit a margin here
|
29
|
+
// TODO: Change this in the govuk_template
|
30
|
+
#global-cookie-message .inner-block,
|
31
|
+
#global-header-bar .inner-block {
|
32
|
+
margin: 0;
|
33
|
+
}
|
34
|
+
|
35
|
+
|
36
|
+
// ==========================================================================
|
37
|
+
// Phase banner
|
38
|
+
// ==========================================================================
|
39
|
+
|
40
|
+
.phase-banner {
|
41
|
+
@include phase-banner(alpha);
|
42
|
+
}
|
43
|
+
|
44
|
+
|
45
|
+
// Grid layout
|
46
|
+
// ==========================================================================
|
47
|
+
|
48
|
+
// Usage:
|
49
|
+
// For two equal columns
|
50
|
+
|
51
|
+
// <div class="grid-wrapper">
|
52
|
+
// <div class="grid grid-1-2">
|
53
|
+
// <div class="inner-block">
|
54
|
+
|
55
|
+
// </div>
|
56
|
+
// </div>
|
57
|
+
// <div class="grid grid-1-2">
|
58
|
+
// <div class="inner-block">
|
59
|
+
|
60
|
+
// </div>
|
61
|
+
// </div>
|
62
|
+
// </div>
|
63
|
+
|
64
|
+
// Use .grid-wrapper to wrap and clear grid sections
|
65
|
+
.grid-wrapper {
|
66
|
+
@include contain-floats;
|
67
|
+
@include media(tablet){
|
68
|
+
margin-left: 15px;
|
69
|
+
margin-right: 15px;
|
70
|
+
}
|
71
|
+
}
|
72
|
+
|
73
|
+
// Use .grid-divider to create borders dividing grid sections
|
74
|
+
.grid-divider {
|
75
|
+
@include contain-floats;
|
76
|
+
border-bottom: 1px solid $border-colour;
|
77
|
+
margin-bottom: 20px;
|
78
|
+
margin-left: 15px;
|
79
|
+
margin-right: 15px;
|
80
|
+
|
81
|
+
@include media(tablet){
|
82
|
+
margin-left: 30px;
|
83
|
+
margin-right: 30px;
|
84
|
+
}
|
85
|
+
}
|
86
|
+
|
87
|
+
// 2. Grid units take 100% width, unless a .grid-width class is applied
|
88
|
+
.grid {
|
89
|
+
float: left;
|
90
|
+
width: 100%;
|
91
|
+
}
|
92
|
+
|
93
|
+
// Grid widths
|
94
|
+
.grid-1-4 {
|
95
|
+
@include media(tablet) {
|
96
|
+
width: 25%;
|
97
|
+
}
|
98
|
+
}
|
99
|
+
|
100
|
+
.grid-1-3 {
|
101
|
+
@include media(tablet) {
|
102
|
+
width: 33.333333333%;
|
103
|
+
}
|
104
|
+
}
|
105
|
+
|
106
|
+
.grid-1-2 {
|
107
|
+
@include media(tablet) {
|
108
|
+
width: 50%;
|
109
|
+
}
|
110
|
+
}
|
111
|
+
|
112
|
+
.grid-2-3 {
|
113
|
+
@include media(tablet) {
|
114
|
+
width: 66.666666667%;
|
115
|
+
}
|
116
|
+
}
|
117
|
+
|
118
|
+
.grid-3-4 {
|
119
|
+
@include media(tablet) {
|
120
|
+
width: 75%;
|
121
|
+
}
|
122
|
+
}
|
123
|
+
|
124
|
+
// Grid 'inner-block' sets spacing between grid cells
|
125
|
+
.grid .inner-block {
|
126
|
+
padding: 0;
|
127
|
+
@include media(tablet) {
|
128
|
+
margin: 0 $gutter-half;
|
129
|
+
}
|
130
|
+
}
|
131
|
+
|
132
|
+
|
133
|
+
// Don't put .grid-wrapper inside .inner block
|
134
|
+
// There's no need for the extra containing div
|
135
|
+
// ** These styles are here in case you do, so we don't break the grid **
|
136
|
+
|
137
|
+
.inner-block {
|
138
|
+
|
139
|
+
.grid-wrapper {
|
140
|
+
padding: 0;
|
141
|
+
|
142
|
+
margin-left: -15px;
|
143
|
+
margin-right: -15px;
|
144
|
+
}
|
145
|
+
|
146
|
+
.grid-divider {
|
147
|
+
margin-left: 0;
|
148
|
+
margin-right: 0;
|
149
|
+
}
|
150
|
+
|
151
|
+
}
|
@@ -0,0 +1,32 @@
|
|
1
|
+
// Lists
|
2
|
+
// ==========================================================================
|
3
|
+
|
4
|
+
menu,
|
5
|
+
ol,
|
6
|
+
ul {
|
7
|
+
margin-top: 5px;
|
8
|
+
margin-bottom: 20px;
|
9
|
+
padding: 0;
|
10
|
+
}
|
11
|
+
|
12
|
+
ul,
|
13
|
+
ol {
|
14
|
+
list-style-type: none;
|
15
|
+
}
|
16
|
+
|
17
|
+
ul li,
|
18
|
+
ol li {
|
19
|
+
margin-bottom: 5px;
|
20
|
+
}
|
21
|
+
|
22
|
+
// Bulleted lists
|
23
|
+
.list-bullet {
|
24
|
+
list-style-type: disc;
|
25
|
+
margin-left: 20px;
|
26
|
+
}
|
27
|
+
|
28
|
+
// Numbered lists
|
29
|
+
.list-number {
|
30
|
+
list-style-type: decimal;
|
31
|
+
margin-left: 25px;
|
32
|
+
}
|