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 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.
Binary file
@@ -0,0 +1,3 @@
1
+ //= require jquery
2
+ //= require jquery_ujs
3
+ //= require bootstrap
@@ -0,0 +1,2 @@
1
+ //= require vendor/html5
2
+ //= require vendor/respond.min
@@ -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);
@@ -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);
@@ -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
+ }