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,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
+ }