govuk_admin_template 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- 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>
|