govuk_elements_rails 0.3.0 → 1.1.2
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.
- checksums.yaml +4 -4
- data/LICENSE +19 -0
- data/README.md +165 -46
- data/lib/govuk_elements_rails.rb +0 -1
- data/lib/govuk_elements_rails/engine.rb +0 -10
- data/vendor/assets/javascripts/details.polyfill.js +29 -43
- data/vendor/assets/stylesheets/_govuk-elements.scss +54 -0
- data/vendor/assets/stylesheets/elements/_base.scss +126 -0
- data/vendor/assets/stylesheets/elements/_breadcrumbs.scss +6 -0
- data/vendor/assets/stylesheets/elements/_buttons.scss +5 -5
- data/vendor/assets/stylesheets/elements/_components.scss +9 -0
- data/vendor/assets/stylesheets/elements/_details.scss +3 -9
- data/vendor/assets/stylesheets/elements/_elements-typography.scss +102 -9
- data/vendor/assets/stylesheets/elements/_forms.scss +84 -61
- data/vendor/assets/stylesheets/elements/_helpers.scss +6 -12
- data/vendor/assets/stylesheets/elements/_icons.scss +63 -207
- data/vendor/assets/stylesheets/elements/_layout.scss +9 -22
- data/vendor/assets/stylesheets/elements/_lists.scss +10 -13
- data/vendor/assets/stylesheets/elements/_panels.scss +24 -17
- data/vendor/assets/stylesheets/elements/_phase-banner.scss +10 -0
- data/vendor/assets/stylesheets/elements/_tables.scss +1 -5
- data/vendor/assets/stylesheets/elements/forms/_form-block-labels.scss +8 -7
- data/vendor/assets/stylesheets/elements/forms/_form-validation.scss +0 -3
- metadata +33 -49
- data/LICENCE +0 -20
- data/app/builders/govuk_elements_form_builder.rb +0 -77
- data/app/builders/labelling_form_builder.rb +0 -316
- data/lib/govuk_elements_rails/version.rb +0 -5
- data/vendor/assets/images/icons/accordian-arrow-2x.png +0 -0
- data/vendor/assets/images/icons/accordian-arrow.png +0 -0
- data/vendor/assets/images/icons/arrow-sprite.png +0 -0
- data/vendor/assets/images/icons/icon-calendar-2x.png +0 -0
- data/vendor/assets/images/icons/icon-calendar.png +0 -0
- data/vendor/assets/images/icons/icon-file-download-2x.png +0 -0
- data/vendor/assets/images/icons/icon-file-download.png +0 -0
- data/vendor/assets/images/icons/icon-important-2x.png +0 -0
- data/vendor/assets/images/icons/icon-important.png +0 -0
- data/vendor/assets/images/icons/icon-information-2x.png +0 -0
- data/vendor/assets/images/icons/icon-information.png +0 -0
- data/vendor/assets/images/icons/icon-locator-2x.png +0 -0
- data/vendor/assets/images/icons/icon-locator.png +0 -0
- data/vendor/assets/images/icons/icon-pointer-2x.png +0 -0
- data/vendor/assets/images/icons/icon-pointer-black-2x.png +0 -0
- data/vendor/assets/images/icons/icon-pointer-black.png +0 -0
- data/vendor/assets/images/icons/icon-pointer-indexed.png +0 -0
- data/vendor/assets/images/icons/icon-pointer.png +0 -0
- data/vendor/assets/images/icons/icon-search-2x.png +0 -0
- data/vendor/assets/images/icons/icon-search.png +0 -0
- data/vendor/assets/images/icons/player-icon-forward.png +0 -0
- data/vendor/assets/images/icons/player-icon-pause.png +0 -0
- data/vendor/assets/images/icons/player-icon-play.png +0 -0
- data/vendor/assets/images/icons/player-icon-rewind.png +0 -0
- data/vendor/assets/images/icons/player-icon-volume.png +0 -0
- data/vendor/assets/javascripts/application.js +0 -157
- data/vendor/assets/javascripts/bind.js +0 -40
- data/vendor/assets/javascripts/selection-buttons.js +0 -111
- data/vendor/assets/stylesheets/elements-page-ie6.scss +0 -5
- data/vendor/assets/stylesheets/elements-page-ie7.scss +0 -4
- data/vendor/assets/stylesheets/elements-page-ie8.scss +0 -4
- data/vendor/assets/stylesheets/elements-page.scss +0 -386
- data/vendor/assets/stylesheets/main-ie6.scss +0 -5
- data/vendor/assets/stylesheets/main-ie7.scss +0 -4
- data/vendor/assets/stylesheets/main-ie8.scss +0 -4
- data/vendor/assets/stylesheets/main.scss +0 -36
- data/vendor/assets/stylesheets/prism.scss +0 -144
- data/vendor/assets/stylesheets/service-design-manual/helpers/_breadcrumbs.scss +0 -81
- data/vendor/assets/stylesheets/service-design-manual/helpers/_page-header.scss +0 -28
- data/vendor/assets/stylesheets/service-design-manual/styleguide/_colours.scss +0 -3
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
@@ -1,157 +0,0 @@
|
|
1
|
-
function ShowHideContent() {
|
2
|
-
var self = this;
|
3
|
-
|
4
|
-
|
5
|
-
self.escapeElementName = function(str) {
|
6
|
-
result = str.replace('[', '\\[').replace(']', '\\]')
|
7
|
-
return(result);
|
8
|
-
};
|
9
|
-
|
10
|
-
self.showHideRadioToggledContent = function () {
|
11
|
-
$(".block-label input[type='radio']").each(function () {
|
12
|
-
|
13
|
-
var $radio = $(this);
|
14
|
-
var $radioGroupName = $radio.attr('name');
|
15
|
-
var $radioLabel = $radio.parent('label');
|
16
|
-
|
17
|
-
var dataTarget = $radioLabel.attr('data-target');
|
18
|
-
|
19
|
-
// Add ARIA attributes
|
20
|
-
|
21
|
-
// If the data-target attribute is defined
|
22
|
-
if (dataTarget) {
|
23
|
-
|
24
|
-
// Set aria-controls
|
25
|
-
$radio.attr('aria-controls', dataTarget);
|
26
|
-
|
27
|
-
$radio.on('click', function () {
|
28
|
-
|
29
|
-
// Select radio buttons in the same group
|
30
|
-
$radio.closest('form').find(".block-label input[name=" + self.escapeElementName($radioGroupName) + "]").each(function () {
|
31
|
-
var $this = $(this);
|
32
|
-
|
33
|
-
var groupDataTarget = $this.parent('label').attr('data-target');
|
34
|
-
var $groupDataTarget = $('#' + groupDataTarget);
|
35
|
-
|
36
|
-
// Hide toggled content
|
37
|
-
$groupDataTarget.hide();
|
38
|
-
// Set aria-expanded and aria-hidden for hidden content
|
39
|
-
$this.attr('aria-expanded', 'false');
|
40
|
-
$groupDataTarget.attr('aria-hidden', 'true');
|
41
|
-
});
|
42
|
-
|
43
|
-
var $dataTarget = $('#' + dataTarget);
|
44
|
-
$dataTarget.show();
|
45
|
-
// Set aria-expanded and aria-hidden for clicked radio
|
46
|
-
$radio.attr('aria-expanded', 'true');
|
47
|
-
$dataTarget.attr('aria-hidden', 'false');
|
48
|
-
|
49
|
-
});
|
50
|
-
|
51
|
-
} else {
|
52
|
-
// If the data-target attribute is undefined for a radio button,
|
53
|
-
// hide visible data-target content for radio buttons in the same group
|
54
|
-
|
55
|
-
$radio.on('click', function () {
|
56
|
-
|
57
|
-
// Select radio buttons in the same group
|
58
|
-
$(".block-label input[name=" + self.escapeElementName($radioGroupName) + "]").each(function () {
|
59
|
-
|
60
|
-
var groupDataTarget = $(this).parent('label').attr('data-target');
|
61
|
-
var $groupDataTarget = $('#' + groupDataTarget);
|
62
|
-
|
63
|
-
// Hide toggled content
|
64
|
-
$groupDataTarget.hide();
|
65
|
-
// Set aria-expanded and aria-hidden for hidden content
|
66
|
-
$(this).attr('aria-expanded', 'false');
|
67
|
-
$groupDataTarget.attr('aria-hidden', 'true');
|
68
|
-
});
|
69
|
-
|
70
|
-
});
|
71
|
-
}
|
72
|
-
|
73
|
-
});
|
74
|
-
}
|
75
|
-
self.showHideCheckboxToggledContent = function () {
|
76
|
-
|
77
|
-
$(".block-label input[type='checkbox']").each(function() {
|
78
|
-
|
79
|
-
var $checkbox = $(this);
|
80
|
-
var $checkboxLabel = $(this).parent();
|
81
|
-
|
82
|
-
var $dataTarget = $checkboxLabel.attr('data-target');
|
83
|
-
|
84
|
-
// Add ARIA attributes
|
85
|
-
|
86
|
-
// If the data-target attribute is defined
|
87
|
-
if (typeof $dataTarget !== 'undefined' && $dataTarget !== false) {
|
88
|
-
|
89
|
-
// Set aria-controls
|
90
|
-
$checkbox.attr('aria-controls', $dataTarget);
|
91
|
-
|
92
|
-
// Set aria-expanded and aria-hidden
|
93
|
-
$checkbox.attr('aria-expanded', 'false');
|
94
|
-
$('#'+$dataTarget).attr('aria-hidden', 'true');
|
95
|
-
|
96
|
-
// For checkboxes revealing hidden content
|
97
|
-
$checkbox.on('click', function() {
|
98
|
-
|
99
|
-
var state = $(this).attr('aria-expanded') === 'false' ? true : false;
|
100
|
-
|
101
|
-
// Toggle hidden content
|
102
|
-
$('#'+$dataTarget).toggle();
|
103
|
-
|
104
|
-
// Update aria-expanded and aria-hidden attributes
|
105
|
-
$(this).attr('aria-expanded', state);
|
106
|
-
$('#'+$dataTarget).attr('aria-hidden', !state);
|
107
|
-
|
108
|
-
});
|
109
|
-
}
|
110
|
-
|
111
|
-
});
|
112
|
-
}
|
113
|
-
}
|
114
|
-
|
115
|
-
$(document).ready(function() {
|
116
|
-
|
117
|
-
// Turn off jQuery animation
|
118
|
-
jQuery.fx.off = true;
|
119
|
-
|
120
|
-
// Use GOV.UK selection-buttons.js to set selected
|
121
|
-
// and focused states for block labels
|
122
|
-
var $blockLabels = $(".block-label input[type='radio'], .block-label input[type='checkbox']");
|
123
|
-
new GOVUK.SelectionButtons($blockLabels);
|
124
|
-
|
125
|
-
// Details/summary polyfill
|
126
|
-
// See /javascripts/vendor/details.polyfill.js
|
127
|
-
|
128
|
-
// Where .block-label uses the data-target attribute
|
129
|
-
// to toggle hidden content
|
130
|
-
var toggleContent = new ShowHideContent();
|
131
|
-
toggleContent.showHideRadioToggledContent();
|
132
|
-
toggleContent.showHideCheckboxToggledContent();
|
133
|
-
|
134
|
-
});
|
135
|
-
|
136
|
-
$(window).load(function() {
|
137
|
-
|
138
|
-
// Only set focus for the error example pages
|
139
|
-
if ($(".js-error-example").length) {
|
140
|
-
|
141
|
-
// If there is an error summary, set focus to the summary
|
142
|
-
if ($(".error-summary").length) {
|
143
|
-
$(".error-summary").focus();
|
144
|
-
$(".error-summary a").click(function(e) {
|
145
|
-
e.preventDefault();
|
146
|
-
var href = $(this).attr("href");
|
147
|
-
$(href).focus();
|
148
|
-
});
|
149
|
-
}
|
150
|
-
// Otherwise, set focus to the field with the error
|
151
|
-
else {
|
152
|
-
$(".error input:first").focus();
|
153
|
-
}
|
154
|
-
}
|
155
|
-
|
156
|
-
});
|
157
|
-
|
@@ -1,40 +0,0 @@
|
|
1
|
-
// Function.prototype.bind
|
2
|
-
//
|
3
|
-
// A polyfill for Function.prototype.bind. Which lets you bind a defined
|
4
|
-
// value to the `this` keyword in a function call.
|
5
|
-
//
|
6
|
-
// Bind is natively supported in:
|
7
|
-
// IE9+
|
8
|
-
// Chrome 7+
|
9
|
-
// Firefox 4+
|
10
|
-
// Safari 5.1.4+
|
11
|
-
// iOS 6+
|
12
|
-
// Android Browser 4+
|
13
|
-
// Chrome for Android 0.16+
|
14
|
-
//
|
15
|
-
// Originally from:
|
16
|
-
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
|
17
|
-
if (!Function.prototype.bind) {
|
18
|
-
Function.prototype.bind = function (oThis) {
|
19
|
-
if (typeof this !== "function") {
|
20
|
-
// closest thing possible to the ECMAScript 5
|
21
|
-
// internal IsCallable function
|
22
|
-
throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
|
23
|
-
}
|
24
|
-
|
25
|
-
var aArgs = Array.prototype.slice.call(arguments, 1),
|
26
|
-
fToBind = this,
|
27
|
-
fNOP = function () {},
|
28
|
-
fBound = function () {
|
29
|
-
return fToBind.apply(this instanceof fNOP && oThis
|
30
|
-
? this
|
31
|
-
: oThis,
|
32
|
-
aArgs.concat(Array.prototype.slice.call(arguments)));
|
33
|
-
};
|
34
|
-
|
35
|
-
fNOP.prototype = this.prototype;
|
36
|
-
fBound.prototype = new fNOP();
|
37
|
-
|
38
|
-
return fBound;
|
39
|
-
};
|
40
|
-
}
|
@@ -1,111 +0,0 @@
|
|
1
|
-
(function () {
|
2
|
-
"use strict";
|
3
|
-
var root = this,
|
4
|
-
$ = root.jQuery;
|
5
|
-
|
6
|
-
if (typeof GOVUK === 'undefined') { root.GOVUK = {}; }
|
7
|
-
|
8
|
-
var SelectionButtons = function (elmsOrSelector, opts) {
|
9
|
-
var $elms;
|
10
|
-
|
11
|
-
this.selectedClass = 'selected';
|
12
|
-
this.focusedClass = 'focused';
|
13
|
-
if (opts !== undefined) {
|
14
|
-
$.each(opts, function (optionName, optionObj) {
|
15
|
-
this[optionName] = optionObj;
|
16
|
-
}.bind(this));
|
17
|
-
}
|
18
|
-
if (typeof elmsOrSelector === 'string') {
|
19
|
-
$elms = $(elmsOrSelector);
|
20
|
-
this.selector = elmsOrSelector;
|
21
|
-
this.setInitialState($(this.selector));
|
22
|
-
} else {
|
23
|
-
this.$elms = elmsOrSelector;
|
24
|
-
this.setInitialState(this.$elms);
|
25
|
-
}
|
26
|
-
this.addEvents();
|
27
|
-
};
|
28
|
-
SelectionButtons.prototype.addEvents = function () {
|
29
|
-
if (typeof this.$elms !== 'undefined') {
|
30
|
-
this.addElementLevelEvents();
|
31
|
-
} else {
|
32
|
-
this.addDocumentLevelEvents();
|
33
|
-
}
|
34
|
-
};
|
35
|
-
SelectionButtons.prototype.setInitialState = function ($elms) {
|
36
|
-
$elms.each(function (idx, elm) {
|
37
|
-
var $elm = $(elm);
|
38
|
-
|
39
|
-
if ($elm.is(':checked')) {
|
40
|
-
this.markSelected($elm);
|
41
|
-
}
|
42
|
-
}.bind(this));
|
43
|
-
};
|
44
|
-
SelectionButtons.prototype.markFocused = function ($elm, state) {
|
45
|
-
if (state === 'focused') {
|
46
|
-
$elm.parent('label').addClass(this.focusedClass);
|
47
|
-
} else {
|
48
|
-
$elm.parent('label').removeClass(this.focusedClass);
|
49
|
-
}
|
50
|
-
};
|
51
|
-
SelectionButtons.prototype.markSelected = function ($elm) {
|
52
|
-
var radioName;
|
53
|
-
|
54
|
-
if ($elm.attr('type') === 'radio') {
|
55
|
-
radioName = $elm.attr('name');
|
56
|
-
$($elm[0].form).find('input[name="' + radioName + '"]')
|
57
|
-
.parent('label')
|
58
|
-
.removeClass(this.selectedClass);
|
59
|
-
$elm.parent('label').addClass(this.selectedClass);
|
60
|
-
} else { // checkbox
|
61
|
-
if ($elm.is(':checked')) {
|
62
|
-
$elm.parent('label').addClass(this.selectedClass);
|
63
|
-
} else {
|
64
|
-
$elm.parent('label').removeClass(this.selectedClass);
|
65
|
-
}
|
66
|
-
}
|
67
|
-
};
|
68
|
-
SelectionButtons.prototype.addElementLevelEvents = function () {
|
69
|
-
this.clickHandler = this.getClickHandler();
|
70
|
-
this.focusHandler = this.getFocusHandler({ 'level' : 'element' });
|
71
|
-
|
72
|
-
this.$elms
|
73
|
-
.on('click', this.clickHandler)
|
74
|
-
.on('focus blur', this.focusHandler);
|
75
|
-
};
|
76
|
-
SelectionButtons.prototype.addDocumentLevelEvents = function () {
|
77
|
-
this.clickHandler = this.getClickHandler();
|
78
|
-
this.focusHandler = this.getFocusHandler({ 'level' : 'document' });
|
79
|
-
|
80
|
-
$(document)
|
81
|
-
.on('click', this.selector, this.clickHandler)
|
82
|
-
.on('focus blur', this.selector, this.focusHandler);
|
83
|
-
};
|
84
|
-
SelectionButtons.prototype.getClickHandler = function () {
|
85
|
-
return function (e) {
|
86
|
-
this.markSelected($(e.target));
|
87
|
-
}.bind(this);
|
88
|
-
};
|
89
|
-
SelectionButtons.prototype.getFocusHandler = function (opts) {
|
90
|
-
var focusEvent = (opts.level === 'document') ? 'focusin' : 'focus';
|
91
|
-
|
92
|
-
return function (e) {
|
93
|
-
var state = (e.type === focusEvent) ? 'focused' : 'blurred';
|
94
|
-
|
95
|
-
this.markFocused($(e.target), state);
|
96
|
-
}.bind(this);
|
97
|
-
};
|
98
|
-
SelectionButtons.prototype.destroy = function () {
|
99
|
-
if (typeof this.selector !== 'undefined') {
|
100
|
-
$(document)
|
101
|
-
.off('click', this.selector, this.clickHandler)
|
102
|
-
.off('focus blur', this.selector, this.focusHandler);
|
103
|
-
} else {
|
104
|
-
this.$elms
|
105
|
-
.off('click', this.clickHandler)
|
106
|
-
.off('focus blur', this.focusHandler);
|
107
|
-
}
|
108
|
-
};
|
109
|
-
|
110
|
-
root.GOVUK.SelectionButtons = SelectionButtons;
|
111
|
-
}).call(this);
|
@@ -1,386 +0,0 @@
|
|
1
|
-
@import "main";
|
2
|
-
|
3
|
-
// ==========================================================================
|
4
|
-
// GOV.UK template styles
|
5
|
-
// ==========================================================================
|
6
|
-
// Override here until updated in the GOV.UK template
|
7
|
-
|
8
|
-
#global-header-bar {
|
9
|
-
@extend %site-width-container;
|
10
|
-
}
|
11
|
-
#global-header-bar .inner-block {
|
12
|
-
padding: 0;
|
13
|
-
}
|
14
|
-
|
15
|
-
|
16
|
-
// ==========================================================================
|
17
|
-
// Service Design Manual styles
|
18
|
-
// ==========================================================================
|
19
|
-
|
20
|
-
@import "service-design-manual/helpers/page-header";
|
21
|
-
@import "service-design-manual/helpers/breadcrumbs";
|
22
|
-
|
23
|
-
// Remove margins set by Service Design Manual header
|
24
|
-
#global-breadcrumb,
|
25
|
-
.page-header {
|
26
|
-
margin-left: 0;
|
27
|
-
margin-right: 0;
|
28
|
-
}
|
29
|
-
|
30
|
-
// ==========================================================================
|
31
|
-
// Elements page styles
|
32
|
-
// ==========================================================================
|
33
|
-
|
34
|
-
// These are example styles, used only for the Elements index page
|
35
|
-
|
36
|
-
// Headings
|
37
|
-
// Used with heading-large = 36px
|
38
|
-
.heading-with-border {
|
39
|
-
border-top: 1px solid $border-colour;
|
40
|
-
padding-top: em(45, 36);
|
41
|
-
}
|
42
|
-
|
43
|
-
// Use for paragraphs before lists
|
44
|
-
.lead-in {
|
45
|
-
margin-bottom: 0;
|
46
|
-
}
|
47
|
-
|
48
|
-
// Lists
|
49
|
-
.list-bullet {
|
50
|
-
margin-bottom: ($gutter*1.5);
|
51
|
-
}
|
52
|
-
|
53
|
-
|
54
|
-
// Example boxes
|
55
|
-
// ==========================================================================
|
56
|
-
|
57
|
-
.example {
|
58
|
-
@extend %contain-floats;
|
59
|
-
position: relative;
|
60
|
-
overflow: hidden;
|
61
|
-
border: 1px solid $grey-2;
|
62
|
-
margin-top: $gutter-half;
|
63
|
-
margin-bottom: $gutter*1.5;
|
64
|
-
|
65
|
-
padding-top: $gutter;
|
66
|
-
padding-right: $gutter-half;
|
67
|
-
padding-bottom: $gutter-half;
|
68
|
-
padding-left: $gutter-half;
|
69
|
-
|
70
|
-
@include media(tablet) {
|
71
|
-
padding-top: $gutter*1.5;
|
72
|
-
padding-right: $gutter;
|
73
|
-
padding-bottom: $gutter;
|
74
|
-
padding-left: $gutter;
|
75
|
-
}
|
76
|
-
|
77
|
-
&:before {
|
78
|
-
content: "EXAMPLE";
|
79
|
-
|
80
|
-
position: absolute;
|
81
|
-
top: 0;
|
82
|
-
left: 0;
|
83
|
-
|
84
|
-
padding: em(4) em(15) em(4) em(15);
|
85
|
-
|
86
|
-
@include core-14;
|
87
|
-
background: $grey-2;
|
88
|
-
color: white;
|
89
|
-
}
|
90
|
-
|
91
|
-
// Blue text for heading sizes
|
92
|
-
.highlight {
|
93
|
-
font-style: normal;
|
94
|
-
color: $hm-government;
|
95
|
-
}
|
96
|
-
|
97
|
-
// Fix grid layout within example boxes for IE7 and below
|
98
|
-
// where box-sizing isn't supported: http://caniuse.com/#search=box-sizing
|
99
|
-
@mixin example-box-column($width) {
|
100
|
-
width: (($site-width - $gutter) * $width) - $gutter;
|
101
|
-
}
|
102
|
-
|
103
|
-
@include ie-lte(7){
|
104
|
-
|
105
|
-
// Set example box width to 900px (removing left and right padding)
|
106
|
-
$example-box-width: $site-width - ($gutter * 2);
|
107
|
-
width: $example-box-width;
|
108
|
-
|
109
|
-
// Recalculate grid column widths
|
110
|
-
.column-quarter {
|
111
|
-
@include example-box-column( 1/4 );
|
112
|
-
}
|
113
|
-
.column-half {
|
114
|
-
@include example-box-column( 1/2 );
|
115
|
-
}
|
116
|
-
.column-third {
|
117
|
-
@include example-box-column( 1/3 );
|
118
|
-
}
|
119
|
-
.column-two-thirds {
|
120
|
-
@include example-box-column( 2/3 );
|
121
|
-
}
|
122
|
-
|
123
|
-
// Scale images to fit grid columns
|
124
|
-
img {
|
125
|
-
width: 100%;
|
126
|
-
}
|
127
|
-
}
|
128
|
-
|
129
|
-
}
|
130
|
-
|
131
|
-
|
132
|
-
// 1. Layout
|
133
|
-
// ==========================================================================
|
134
|
-
|
135
|
-
.example-grid p {
|
136
|
-
width: 100%;
|
137
|
-
background: file-url("examples/grid.png") 0 0 repeat;
|
138
|
-
margin-bottom: 0;
|
139
|
-
height: 30px;
|
140
|
-
@include media(tablet) {
|
141
|
-
height: 60px;
|
142
|
-
}
|
143
|
-
overflow: hidden;
|
144
|
-
text-indent: -999em;
|
145
|
-
}
|
146
|
-
|
147
|
-
|
148
|
-
// 2. Typography
|
149
|
-
// ==========================================================================
|
150
|
-
|
151
|
-
|
152
|
-
// 3. Colour
|
153
|
-
// ==========================================================================
|
154
|
-
|
155
|
-
// Colour swatches
|
156
|
-
.swatch {
|
157
|
-
width: 60px;
|
158
|
-
height: 60px;
|
159
|
-
@include border-radius(100%);
|
160
|
-
@include media(mobile) {
|
161
|
-
clear: both;
|
162
|
-
float: left;
|
163
|
-
margin-right: $gutter-half;
|
164
|
-
margin-bottom: $gutter-half;
|
165
|
-
}
|
166
|
-
@include media(tablet) {
|
167
|
-
margin: 0 auto $gutter-half auto;
|
168
|
-
}
|
169
|
-
}
|
170
|
-
|
171
|
-
// Sass list for colour palette
|
172
|
-
$palette: (
|
173
|
-
("purple", $purple),
|
174
|
-
("mauve", $mauve),
|
175
|
-
("fuschia", $fuschia),
|
176
|
-
("pink", $pink),
|
177
|
-
("baby-pink", $baby-pink),
|
178
|
-
("red", $red),
|
179
|
-
("mellow-red", $mellow-red),
|
180
|
-
("orange", $orange),
|
181
|
-
("brown", $brown),
|
182
|
-
("yellow", $yellow),
|
183
|
-
("green", $green),
|
184
|
-
("grass-green", $grass-green),
|
185
|
-
("turquoise", $turquoise),
|
186
|
-
("light-blue", $light-blue)
|
187
|
-
);
|
188
|
-
|
189
|
-
@mixin color-swatches {
|
190
|
-
@each $color in $palette {
|
191
|
-
$color-name: nth($color, 1);
|
192
|
-
$color-var: nth($color, 2);
|
193
|
-
.swatch-#{$color-name} {
|
194
|
-
background-color: $color-var;
|
195
|
-
}
|
196
|
-
}
|
197
|
-
}
|
198
|
-
|
199
|
-
// Generate swatch classes for each colour in palette list
|
200
|
-
@include color-swatches;
|
201
|
-
|
202
|
-
.swatch-alpha {
|
203
|
-
background-color: $alpha-colour;
|
204
|
-
}
|
205
|
-
|
206
|
-
.swatch-beta {
|
207
|
-
background-color: $beta-colour;
|
208
|
-
}
|
209
|
-
|
210
|
-
.swatch-discovery {
|
211
|
-
background-color: $discovery-colour;
|
212
|
-
}
|
213
|
-
|
214
|
-
.swatch-live {
|
215
|
-
background-color: $live-colour;
|
216
|
-
}
|
217
|
-
|
218
|
-
.swatch-error {
|
219
|
-
background-color: $error-colour;
|
220
|
-
}
|
221
|
-
|
222
|
-
.swatch-focus {
|
223
|
-
background-color: $focus-colour;
|
224
|
-
}
|
225
|
-
|
226
|
-
.swatch-button-colour {
|
227
|
-
background-color: $button-colour;
|
228
|
-
}
|
229
|
-
|
230
|
-
.swatch-black {
|
231
|
-
background-color: $black;
|
232
|
-
}
|
233
|
-
|
234
|
-
.swatch-grey-1 {
|
235
|
-
background-color: $grey-1;
|
236
|
-
}
|
237
|
-
|
238
|
-
.swatch-grey-2 {
|
239
|
-
background-color: $grey-2;
|
240
|
-
}
|
241
|
-
|
242
|
-
.swatch-grey-3 {
|
243
|
-
background-color: $grey-3;
|
244
|
-
}
|
245
|
-
|
246
|
-
.swatch-grey-4 {
|
247
|
-
background-color: $grey-4;
|
248
|
-
}
|
249
|
-
|
250
|
-
.swatch-white {
|
251
|
-
background-color: $white;
|
252
|
-
border: 1px solid $grey-3;
|
253
|
-
}
|
254
|
-
|
255
|
-
.swatch-text-colour {
|
256
|
-
background-color: $text-colour;
|
257
|
-
}
|
258
|
-
|
259
|
-
.swatch-text-secondary {
|
260
|
-
background-color: $secondary-text-colour;
|
261
|
-
}
|
262
|
-
|
263
|
-
.swatch-page-colour {
|
264
|
-
background-color: $page-colour;
|
265
|
-
border: 1px solid $grey-3;
|
266
|
-
}
|
267
|
-
|
268
|
-
.swatch-button-colour {
|
269
|
-
background-color: $button-colour;
|
270
|
-
}
|
271
|
-
|
272
|
-
.swatch-link-colour {
|
273
|
-
background-color: $link-colour;
|
274
|
-
}
|
275
|
-
|
276
|
-
.swatch-link-colour-visited {
|
277
|
-
background-color: $link-visited-colour;
|
278
|
-
}
|
279
|
-
|
280
|
-
.swatch-link-colour-hover {
|
281
|
-
background-color: $link-hover-colour;
|
282
|
-
}
|
283
|
-
|
284
|
-
.swatch-border-colour {
|
285
|
-
background-color: $border-colour;
|
286
|
-
}
|
287
|
-
|
288
|
-
.swatch-panel-colour {
|
289
|
-
background-color: $panel-colour;
|
290
|
-
}
|
291
|
-
|
292
|
-
.swatch-highlight-colour {
|
293
|
-
background-color: $highlight-colour;
|
294
|
-
}
|
295
|
-
|
296
|
-
// Colour swatch layout
|
297
|
-
.swatch-wrapper {
|
298
|
-
@include media(tablet) {
|
299
|
-
float: left;
|
300
|
-
width: 20%;
|
301
|
-
text-align: center;
|
302
|
-
}
|
303
|
-
|
304
|
-
.heading-small {
|
305
|
-
margin-bottom: em(10);
|
306
|
-
}
|
307
|
-
|
308
|
-
ul {
|
309
|
-
padding-bottom: $gutter-half;
|
310
|
-
@include media(mobile) {
|
311
|
-
min-height: 50px;
|
312
|
-
padding-top: 10px;
|
313
|
-
}
|
314
|
-
}
|
315
|
-
li {
|
316
|
-
@include core-16;
|
317
|
-
}
|
318
|
-
b {
|
319
|
-
font-weight: bold;
|
320
|
-
text-transform: uppercase;
|
321
|
-
}
|
322
|
-
}
|
323
|
-
|
324
|
-
|
325
|
-
// 4. Images and icons
|
326
|
-
// ==========================================================================
|
327
|
-
|
328
|
-
.example-images img {
|
329
|
-
max-width: 100%;
|
330
|
-
vertical-align: top;
|
331
|
-
}
|
332
|
-
|
333
|
-
|
334
|
-
// 5. Data
|
335
|
-
// ==========================================================================
|
336
|
-
|
337
|
-
.data .bold-xlarge,
|
338
|
-
.data .bold-xxlarge {
|
339
|
-
line-height: 0.8;
|
340
|
-
}
|
341
|
-
|
342
|
-
.example .data p {
|
343
|
-
margin-bottom: 0;
|
344
|
-
}
|
345
|
-
|
346
|
-
|
347
|
-
// 6. Forms
|
348
|
-
// ==========================================================================
|
349
|
-
|
350
|
-
|
351
|
-
// 7. Buttons
|
352
|
-
// ==========================================================================
|
353
|
-
|
354
|
-
// Increase spacing under buttons in example boxes
|
355
|
-
.example-button .button {
|
356
|
-
margin-bottom: 15px;
|
357
|
-
}
|
358
|
-
|
359
|
-
// Remove top margin from "Creating buttons" example
|
360
|
-
.example-button .heading-small {
|
361
|
-
margin-top: 0;
|
362
|
-
}
|
363
|
-
|
364
|
-
// Make swatch wrapper full width for "Creating buttons" example
|
365
|
-
.example-button .swatch-wrapper {
|
366
|
-
width: 100%;
|
367
|
-
}
|
368
|
-
|
369
|
-
// Remove bottom padding to keep "Creating buttons" example
|
370
|
-
.example-button ul {
|
371
|
-
padding-bottom: 0;
|
372
|
-
}
|
373
|
-
|
374
|
-
|
375
|
-
// 9. Alpha beta banners
|
376
|
-
// ==========================================================================
|
377
|
-
|
378
|
-
// Alpha
|
379
|
-
.phase-banner-alpha {
|
380
|
-
@include phase-banner($state: alpha);
|
381
|
-
}
|
382
|
-
|
383
|
-
// Beta
|
384
|
-
.phase-banner-beta {
|
385
|
-
@include phase-banner($state: beta);
|
386
|
-
}
|