govuk_tech_docs 1.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (98) hide show
  1. checksums.yaml +7 -0
  2. data/.editorconfig +29 -0
  3. data/.gitignore +34 -0
  4. data/.rspec +2 -0
  5. data/.travis.yml +5 -0
  6. data/CHANGELOG.md +36 -0
  7. data/Gemfile +4 -0
  8. data/LICENSE +21 -0
  9. data/README.md +47 -0
  10. data/Rakefile +9 -0
  11. data/example/.ruby-version +1 -0
  12. data/example/Gemfile +3 -0
  13. data/example/config.rb +3 -0
  14. data/example/config/tech-docs.yml +23 -0
  15. data/example/source/index.html.md.erb +17 -0
  16. data/example/source/javascripts/application.js +1 -0
  17. data/example/source/stylesheets/print.css.scss +3 -0
  18. data/example/source/stylesheets/screen-old-ie.css.scss +4 -0
  19. data/example/source/stylesheets/screen.css.scss +1 -0
  20. data/govuk_tech_docs.gemspec +38 -0
  21. data/lib/assets/javascripts/_analytics.js +31 -0
  22. data/lib/assets/javascripts/_govuk/modules.js +57 -0
  23. data/lib/assets/javascripts/_modules/anchored-headings.js +18 -0
  24. data/lib/assets/javascripts/_modules/in-page-navigation.js +124 -0
  25. data/lib/assets/javascripts/_modules/navigation.js +34 -0
  26. data/lib/assets/javascripts/_modules/table-of-contents.js +103 -0
  27. data/lib/assets/javascripts/_start-modules.js +9 -0
  28. data/lib/assets/javascripts/_vendor/fixedsticky.js +194 -0
  29. data/lib/assets/javascripts/_vendor/jquery.js +5 -0
  30. data/lib/assets/javascripts/_vendor/lodash.js +613 -0
  31. data/lib/assets/javascripts/_vendor/modernizr.js +3 -0
  32. data/lib/assets/javascripts/govuk_tech_docs.js +10 -0
  33. data/lib/assets/stylesheets/_accessibility.scss +9 -0
  34. data/lib/assets/stylesheets/_core.scss +62 -0
  35. data/lib/assets/stylesheets/_fonts.scss +29 -0
  36. data/lib/assets/stylesheets/_govuk_tech_docs.scss +2 -0
  37. data/lib/assets/stylesheets/_syntax-highlighting.scss +196 -0
  38. data/lib/assets/stylesheets/govuk_frontend_toolkit/_colours.scss +2 -0
  39. data/lib/assets/stylesheets/govuk_frontend_toolkit/_conditionals.scss +81 -0
  40. data/lib/assets/stylesheets/govuk_frontend_toolkit/_css3.scss +90 -0
  41. data/lib/assets/stylesheets/govuk_frontend_toolkit/_device-pixels.scss +10 -0
  42. data/lib/assets/stylesheets/govuk_frontend_toolkit/_font_stack.scss +19 -0
  43. data/lib/assets/stylesheets/govuk_frontend_toolkit/_grid_layout.scss +136 -0
  44. data/lib/assets/stylesheets/govuk_frontend_toolkit/_helpers.scss +16 -0
  45. data/lib/assets/stylesheets/govuk_frontend_toolkit/_measurements.scss +14 -0
  46. data/lib/assets/stylesheets/govuk_frontend_toolkit/_shims.scss +55 -0
  47. data/lib/assets/stylesheets/govuk_frontend_toolkit/_typography.scss +249 -0
  48. data/lib/assets/stylesheets/govuk_frontend_toolkit/_url-helpers.scss +16 -0
  49. data/lib/assets/stylesheets/govuk_frontend_toolkit/colours/_organisation.scss +103 -0
  50. data/lib/assets/stylesheets/govuk_frontend_toolkit/colours/_palette.scss +77 -0
  51. data/lib/assets/stylesheets/govuk_frontend_toolkit/design-patterns/_alpha-beta.scss +66 -0
  52. data/lib/assets/stylesheets/govuk_frontend_toolkit/design-patterns/_breadcrumbs.scss +53 -0
  53. data/lib/assets/stylesheets/govuk_frontend_toolkit/design-patterns/_buttons.scss +141 -0
  54. data/lib/assets/stylesheets/govuk_frontend_toolkit/design-patterns/_media-player.scss +242 -0
  55. data/lib/assets/stylesheets/modules/_anchored-heading.scss +54 -0
  56. data/lib/assets/stylesheets/modules/_app-pane.scss +64 -0
  57. data/lib/assets/stylesheets/modules/_footer.scss +130 -0
  58. data/lib/assets/stylesheets/modules/_govuk-logo.scss +47 -0
  59. data/lib/assets/stylesheets/modules/_header.scss +289 -0
  60. data/lib/assets/stylesheets/modules/_phase-banner.scss +22 -0
  61. data/lib/assets/stylesheets/modules/_skip-link.scss +31 -0
  62. data/lib/assets/stylesheets/modules/_technical-documentation.scss +236 -0
  63. data/lib/assets/stylesheets/modules/_toc.scss +221 -0
  64. data/lib/assets/stylesheets/palette/_syntax-highlighting.scss +23 -0
  65. data/lib/assets/stylesheets/utilities/_fonts.scss +29 -0
  66. data/lib/assets/stylesheets/utilities/_printable.scss +13 -0
  67. data/lib/assets/stylesheets/vendor/_fixedsticky.scss +22 -0
  68. data/lib/govuk_tech_docs.rb +54 -0
  69. data/lib/govuk_tech_docs/table_of_contents/heading.rb +29 -0
  70. data/lib/govuk_tech_docs/table_of_contents/heading_tree.rb +27 -0
  71. data/lib/govuk_tech_docs/table_of_contents/heading_tree_builder.rb +41 -0
  72. data/lib/govuk_tech_docs/table_of_contents/heading_tree_renderer.rb +46 -0
  73. data/lib/govuk_tech_docs/table_of_contents/headings_builder.rb +37 -0
  74. data/lib/govuk_tech_docs/table_of_contents/helpers.rb +20 -0
  75. data/lib/govuk_tech_docs/tech_docs_html_renderer.rb +24 -0
  76. data/lib/govuk_tech_docs/unique_identifier_extension.rb +13 -0
  77. data/lib/govuk_tech_docs/unique_identifier_generator.rb +72 -0
  78. data/lib/govuk_tech_docs/version.rb +3 -0
  79. data/lib/source/favicon.ico +0 -0
  80. data/lib/source/images/anchored-heading-icon-2x.png +0 -0
  81. data/lib/source/images/anchored-heading-icon.png +0 -0
  82. data/lib/source/images/gov.uk_logotype_crown-2x.png +0 -0
  83. data/lib/source/images/gov.uk_logotype_crown.png +0 -0
  84. data/lib/source/images/gov.uk_logotype_crown_invert_trans.png +0 -0
  85. data/lib/source/images/govuk-crest-2x.png +0 -0
  86. data/lib/source/images/govuk-crest.png +0 -0
  87. data/lib/source/images/govuk-icn-close.png +0 -0
  88. data/lib/source/images/govuk-icn-close@2x.png +0 -0
  89. data/lib/source/images/govuk-icn-numbered-list.png +0 -0
  90. data/lib/source/images/govuk-icn-numbered-list@2x.png +0 -0
  91. data/lib/source/images/open-government-licence.png +0 -0
  92. data/lib/source/images/open-government-licence_2x.png +0 -0
  93. data/lib/source/layouts/_analytics.erb +14 -0
  94. data/lib/source/layouts/_footer.erb +10 -0
  95. data/lib/source/layouts/_header.erb +46 -0
  96. data/lib/source/layouts/core.erb +59 -0
  97. data/lib/source/layouts/layout.erb +16 -0
  98. metadata +323 -0
@@ -0,0 +1,10 @@
1
+ @mixin device-pixel-ratio($ratio: 2) {
2
+ @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
3
+ only screen and (min--moz-device-pixel-ratio: $ratio),
4
+ only screen and ( -o-min-device-pixel-ratio: #{($ratio*10)}/10),
5
+ only screen and ( min-device-pixel-ratio: $ratio),
6
+ only screen and ( min-resolution: #{($ratio*96)}dpi),
7
+ only screen and ( min-resolution: #{$ratio}dppx) {
8
+ @content;
9
+ }
10
+ }
@@ -0,0 +1,19 @@
1
+ // GOV.UK font stacks, referred to in typography.scss
2
+
3
+ // Allow uppercase letters in font stack variable names
4
+ // scss-lint:disable NameFormat
5
+
6
+ // New Transport Light
7
+ $NTA-Light: "nta", Arial, sans-serif;
8
+ $NTA-Light-Tabular: "ntatabularnumbers", $NTA-Light;
9
+
10
+ // Helvetica Regular
11
+ $Helvetica-Regular: "HelveticaNeue", "Helvetica Neue", "Arial", "Helvetica", sans-serif;
12
+
13
+ // Allow font stack to be overridden
14
+ // Not all apps using toolkit use New Transport
15
+ $toolkit-font-stack: $NTA-Light !default;
16
+ $toolkit-font-stack-tabular: $NTA-Light-Tabular !default;
17
+
18
+ // Font reset for print
19
+ $Print-reset: sans-serif;
@@ -0,0 +1,136 @@
1
+ @import 'conditionals';
2
+ @import 'css3';
3
+ @import 'measurements';
4
+ @import 'shims';
5
+
6
+ $site-width: 960px;
7
+
8
+ // An extendable selector to wrap your entire site content block
9
+ // It limits the sites width to be 960px wide and maintains consistent margins
10
+ // on the site of the page and shrinks the margins for mobile.
11
+ //
12
+ // Usage:
13
+ //
14
+ // #page-container {
15
+ // @extend %site-width-container;
16
+ // }
17
+
18
+ %site-width-container {
19
+ max-width: $site-width;
20
+
21
+ @include ie-lte(8) {
22
+ width: $site-width;
23
+ }
24
+
25
+ margin: 0 $gutter-half;
26
+
27
+ @include media(tablet) {
28
+ margin: 0 $gutter;
29
+ }
30
+
31
+ @include media($min-width: ($site-width + $gutter * 2)) {
32
+ margin: 0 auto;
33
+ }
34
+ }
35
+
36
+ // An extendable selector to outdent to the full page-width
37
+ // So that you can create elements that take up the gutters on the side of the
38
+ // page and butt up to the edge of the browser on smaller screens (rather than
39
+ // leaving a gutter at the edge of the page).
40
+ //
41
+ // Usage:
42
+ //
43
+ // .hero-image-container {
44
+ // @extend %outdent-to-full-width;
45
+ // }
46
+ %outdent-to-full-width {
47
+ margin-left: -$gutter-half;
48
+ margin-right: -$gutter-half;
49
+
50
+ @include media(tablet) {
51
+ margin-left: -$gutter;
52
+ margin-right: -$gutter;
53
+ }
54
+ }
55
+
56
+ // An extendable selector to define a row for grid columns to sit in
57
+ //
58
+ // Usage:
59
+ //
60
+ // .grid-row {
61
+ // @extend %grid-row;
62
+ // }
63
+
64
+ %grid-row {
65
+ @extend %contain-floats;
66
+ margin: 0 (-$gutter-half);
67
+ }
68
+
69
+ // A mixin for a grid column
70
+ // Creates a cross browser grid column with a standardised gutter between the
71
+ // columns. Widths should be defined as fractions of the full desktop width
72
+ // they want to fill. By default they break to become full width at tablet size
73
+ // but that can be configured to be desktop using the `$full-width` argument.
74
+ //
75
+ // Usage:
76
+ //
77
+ // .column-quarter {
78
+ // @include grid-column( 1/4 );
79
+ // }
80
+ // .column-half {
81
+ // @include grid-column( 1/2 );
82
+ // }
83
+ // .column-third {
84
+ // @include grid-column( 1/3 );
85
+ // }
86
+ // .column-two-thirds {
87
+ // @include grid-column( 2/3 );
88
+ // }
89
+ // .column-desktop-third {
90
+ // @include grid-column( 1/3, $full-width: desktop );
91
+ // }
92
+
93
+ @mixin grid-column($width, $full-width: tablet, $float: left) {
94
+
95
+ @include media($full-width) {
96
+ float: $float;
97
+ width: percentage($width);
98
+ }
99
+
100
+ @include ie-lte(7) {
101
+ width: (($site-width + $gutter) * $width) - $gutter;
102
+ }
103
+
104
+ padding: 0 $gutter-half;
105
+ @include box-sizing(border-box);
106
+ }
107
+
108
+
109
+ // OLD deprecated grid mixins
110
+ // You should migrate to the mixins above in the future
111
+
112
+ // Outer block sets a max width
113
+ @mixin outer-block {
114
+ @warn "The @mixin outer-block is deprecated and should be updated to use new grid helpers";
115
+ margin: 0 auto;
116
+ width: auto;
117
+ max-width: 960 + $gutter * 2;
118
+ @extend %contain-floats;
119
+
120
+ @include ie-lte(8) {
121
+ width: 1020px;
122
+ }
123
+ }
124
+
125
+ // Inner block sets either margin or padding
126
+ // to align content with header and footer
127
+ @mixin inner-block($margin-or-padding: padding) {
128
+ @warn "The @mixin inner-block is deprecated and should be updated to use new grid helpers";
129
+ #{$margin-or-padding}-left: $gutter-half;
130
+ #{$margin-or-padding}-right: $gutter-half;
131
+
132
+ @include media(tablet) {
133
+ #{$margin-or-padding}-left: $gutter;
134
+ #{$margin-or-padding}-right: $gutter;
135
+ }
136
+ }
@@ -0,0 +1,16 @@
1
+ // Base font size in pixels
2
+ $base-font-size: 16;
3
+
4
+ // Convert pixels to em
5
+ @function pem($px, $base: $base-font-size) {
6
+
7
+ @if (unitless($px)) {
8
+ $px: $px * 1px;
9
+ }
10
+
11
+ @if (unitless($base)) {
12
+ $base: $base * 1px;
13
+ }
14
+
15
+ @return $px / $base * 1em;
16
+ }
@@ -0,0 +1,14 @@
1
+ // Measurements used across GOV.UK
2
+
3
+ $full-width: 100%;
4
+ $one-quarter: $full-width / 4;
5
+ $one-third: $full-width / 3;
6
+ $half: $full-width / 2;
7
+ $two-thirds: ($full-width) - ($one-third);
8
+ $three-quarters: ($full-width) - ($one-quarter);
9
+
10
+ $gutter: 30px;
11
+ $gutter-one-quarter: $gutter / 4;
12
+ $gutter-one-third: $gutter / 3;
13
+ $gutter-half: $gutter / 2;
14
+ $gutter-two-thirds: $gutter - $gutter-one-third;
@@ -0,0 +1,55 @@
1
+ // Cross-browser shims
2
+ // Ways of normalising properties across browsers.
3
+
4
+ @import "conditionals";
5
+
6
+ // From: https://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/
7
+
8
+ // Usage:
9
+ //
10
+ // @include inline-block
11
+ // or
12
+ // @include inline-block("250px")
13
+ //
14
+ // which gives a min-height to the inline-block elements.
15
+
16
+
17
+ @mixin inline-block($min-height: "") {
18
+ display: -moz-inline-stack;
19
+ display: inline-block;
20
+
21
+ @if $min-height != "" {
22
+ min-height: $min-height;
23
+ }
24
+
25
+ @include ie-lte(7) {
26
+ zoom: 1;
27
+ display: inline;
28
+ }
29
+
30
+ @include ie(6) {
31
+ @if $min-height != "" {
32
+ height: $min-height;
33
+ }
34
+ }
35
+ }
36
+
37
+
38
+ // Contain floats usage:
39
+ //
40
+ // .this-has-floated-children {
41
+ // @extend %contain-floats;
42
+ // }
43
+
44
+
45
+ %contain-floats {
46
+ &:after {
47
+ content: "";
48
+ display: block;
49
+ clear: both;
50
+ }
51
+
52
+ @include ie-lte(7) {
53
+ zoom: 1;
54
+ }
55
+ }
@@ -0,0 +1,249 @@
1
+ @import 'font_stack';
2
+ @import 'conditionals';
3
+ @import 'device-pixels';
4
+ @import 'url-helpers';
5
+
6
+ // GOV.UK typography palettes
7
+
8
+ // ANATOMY OF A TYPE STYLE
9
+ // -----------------------
10
+ // These are a collection of graphic styles. They are deliberately
11
+ // abstracted from semantic HTML context to enable flexible re-use.
12
+ // Although there is a lot of duplication within this file, as long
13
+ // as you GZIP your CSS it shouldnt cause any bloat.
14
+
15
+
16
+ // CORE FONTS - NEW TRANSPORT
17
+
18
+ // Allow uppercase letters in font stack variable names
19
+ // scss-lint:disable NameFormat
20
+
21
+ $is-print: false !default;
22
+
23
+ @mixin _core-font-generator($font-size: 19px, $font-size-640: 16px, $font-size-print: 14pt, $line-height: (25 / 19), $line-height-640: (20 / 16), $tabular-numbers: false, $font-weight: 400) {
24
+ @if $tabular-numbers == true {
25
+ font-family: $toolkit-font-stack-tabular;
26
+ } @else if $is-print {
27
+ font-family: $Print-reset;
28
+ } @else {
29
+ font-family: $toolkit-font-stack;
30
+ @if $toolkit-font-stack == "$NTA-Light" {
31
+ @if $font-weight > 400 {
32
+ font-size-adjust: 0.525;
33
+ } @else {
34
+ font-size-adjust: 0.5;
35
+ }
36
+ }
37
+ }
38
+ font-weight: $font-weight;
39
+ text-transform: none;
40
+
41
+ @if $is-print {
42
+ font-size: $font-size-print;
43
+ line-height: $line-height;
44
+
45
+ } @else {
46
+ font-size: $font-size-640;
47
+ line-height: $line-height-640;
48
+
49
+ @include media(tablet) {
50
+ font-size: $font-size;
51
+ line-height: $line-height;
52
+ }
53
+ }
54
+ }
55
+ // scss-lint:enable NameFormat
56
+
57
+ @mixin core-80($line-height: (80 / 80), $line-height-640: (55 / 53), $tabular-numbers: false, $font-weight: 400) {
58
+ $font-size: 80px;
59
+ $font-size-640: 53px;
60
+ $font-size-print: 28pt;
61
+ @include _core-font-generator($font-size, $font-size-640, $font-size-print, $line-height, $line-height-640, $tabular-numbers, $font-weight);
62
+ }
63
+
64
+ @mixin core-48($line-height: (50 / 48), $line-height-640: (35 / 32), $tabular-numbers: false, $font-weight: 400) {
65
+ $font-size: 48px;
66
+ $font-size-640: 32px;
67
+ $font-size-print: 18pt;
68
+ @include _core-font-generator($font-size, $font-size-640, $font-size-print, $line-height, $line-height-640, $tabular-numbers, $font-weight);
69
+ }
70
+
71
+ @mixin core-36($line-height: (40 / 36), $line-height-640: (25 / 24), $tabular-numbers: false, $font-weight: 400) {
72
+ $font-size: 36px;
73
+ $font-size-640: 24px;
74
+ $font-size-print: 18pt;
75
+ @include _core-font-generator($font-size, $font-size-640, $font-size-print, $line-height, $line-height-640, $tabular-numbers, $font-weight);
76
+ }
77
+
78
+ @mixin core-27($line-height: (30 / 27), $line-height-640: (20 / 18), $tabular-numbers: false, $font-weight: 400) {
79
+ $font-size: 27px;
80
+ $font-size-640: 20px;
81
+ $font-size-print: 16pt;
82
+ @include _core-font-generator($font-size, $font-size-640, $font-size-print, $line-height, $line-height-640, $tabular-numbers, $font-weight);
83
+ }
84
+
85
+ @mixin core-24($line-height: (30 / 24), $line-height-640: (24 / 20), $tabular-numbers: false, $font-weight: 400) {
86
+ $font-size: 24px;
87
+ $font-size-640: 18px;
88
+ $font-size-print: 16pt;
89
+ @include _core-font-generator($font-size, $font-size-640, $font-size-print, $line-height, $line-height-640, $tabular-numbers, $font-weight);
90
+ }
91
+
92
+ @mixin core-19($line-height: (25 / 19), $line-height-640: (20 / 16), $tabular-numbers: false, $font-weight: 400) {
93
+ $font-size: 19px;
94
+ $font-size-640: 16px;
95
+ $font-size-print: 14pt;
96
+ @include _core-font-generator($font-size, $font-size-640, $font-size-print, $line-height, $line-height-640, $tabular-numbers, $font-weight);
97
+ }
98
+
99
+ @mixin core-16($line-height: (20 / 16), $line-height-640: (16 / 14), $tabular-numbers: false, $font-weight: 400) {
100
+ $font-size: 16px;
101
+ $font-size-640: 14px;
102
+ $font-size-print: 12pt;
103
+ @include _core-font-generator($font-size, $font-size-640, $font-size-print, $line-height, $line-height-640, $tabular-numbers, $font-weight);
104
+ }
105
+
106
+ @mixin core-14($line-height: (20 / 14), $line-height-640: (15 / 12), $tabular-numbers: false, $font-weight: 400) {
107
+ $font-size: 14px;
108
+ $font-size-640: 12px;
109
+ $font-size-print: 11pt;
110
+ @include _core-font-generator($font-size, $font-size-640, $font-size-print, $line-height, $line-height-640, $tabular-numbers, $font-weight);
111
+ }
112
+
113
+ @mixin bold-80($line-height: (80 / 80), $line-height-640: (55 / 53), $tabular-numbers: false) {
114
+ @include core-80($line-height, $line-height-640, $tabular-numbers: $tabular-numbers, $font-weight: 700);
115
+ }
116
+
117
+ @mixin bold-48($line-height: (50 / 48), $line-height-640: (35 / 32), $tabular-numbers: false) {
118
+ @include core-48($line-height, $line-height-640, $tabular-numbers: $tabular-numbers, $font-weight: 700);
119
+ }
120
+
121
+ @mixin bold-36($line-height: (40 / 36), $line-height-640: (25 / 24), $tabular-numbers: false) {
122
+ @include core-36($line-height, $line-height-640, $tabular-numbers: $tabular-numbers, $font-weight: 700);
123
+ }
124
+
125
+ @mixin bold-27($line-height: (30 / 27), $line-height-640: (20 / 18), $tabular-numbers: false) {
126
+ @include core-27($line-height, $line-height-640, $tabular-numbers: $tabular-numbers, $font-weight: 700);
127
+ }
128
+
129
+ @mixin bold-24($line-height: (30 / 24), $line-height-640: (24 / 20), $tabular-numbers: false) {
130
+ @include core-24($line-height, $line-height-640, $tabular-numbers: $tabular-numbers, $font-weight: 700);
131
+ }
132
+
133
+ @mixin bold-19($line-height: (25 / 19), $line-height-640: (20 / 16), $tabular-numbers: false) {
134
+ @include core-19($line-height, $line-height-640, $tabular-numbers: $tabular-numbers, $font-weight: 700);
135
+ }
136
+
137
+ @mixin bold-16($line-height: (20 / 16), $line-height-640: (16 / 14), $tabular-numbers: false) {
138
+ @include core-16($line-height, $line-height-640, $tabular-numbers: $tabular-numbers, $font-weight: 700);
139
+ }
140
+
141
+ @mixin bold-14($line-height: (20 / 14), $line-height-640: (15 / 12), $tabular-numbers: false) {
142
+ @include core-14($line-height, $line-height-640, $tabular-numbers: $tabular-numbers, $font-weight: 700);
143
+ }
144
+
145
+ @mixin heading-80($tabular-numbers: false) {
146
+ @include core-80($tabular-numbers: $tabular-numbers);
147
+
148
+ display: block;
149
+
150
+ padding-top: 8px;
151
+ padding-bottom: 7px;
152
+
153
+ @include media(tablet) {
154
+ padding-top: 6px;
155
+ padding-bottom: 14px;
156
+ }
157
+ }
158
+
159
+ @mixin heading-48($tabular-numbers: false) {
160
+ @include core-48($tabular-numbers: $tabular-numbers);
161
+
162
+ display: block;
163
+
164
+ padding-top: 10px;
165
+ padding-bottom: 10px;
166
+
167
+ @include media(tablet) {
168
+ padding-top: 7px;
169
+ padding-bottom: 13px;
170
+ }
171
+ }
172
+
173
+ @mixin heading-36($tabular-numbers: false) {
174
+ @include core-36($tabular-numbers: $tabular-numbers);
175
+
176
+ display: block;
177
+
178
+ padding-top: 8px;
179
+ padding-bottom: 7px;
180
+
181
+ @include media(tablet) {
182
+ padding-top: 6px;
183
+ padding-bottom: 9px;
184
+ }
185
+ }
186
+
187
+ @mixin heading-27($tabular-numbers: false) {
188
+ @include core-27($tabular-numbers: $tabular-numbers);
189
+
190
+ display: block;
191
+
192
+ padding-top: 8px;
193
+ padding-bottom: 7px;
194
+
195
+ @include media(tablet) {
196
+ padding-top: 4px;
197
+ padding-bottom: 6px;
198
+ }
199
+ }
200
+
201
+ @mixin heading-24($tabular-numbers: false) {
202
+ @include core-24($tabular-numbers: $tabular-numbers);
203
+
204
+ display: block;
205
+
206
+ padding-top: 9px;
207
+ padding-bottom: 6px;
208
+
209
+ @include media(tablet) {
210
+ padding-top: 6px;
211
+ padding-bottom: 4px;
212
+ }
213
+ }
214
+
215
+ @mixin copy-19($tabular-numbers: false) {
216
+ @include core-19($tabular-numbers: $tabular-numbers);
217
+
218
+ padding-top: 2px;
219
+ padding-bottom: 8px;
220
+
221
+ @include media(tablet) {
222
+ padding-top: 0;
223
+ padding-bottom: 5px;
224
+ }
225
+ }
226
+
227
+ @mixin copy-16($tabular-numbers: false) {
228
+ @include core-16($tabular-numbers: $tabular-numbers);
229
+
230
+ padding-top: 8px;
231
+ padding-bottom: 7px;
232
+
233
+ @include media(tablet) {
234
+ padding-top: 5px;
235
+ padding-bottom: 5px;
236
+ }
237
+ }
238
+
239
+ @mixin copy-14($tabular-numbers: false) {
240
+ @include core-14($tabular-numbers: $tabular-numbers);
241
+
242
+ padding-top: 8px;
243
+ padding-bottom: 7px;
244
+
245
+ @include media(tablet) {
246
+ padding-top: 5px;
247
+ padding-bottom: 5px;
248
+ }
249
+ }