govuk_admin_template 0.0.1
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.
- data/LICENCE.txt +22 -0
- data/README.md +93 -0
- data/app/assets/images/header-crown.png +0 -0
- data/app/assets/javascripts/govuk-admin-template.js +3 -0
- data/app/assets/javascripts/lte-ie8.js +2 -0
- data/app/assets/javascripts/vendor/html5.js +8 -0
- data/app/assets/javascripts/vendor/respond.min.js +6 -0
- data/app/assets/stylesheets/base.css.scss +355 -0
- data/app/assets/stylesheets/buttons.css.scss +262 -0
- data/app/assets/stylesheets/govuk_admin_template.scss +10 -0
- data/app/assets/stylesheets/navbar.css.scss +46 -0
- data/app/assets/stylesheets/style_guide.css.scss +9 -0
- data/app/assets/stylesheets/tables.css.scss +78 -0
- data/app/assets/stylesheets/theme.css.scss +20 -0
- data/app/assets/stylesheets/toggles.css.scss +36 -0
- data/app/controllers/govuk_admin_template/style_guide_controller.rb +6 -0
- data/app/views/govuk_admin_template/style_guide/index.html.erb +216 -0
- data/app/views/layouts/govuk_admin_template.html.erb +64 -0
- data/lib/govuk_admin_template/engine.rb +10 -0
- data/lib/govuk_admin_template/version.rb +3 -0
- data/lib/govuk_admin_template.rb +5 -0
- metadata +200 -0
|
@@ -0,0 +1,262 @@
|
|
|
1
|
+
/* ==========================================================================
|
|
2
|
+
Bootstrap 2 button styles, with gradients
|
|
3
|
+
Via https://gist.github.com/Erve1879/6167373
|
|
4
|
+
========================================================================== */
|
|
5
|
+
|
|
6
|
+
.btn-primary {
|
|
7
|
+
background-color: #08c;
|
|
8
|
+
border-color: #08c;
|
|
9
|
+
color: #fff;
|
|
10
|
+
background-color: #007ab8;
|
|
11
|
+
background-image: -moz-linear-gradient(top, #08c, #006699);
|
|
12
|
+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08c), to(#006699));
|
|
13
|
+
background-image: -webkit-linear-gradient(top, #08c, #006699);
|
|
14
|
+
background-image: -o-linear-gradient(top, #08c, #006699);
|
|
15
|
+
background-image: linear-gradient(to bottom, #08c, #006699);
|
|
16
|
+
background-repeat: repeat-x;
|
|
17
|
+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff006599', GradientType=0);
|
|
18
|
+
border-color: #006699 #006699 #00334d;
|
|
19
|
+
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.btn-primary:hover,
|
|
23
|
+
.btn-primary:focus {
|
|
24
|
+
text-decoration: none;
|
|
25
|
+
background-position: 0 -15px;
|
|
26
|
+
-webkit-transition: background-position .1s linear;
|
|
27
|
+
-moz-transition: background-position .1s linear;
|
|
28
|
+
-o-transition: background-position .1s linear;
|
|
29
|
+
transition: background-position .1s linear;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.btn-primary:hover,
|
|
33
|
+
.btn-primary:focus {
|
|
34
|
+
background-color: #006699;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.btn-primary.disabled:hover,
|
|
38
|
+
.btn-primary.disabled:focus,
|
|
39
|
+
.btn-primary.disabled:active,
|
|
40
|
+
.btn-primary.disabled.active,
|
|
41
|
+
.btn-primary[disabled] .btn-primary:hover,
|
|
42
|
+
.btn-primary[disabled] .btn-primary:focus,
|
|
43
|
+
.btn-primary[disabled] .btn-primary:active,
|
|
44
|
+
.btn-primary[disabled] .btn-primary.active {
|
|
45
|
+
background-color: #08c;
|
|
46
|
+
border-color: #08c;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.btn-success {
|
|
50
|
+
background-color: #5cb85c;
|
|
51
|
+
border-color: #5cb85c;
|
|
52
|
+
color: #fff;
|
|
53
|
+
background-color: #53ad53;
|
|
54
|
+
background-image: -moz-linear-gradient(top, #5cb85c, #449d44);
|
|
55
|
+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5cb85c), to(#449d44));
|
|
56
|
+
background-image: -webkit-linear-gradient(top, #5cb85c, #449d44);
|
|
57
|
+
background-image: -o-linear-gradient(top, #5cb85c, #449d44);
|
|
58
|
+
background-image: linear-gradient(to bottom, #5cb85c, #449d44);
|
|
59
|
+
background-repeat: repeat-x;
|
|
60
|
+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449c44', GradientType=0);
|
|
61
|
+
border-color: #449d44 #449d44 #2d672d;
|
|
62
|
+
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.btn-success:hover,
|
|
66
|
+
.btn-success:focus {
|
|
67
|
+
text-decoration: none;
|
|
68
|
+
background-position: 0 -15px;
|
|
69
|
+
-webkit-transition: background-position .1s linear;
|
|
70
|
+
-moz-transition: background-position .1s linear;
|
|
71
|
+
-o-transition: background-position .1s linear;
|
|
72
|
+
transition: background-position .1s linear;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.btn-success:hover,
|
|
76
|
+
.btn-success:focus {
|
|
77
|
+
background-color: #449d44;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.btn-success.disabled:hover,
|
|
81
|
+
.btn-success.disabled:focus,
|
|
82
|
+
.btn-success.disabled:active,
|
|
83
|
+
.btn-success.disabled.active,
|
|
84
|
+
.btn-success[disabled] .btn-success:hover,
|
|
85
|
+
.btn-success[disabled] .btn-success:focus,
|
|
86
|
+
.btn-success[disabled] .btn-success:active,
|
|
87
|
+
.btn-success[disabled] .btn-success.active {
|
|
88
|
+
background-color: #5cb85c;
|
|
89
|
+
border-color: #5cb85c;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.btn-warning {
|
|
93
|
+
background-color: #f0ad4e;
|
|
94
|
+
border-color: #f0ad4e;
|
|
95
|
+
color: #fff;
|
|
96
|
+
background-color: #eea43b;
|
|
97
|
+
background-image: -moz-linear-gradient(top, #f0ad4e, #ec971f);
|
|
98
|
+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f0ad4e), to(#ec971f));
|
|
99
|
+
background-image: -webkit-linear-gradient(top, #f0ad4e, #ec971f);
|
|
100
|
+
background-image: -o-linear-gradient(top, #f0ad4e, #ec971f);
|
|
101
|
+
background-image: linear-gradient(to bottom, #f0ad4e, #ec971f);
|
|
102
|
+
background-repeat: repeat-x;
|
|
103
|
+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971e', GradientType=0);
|
|
104
|
+
border-color: #ec971f #ec971f #b06d0f;
|
|
105
|
+
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.btn-warning:hover,
|
|
109
|
+
.btn-warning:focus {
|
|
110
|
+
text-decoration: none;
|
|
111
|
+
background-position: 0 -15px;
|
|
112
|
+
-webkit-transition: background-position .1s linear;
|
|
113
|
+
-moz-transition: background-position .1s linear;
|
|
114
|
+
-o-transition: background-position .1s linear;
|
|
115
|
+
transition: background-position .1s linear;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.btn-warning:hover,
|
|
119
|
+
.btn-warning:focus {
|
|
120
|
+
background-color: #ec971f;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.btn-warning.disabled:hover,
|
|
124
|
+
.btn-warning.disabled:focus,
|
|
125
|
+
.btn-warning.disabled:active,
|
|
126
|
+
.btn-warning.disabled.active,
|
|
127
|
+
.btn-warning[disabled] .btn-warning:hover,
|
|
128
|
+
.btn-warning[disabled] .btn-warning:focus,
|
|
129
|
+
.btn-warning[disabled] .btn-warning:active,
|
|
130
|
+
.btn-warning[disabled] .btn-warning.active {
|
|
131
|
+
background-color: #f0ad4e;
|
|
132
|
+
border-color: #f0ad4e;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.btn-danger {
|
|
136
|
+
background-color: #d9534f;
|
|
137
|
+
border-color: #d9534f;
|
|
138
|
+
color: #fff;
|
|
139
|
+
background-color: #d34541;
|
|
140
|
+
background-image: -moz-linear-gradient(top, #d9534f, #c9302c);
|
|
141
|
+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#d9534f), to(#c9302c));
|
|
142
|
+
background-image: -webkit-linear-gradient(top, #d9534f, #c9302c);
|
|
143
|
+
background-image: -o-linear-gradient(top, #d9534f, #c9302c);
|
|
144
|
+
background-image: linear-gradient(to bottom, #d9534f, #c9302c);
|
|
145
|
+
background-repeat: repeat-x;
|
|
146
|
+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302b', GradientType=0);
|
|
147
|
+
border-color: #c9302c #c9302c #8b211e;
|
|
148
|
+
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.btn-danger:hover,
|
|
152
|
+
.btn-danger:focus {
|
|
153
|
+
text-decoration: none;
|
|
154
|
+
background-position: 0 -15px;
|
|
155
|
+
-webkit-transition: background-position .1s linear;
|
|
156
|
+
-moz-transition: background-position .1s linear;
|
|
157
|
+
-o-transition: background-position .1s linear;
|
|
158
|
+
transition: background-position .1s linear;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.btn-danger:hover,
|
|
162
|
+
.btn-danger:focus {
|
|
163
|
+
background-color: #c9302c;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.btn-danger.disabled:hover,
|
|
167
|
+
.btn-danger.disabled:focus,
|
|
168
|
+
.btn-danger.disabled:active,
|
|
169
|
+
.btn-danger.disabled.active,
|
|
170
|
+
.btn-danger[disabled] .btn-danger:hover,
|
|
171
|
+
.btn-danger[disabled] .btn-danger:focus,
|
|
172
|
+
.btn-danger[disabled] .btn-danger:active,
|
|
173
|
+
.btn-danger[disabled] .btn-danger.active {
|
|
174
|
+
background-color: #d9534f;
|
|
175
|
+
border-color: #d9534f;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.btn-info {
|
|
179
|
+
background-color: #5bc0de;
|
|
180
|
+
border-color: #5bc0de;
|
|
181
|
+
color: #fff;
|
|
182
|
+
background-color: #4ab9db;
|
|
183
|
+
background-image: -moz-linear-gradient(top, #5bc0de, #31b0d5);
|
|
184
|
+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#31b0d5));
|
|
185
|
+
background-image: -webkit-linear-gradient(top, #5bc0de, #31b0d5);
|
|
186
|
+
background-image: -o-linear-gradient(top, #5bc0de, #31b0d5);
|
|
187
|
+
background-image: linear-gradient(to bottom, #5bc0de, #31b0d5);
|
|
188
|
+
background-repeat: repeat-x;
|
|
189
|
+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff30afd5', GradientType=0);
|
|
190
|
+
border-color: #31b0d5 #31b0d5 #1f7e9a;
|
|
191
|
+
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.btn-info:hover,
|
|
195
|
+
.btn-info:focus {
|
|
196
|
+
text-decoration: none;
|
|
197
|
+
background-position: 0 -15px;
|
|
198
|
+
-webkit-transition: background-position .1s linear;
|
|
199
|
+
-moz-transition: background-position .1s linear;
|
|
200
|
+
-o-transition: background-position .1s linear;
|
|
201
|
+
transition: background-position .1s linear;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
.btn-info:hover,
|
|
205
|
+
.btn-info:focus {
|
|
206
|
+
background-color: #31b0d5;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.btn-info.disabled:hover,
|
|
210
|
+
.btn-info.disabled:focus,
|
|
211
|
+
.btn-info.disabled:active,
|
|
212
|
+
.btn-info.disabled.active,
|
|
213
|
+
.btn-info[disabled] .btn-info:hover,
|
|
214
|
+
.btn-info[disabled] .btn-info:focus,
|
|
215
|
+
.btn-info[disabled] .btn-info:active,
|
|
216
|
+
.btn-info[disabled] .btn-info.active {
|
|
217
|
+
background-color: #5bc0de;
|
|
218
|
+
border-color: #5bc0de;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
.btn-default {
|
|
222
|
+
background-color: #fff;
|
|
223
|
+
border-color: #fff;
|
|
224
|
+
color: #333;
|
|
225
|
+
background-color: #f5f5f5;
|
|
226
|
+
background-image: -moz-linear-gradient(top, #fff, #e6e6e6);
|
|
227
|
+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#e6e6e6));
|
|
228
|
+
background-image: -webkit-linear-gradient(top, #fff, #e6e6e6);
|
|
229
|
+
background-image: -o-linear-gradient(top, #fff, #e6e6e6);
|
|
230
|
+
background-image: linear-gradient(to bottom, #fff, #e6e6e6);
|
|
231
|
+
background-repeat: repeat-x;
|
|
232
|
+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe5e5e5', GradientType=0);
|
|
233
|
+
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
|
|
234
|
+
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
.btn-default:hover,
|
|
238
|
+
.btn-default:focus {
|
|
239
|
+
text-decoration: none;
|
|
240
|
+
background-position: 0 -15px;
|
|
241
|
+
-webkit-transition: background-position .1s linear;
|
|
242
|
+
-moz-transition: background-position .1s linear;
|
|
243
|
+
-o-transition: background-position .1s linear;
|
|
244
|
+
transition: background-position .1s linear;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
.btn-default:hover,
|
|
248
|
+
.btn-default:focus {
|
|
249
|
+
background-color: #e6e6e6;
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
.btn-default.disabled:hover,
|
|
253
|
+
.btn-default.disabled:focus,
|
|
254
|
+
.btn-default.disabled:active,
|
|
255
|
+
.btn-default.disabled.active,
|
|
256
|
+
.btn-default[disabled] .btn-default:hover,
|
|
257
|
+
.btn-default[disabled] .btn-default:focus,
|
|
258
|
+
.btn-default[disabled] .btn-default:active,
|
|
259
|
+
.btn-default[disabled] .btn-default.active {
|
|
260
|
+
background-color: #fff;
|
|
261
|
+
border-color: #fff;
|
|
262
|
+
}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
/* ==========================================================================
|
|
2
|
+
Navbar
|
|
3
|
+
========================================================================== */
|
|
4
|
+
|
|
5
|
+
.navbar .container .navbar-brand {
|
|
6
|
+
background: url("/assets/header-crown.png") 0 0.67em no-repeat;
|
|
7
|
+
color: #fff;
|
|
8
|
+
font-family: $font-family-gill-sans;
|
|
9
|
+
font-size: 20px;
|
|
10
|
+
margin-left: 0;
|
|
11
|
+
padding-left: 2.3em;
|
|
12
|
+
min-height: 37px;
|
|
13
|
+
|
|
14
|
+
.lte-ie8 & {
|
|
15
|
+
min-height: 20px;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
@media (max-width: 768px) {
|
|
20
|
+
.navbar .container .navbar-brand {
|
|
21
|
+
margin-left: 15px;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.navbar .navbar-brand:hover,
|
|
26
|
+
.navbar .navbar-brand:focus {
|
|
27
|
+
text-decoration: underline;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.navbar-text a {
|
|
31
|
+
color: $gray-light;
|
|
32
|
+
text-decoration: underline;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
// Let's make these more specific to add the intended white colour
|
|
36
|
+
.navbar-inverse .nav-collapse .nav a:hover,
|
|
37
|
+
.navbar-inverse .nav-collapse .nav .active a,
|
|
38
|
+
.navbar-inverse .nav-collapse .nav .active a:hover,
|
|
39
|
+
.navbar-inverse .nav-collapse .nav .active a:focus {
|
|
40
|
+
color: #fff;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.lte-ie8 .navbar .container {
|
|
44
|
+
padding-left: 30px;
|
|
45
|
+
padding-right: 0;
|
|
46
|
+
}
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
/* ==========================================================================
|
|
2
|
+
Tables
|
|
3
|
+
========================================================================== */
|
|
4
|
+
|
|
5
|
+
.table-header {
|
|
6
|
+
background-color: $gray-lighter;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.table-header-secondary {
|
|
10
|
+
background-color: $table-bg-accent;
|
|
11
|
+
font-weight: bold;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
thead .table-header-secondary td {
|
|
15
|
+
border-bottom: 1px solid #ccc;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.fixed-table-header-container {
|
|
19
|
+
position: fixed;
|
|
20
|
+
top: 0;
|
|
21
|
+
left: 0;
|
|
22
|
+
right: 0;
|
|
23
|
+
z-index: 10;
|
|
24
|
+
|
|
25
|
+
table {
|
|
26
|
+
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 0.3);
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
/* Selectable rows
|
|
31
|
+
==========================================================================
|
|
32
|
+
Fill table cell with label to make the whole cell clickable.
|
|
33
|
+
This is achieved with a bit of a hack, the label is set to a height always
|
|
34
|
+
guaranteed to be larger than the cell height, and the cell has its overflow
|
|
35
|
+
hidden.
|
|
36
|
+
*/
|
|
37
|
+
|
|
38
|
+
.selectable-row {
|
|
39
|
+
padding: 0 !important;
|
|
40
|
+
overflow: hidden;
|
|
41
|
+
width: 40px;
|
|
42
|
+
|
|
43
|
+
tbody & {
|
|
44
|
+
background-color: #ccc;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
label {
|
|
48
|
+
height: 300px;
|
|
49
|
+
width: 100%;
|
|
50
|
+
margin-bottom: 0;
|
|
51
|
+
position: absolute;
|
|
52
|
+
text-align: center;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
input {
|
|
56
|
+
margin-top: 12px;
|
|
57
|
+
cursor: pointer;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.selectable-row-helper {
|
|
62
|
+
border-bottom: 1px dotted #999;
|
|
63
|
+
cursor: help;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
/* Slightly different spacing for table headers */
|
|
67
|
+
.table-header-secondary .selectable-row {
|
|
68
|
+
vertical-align: top;
|
|
69
|
+
|
|
70
|
+
input {
|
|
71
|
+
margin-top: 18px;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.selected-row td,
|
|
76
|
+
.table-hover .selected-row:hover td {
|
|
77
|
+
background-color: #fffbcc; /* yellow highlight */
|
|
78
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
$font-family-gill-sans: "GillSans", "Gill Sans", "Helvetica Neue", Arial, sans-serif;
|
|
2
|
+
$default-vertical-margin: $line-height-computed;
|
|
3
|
+
|
|
4
|
+
// Colours
|
|
5
|
+
$link-color-visited : #609; /* Purple */
|
|
6
|
+
|
|
7
|
+
// From https://www.gov.uk/service-manual/user-centered-design/resources/colour-palettes
|
|
8
|
+
$turquoise : #28a197;
|
|
9
|
+
$orange : #f47738;
|
|
10
|
+
|
|
11
|
+
// Buttons
|
|
12
|
+
$default-btn-height : 30px;
|
|
13
|
+
|
|
14
|
+
$primary-button-color : #fff; /* White */
|
|
15
|
+
$success-button-color : #fff;
|
|
16
|
+
$info-button-color : #fff;
|
|
17
|
+
$inverse-button-color : #fff;
|
|
18
|
+
$danger-button-color : #fff;
|
|
19
|
+
$warning-button-color : #fff;
|
|
20
|
+
$default-button-color : #333; /* Dark grey */
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
/* ==========================================================================
|
|
2
|
+
Toggle content
|
|
3
|
+
========================================================================== */
|
|
4
|
+
|
|
5
|
+
.hide {
|
|
6
|
+
display: none;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
// Hide JavaScript content when JavaScript disabled
|
|
10
|
+
.no-js .if-no-js-hide {
|
|
11
|
+
@extend .hide;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
// Hide JavaScript fallback content when JavaScript enabled
|
|
15
|
+
.js .if-js-hide {
|
|
16
|
+
@extend .hide;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
// Hide visually, but keep available for screenreaders, by Jon Neal
|
|
20
|
+
// www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden & h5bp.com/v
|
|
21
|
+
.rm {
|
|
22
|
+
border: 0;
|
|
23
|
+
clip: rect(0, 0, 0, 0);
|
|
24
|
+
height: 1px;
|
|
25
|
+
margin: -1px;
|
|
26
|
+
overflow: hidden;
|
|
27
|
+
padding: 0;
|
|
28
|
+
position: absolute;
|
|
29
|
+
width: 1px;
|
|
30
|
+
z-index: -1;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
// Hide visually when JavaScript enabled
|
|
34
|
+
.js .if-js-rm {
|
|
35
|
+
@extend .rm;
|
|
36
|
+
}
|
|
@@ -0,0 +1,216 @@
|
|
|
1
|
+
<% content_for(:page_title, 'Admin template style guide') %>
|
|
2
|
+
|
|
3
|
+
<div class="page-title">
|
|
4
|
+
<h1>
|
|
5
|
+
Admin template style guide
|
|
6
|
+
</h1>
|
|
7
|
+
</div>
|
|
8
|
+
|
|
9
|
+
<p class="lead">Admin app UIs are powered by <a href="http://getbootstrap.com/css/">bootstrap 3.1</a>, using <a href="https://github.com/twbs/bootstrap-sass/tree/v3.1.0">bootstrap SASS</a> v3.1.0 (<a href="https://github.com/twbs/bootstrap-sass/blob/v3.1.0/vendor/assets/stylesheets/bootstrap/_mixins.scss">mixins</a>), but maintaining bootstrap 2 button styles. This guide documents how we use bootstrap, where the apps have diverged from default styles and any custom styles needed to fill in the gaps.</p>
|
|
10
|
+
|
|
11
|
+
<h2>Grid</h2>
|
|
12
|
+
<p class="lead">Apps use the <a href="http://getbootstrap.com/css/#grid">default bootstrap</a> <strong>12 column scaleable responsive grid</strong>.</p>
|
|
13
|
+
<div class="row add-bottom-margin">
|
|
14
|
+
<div class="grid-example col-md-2">col-md-2</div>
|
|
15
|
+
<div class="grid-example col-md-4">col-md-4</div>
|
|
16
|
+
<div class="grid-example col-md-6">col-md-6</div>
|
|
17
|
+
</div>
|
|
18
|
+
<div class="row">
|
|
19
|
+
<div class="grid-example col-md-12">col-md-12</div>
|
|
20
|
+
</div>
|
|
21
|
+
<hr>
|
|
22
|
+
|
|
23
|
+
<h2>Buttons</h2>
|
|
24
|
+
<div class="row">
|
|
25
|
+
<p class="col-md-6 lead">Despite using bootstrap 3 apps use the classic bootstrap button styles — the buttons have better affordance and clearer focus and active states. The source to override the buttons with the originals is from <a href="https://gist.github.com/Erve1879/6167373">https://gist.github.com/Erve1879/6167373</a>.</p>
|
|
26
|
+
<div class="col-md-6">
|
|
27
|
+
<a href="#" class="btn btn-default">Default</a>
|
|
28
|
+
<a href="#" class="btn btn-primary">Primary</a>
|
|
29
|
+
<a href="#" class="btn btn-success">Success</a>
|
|
30
|
+
<a href="#" class="btn btn-info">Info</a>
|
|
31
|
+
<a href="#" class="btn btn-warning">Warning</a>
|
|
32
|
+
<a href="#" class="btn btn-danger">Danger</a>
|
|
33
|
+
<a href="#" class="btn btn-link">Link</a>
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
<div class="row">
|
|
37
|
+
<p class="col-md-6 lead">Create and success actions use <code>btn-success</code>.</p>
|
|
38
|
+
<div class="col-md-6">
|
|
39
|
+
<a href="#" class="btn btn-success">
|
|
40
|
+
Save mapping
|
|
41
|
+
</a>
|
|
42
|
+
</div>
|
|
43
|
+
</div>
|
|
44
|
+
<div class="row">
|
|
45
|
+
<p class="col-md-6 lead">When adding an item include an <code>icon-plus</code> icon.</p>
|
|
46
|
+
<div class="col-md-6">
|
|
47
|
+
<a href="#" class="btn btn-default">
|
|
48
|
+
<i class="glyphicon glyphicon-plus"></i> Add mapping
|
|
49
|
+
</a>
|
|
50
|
+
</div>
|
|
51
|
+
</div>
|
|
52
|
+
<hr>
|
|
53
|
+
|
|
54
|
+
<h2>Page headers with subtitles</h2>
|
|
55
|
+
<div class="row">
|
|
56
|
+
<p class="col-md-6 lead">Page headers have a single pixel bottom-border. Subtitles - if used - run underneath this.</p>
|
|
57
|
+
<section class="headers col-md-6">
|
|
58
|
+
<header>
|
|
59
|
+
<div class="page-title">
|
|
60
|
+
<h1>
|
|
61
|
+
<span class="small">www.ukspaceagency.com</span>
|
|
62
|
+
UK Space Agency
|
|
63
|
+
</h1>
|
|
64
|
+
</div>
|
|
65
|
+
<p class="subtitle">UKSA is an executive agency of <a href="#">BIS</a></p>
|
|
66
|
+
|
|
67
|
+
<div class="page-title with-border">
|
|
68
|
+
<h1>
|
|
69
|
+
<span class="small">www.ukspaceagency.com</span>
|
|
70
|
+
UK Space Agency
|
|
71
|
+
</h1>
|
|
72
|
+
</div>
|
|
73
|
+
<p class="subtitle">UKSA is an executive agency of <a href="#">BIS</a></p>
|
|
74
|
+
|
|
75
|
+
</header>
|
|
76
|
+
</section>
|
|
77
|
+
</div>
|
|
78
|
+
<hr>
|
|
79
|
+
|
|
80
|
+
<h2>Tables</h2>
|
|
81
|
+
<div class="row">
|
|
82
|
+
<div class="col-md-6 lead">
|
|
83
|
+
<p>When using a table with two layers of headings, usually for interacting with table content, <code>table-header</code> and <code>table-header-secondary</code> classes are used.</p>
|
|
84
|
+
|
|
85
|
+
<p>The second example shows a table with selectable rows. Selected rows highlight in yellow. The checkbox in the header selects all rows.</p>
|
|
86
|
+
</div>
|
|
87
|
+
<ul class="col-md-6">
|
|
88
|
+
<table class="table table-bordered table-hover">
|
|
89
|
+
<thead>
|
|
90
|
+
<tr class="table-header">
|
|
91
|
+
<th>Primary header</th>
|
|
92
|
+
</tr>
|
|
93
|
+
<tr class="table-header-secondary">
|
|
94
|
+
<th>Secondary header</th>
|
|
95
|
+
</tr>
|
|
96
|
+
</thead>
|
|
97
|
+
<tbody>
|
|
98
|
+
<tr>
|
|
99
|
+
<td>Typical row</td>
|
|
100
|
+
</tr>
|
|
101
|
+
<tr>
|
|
102
|
+
<td>Typical row</td>
|
|
103
|
+
</tr>
|
|
104
|
+
</tbody>
|
|
105
|
+
</table>
|
|
106
|
+
|
|
107
|
+
<table class="table table-bordered table-hover" data-module="selectable-table">
|
|
108
|
+
<thead>
|
|
109
|
+
<tr class="table-header">
|
|
110
|
+
<th></th>
|
|
111
|
+
<th>Primary header</th>
|
|
112
|
+
</tr>
|
|
113
|
+
<tr class="table-header-secondary">
|
|
114
|
+
<th class="selectable-row">
|
|
115
|
+
<div class="relative">
|
|
116
|
+
<label>
|
|
117
|
+
<input type="checkbox" class="js-toggle-all" />
|
|
118
|
+
</label>
|
|
119
|
+
</div>
|
|
120
|
+
</th>
|
|
121
|
+
<th><a href="#" class="btn btn-default">Action</a></th>
|
|
122
|
+
</tr>
|
|
123
|
+
</thead>
|
|
124
|
+
<tbody>
|
|
125
|
+
<tr class="selected-row">
|
|
126
|
+
<td class="selectable-row">
|
|
127
|
+
<div class="relative">
|
|
128
|
+
<label>
|
|
129
|
+
<input type="checkbox" checked="checked" class="js-toggle-row" />
|
|
130
|
+
</label>
|
|
131
|
+
</div>
|
|
132
|
+
</td>
|
|
133
|
+
<td>Selected row</td>
|
|
134
|
+
</tr>
|
|
135
|
+
<tr>
|
|
136
|
+
<td class="selectable-row">
|
|
137
|
+
<div class="relative">
|
|
138
|
+
<label>
|
|
139
|
+
<input type="checkbox" />
|
|
140
|
+
</label>
|
|
141
|
+
</div>
|
|
142
|
+
</td>
|
|
143
|
+
<td>Typical row</td>
|
|
144
|
+
</tr>
|
|
145
|
+
</tbody>
|
|
146
|
+
</table>
|
|
147
|
+
</ul>
|
|
148
|
+
</div>
|
|
149
|
+
<hr>
|
|
150
|
+
|
|
151
|
+
<h2>Links</h2>
|
|
152
|
+
<div class="row">
|
|
153
|
+
<div class="col-md-6 lead">
|
|
154
|
+
<p>To match bootstrap’s muted text, a muted link class is available.</p>
|
|
155
|
+
<p>Purple <code>:visited</code> styles have been added. These apply to the main content but not to buttons.</p>
|
|
156
|
+
</div>
|
|
157
|
+
<div class="col-md-6">
|
|
158
|
+
<a href="/style" class="link-muted">Muted link</a><br><br>
|
|
159
|
+
<a href="/style">Visited link</a><br><br>
|
|
160
|
+
<a href="/style#<%= "#{Time.now.utc.to_i}" %>">Normal link</a><br><br>
|
|
161
|
+
<a href="/style" class="btn btn-default">Visited button link</a><br><br>
|
|
162
|
+
<a href="/style" class="btn btn-success">Another visited button link</a><br><br>
|
|
163
|
+
</div>
|
|
164
|
+
</div>
|
|
165
|
+
<hr>
|
|
166
|
+
|
|
167
|
+
<h2>Big number</h2>
|
|
168
|
+
<p class="big-number text-muted">100 hits</p>
|
|
169
|
+
<hr>
|
|
170
|
+
|
|
171
|
+
<h2>Big message</h2>
|
|
172
|
+
<p class="big-message text-muted">A big message</p>
|
|
173
|
+
<hr>
|
|
174
|
+
|
|
175
|
+
<h2>Highlights</h2>
|
|
176
|
+
<div class="row add-bottom-margin">
|
|
177
|
+
<p class="col-md-6 lead">Highlights are a reproduction of the <a href="https://www.gov.uk/vat-rates">GOV.UK answer style</a> and use colours from the <a href="https://www.gov.uk/service-manual/user-centered-design/resources/colour-palettes">style guide palette</a>. They are predominantly used on dashboards (see transition).</p>
|
|
178
|
+
<div class="col-md-6">
|
|
179
|
+
<div class="highlight add-bottom-margin">
|
|
180
|
+
<p>Some highlighted text</p>
|
|
181
|
+
</div>
|
|
182
|
+
</div>
|
|
183
|
+
</div>
|
|
184
|
+
<div class="row">
|
|
185
|
+
<div class="col-md-4">
|
|
186
|
+
<div class="highlight add-bottom-margin">
|
|
187
|
+
<span class="big-number">140 days</span>
|
|
188
|
+
<p>since transition<br />on 14 January 2013</p>
|
|
189
|
+
</div>
|
|
190
|
+
</div>
|
|
191
|
+
<div class="col-md-4">
|
|
192
|
+
<div class="highlight">
|
|
193
|
+
<p class="big-message">A big message in a highlight</p>
|
|
194
|
+
</div>
|
|
195
|
+
</div>
|
|
196
|
+
<div class="col-md-4">
|
|
197
|
+
<div class="highlight highlight-turquoise">
|
|
198
|
+
<p class="big-message">Turquoise & Live</p>
|
|
199
|
+
</div>
|
|
200
|
+
<div class="highlight highlight-orange">
|
|
201
|
+
<p class="big-message">Orange & Pre-transition</p>
|
|
202
|
+
</div>
|
|
203
|
+
</div>
|
|
204
|
+
</div>
|
|
205
|
+
<hr>
|
|
206
|
+
|
|
207
|
+
<h2>No content</h2>
|
|
208
|
+
<div class="row">
|
|
209
|
+
<p class="col-md-6 lead">A large but light style which applies to the empty state, eg when there are no mappings or hits. The bordered version mimics bootstrap table styles.</p>
|
|
210
|
+
<div class="col-md-6">
|
|
211
|
+
<p class="no-content">No mappings available</p>
|
|
212
|
+
<p class="no-content no-content-bordered">Bordered message</p>
|
|
213
|
+
<p class="no-content">A longer, multi-line no content message. Do labore et <a href="#">dolore magna aliqua</a>.</p>
|
|
214
|
+
</div>
|
|
215
|
+
</div>
|
|
216
|
+
<hr>
|