jekyll-rtd-theme 1.1.7 → 2.0.0.pre.beta

Sign up to get free protection for your applications and to get access to all the features.
Files changed (143) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +9 -9
  3. data/_includes/addons/analytics.liquid +5 -12
  4. data/_includes/addons/github.liquid +16 -18
  5. data/_includes/assets/sw.caches.js +38 -28
  6. data/_includes/breadcrumbs.liquid +20 -36
  7. data/_includes/extend/toctree.liquid +6 -15
  8. data/_includes/footer.liquid +29 -32
  9. data/_includes/reset/defaults.liquid +3 -37
  10. data/_includes/reset/workdir.liquid +1 -14
  11. data/_includes/safe/shortcodes.liquid +9 -0
  12. data/_includes/shortcodes/danger.liquid +7 -0
  13. data/_includes/shortcodes/mermaid.liquid +1 -0
  14. data/_includes/shortcodes/note.liquid +7 -0
  15. data/_includes/shortcodes/tip.liquid +7 -0
  16. data/_includes/shortcodes/warning.liquid +7 -0
  17. data/_includes/toctree.liquid +2 -5
  18. data/_layouts/default.liquid +90 -147
  19. data/_layouts/plugins/compress.liquid +13 -10
  20. data/_layouts/plugins/extension.liquid +30 -22
  21. data/_sass/@primer/base/base.scss +90 -0
  22. data/_sass/@primer/base/index.scss +6 -0
  23. data/_sass/@primer/base/kbd.scss +21 -0
  24. data/_sass/@primer/base/normalize.scss +423 -0
  25. data/_sass/@primer/base/typography-base.scss +100 -0
  26. data/_sass/@primer/breadcrumb/breadcrumb.scss +28 -0
  27. data/_sass/@primer/breadcrumb/index.scss +3 -0
  28. data/_sass/@primer/buttons/button-group.scss +91 -0
  29. data/_sass/@primer/buttons/button.scss +296 -0
  30. data/_sass/@primer/buttons/index.scss +4 -0
  31. data/_sass/@primer/buttons/misc.scss +205 -0
  32. data/_sass/@primer/forms/form-control.scss +278 -0
  33. data/_sass/@primer/forms/form-group.scss +279 -0
  34. data/_sass/@primer/forms/form-select.scss +38 -0
  35. data/_sass/@primer/forms/form-validation.scss +369 -0
  36. data/_sass/@primer/forms/index.scss +7 -0
  37. data/_sass/@primer/forms/input-group.scss +53 -0
  38. data/_sass/@primer/forms/radio-group.scss +43 -0
  39. data/_sass/@primer/markdown/blob-csv.scss +31 -0
  40. data/_sass/@primer/markdown/code.scss +73 -0
  41. data/_sass/@primer/markdown/headings.scss +72 -0
  42. data/_sass/@primer/markdown/images.scss +131 -0
  43. data/_sass/@primer/markdown/index.scss +8 -0
  44. data/_sass/@primer/markdown/lists.scss +76 -0
  45. data/_sass/@primer/markdown/markdown-body.scss +99 -0
  46. data/_sass/@primer/markdown/tables.scss +38 -0
  47. data/_sass/@primer/support/index.scss +11 -0
  48. data/_sass/@primer/support/mixins/buttons.scss +184 -0
  49. data/_sass/@primer/support/mixins/layout.scss +55 -0
  50. data/_sass/@primer/support/mixins/misc.scss +32 -0
  51. data/_sass/@primer/support/mixins/typography.scss +88 -0
  52. data/_sass/@primer/support/variables/color-system.scss +243 -0
  53. data/_sass/@primer/support/variables/colors.scss +55 -0
  54. data/_sass/@primer/support/variables/layout.scss +149 -0
  55. data/_sass/@primer/support/variables/misc.scss +42 -0
  56. data/_sass/@primer/support/variables/typography.scss +43 -0
  57. data/_sass/@primer/utilities/animations.scss +187 -0
  58. data/_sass/@primer/utilities/borders.scss +184 -0
  59. data/_sass/@primer/utilities/box-shadow.scss +25 -0
  60. data/_sass/@primer/utilities/colors.scss +185 -0
  61. data/_sass/@primer/utilities/details.scss +34 -0
  62. data/_sass/@primer/utilities/flexbox.scss +121 -0
  63. data/_sass/@primer/utilities/index.scss +14 -0
  64. data/_sass/@primer/utilities/layout.scss +134 -0
  65. data/_sass/@primer/utilities/margin.scss +68 -0
  66. data/_sass/@primer/utilities/padding.scss +59 -0
  67. data/_sass/@primer/utilities/typography.scss +325 -0
  68. data/_sass/@primer/utilities/visibility-display.scss +82 -0
  69. data/_sass/_font-face.scss +65 -0
  70. data/_sass/_icons.scss +53 -0
  71. data/_sass/_layout.scss +76 -0
  72. data/_sass/_reset.scss +21 -0
  73. data/_sass/_root.scss +9 -0
  74. data/_sass/_variables.scss +29 -0
  75. data/_sass/class/addons-wrap.scss +39 -0
  76. data/_sass/class/container.scss +11 -0
  77. data/_sass/class/content-wrap.scss +4 -0
  78. data/_sass/class/header.scss +10 -0
  79. data/_sass/class/highlight.scss +214 -0
  80. data/_sass/class/markdown-body.scss +49 -0
  81. data/_sass/class/sidebar-wrap.scss +72 -0
  82. data/_sass/class/title.scss +13 -0
  83. data/_sass/theme.scss +29 -0
  84. data/assets/404.liquid +2 -4
  85. data/assets/css/theme.min.css +1 -0
  86. data/assets/css/theme.scss +4 -0
  87. data/assets/js/mermaid.min.js +6 -5
  88. data/assets/js/search.js +90 -0
  89. data/assets/js/theme.js +228 -0
  90. data/assets/js/theme.min.js +1 -0
  91. data/assets/search.liquid +5 -12
  92. metadata +79 -56
  93. data/_includes/addons.liquid +0 -28
  94. data/_includes/addons/i18n.liquid +0 -13
  95. data/_includes/addons/plugins.liquid +0 -6
  96. data/_includes/album.liquid +0 -7
  97. data/_includes/assets/common.js +0 -167
  98. data/_includes/assets/custom.js +0 -0
  99. data/_includes/assets/custom.scss +0 -0
  100. data/_includes/assets/search.js +0 -76
  101. data/_includes/extra/footer.html +0 -0
  102. data/_includes/extra/head.html +0 -0
  103. data/_includes/i18n/en.liquid +0 -29
  104. data/_includes/i18n/es.liquid +0 -29
  105. data/_includes/i18n/fr.liquid +0 -29
  106. data/_includes/i18n/it.liquid +0 -29
  107. data/_includes/i18n/ja.liquid +0 -29
  108. data/_includes/i18n/ko.liquid +0 -29
  109. data/_includes/i18n/ru.liquid +0 -29
  110. data/_includes/i18n/sv.liquid +0 -29
  111. data/_includes/i18n/zh-cn.liquid +0 -29
  112. data/_includes/reset/i18n.liquid +0 -31
  113. data/_includes/reset/languages.liquid +0 -110
  114. data/_sass/_album.scss +0 -19
  115. data/_sass/_embed.scss +0 -23
  116. data/_sass/fluid.scss +0 -7
  117. data/_sass/jekyll-rtd-theme.scss +0 -162
  118. data/assets/css/rougify/base16.css +0 -1
  119. data/assets/css/rougify/base16.dark.css +0 -1
  120. data/assets/css/rougify/base16.light.css +0 -1
  121. data/assets/css/rougify/base16.monokai.css +0 -1
  122. data/assets/css/rougify/base16.monokai.dark.css +0 -1
  123. data/assets/css/rougify/base16.monokai.light.css +0 -1
  124. data/assets/css/rougify/base16.solarized.css +0 -1
  125. data/assets/css/rougify/base16.solarized.dark.css +0 -1
  126. data/assets/css/rougify/base16.solarized.light.css +0 -1
  127. data/assets/css/rougify/bw.css +0 -1
  128. data/assets/css/rougify/colorful.css +0 -1
  129. data/assets/css/rougify/github.css +0 -1
  130. data/assets/css/rougify/gruvbox.css +0 -1
  131. data/assets/css/rougify/gruvbox.dark.css +0 -1
  132. data/assets/css/rougify/gruvbox.light.css +0 -1
  133. data/assets/css/rougify/igorpro.css +0 -1
  134. data/assets/css/rougify/magritte.css +0 -1
  135. data/assets/css/rougify/molokai.css +0 -1
  136. data/assets/css/rougify/monokai.css +0 -1
  137. data/assets/css/rougify/monokai.sublime.css +0 -1
  138. data/assets/css/rougify/pastie.css +0 -1
  139. data/assets/css/rougify/thankful_eyes.css +0 -1
  140. data/assets/css/rougify/tulip.css +0 -1
  141. data/assets/css/theme.css +0 -4
  142. data/assets/js/anchor.min.js +0 -9
  143. data/assets/js/html5shiv.min.js +0 -4
@@ -0,0 +1,34 @@
1
+ // stylelint-disable selector-max-type
2
+
3
+ .details-overlay[open] > summary::before {
4
+ position: fixed;
5
+ top: 0;
6
+ right: 0;
7
+ bottom: 0;
8
+ left: 0;
9
+ z-index: 80;
10
+ display: block;
11
+ cursor: default;
12
+ content: " ";
13
+ background: transparent;
14
+ }
15
+
16
+ .details-overlay-dark[open] > summary::before {
17
+ z-index: 99;
18
+ background: $bg-black-fade;
19
+ }
20
+
21
+ .details-reset {
22
+ // Remove marker added by the display: list-item browser default
23
+ > summary {
24
+ list-style: none;
25
+ }
26
+ // Remove marker added by details polyfill
27
+ > summary::before {
28
+ display: none;
29
+ }
30
+ // Remove marker added by Chrome
31
+ > summary::-webkit-details-marker {
32
+ display: none;
33
+ }
34
+ }
@@ -0,0 +1,121 @@
1
+ // Flex utility classes
2
+ // stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before
3
+ @each $breakpoint, $variant in $responsive-variants {
4
+ @include breakpoint($breakpoint) {
5
+ // Flexbox classes
6
+ // Container
7
+ .flex#{$variant}-row {
8
+ flex-direction: row !important;
9
+ }
10
+ .flex#{$variant}-row-reverse {
11
+ flex-direction: row-reverse !important;
12
+ }
13
+ .flex#{$variant}-column {
14
+ flex-direction: column !important;
15
+ }
16
+ .flex#{$variant}-column-reverse {
17
+ flex-direction: column-reverse !important;
18
+ }
19
+
20
+ .flex#{$variant}-wrap {
21
+ flex-wrap: wrap !important;
22
+ }
23
+ .flex#{$variant}-nowrap {
24
+ flex-wrap: nowrap !important;
25
+ }
26
+
27
+ .flex#{$variant}-justify-start {
28
+ justify-content: flex-start !important;
29
+ }
30
+ .flex#{$variant}-justify-end {
31
+ justify-content: flex-end !important;
32
+ }
33
+ .flex#{$variant}-justify-center {
34
+ justify-content: center !important;
35
+ }
36
+ .flex#{$variant}-justify-between {
37
+ justify-content: space-between !important;
38
+ }
39
+ .flex#{$variant}-justify-around {
40
+ justify-content: space-around !important;
41
+ }
42
+
43
+ .flex#{$variant}-items-start {
44
+ align-items: flex-start !important;
45
+ }
46
+ .flex#{$variant}-items-end {
47
+ align-items: flex-end !important;
48
+ }
49
+ .flex#{$variant}-items-center {
50
+ align-items: center !important;
51
+ }
52
+ .flex#{$variant}-items-baseline {
53
+ align-items: baseline !important;
54
+ }
55
+ .flex#{$variant}-items-stretch {
56
+ align-items: stretch !important;
57
+ }
58
+
59
+ .flex#{$variant}-content-start {
60
+ align-content: flex-start !important;
61
+ }
62
+ .flex#{$variant}-content-end {
63
+ align-content: flex-end !important;
64
+ }
65
+ .flex#{$variant}-content-center {
66
+ align-content: center !important;
67
+ }
68
+ .flex#{$variant}-content-between {
69
+ align-content: space-between !important;
70
+ }
71
+ .flex#{$variant}-content-around {
72
+ align-content: space-around !important;
73
+ }
74
+ .flex#{$variant}-content-stretch {
75
+ align-content: stretch !important;
76
+ }
77
+
78
+ // Item
79
+ .flex#{$variant}-1 {
80
+ flex: 1 !important;
81
+ }
82
+ .flex#{$variant}-auto {
83
+ flex: auto !important;
84
+ }
85
+ .flex#{$variant}-grow-0 {
86
+ flex-grow: 0 !important;
87
+ }
88
+ .flex#{$variant}-shrink-0 {
89
+ flex-shrink: 0 !important;
90
+ }
91
+
92
+ .flex#{$variant}-self-auto {
93
+ align-self: auto !important;
94
+ }
95
+ .flex#{$variant}-self-start {
96
+ align-self: flex-start !important;
97
+ }
98
+ .flex#{$variant}-self-end {
99
+ align-self: flex-end !important;
100
+ }
101
+ .flex#{$variant}-self-center {
102
+ align-self: center !important;
103
+ }
104
+ .flex#{$variant}-self-baseline {
105
+ align-self: baseline !important;
106
+ }
107
+ .flex#{$variant}-self-stretch {
108
+ align-self: stretch !important;
109
+ }
110
+
111
+ .flex#{$variant}-order-1 {
112
+ order: 1 !important;
113
+ }
114
+ .flex#{$variant}-order-2 {
115
+ order: 2 !important;
116
+ }
117
+ .flex#{$variant}-order-none {
118
+ order: inherit !important;
119
+ }
120
+ }
121
+ }
@@ -0,0 +1,14 @@
1
+ @import "../support/index.scss";
2
+ // utilities
3
+ @import "./animations.scss";
4
+ @import "./borders.scss";
5
+ @import "./box-shadow.scss";
6
+ @import "./colors.scss";
7
+ @import "./details.scss";
8
+ @import "./flexbox.scss";
9
+ @import "./layout.scss";
10
+ @import "./margin.scss";
11
+ @import "./padding.scss";
12
+ @import "./typography.scss";
13
+ // Visibility and display should always come last in the imports so that they override other utilities with !important
14
+ @import "./visibility-display.scss";
@@ -0,0 +1,134 @@
1
+ // Layout
2
+ // stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, comment-empty-line-before
3
+
4
+ // Loop through the breakpoint values
5
+ @each $breakpoint, $variant in $responsive-variants {
6
+ @include breakpoint($breakpoint) {
7
+ @each $position in $responsive-positions {
8
+ .position#{$variant}-#{$position} {
9
+ position: $position !important;
10
+ }
11
+ }
12
+ }
13
+ }
14
+
15
+ /* Set top 0 */
16
+ .top-0 {
17
+ top: 0 !important;
18
+ }
19
+ /* Set right 0 */
20
+ .right-0 {
21
+ right: 0 !important;
22
+ }
23
+ /* Set bottom 0 */
24
+ .bottom-0 {
25
+ bottom: 0 !important;
26
+ }
27
+ /* Set left 0 */
28
+ .left-0 {
29
+ left: 0 !important;
30
+ }
31
+
32
+ /* Vertical align middle */
33
+ .v-align-middle {
34
+ vertical-align: middle !important;
35
+ }
36
+ /* Vertical align top */
37
+ .v-align-top {
38
+ vertical-align: top !important;
39
+ }
40
+ /* Vertical align bottom */
41
+ .v-align-bottom {
42
+ vertical-align: bottom !important;
43
+ }
44
+ /* Vertical align to the top of the text */
45
+ .v-align-text-top {
46
+ vertical-align: text-top !important;
47
+ }
48
+ /* Vertical align to the bottom of the text */
49
+ .v-align-text-bottom {
50
+ vertical-align: text-bottom !important;
51
+ }
52
+ /* Vertical align to the parent's baseline */
53
+ .v-align-baseline {
54
+ vertical-align: baseline !important;
55
+ }
56
+
57
+ // Overflow utilities
58
+ @each $overflow in (visible, hidden, auto, scroll) {
59
+ .overflow-#{$overflow} {
60
+ overflow: $overflow !important;
61
+ }
62
+ .overflow-x-#{$overflow} {
63
+ overflow-x: $overflow !important;
64
+ }
65
+ .overflow-y-#{$overflow} {
66
+ overflow-y: $overflow !important;
67
+ }
68
+ }
69
+
70
+ // Clear floats
71
+ /* Clear floats around the element */
72
+ .clearfix {
73
+ @include clearfix;
74
+ }
75
+
76
+ // Floats
77
+ @each $breakpoint, $variant in $responsive-variants {
78
+ @include breakpoint($breakpoint) {
79
+ /* Float to the left */
80
+ .float#{$variant}-left {
81
+ float: left !important;
82
+ }
83
+ /* Float to the right */
84
+ .float#{$variant}-right {
85
+ float: right !important;
86
+ }
87
+ /* No float */
88
+ .float#{$variant}-none {
89
+ float: none !important;
90
+ }
91
+ }
92
+ }
93
+
94
+ // Width and height utilities, helpful in combination
95
+ // with display-table utilities and images
96
+ /* Max width 100% */
97
+ .width-fit {
98
+ max-width: 100% !important;
99
+ }
100
+ /* Set the width to 100% */
101
+ .width-full {
102
+ width: 100% !important;
103
+ }
104
+ /* Max height 100% */
105
+ .height-fit {
106
+ max-height: 100% !important;
107
+ }
108
+ /* Set the height to 100% */
109
+ .height-full {
110
+ height: 100% !important;
111
+ }
112
+
113
+ /* Remove min-width from element */
114
+ .min-width-0 {
115
+ min-width: 0 !important;
116
+ }
117
+
118
+ @each $breakpoint, $variant in $responsive-variants {
119
+ @include breakpoint($breakpoint) {
120
+ // Auto varients
121
+ .width#{$variant}-auto {
122
+ width: auto !important;
123
+ }
124
+
125
+ /* Set the direction to rtl */
126
+ .direction#{$variant}-rtl {
127
+ direction: rtl !important;
128
+ }
129
+ /* Set the direction to ltr */
130
+ .direction#{$variant}-ltr {
131
+ direction: ltr !important;
132
+ }
133
+ }
134
+ }
@@ -0,0 +1,68 @@
1
+ // Margin spacer utilities
2
+ // stylelint-disable block-opening-brace-space-before, declaration-colon-space-before, comment-empty-line-before
3
+
4
+ // Loop through the breakpoint values
5
+ @each $breakpoint, $variant in $responsive-variants {
6
+ @include breakpoint($breakpoint) {
7
+ // Loop through the spacer values
8
+ @each $scale, $size in $spacer-map {
9
+ /* Set a $size margin to all sides at $breakpoint */
10
+ .m#{$variant}-#{$scale} {
11
+ margin: $size !important;
12
+ }
13
+ /* Set a $size margin on the top at $breakpoint */
14
+ .mt#{$variant}-#{$scale} {
15
+ margin-top: $size !important;
16
+ }
17
+ /* Set a $size margin on the right at $breakpoint */
18
+ .mr#{$variant}-#{$scale} {
19
+ margin-right: $size !important;
20
+ }
21
+ /* Set a $size margin on the bottom at $breakpoint */
22
+ .mb#{$variant}-#{$scale} {
23
+ margin-bottom: $size !important;
24
+ }
25
+ /* Set a $size margin on the left at $breakpoint */
26
+ .ml#{$variant}-#{$scale} {
27
+ margin-left: $size !important;
28
+ }
29
+
30
+ @if ($size != 0) {
31
+ /* Set a negative $size margin on top at $breakpoint */
32
+ .mt#{$variant}-n#{$scale} {
33
+ margin-top: -$size !important;
34
+ }
35
+ /* Set a negative $size margin on the right at $breakpoint */
36
+ .mr#{$variant}-n#{$scale} {
37
+ margin-right: -$size !important;
38
+ }
39
+ /* Set a negative $size margin on the bottom at $breakpoint */
40
+ .mb#{$variant}-n#{$scale} {
41
+ margin-bottom: -$size !important;
42
+ }
43
+ /* Set a negative $size margin on the left at $breakpoint */
44
+ .ml#{$variant}-n#{$scale} {
45
+ margin-left: -$size !important;
46
+ }
47
+ }
48
+
49
+ /* Set a $size margin on the left & right at $breakpoint */
50
+ .mx#{$variant}-#{$scale} {
51
+ margin-right: $size !important;
52
+ margin-left: $size !important;
53
+ }
54
+
55
+ /* Set a $size margin on the top & bottom at $breakpoint */
56
+ .my#{$variant}-#{$scale} {
57
+ margin-top: $size !important;
58
+ margin-bottom: $size !important;
59
+ }
60
+ }
61
+
62
+ /* responsive horizontal auto margins */
63
+ .mx#{$variant}-auto {
64
+ margin-right: auto !important;
65
+ margin-left: auto !important;
66
+ }
67
+ }
68
+ }
@@ -0,0 +1,59 @@
1
+ // Padding spacer utilities
2
+ // stylelint-disable block-opening-brace-space-before, declaration-colon-space-before, comment-empty-line-before
3
+
4
+ // Responsive padding spacer utilities
5
+ @each $breakpoint, $variant in $responsive-variants {
6
+ @include breakpoint($breakpoint) {
7
+ // Loop through the spacer values
8
+ @each $scale, $size in $spacer-map {
9
+ /* Set a $size padding to all sides at $breakpoint */
10
+ .p#{$variant}-#{$scale} {
11
+ padding: $size !important;
12
+ }
13
+ /* Set a $size padding to the top at $breakpoint */
14
+ .pt#{$variant}-#{$scale} {
15
+ padding-top: $size !important;
16
+ }
17
+ /* Set a $size padding to the right at $breakpoint */
18
+ .pr#{$variant}-#{$scale} {
19
+ padding-right: $size !important;
20
+ }
21
+ /* Set a $size padding to the bottom at $breakpoint */
22
+ .pb#{$variant}-#{$scale} {
23
+ padding-bottom: $size !important;
24
+ }
25
+ /* Set a $size padding to the left at $breakpoint */
26
+ .pl#{$variant}-#{$scale} {
27
+ padding-left: $size !important;
28
+ }
29
+
30
+ /* Set a $size padding to the left & right at $breakpoint */
31
+ .px#{$variant}-#{$scale} {
32
+ padding-right: $size !important;
33
+ padding-left: $size !important;
34
+ }
35
+
36
+ /* Set a $size padding to the top & bottom at $breakpoint */
37
+ .py#{$variant}-#{$scale} {
38
+ padding-top: $size !important;
39
+ padding-bottom: $size !important;
40
+ }
41
+ }
42
+ }
43
+ }
44
+
45
+ // responsive padding for containers
46
+ .p-responsive {
47
+ padding-right: $spacer-3 !important;
48
+ padding-left: $spacer-3 !important;
49
+
50
+ @include breakpoint(sm) {
51
+ padding-right: $spacer-6 !important;
52
+ padding-left: $spacer-6 !important;
53
+ }
54
+
55
+ @include breakpoint(lg) {
56
+ padding-right: $spacer-3 !important;
57
+ padding-left: $spacer-3 !important;
58
+ }
59
+ }
@@ -0,0 +1,325 @@
1
+ // stylelint-disable block-closing-brace-space-before, comment-empty-line-before
2
+
3
+ // Type scale variables found in ../support/lib/variables.scss
4
+ // $h00-size-mobile: 40px;
5
+ // $h0-size-mobile: 32px;
6
+ // $h1-size-mobile: 26px;
7
+ // $h2-size-mobile: 22px;
8
+ // $h3-size-mobile: 18px;
9
+ // $h00-size: 48px;
10
+ // $h0-size: 40px;
11
+ // $h1-size: 32px;
12
+ // $h2-size: 24px;
13
+ // $h3-size: 20px;
14
+ // $h4-size: 16px;
15
+ // $h5-size: 14px;
16
+ // $h6-size: 12px;
17
+
18
+ /* Set the font size to 26px */
19
+ .h1 {
20
+ // stylelint-disable-next-line primer/typography
21
+ font-size: $h1-size-mobile !important;
22
+
23
+ @include breakpoint(md) {
24
+ font-size: $h1-size !important;
25
+ }
26
+ }
27
+
28
+ /* Set the font size to 22px */
29
+ .h2 {
30
+ // stylelint-disable-next-line primer/typography
31
+ font-size: $h2-size-mobile !important;
32
+
33
+ @include breakpoint(md) {
34
+ font-size: $h2-size !important;
35
+ }
36
+ }
37
+
38
+ /* Set the font size to 18px */
39
+ .h3 {
40
+ // stylelint-disable-next-line primer/typography
41
+ font-size: $h3-size-mobile !important;
42
+
43
+ @include breakpoint(md) {
44
+ font-size: $h3-size !important;
45
+ }
46
+ }
47
+
48
+ /* Set the font size to #{$h4-size} */
49
+ .h4 {
50
+ font-size: $h4-size !important;
51
+ }
52
+
53
+ /* Set the font size to #{$h5-size} */
54
+ .h5 {
55
+ font-size: $h5-size !important;
56
+ }
57
+
58
+ // Does not include color property like typography base
59
+ // styles, color should be applied with color utilities.
60
+ /* Set the font size to #{$h6-size} */
61
+ .h6 {
62
+ font-size: $h6-size !important;
63
+ }
64
+
65
+ // Heading utilities
66
+ .h1,
67
+ .h2,
68
+ .h3,
69
+ .h4,
70
+ .h5,
71
+ .h6 {
72
+ font-weight: $font-weight-bold !important;
73
+ }
74
+
75
+ // Type utilities that match type sale
76
+ /* Set the font size to 26px */
77
+ .f1 {
78
+ // stylelint-disable-next-line primer/typography
79
+ font-size: $h1-size-mobile !important;
80
+
81
+ @include breakpoint(md) {
82
+ font-size: $h1-size !important;
83
+ }
84
+ }
85
+
86
+ /* Set the font size to 22px */
87
+ .f2 {
88
+ // stylelint-disable-next-line primer/typography
89
+ font-size: $h2-size-mobile !important;
90
+
91
+ @include breakpoint(md) {
92
+ font-size: $h2-size !important;
93
+ }
94
+ }
95
+
96
+ /* Set the font size to 18px */
97
+ .f3 {
98
+ // stylelint-disable-next-line primer/typography
99
+ font-size: $h3-size-mobile !important;
100
+
101
+ @include breakpoint(md) {
102
+ font-size: $h3-size !important;
103
+ }
104
+ }
105
+
106
+ /* Set the font size to #{$h4-size} */
107
+ .f4 {
108
+ font-size: $h4-size !important;
109
+
110
+ @include breakpoint(md) {
111
+ font-size: $h4-size !important;
112
+ }
113
+ }
114
+
115
+ /* Set the font size to #{$h5-size} */
116
+ .f5 {
117
+ font-size: $h5-size !important;
118
+ }
119
+ /* Set the font size to #{$h6-size} */
120
+ .f6 {
121
+ font-size: $h6-size !important;
122
+ }
123
+
124
+ // Type utils with light weight that match type scale
125
+ /* Set the font size to 40px and weight to light */
126
+ .f00-light {
127
+ // stylelint-disable-next-line primer/typography
128
+ font-size: $h00-size-mobile !important;
129
+ font-weight: $font-weight-light !important;
130
+
131
+ @include breakpoint(md) {
132
+ font-size: $h00-size !important;
133
+ }
134
+ }
135
+
136
+ /* Set the font size to 32px and weight to light */
137
+ .f0-light {
138
+ // stylelint-disable-next-line primer/typography
139
+ font-size: $h0-size-mobile !important;
140
+ font-weight: $font-weight-light !important;
141
+
142
+ @include breakpoint(md) {
143
+ font-size: $h0-size !important;
144
+ }
145
+ }
146
+
147
+ /* Set the font size to 26px and weight to light */
148
+ .f1-light {
149
+ // stylelint-disable-next-line primer/typography
150
+ font-size: $h1-size-mobile !important;
151
+ font-weight: $font-weight-light !important;
152
+
153
+ @include breakpoint(md) {
154
+ font-size: $h1-size !important;
155
+ }
156
+ }
157
+
158
+ /* Set the font size to 22px and weight to light */
159
+ .f2-light {
160
+ // stylelint-disable-next-line primer/typography
161
+ font-size: $h2-size-mobile !important;
162
+ font-weight: $font-weight-light !important;
163
+
164
+ @include breakpoint(md) {
165
+ font-size: $h2-size !important;
166
+ }
167
+ }
168
+
169
+ // Same size and weight as .lead but without color property
170
+ /* Set the font size to 18px and weight to light */
171
+ .f3-light {
172
+ // stylelint-disable-next-line primer/typography
173
+ font-size: $h3-size-mobile !important;
174
+ font-weight: $font-weight-light !important;
175
+
176
+ @include breakpoint(md) {
177
+ font-size: $h3-size !important;
178
+ }
179
+ }
180
+
181
+ // Smallest text size
182
+ /* Set the font size to ${#h6-size} */
183
+ .text-small {
184
+ font-size: $h6-size !important;
185
+ } // 12px
186
+
187
+ /* Large leading paragraphs */
188
+ .lead {
189
+ // stylelint-disable-next-line primer/spacing
190
+ margin-bottom: 30px;
191
+ font-size: $h3-size;
192
+ font-weight: $font-weight-light;
193
+ color: $text-gray;
194
+ }
195
+
196
+ // Line-height variations
197
+ // Close to commonly used line-heights. Most line-heights
198
+ // combined with type size equate to whole pixels.
199
+ // Will be improved with future typography scale updates.
200
+ // Responsive line-height
201
+ @each $breakpoint, $variant in $responsive-variants {
202
+ @include breakpoint($breakpoint) {
203
+ /* Set the line height to ultra condensed */
204
+ .lh#{$variant}-condensed-ultra {
205
+ line-height: $lh-condensed-ultra !important;
206
+ }
207
+ /* Set the line height to condensed */
208
+ .lh#{$variant}-condensed {
209
+ line-height: $lh-condensed !important;
210
+ }
211
+ /* Set the line height to default */
212
+ .lh#{$variant}-default {
213
+ line-height: $lh-default !important;
214
+ }
215
+ /* Set the line height to zero */
216
+ .lh#{$variant}-0 {
217
+ line-height: 0 !important;
218
+ }
219
+ }
220
+ }
221
+
222
+ // Text alignments
223
+ // Responsive text alignment
224
+ @each $breakpoint, $variant in $responsive-variants {
225
+ @include breakpoint($breakpoint) {
226
+ /* Text align to the right */
227
+ .text#{$variant}-right {
228
+ text-align: right !important;
229
+ }
230
+ /* Text align to the left */
231
+ .text#{$variant}-left {
232
+ text-align: left !important;
233
+ }
234
+ /* Text align to the center */
235
+ .text#{$variant}-center {
236
+ text-align: center !important;
237
+ }
238
+ }
239
+ }
240
+
241
+ // Text styles
242
+ /* Set the font weight to normal */
243
+ .text-normal {
244
+ font-weight: $font-weight-normal !important;
245
+ }
246
+ /* Set the font weight to bold */
247
+ .text-bold {
248
+ font-weight: $font-weight-bold !important;
249
+ }
250
+ /* Set the font to italic */
251
+ .text-italic {
252
+ font-style: italic !important;
253
+ }
254
+ /* Make text uppercase */
255
+ .text-uppercase {
256
+ text-transform: uppercase !important;
257
+ }
258
+ /* Underline text */
259
+ .text-underline {
260
+ text-decoration: underline !important;
261
+ }
262
+ /* Don't underline text */
263
+ .no-underline {
264
+ text-decoration: none !important;
265
+ }
266
+ /* Don't wrap white space */
267
+ .no-wrap {
268
+ white-space: nowrap !important;
269
+ }
270
+ /* Normal white space */
271
+ .ws-normal {
272
+ white-space: normal !important;
273
+ }
274
+
275
+ /* Force long "words" to wrap if they exceed the width of the container */
276
+ .break-word {
277
+ word-break: break-word !important;
278
+ // this is for backwards compatibility with browsers that don't respect overflow-wrap
279
+ word-wrap: break-word !important;
280
+ overflow-wrap: break-word !important;
281
+ }
282
+
283
+ /*
284
+ * Specifically apply word-break: break-all; per MDN:
285
+ *
286
+ * > Note: In contrast to `word-break: break-word` and `overflow-wrap: break-word`,
287
+ * > `word-break: break-all` will create a break at the exact place where text would
288
+ * > otherwise overflow its container (even if putting an entire word on its own line
289
+ * > would negate the need for a break).
290
+ *
291
+ * see: https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#Values
292
+ */
293
+ .wb-break-all {
294
+ word-break: break-all !important;
295
+ }
296
+
297
+ .text-emphasized {
298
+ font-weight: $font-weight-bold;
299
+ color: $text-gray-dark;
300
+ }
301
+
302
+ // List styles
303
+ .list-style-none {
304
+ list-style: none !important;
305
+ }
306
+
307
+ // Text Shadows
308
+ /* Add a dark text shadow */
309
+ .text-shadow-dark {
310
+ text-shadow: 0 1px 1px rgba($black, 0.25), 0 1px 25px rgba($black, 0.75);
311
+ }
312
+ /* Add a light text shadow */
313
+ .text-shadow-light {
314
+ text-shadow: 0 1px 0 rgba($white, 0.5);
315
+ }
316
+
317
+ /* Set to monospace font */
318
+ .text-mono {
319
+ font-family: $mono-font !important;
320
+ }
321
+
322
+ /* Disallow user from selecting text */
323
+ .user-select-none {
324
+ user-select: none !important;
325
+ }