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.
Files changed (68) hide show
  1. checksums.yaml +4 -4
  2. data/LICENSE +19 -0
  3. data/README.md +165 -46
  4. data/lib/govuk_elements_rails.rb +0 -1
  5. data/lib/govuk_elements_rails/engine.rb +0 -10
  6. data/vendor/assets/javascripts/details.polyfill.js +29 -43
  7. data/vendor/assets/stylesheets/_govuk-elements.scss +54 -0
  8. data/vendor/assets/stylesheets/elements/_base.scss +126 -0
  9. data/vendor/assets/stylesheets/elements/_breadcrumbs.scss +6 -0
  10. data/vendor/assets/stylesheets/elements/_buttons.scss +5 -5
  11. data/vendor/assets/stylesheets/elements/_components.scss +9 -0
  12. data/vendor/assets/stylesheets/elements/_details.scss +3 -9
  13. data/vendor/assets/stylesheets/elements/_elements-typography.scss +102 -9
  14. data/vendor/assets/stylesheets/elements/_forms.scss +84 -61
  15. data/vendor/assets/stylesheets/elements/_helpers.scss +6 -12
  16. data/vendor/assets/stylesheets/elements/_icons.scss +63 -207
  17. data/vendor/assets/stylesheets/elements/_layout.scss +9 -22
  18. data/vendor/assets/stylesheets/elements/_lists.scss +10 -13
  19. data/vendor/assets/stylesheets/elements/_panels.scss +24 -17
  20. data/vendor/assets/stylesheets/elements/_phase-banner.scss +10 -0
  21. data/vendor/assets/stylesheets/elements/_tables.scss +1 -5
  22. data/vendor/assets/stylesheets/elements/forms/_form-block-labels.scss +8 -7
  23. data/vendor/assets/stylesheets/elements/forms/_form-validation.scss +0 -3
  24. metadata +33 -49
  25. data/LICENCE +0 -20
  26. data/app/builders/govuk_elements_form_builder.rb +0 -77
  27. data/app/builders/labelling_form_builder.rb +0 -316
  28. data/lib/govuk_elements_rails/version.rb +0 -5
  29. data/vendor/assets/images/icons/accordian-arrow-2x.png +0 -0
  30. data/vendor/assets/images/icons/accordian-arrow.png +0 -0
  31. data/vendor/assets/images/icons/arrow-sprite.png +0 -0
  32. data/vendor/assets/images/icons/icon-calendar-2x.png +0 -0
  33. data/vendor/assets/images/icons/icon-calendar.png +0 -0
  34. data/vendor/assets/images/icons/icon-file-download-2x.png +0 -0
  35. data/vendor/assets/images/icons/icon-file-download.png +0 -0
  36. data/vendor/assets/images/icons/icon-important-2x.png +0 -0
  37. data/vendor/assets/images/icons/icon-important.png +0 -0
  38. data/vendor/assets/images/icons/icon-information-2x.png +0 -0
  39. data/vendor/assets/images/icons/icon-information.png +0 -0
  40. data/vendor/assets/images/icons/icon-locator-2x.png +0 -0
  41. data/vendor/assets/images/icons/icon-locator.png +0 -0
  42. data/vendor/assets/images/icons/icon-pointer-2x.png +0 -0
  43. data/vendor/assets/images/icons/icon-pointer-black-2x.png +0 -0
  44. data/vendor/assets/images/icons/icon-pointer-black.png +0 -0
  45. data/vendor/assets/images/icons/icon-pointer-indexed.png +0 -0
  46. data/vendor/assets/images/icons/icon-pointer.png +0 -0
  47. data/vendor/assets/images/icons/icon-search-2x.png +0 -0
  48. data/vendor/assets/images/icons/icon-search.png +0 -0
  49. data/vendor/assets/images/icons/player-icon-forward.png +0 -0
  50. data/vendor/assets/images/icons/player-icon-pause.png +0 -0
  51. data/vendor/assets/images/icons/player-icon-play.png +0 -0
  52. data/vendor/assets/images/icons/player-icon-rewind.png +0 -0
  53. data/vendor/assets/images/icons/player-icon-volume.png +0 -0
  54. data/vendor/assets/javascripts/application.js +0 -157
  55. data/vendor/assets/javascripts/bind.js +0 -40
  56. data/vendor/assets/javascripts/selection-buttons.js +0 -111
  57. data/vendor/assets/stylesheets/elements-page-ie6.scss +0 -5
  58. data/vendor/assets/stylesheets/elements-page-ie7.scss +0 -4
  59. data/vendor/assets/stylesheets/elements-page-ie8.scss +0 -4
  60. data/vendor/assets/stylesheets/elements-page.scss +0 -386
  61. data/vendor/assets/stylesheets/main-ie6.scss +0 -5
  62. data/vendor/assets/stylesheets/main-ie7.scss +0 -4
  63. data/vendor/assets/stylesheets/main-ie8.scss +0 -4
  64. data/vendor/assets/stylesheets/main.scss +0 -36
  65. data/vendor/assets/stylesheets/prism.scss +0 -144
  66. data/vendor/assets/stylesheets/service-design-manual/helpers/_breadcrumbs.scss +0 -81
  67. data/vendor/assets/stylesheets/service-design-manual/helpers/_page-header.scss +0 -28
  68. data/vendor/assets/stylesheets/service-design-manual/styleguide/_colours.scss +0 -3
@@ -1,5 +0,0 @@
1
- module GovUKElementsRails
2
- def self.elements_version
3
- '0.3.0'
4
- end
5
- end
@@ -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,5 +0,0 @@
1
- $is-ie: true;
2
- $ie-version: 6;
3
- $mobile-ie6: false;
4
-
5
- @import "elements-page";
@@ -1,4 +0,0 @@
1
- $is-ie: true;
2
- $ie-version: 7;
3
-
4
- @import "elements-page";
@@ -1,4 +0,0 @@
1
- $is-ie: true;
2
- $ie-version: 8;
3
-
4
- @import "elements-page";
@@ -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
- }