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.
Files changed (47) hide show
  1. checksums.yaml +7 -0
  2. data/LICENCE.txt +24 -0
  3. data/README.md +39 -0
  4. data/app/assets/fonts/Bliss2Rg.eot +0 -0
  5. data/app/assets/fonts/Bliss2Rg.ttf +0 -0
  6. data/app/assets/fonts/Bliss2Rg.woff +0 -0
  7. data/app/assets/images/moj_logotype_crest.png +0 -0
  8. data/app/assets/javascripts/modules/moj.cookie-message.js +82 -0
  9. data/app/assets/javascripts/modules/moj.tabs.js +83 -0
  10. data/app/assets/javascripts/moj.js +54 -0
  11. data/app/assets/javascripts/vendor/jquery/jquery-1.11.0.min.js +4 -0
  12. data/app/assets/stylesheets/elements/_buttons.scss +56 -0
  13. data/app/assets/stylesheets/elements/_colours.scss +34 -0
  14. data/app/assets/stylesheets/elements/_forms.scss +171 -0
  15. data/app/assets/stylesheets/elements/_helpers.scss +51 -0
  16. data/app/assets/stylesheets/elements/_icons.scss +222 -0
  17. data/app/assets/stylesheets/elements/_layout.scss +151 -0
  18. data/app/assets/stylesheets/elements/_lists.scss +32 -0
  19. data/app/assets/stylesheets/elements/_panels.scss +30 -0
  20. data/app/assets/stylesheets/elements/_reset.scss +33 -0
  21. data/app/assets/stylesheets/elements/_shame.scss +79 -0
  22. data/app/assets/stylesheets/elements/_tables.scss +22 -0
  23. data/app/assets/stylesheets/elements/_typography.scss +150 -0
  24. data/app/assets/stylesheets/elements/forms/_form-chunky-labels.scss +62 -0
  25. data/app/assets/stylesheets/elements/forms/_form-date-of-birth.scss +45 -0
  26. data/app/assets/stylesheets/elements/forms/_form-validation.scss +64 -0
  27. data/app/assets/stylesheets/moj-internal-ie6.scss +5 -0
  28. data/app/assets/stylesheets/moj-internal-ie7.scss +4 -0
  29. data/app/assets/stylesheets/moj-internal-ie8.scss +4 -0
  30. data/app/assets/stylesheets/moj-internal.scss +56 -0
  31. data/app/assets/stylesheets/moj/_fonts.scss +12 -0
  32. data/app/assets/stylesheets/moj/_header.scss +126 -0
  33. data/app/assets/stylesheets/moj/_typography.scss +72 -0
  34. data/app/helpers/moj_helper.rb +5 -0
  35. data/app/views/layouts/moj_internal_template.html.erb +114 -0
  36. data/app/views/layouts/partials/_after_header.html.erb +14 -0
  37. data/app/views/layouts/partials/_body_classes.html.erb +1 -0
  38. data/app/views/layouts/partials/_body_end.html.erb +10 -0
  39. data/app/views/layouts/partials/_content.html.erb +11 -0
  40. data/app/views/layouts/partials/_cookie_message.html.erb +5 -0
  41. data/app/views/layouts/partials/_footer_support_links.html.erb +15 -0
  42. data/app/views/layouts/partials/_header_class.html.erb +1 -0
  43. data/app/views/layouts/partials/_page_title.html.erb +1 -0
  44. data/lib/moj_internal_template.rb +5 -0
  45. data/lib/moj_internal_template/engine.rb +11 -0
  46. data/lib/moj_internal_template/version.rb +3 -0
  47. 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
+ }