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.
Files changed (22) hide show
  1. data/LICENCE.txt +22 -0
  2. data/README.md +93 -0
  3. data/app/assets/images/header-crown.png +0 -0
  4. data/app/assets/javascripts/govuk-admin-template.js +3 -0
  5. data/app/assets/javascripts/lte-ie8.js +2 -0
  6. data/app/assets/javascripts/vendor/html5.js +8 -0
  7. data/app/assets/javascripts/vendor/respond.min.js +6 -0
  8. data/app/assets/stylesheets/base.css.scss +355 -0
  9. data/app/assets/stylesheets/buttons.css.scss +262 -0
  10. data/app/assets/stylesheets/govuk_admin_template.scss +10 -0
  11. data/app/assets/stylesheets/navbar.css.scss +46 -0
  12. data/app/assets/stylesheets/style_guide.css.scss +9 -0
  13. data/app/assets/stylesheets/tables.css.scss +78 -0
  14. data/app/assets/stylesheets/theme.css.scss +20 -0
  15. data/app/assets/stylesheets/toggles.css.scss +36 -0
  16. data/app/controllers/govuk_admin_template/style_guide_controller.rb +6 -0
  17. data/app/views/govuk_admin_template/style_guide/index.html.erb +216 -0
  18. data/app/views/layouts/govuk_admin_template.html.erb +64 -0
  19. data/lib/govuk_admin_template/engine.rb +10 -0
  20. data/lib/govuk_admin_template/version.rb +3 -0
  21. data/lib/govuk_admin_template.rb +5 -0
  22. metadata +200 -0
data/LICENCE.txt ADDED
@@ -0,0 +1,22 @@
1
+ Copyright (c) 2014 Crown copyright
2
+
3
+ MIT License
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining
6
+ a copy of this software and associated documentation files (the
7
+ "Software"), to deal in the Software without restriction, including
8
+ without limitation the rights to use, copy, modify, merge, publish,
9
+ distribute, sublicense, and/or sell copies of the Software, and to
10
+ permit persons to whom the Software is furnished to do so, subject to
11
+ the following conditions:
12
+
13
+ The above copyright notice and this permission notice shall be
14
+ included in all copies or substantial portions of the Software.
15
+
16
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
17
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18
+ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
19
+ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
20
+ LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
21
+ OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
22
+ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
data/README.md ADDED
@@ -0,0 +1,93 @@
1
+ # GOV.UK Admin Template
2
+
3
+ Styles, scripts and templates wrapped up in a gem for getting up and running with [Bootstrap](http://getbootstrap.com) based backend admin apps.
4
+
5
+ This gem provides (via a Rails engine):
6
+ * jQuery
7
+ * Bootstrap 3 standard styles and javascript — including HTML5 and respond.js shims necessary for IE <= IE8
8
+ * An admin layout with header and footer
9
+ * Admin design patterns available from __/style-guide__
10
+ * SASS variables for the admin theme
11
+
12
+ ## Usage
13
+
14
+ Firstly, include the gem in your Gemfile, pinned to the appropriate version and run ```bundle```:
15
+ ```ruby
16
+ gem 'govuk-admin-template', '0.0.1'
17
+ ```
18
+
19
+ At the top of `application.scss` include the styles (this provides all the mixins and variables from the gem as well as from bootstrap — [bootstrap mixins](https://github.com/twbs/bootstrap-sass/blob/master/vendor/assets/stylesheets/bootstrap/_mixins.scss)):
20
+ ```css
21
+ @import 'govuk_admin_template';
22
+ ```
23
+
24
+ The base template includes Bootstrap and jQuery javascript, IE shims, header HTML and footer HTML. In `application.html.erb` after any content blocks you want to include, render the base template:
25
+ ```erb
26
+ <%= render :template => 'layouts/govuk_admin_template' %>
27
+ ```
28
+ You will also need to include your styles within the `<head>` of your HTML, do this using nested layouts:
29
+ ```erb
30
+ <% content_for :head do %>
31
+ <%= stylesheet_link_tag "application", :media => "all" %>
32
+ <% end %>
33
+ ```
34
+
35
+ The gem source includes a [dummy app](spec/dummy) configured to behave like an app using the gem. If you have the gem checked out it can be run from the `spec\dummy` directory using `rails s`.
36
+
37
+ ### Content blocks
38
+
39
+ The gem [uses nested layouts](http://guides.rubyonrails.org/layouts_and_rendering.html#using-nested-layouts) for customisation.
40
+
41
+ content_for | Description
42
+ ------------- | -------------
43
+ app_title | Name of your admin application
44
+ content | Main content
45
+ footer_version (optional) | Text indicating the release, eg commit SHA
46
+ head | HTML to include in the <head> of your application
47
+ navbar_items | A set of HTML list items (`<li>`) forming the primary navigation
48
+ navbar_right | Text to the right of the nav bar. Logged in user, sign out link, etc
49
+ page_title | Page title
50
+
51
+ Example navbar_items:
52
+ ```erb
53
+ <% content_for :navbar_items do %>
54
+ <li>
55
+ <a href="#">navbar_item</a>
56
+ </li>
57
+ <% end %>
58
+ ```
59
+
60
+ ## Development
61
+
62
+ Clone the repository and run `bundle`.
63
+
64
+ The source files are in the [app](app) directory. Unlike other GOVUK frontend gems, there is no compile step. The app directory is included in the gem and hooked in as a Rails engine.
65
+
66
+ While developing it may be helpful to see how the gem will render. The dummy app at [spec/dummy](spec/dummy) is configured to act like an application using the gem and can be started from that directory using `rails s`. Changes will show immediately. The tests also run against this app.
67
+
68
+ The dummy app’s rake tasks have been loaded into the gem’s task list under the namespace `dummy_app` for convenience.
69
+
70
+ ### Running tests
71
+
72
+ The default rake task runs all tests:
73
+ ```
74
+ bundle exec rake
75
+ ```
76
+
77
+ Layout and nested layouts are tested using RSpec and Capybara:
78
+ ```
79
+ bundle exec rake spec
80
+ ```
81
+
82
+ Javascript is tested using Jasmine and the [Jasmine gem](https://github.com/pivotal/jasmine-gem). Tests can be run either in the browser or on the command line via the dummy app’s tasks:
83
+ ```sh
84
+ # browser
85
+ bundle exec rake dummy_app:jasmine
86
+
87
+ # command line
88
+ bundle exec rake dummy_app:jasmine:ci
89
+ ```
90
+
91
+ ## Publishing
92
+
93
+ There is no automatic compilation and publish step yet.
data/app/assets/images/header-crown.png ADDED
Binary file
data/app/assets/javascripts/govuk-admin-template.js ADDED
@@ -0,0 +1,3 @@
1
+ //= require jquery
2
+ //= require jquery_ujs
3
+ //= require bootstrap
data/app/assets/javascripts/lte-ie8.js ADDED
@@ -0,0 +1,2 @@
1
+ //= require vendor/html5
2
+ //= require vendor/respond.min
data/app/assets/javascripts/vendor/html5.js ADDED
@@ -0,0 +1,8 @@
1
+ /*
2
+ HTML5 Shiv v3.7.0 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
3
+ */
4
+ (function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag();
5
+ a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/[\w\-]+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x<style>article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}</style>";
6
+ c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="<xyz></xyz>";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode||
7
+ "undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:"3.7.0",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);
8
+ if(g)return a.createDocumentFragment();for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d<h;d++)c.createElement(e[d]);return c}};l.html5=e;q(f)})(this,document);
data/app/assets/javascripts/vendor/respond.min.js ADDED
@@ -0,0 +1,6 @@
1
+ /*! Respond.js v1.4.2: min/max-width media query polyfill
2
+ * Copyright 2014 Scott Jehl
3
+ * Licensed under MIT
4
+ * http://j.mp/respondjs */
5
+
6
+ !function(a){"use strict";a.matchMedia=a.matchMedia||function(a){var b,c=a.documentElement,d=c.firstElementChild||c.firstChild,e=a.createElement("body"),f=a.createElement("div");return f.id="mq-test-1",f.style.cssText="position:absolute;top:-100em",e.style.background="none",e.appendChild(f),function(a){return f.innerHTML='&shy;<style media="'+a+'"> #mq-test-1 { width: 42px; }</style>',c.insertBefore(e,d),b=42===f.offsetWidth,c.removeChild(e),{matches:b,media:a}}}(a.document)}(this),function(a){"use strict";function b(){v(!0)}var c={};a.respond=c,c.update=function(){};var d=[],e=function(){var b=!1;try{b=new a.XMLHttpRequest}catch(c){b=new a.ActiveXObject("Microsoft.XMLHTTP")}return function(){return b}}(),f=function(a,b){var c=e();c&&(c.open("GET",a,!0),c.onreadystatechange=function(){4!==c.readyState||200!==c.status&&304!==c.status||b(c.responseText)},4!==c.readyState&&c.send(null))},g=function(a){return a.replace(c.regex.minmaxwh,"").match(c.regex.other)};if(c.ajax=f,c.queue=d,c.unsupportedmq=g,c.regex={media:/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi,keyframes:/@(?:\-(?:o|moz|webkit)\-)?keyframes[^\{]+\{(?:[^\{\}]*\{[^\}\{]*\})+[^\}]*\}/gi,comments:/\/\*[^*]*\*+([^/][^*]*\*+)*\//gi,urls:/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,findStyles:/@media *([^\{]+)\{([\S\s]+?)$/,only:/(only\s+)?([a-zA-Z]+)\s?/,minw:/\(\s*min\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/,maxw:/\(\s*max\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/,minmaxwh:/\(\s*m(in|ax)\-(height|width)\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/gi,other:/\([^\)]*\)/g},c.mediaQueriesSupported=a.matchMedia&&null!==a.matchMedia("only all")&&a.matchMedia("only all").matches,!c.mediaQueriesSupported){var h,i,j,k=a.document,l=k.documentElement,m=[],n=[],o=[],p={},q=30,r=k.getElementsByTagName("head")[0]||l,s=k.getElementsByTagName("base")[0],t=r.getElementsByTagName("link"),u=function(){var a,b=k.createElement("div"),c=k.body,d=l.style.fontSize,e=c&&c.style.fontSize,f=!1;return b.style.cssText="position:absolute;font-size:1em;width:1em",c||(c=f=k.createElement("body"),c.style.background="none"),l.style.fontSize="100%",c.style.fontSize="100%",c.appendChild(b),f&&l.insertBefore(c,l.firstChild),a=b.offsetWidth,f?l.removeChild(c):c.removeChild(b),l.style.fontSize=d,e&&(c.style.fontSize=e),a=j=parseFloat(a)},v=function(b){var c="clientWidth",d=l[c],e="CSS1Compat"===k.compatMode&&d||k.body[c]||d,f={},g=t[t.length-1],p=(new Date).getTime();if(b&&h&&q>p-h)return a.clearTimeout(i),i=a.setTimeout(v,q),void 0;h=p;for(var s in m)if(m.hasOwnProperty(s)){var w=m[s],x=w.minw,y=w.maxw,z=null===x,A=null===y,B="em";x&&(x=parseFloat(x)*(x.indexOf(B)>-1?j||u():1)),y&&(y=parseFloat(y)*(y.indexOf(B)>-1?j||u():1)),w.hasquery&&(z&&A||!(z||e>=x)||!(A||y>=e))||(f[w.media]||(f[w.media]=[]),f[w.media].push(n[w.rules]))}for(var C in o)o.hasOwnProperty(C)&&o[C]&&o[C].parentNode===r&&r.removeChild(o[C]);o.length=0;for(var D in f)if(f.hasOwnProperty(D)){var E=k.createElement("style"),F=f[D].join("\n");E.type="text/css",E.media=D,r.insertBefore(E,g.nextSibling),E.styleSheet?E.styleSheet.cssText=F:E.appendChild(k.createTextNode(F)),o.push(E)}},w=function(a,b,d){var e=a.replace(c.regex.comments,"").replace(c.regex.keyframes,"").match(c.regex.media),f=e&&e.length||0;b=b.substring(0,b.lastIndexOf("/"));var h=function(a){return a.replace(c.regex.urls,"$1"+b+"$2$3")},i=!f&&d;b.length&&(b+="/"),i&&(f=1);for(var j=0;f>j;j++){var k,l,o,p;i?(k=d,n.push(h(a))):(k=e[j].match(c.regex.findStyles)&&RegExp.$1,n.push(RegExp.$2&&h(RegExp.$2))),o=k.split(","),p=o.length;for(var q=0;p>q;q++)l=o[q],g(l)||m.push({media:l.split("(")[0].match(c.regex.only)&&RegExp.$2||"all",rules:n.length-1,hasquery:l.indexOf("(")>-1,minw:l.match(c.regex.minw)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:l.match(c.regex.maxw)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}v()},x=function(){if(d.length){var b=d.shift();f(b.href,function(c){w(c,b.href,b.media),p[b.href]=!0,a.setTimeout(function(){x()},0)})}},y=function(){for(var b=0;b<t.length;b++){var c=t[b],e=c.href,f=c.media,g=c.rel&&"stylesheet"===c.rel.toLowerCase();e&&g&&!p[e]&&(c.styleSheet&&c.styleSheet.rawCssText?(w(c.styleSheet.rawCssText,e,f),p[e]=!0):(!/^([a-zA-Z:]*\/\/)/.test(e)&&!s||e.replace(RegExp.$1,"").split("/")[0]===a.location.host)&&("//"===e.substring(0,2)&&(e=a.location.protocol+e),d.push({href:e,media:f})))}x()};y(),c.update=y,c.getEmValue=u,a.addEventListener?a.addEventListener("resize",b,!1):a.attachEvent&&a.attachEvent("onresize",b)}}(this);
data/app/assets/stylesheets/base.css.scss ADDED
@@ -0,0 +1,355 @@
1
+ /* ==========================================================================
2
+ Base
3
+ ========================================================================== */
4
+
5
+ /* Force vertical scrolling and prevent jumps when hiding/showing content
6
+ specifically with modals and when filtering */
7
+ html {
8
+ overflow-y: scroll;
9
+ }
10
+
11
+ label {
12
+ font-weight: bold;
13
+ cursor: pointer;
14
+ }
15
+
16
+ /* ==========================================================================
17
+ Helpers
18
+ ========================================================================== */
19
+
20
+ .relative {
21
+ position: relative;
22
+ }
23
+
24
+ .bold {
25
+ font-weight: bold;
26
+ }
27
+
28
+ .normal {
29
+ font-weight: normal;
30
+ }
31
+
32
+ .bookmarklet {
33
+ cursor: move;
34
+ }
35
+
36
+ a.inherit,
37
+ a.inherit:visited,
38
+ .inherit {
39
+ color: inherit;
40
+ }
41
+
42
+ /* Form helpers
43
+ ========================================================================== */
44
+
45
+ /* Reset the default bootstrap legend styles, eg for use with radio buttons
46
+ See http://csswizardry.com/2014/01/extending-silent-classes-in-sass/ for % syntax */
47
+ .legend-reset,
48
+ %legend-reset {
49
+ font-size: 1em;
50
+ border: none;
51
+ margin-bottom: 0;
52
+ width: auto;
53
+ }
54
+
55
+ .legend-inline {
56
+ @extend %legend-reset;
57
+ float: left;
58
+ margin-top: 1px;
59
+ margin-right: 10px;
60
+ }
61
+
62
+ /* Margin helpers
63
+ ========================================================================== */
64
+
65
+ .add-vertical-margins {
66
+ margin-top: $default-vertical-margin !important;
67
+ margin-bottom: $default-vertical-margin !important;
68
+ }
69
+
70
+ %add-top-margin,
71
+ .add-top-margin {
72
+ margin-top: $default-vertical-margin !important;
73
+ }
74
+
75
+ %remove-top-margin,
76
+ .remove-top-margin {
77
+ margin-top: 0 !important;
78
+ }
79
+
80
+ %add-bottom-margin,
81
+ .add-bottom-margin {
82
+ margin-bottom: $default-vertical-margin !important;
83
+ }
84
+
85
+ .add-big-bottom-margin {
86
+ margin-bottom: $default-vertical-margin * 2 !important;
87
+ }
88
+
89
+ %remove-bottom-margin,
90
+ .remove-bottom-margin {
91
+ margin-bottom: 0 !important;
92
+ }
93
+
94
+ %add-right-margin,
95
+ .add-right-margin {
96
+ margin-right: $grid-gutter-width / 3 !important;
97
+ }
98
+
99
+ %add-left-margin,
100
+ .add-left-margin {
101
+ margin-left: $grid-gutter-width / 3 !important;
102
+ }
103
+
104
+ .dl-spaced dd {
105
+ margin-bottom: $default-vertical-margin;
106
+ }
107
+
108
+ /* Simulate the margin bootstrap puts on its labels (no built-in variable for this) */
109
+ .add-label-margin {
110
+ margin-bottom: 5px;
111
+ }
112
+
113
+ /* Padding helpers
114
+ ========================================================================== */
115
+
116
+ .remove-padding {
117
+ padding: 0 !important;
118
+ }
119
+
120
+ .remove-bottom-padding {
121
+ padding-bottom: 0 !important;
122
+ }
123
+
124
+ /* Icon helpers
125
+ ========================================================================== */
126
+
127
+ // Vanilla glyphicons when alongside text can appear too large
128
+ // this is a helper to consistently downscale them
129
+ %glyphicon-smaller-than-text,
130
+ .glyphicon-smaller-than-text {
131
+ font-size: 80%;
132
+ }
133
+
134
+ .glyphicon-alert-success {
135
+ @extend %glyphicon-smaller-than-text;
136
+ @extend .text-success;
137
+ @extend %add-right-margin;
138
+ }
139
+
140
+ /* ==========================================================================
141
+ Bootstrap modal overrides
142
+ ========================================================================== */
143
+
144
+ .modal-footer {
145
+ background: #eee;
146
+ border-radius: 0 0 $border-radius-base $border-radius-base;
147
+ }
148
+
149
+ /* ==========================================================================
150
+ Bootstrap link overrides
151
+ ========================================================================== */
152
+
153
+ main a {
154
+ &:visited {
155
+ color: $link-color-visited;
156
+ }
157
+
158
+ &.no-visit:visited {
159
+ color: $link-color;
160
+ }
161
+
162
+ // Don't give visited links that are buttons
163
+ // the visited link colour
164
+
165
+ &.btn:visited {
166
+ color: $default-button-color;
167
+ }
168
+
169
+ &.btn-primary:visited {
170
+ color: $primary-button-color;
171
+ }
172
+
173
+ &.btn-info:visited {
174
+ color: $info-button-color;
175
+ }
176
+
177
+ &.btn-success:visited {
178
+ color: $success-button-color;
179
+ }
180
+
181
+ &.btn-warning:visited {
182
+ color: $warning-button-color;
183
+ }
184
+
185
+ &.btn-danger:visited {
186
+ color: $danger-button-color;
187
+ }
188
+
189
+ &.btn-inverse:visited {
190
+ color: $inverse-button-color;
191
+ }
192
+
193
+ &.btn-link:visited {
194
+ color: $link-color;
195
+ }
196
+
197
+ }
198
+
199
+ .link-muted,
200
+ .link-muted:visited {
201
+ color: $gray-light;
202
+ text-decoration: underline;
203
+ }
204
+
205
+ .link-muted:hover,
206
+ .link-muted:focus {
207
+ color: $gray;
208
+ }
209
+
210
+ // Force long URLs to break
211
+ .breakable {
212
+ word-break: break-all;
213
+ display: inline-block;
214
+ }
215
+
216
+ .glossary-link,
217
+ .glossary-link:visited {
218
+ color: inherit;
219
+ text-decoration: underline;
220
+ }
221
+
222
+ /* ==========================================================================
223
+ Page headers
224
+ ========================================================================== */
225
+
226
+ .page-title {
227
+ padding-bottom: 9px;
228
+ margin: 20px 0 10px;
229
+ }
230
+
231
+ .page-title .small {
232
+ font-size: 65%;
233
+ font-weight: normal;
234
+ line-height: 1.5;
235
+ color: $gray-light;
236
+ display: block;
237
+ }
238
+
239
+ .page-title-with-border {
240
+ @extend .page-title;
241
+ border-bottom: 1px solid #ddd;
242
+ margin-bottom: 30px;
243
+ }
244
+
245
+ /* ==========================================================================
246
+ Footer
247
+ ========================================================================== */
248
+
249
+ .page-footer {
250
+ clear: left;
251
+ margin: $default-vertical-margin 0 $default-vertical-margin;
252
+ }
253
+
254
+ /* ==========================================================================
255
+ Common content patterns
256
+ ========================================================================== */
257
+
258
+ .subtitle {
259
+ margin: -$default-vertical-margin 0 $default-vertical-margin;
260
+ font-size: $font-size-large;
261
+ }
262
+
263
+ .big-message {
264
+ font-size: $font-size-h1;
265
+ font-weight: bold;
266
+ }
267
+
268
+ .big-number {
269
+ font-size: $font-size-h1 * 1.5;
270
+ font-weight: bold;
271
+ }
272
+
273
+ .list-group-item {
274
+ padding-top: $default-vertical-margin;
275
+ padding-bottom: $default-vertical-margin;
276
+ }
277
+
278
+ a.list-group-item {
279
+
280
+ &:hover .list-group-item-heading {
281
+ text-decoration: underline;
282
+ }
283
+
284
+ .list-group-item-heading {
285
+ color: $link-color;
286
+ }
287
+
288
+ }
289
+
290
+ /* No content
291
+ ========================================================================== */
292
+
293
+ %large-and-spaced,
294
+ .large-and-spaced {
295
+ font-size: $font-size-base * 2;
296
+ line-height: $default-vertical-margin * 2;
297
+ text-align: center;
298
+ padding: ($default-vertical-margin * 4) 0;
299
+ }
300
+
301
+ .no-content {
302
+ color: lighten($gray-light, 20%); // Large text needs a lighter colour for balance
303
+ @extend %large-and-spaced;
304
+ }
305
+
306
+ .no-content-bordered {
307
+ border: 1px solid $table-border-color;
308
+ border-radius: $border-radius-base;
309
+ }
310
+
311
+ .error-page {
312
+ @extend %large-and-spaced;
313
+ }
314
+
315
+ /* Highlights
316
+ ========================================================================== */
317
+
318
+ .highlight {
319
+ background: #aaa;
320
+ text-align: center;
321
+ padding: 2 * $default-vertical-margin;
322
+ color: #fff;
323
+ font-size: $font-size-base * 1.5;
324
+ border-radius: $border-radius-base;
325
+ }
326
+
327
+ .highlight > p:last-child {
328
+ margin-bottom: 0;
329
+ }
330
+
331
+ .highlight-turquoise,
332
+ .highlight-live {
333
+ background-color: $turquoise;
334
+ }
335
+
336
+ .highlight-orange,
337
+ .highlight-pre-transition {
338
+ background-color: $orange;
339
+ }
340
+
341
+ /* ==========================================================================
342
+ Forms
343
+ ========================================================================== */
344
+
345
+ /* Use an error style that matches bootstrap style guide
346
+ http://getbootstrap.com/css/#forms */
347
+ form .field_with_errors input,
348
+ form .field_with_errors textarea {
349
+ border-color: $state-danger-text;
350
+ }
351
+
352
+ form .field_with_errors label {
353
+ color: $state-danger-text;
354
+ display: block;
355
+ }