truesight-rtd-theme 1.0.0

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 (169) hide show
  1. checksums.yaml +7 -0
  2. data/LICENSE +21 -0
  3. data/README.md +100 -0
  4. data/_includes/README.md +9 -0
  5. data/_includes/common/assets/data.liquid +3 -0
  6. data/_includes/common/assets/robots.liquid +4 -0
  7. data/_includes/common/assets/sitemap.liquid +12 -0
  8. data/_includes/common/assets/sw.caches.js +39 -0
  9. data/_includes/common/core/_list.liquid +15 -0
  10. data/_includes/common/core/list.liquid +10 -0
  11. data/_includes/common/google_adsense.liquid +3 -0
  12. data/_includes/common/google_gtag.liquid +11 -0
  13. data/_includes/common/links.liquid +26 -0
  14. data/_includes/common/mathjax.liquid +6 -0
  15. data/_includes/common/mermaid.liquid +10 -0
  16. data/_includes/common/metadata.liquid +12 -0
  17. data/_includes/common/opengraph.liquid +8 -0
  18. data/_includes/common/rest/content.liquid +6 -0
  19. data/_includes/common/rest/defaults.liquid +7 -0
  20. data/_includes/common/rest/description.liquid +6 -0
  21. data/_includes/common/rest/i18n.liquid +1 -0
  22. data/_includes/common/rest/nav.liquid +20 -0
  23. data/_includes/common/rest/site_pages.liquid +8 -0
  24. data/_includes/common/rest/tabs.liquid +2 -0
  25. data/_includes/common/rest/title.liquid +18 -0
  26. data/_includes/common/rest/variables.liquid +41 -0
  27. data/_includes/common/rest/workdir.liquid +19 -0
  28. data/_includes/common/schema.liquid +27 -0
  29. data/_includes/common/script.liquid +11 -0
  30. data/_includes/common/title.liquid +1 -0
  31. data/_includes/common/twitter_cards.liquid +6 -0
  32. data/_includes/extra/body.html +0 -0
  33. data/_includes/extra/head.html +0 -0
  34. data/_includes/extra/script.js +0 -0
  35. data/_includes/extra/styles.scss +0 -0
  36. data/_includes/list.liquid +1 -0
  37. data/_includes/rest/defaults.liquid +2 -0
  38. data/_includes/rest/script.liquid +7 -0
  39. data/_includes/rest/styles.liquid +5 -0
  40. data/_includes/shortcodes/danger.liquid +9 -0
  41. data/_includes/shortcodes/mermaid.liquid +3 -0
  42. data/_includes/shortcodes/note.liquid +9 -0
  43. data/_includes/shortcodes/tip.liquid +9 -0
  44. data/_includes/shortcodes/warning.liquid +9 -0
  45. data/_includes/templates/_toctree.liquid +41 -0
  46. data/_includes/templates/addons.liquid +43 -0
  47. data/_includes/templates/breadcrumbs.liquid +33 -0
  48. data/_includes/templates/content.liquid +20 -0
  49. data/_includes/templates/footer.liquid +54 -0
  50. data/_includes/templates/sidebar.liquid +18 -0
  51. data/_includes/templates/toctree.liquid +23 -0
  52. data/_layouts/default.liquid +32 -0
  53. data/_layouts/tasks/compress.liquid +21 -0
  54. data/_layouts/tasks/shortcodes.liquid +33 -0
  55. data/_sass/_direction.scss +107 -0
  56. data/_sass/_font-face.scss +66 -0
  57. data/_sass/_layout.scss +76 -0
  58. data/_sass/_rest.scss +26 -0
  59. data/_sass/_root.scss +9 -0
  60. data/_sass/_variables.scss +34 -0
  61. data/_sass/core/addons.scss +39 -0
  62. data/_sass/core/container.scss +11 -0
  63. data/_sass/core/content.scss +4 -0
  64. data/_sass/core/header.scss +10 -0
  65. data/_sass/core/markdown.scss +113 -0
  66. data/_sass/core/sidebar.scss +100 -0
  67. data/_sass/core/title.scss +12 -0
  68. data/_sass/core/toasts.scss +53 -0
  69. data/_sass/lib/@primer/css/base/README.md +24 -0
  70. data/_sass/lib/@primer/css/base/base.scss +90 -0
  71. data/_sass/lib/@primer/css/base/index.scss +6 -0
  72. data/_sass/lib/@primer/css/base/kbd.scss +21 -0
  73. data/_sass/lib/@primer/css/base/normalize.scss +424 -0
  74. data/_sass/lib/@primer/css/base/typography-base.scss +100 -0
  75. data/_sass/lib/@primer/css/breadcrumb/README.md +24 -0
  76. data/_sass/lib/@primer/css/breadcrumb/breadcrumb.scss +28 -0
  77. data/_sass/lib/@primer/css/breadcrumb/index.scss +3 -0
  78. data/_sass/lib/@primer/css/buttons/README.md +24 -0
  79. data/_sass/lib/@primer/css/buttons/button-group.scss +91 -0
  80. data/_sass/lib/@primer/css/buttons/button.scss +296 -0
  81. data/_sass/lib/@primer/css/buttons/index.scss +4 -0
  82. data/_sass/lib/@primer/css/buttons/misc.scss +205 -0
  83. data/_sass/lib/@primer/css/forms/README.md +24 -0
  84. data/_sass/lib/@primer/css/forms/form-control.scss +281 -0
  85. data/_sass/lib/@primer/css/forms/form-group.scss +279 -0
  86. data/_sass/lib/@primer/css/forms/form-select.scss +38 -0
  87. data/_sass/lib/@primer/css/forms/form-validation.scss +369 -0
  88. data/_sass/lib/@primer/css/forms/index.scss +7 -0
  89. data/_sass/lib/@primer/css/forms/input-group.scss +53 -0
  90. data/_sass/lib/@primer/css/forms/radio-group.scss +43 -0
  91. data/_sass/lib/@primer/css/loaders/README.md +24 -0
  92. data/_sass/lib/@primer/css/loaders/index.scss +2 -0
  93. data/_sass/lib/@primer/css/loaders/loaders.scss +21 -0
  94. data/_sass/lib/@primer/css/markdown/README.md +24 -0
  95. data/_sass/lib/@primer/css/markdown/blob-csv.scss +31 -0
  96. data/_sass/lib/@primer/css/markdown/code.scss +73 -0
  97. data/_sass/lib/@primer/css/markdown/headings.scss +72 -0
  98. data/_sass/lib/@primer/css/markdown/images.scss +131 -0
  99. data/_sass/lib/@primer/css/markdown/index.scss +8 -0
  100. data/_sass/lib/@primer/css/markdown/lists.scss +77 -0
  101. data/_sass/lib/@primer/css/markdown/markdown-body.scss +99 -0
  102. data/_sass/lib/@primer/css/markdown/tables.scss +38 -0
  103. data/_sass/lib/@primer/css/support/README.md +24 -0
  104. data/_sass/lib/@primer/css/support/index.scss +11 -0
  105. data/_sass/lib/@primer/css/support/mixins/buttons.scss +184 -0
  106. data/_sass/lib/@primer/css/support/mixins/layout.scss +55 -0
  107. data/_sass/lib/@primer/css/support/mixins/misc.scss +32 -0
  108. data/_sass/lib/@primer/css/support/mixins/typography.scss +88 -0
  109. data/_sass/lib/@primer/css/support/variables/color-system.scss +243 -0
  110. data/_sass/lib/@primer/css/support/variables/colors.scss +55 -0
  111. data/_sass/lib/@primer/css/support/variables/layout.scss +149 -0
  112. data/_sass/lib/@primer/css/support/variables/misc.scss +43 -0
  113. data/_sass/lib/@primer/css/support/variables/typography.scss +43 -0
  114. data/_sass/lib/@primer/css/utilities/README.md +24 -0
  115. data/_sass/lib/@primer/css/utilities/animations.scss +187 -0
  116. data/_sass/lib/@primer/css/utilities/borders.scss +187 -0
  117. data/_sass/lib/@primer/css/utilities/box-shadow.scss +25 -0
  118. data/_sass/lib/@primer/css/utilities/colors.scss +185 -0
  119. data/_sass/lib/@primer/css/utilities/details.scss +34 -0
  120. data/_sass/lib/@primer/css/utilities/flexbox.scss +124 -0
  121. data/_sass/lib/@primer/css/utilities/index.scss +14 -0
  122. data/_sass/lib/@primer/css/utilities/layout.scss +151 -0
  123. data/_sass/lib/@primer/css/utilities/margin.scss +68 -0
  124. data/_sass/lib/@primer/css/utilities/padding.scss +59 -0
  125. data/_sass/lib/@primer/css/utilities/typography.scss +325 -0
  126. data/_sass/lib/@primer/css/utilities/visibility-display.scss +82 -0
  127. data/_sass/lib/font-awesome/_icons.scss +2139 -0
  128. data/_sass/lib/font-awesome/_variables.scss +799 -0
  129. data/_sass/lib/material-design-lite/_color-definitions.scss +378 -0
  130. data/_sass/lib/material-design-lite/_functions.scss +19 -0
  131. data/_sass/lib/material-design-lite/_mixins.scss +301 -0
  132. data/_sass/lib/material-design-lite/_variables.scss +612 -0
  133. data/_sass/lib/rouge/github.scss +214 -0
  134. data/_sass/theme.scss +37 -0
  135. data/assets/404.liquid +9 -0
  136. data/assets/css/fonts/Roboto-Slab-Bold.woff +0 -0
  137. data/assets/css/fonts/Roboto-Slab-Bold.woff2 +0 -0
  138. data/assets/css/fonts/Roboto-Slab-Regular.woff +0 -0
  139. data/assets/css/fonts/Roboto-Slab-Regular.woff2 +0 -0
  140. data/assets/css/fonts/fontawesome-webfont.eot +0 -0
  141. data/assets/css/fonts/fontawesome-webfont.svg +2671 -0
  142. data/assets/css/fonts/fontawesome-webfont.ttf +0 -0
  143. data/assets/css/fonts/fontawesome-webfont.woff +0 -0
  144. data/assets/css/fonts/fontawesome-webfont.woff2 +0 -0
  145. data/assets/css/fonts/lato-bold-italic.woff +0 -0
  146. data/assets/css/fonts/lato-bold-italic.woff2 +0 -0
  147. data/assets/css/fonts/lato-bold.woff +0 -0
  148. data/assets/css/fonts/lato-bold.woff2 +0 -0
  149. data/assets/css/fonts/lato-normal-italic.woff +0 -0
  150. data/assets/css/fonts/lato-normal-italic.woff2 +0 -0
  151. data/assets/css/fonts/lato-normal.woff +0 -0
  152. data/assets/css/fonts/lato-normal.woff2 +0 -0
  153. data/assets/css/theme.min.css +1 -0
  154. data/assets/css/theme.scss +4 -0
  155. data/assets/data.liquid +6 -0
  156. data/assets/images/apple-touch-icon-300x300.jpg +0 -0
  157. data/assets/images/favicon-16x16.png +0 -0
  158. data/assets/images/favicon-32x32.png +0 -0
  159. data/assets/images/favicon-96x96.png +0 -0
  160. data/assets/images/favicon.liquid +13 -0
  161. data/assets/js/jquery.min.js +2 -0
  162. data/assets/js/mermaid.min.js +31 -0
  163. data/assets/js/theme.js +287 -0
  164. data/assets/js/theme.min.js +1 -0
  165. data/assets/robots.liquid +6 -0
  166. data/assets/search.liquid +12 -0
  167. data/assets/sitemap.liquid +6 -0
  168. data/assets/sw.caches.liquid +8 -0
  169. metadata +224 -0
@@ -0,0 +1,72 @@
1
+ // Needs refactoring
2
+ // stylelint-disable selector-max-compound-selectors, selector-max-specificity
3
+ // stylelint-disable selector-max-type
4
+ .markdown-body {
5
+ // Headings
6
+ h1,
7
+ h2,
8
+ h3,
9
+ h4,
10
+ h5,
11
+ h6 {
12
+ margin-top: $spacer-4;
13
+ margin-bottom: $spacer-3;
14
+ font-weight: $font-weight-bold;
15
+ line-height: $lh-condensed;
16
+
17
+ .octicon-link {
18
+ color: $text-black;
19
+ vertical-align: middle;
20
+ visibility: hidden;
21
+ }
22
+
23
+ &:hover .anchor {
24
+ text-decoration: none;
25
+
26
+ .octicon-link {
27
+ visibility: visible;
28
+ }
29
+ }
30
+
31
+ tt,
32
+ code {
33
+ font-size: inherit;
34
+ }
35
+ }
36
+
37
+ h1 {
38
+ // stylelint-disable-next-line primer/spacing
39
+ padding-bottom: 0.3em;
40
+ // stylelint-disable-next-line primer/typography
41
+ font-size: 2em;
42
+ border-bottom: $border-width $border-style $border-gray-light;
43
+ }
44
+
45
+ h2 {
46
+ // stylelint-disable-next-line primer/spacing
47
+ padding-bottom: 0.3em;
48
+ // stylelint-disable-next-line primer/typography
49
+ font-size: 1.5em;
50
+ border-bottom: $border-width $border-style $border-gray-light;
51
+ }
52
+
53
+ h3 {
54
+ // stylelint-disable-next-line primer/typography
55
+ font-size: 1.25em;
56
+ }
57
+
58
+ h4 {
59
+ font-size: 1em;
60
+ }
61
+
62
+ h5 {
63
+ // stylelint-disable-next-line primer/typography
64
+ font-size: 0.875em;
65
+ }
66
+
67
+ h6 {
68
+ // stylelint-disable-next-line primer/typography
69
+ font-size: 0.85em;
70
+ color: $text-gray-light;
71
+ }
72
+ }
@@ -0,0 +1,131 @@
1
+ // Need to target base styles
2
+ // stylelint-disable selector-max-compound-selectors, selector-no-qualifying-type
3
+ // stylelint-disable selector-max-type
4
+ .markdown-body {
5
+ // Images & Stuff
6
+ img {
7
+ max-width: 100%;
8
+ // because we put padding on the images to hide header lines, and some people
9
+ // specify the width of their images in their markdown.
10
+ box-sizing: content-box;
11
+ background-color: $bg-white;
12
+
13
+ &[align="right"] {
14
+ // stylelint-disable-next-line primer/spacing
15
+ padding-left: 20px;
16
+ }
17
+
18
+ &[align="left"] {
19
+ // stylelint-disable-next-line primer/spacing
20
+ padding-right: 20px;
21
+ }
22
+ }
23
+
24
+ .emoji {
25
+ max-width: none;
26
+ vertical-align: text-top;
27
+ // Override `<img>` styles so Emjois don't clash with zebra striping in our tables
28
+ background-color: transparent;
29
+ }
30
+
31
+ // Gollum Image Tags
32
+
33
+ // Framed
34
+ span.frame {
35
+ display: block;
36
+ overflow: hidden;
37
+
38
+ > span {
39
+ display: block;
40
+ float: left;
41
+ width: auto;
42
+ // stylelint-disable-next-line primer/spacing
43
+ padding: 7px;
44
+ // stylelint-disable-next-line primer/spacing
45
+ margin: 13px 0 0;
46
+ overflow: hidden;
47
+ // stylelint-disable-next-line primer/borders
48
+ border: $border-width $border-style lighten($gray-300, 5%);
49
+ }
50
+
51
+ span img {
52
+ display: block;
53
+ float: left;
54
+ }
55
+
56
+ span span {
57
+ display: block;
58
+ // stylelint-disable-next-line primer/spacing
59
+ padding: 5px 0 0;
60
+ clear: both;
61
+ color: $text-gray-dark;
62
+ }
63
+ }
64
+
65
+ span.align-center {
66
+ display: block;
67
+ overflow: hidden;
68
+ clear: both;
69
+
70
+ > span {
71
+ display: block;
72
+ // stylelint-disable-next-line primer/spacing
73
+ margin: 13px auto 0;
74
+ overflow: hidden;
75
+ text-align: center;
76
+ }
77
+
78
+ span img {
79
+ margin: 0 auto;
80
+ text-align: center;
81
+ }
82
+ }
83
+
84
+ span.align-right {
85
+ display: block;
86
+ overflow: hidden;
87
+ clear: both;
88
+
89
+ > span {
90
+ display: block;
91
+ // stylelint-disable-next-line primer/spacing
92
+ margin: 13px 0 0;
93
+ overflow: hidden;
94
+ text-align: right;
95
+ }
96
+
97
+ span img {
98
+ margin: 0;
99
+ text-align: right;
100
+ }
101
+ }
102
+
103
+ span.float-left {
104
+ display: block;
105
+ float: left;
106
+ // stylelint-disable-next-line primer/spacing
107
+ margin-right: 13px;
108
+ overflow: hidden;
109
+
110
+ span {
111
+ // stylelint-disable-next-line primer/spacing
112
+ margin: 13px 0 0;
113
+ }
114
+ }
115
+
116
+ span.float-right {
117
+ display: block;
118
+ float: right;
119
+ // stylelint-disable-next-line primer/spacing
120
+ margin-left: 13px;
121
+ overflow: hidden;
122
+
123
+ > span {
124
+ display: block;
125
+ // stylelint-disable-next-line primer/spacing
126
+ margin: 13px auto 0;
127
+ overflow: hidden;
128
+ text-align: right;
129
+ }
130
+ }
131
+ }
@@ -0,0 +1,8 @@
1
+ @import "../support/index.scss";
2
+ @import "./markdown-body.scss";
3
+ @import "./headings.scss";
4
+ @import "./lists.scss";
5
+ @import "./tables.scss";
6
+ @import "./images.scss";
7
+ @import "./code.scss";
8
+ @import "./blob-csv.scss";
@@ -0,0 +1,77 @@
1
+ // Base styles
2
+ // stylelint-disable selector-no-qualifying-type
3
+ // stylelint-disable selector-max-type
4
+ .markdown-body {
5
+ // Lists, Blockquotes & Such
6
+ ul,
7
+ ol {
8
+ // stylelint-disable-next-line primer/spacing
9
+ padding-left: 2em;
10
+
11
+ &.no-list {
12
+ padding: 0;
13
+ list-style-type: none;
14
+ }
15
+ }
16
+
17
+ // Did someone complain about list spacing? Encourage them
18
+ // to create the spacing with their markdown formatting.
19
+ // List behavior should be controled by the markup, not the css.
20
+ //
21
+ // For lists with padding between items, use blank
22
+ // lines between items. This will generate paragraphs with
23
+ // padding to space things out.
24
+ //
25
+ // - item
26
+ //
27
+ // - item
28
+ //
29
+ // - item
30
+ //
31
+ // For list without padding, don't use blank lines.
32
+ //
33
+ // - item
34
+ // - item
35
+ // - item
36
+ //
37
+ // Modifying the css to emulate these behaviors merely brakes
38
+ // one case in the process of solving another. Don't change
39
+ // this unless it's really really a bug.
40
+ ul ul,
41
+ ul ol,
42
+ ol ol,
43
+ ol ul {
44
+ margin-top: 0;
45
+ margin-bottom: 0;
46
+ }
47
+
48
+ li {
49
+ // TODO@16.0.0: Remove this. See https://github.com/primer/css/pull/1137.
50
+ word-wrap: break-all;
51
+ }
52
+
53
+ li > p {
54
+ margin-top: $spacer-3;
55
+ }
56
+
57
+ li + li {
58
+ margin-top: $em-spacer-3;
59
+ }
60
+
61
+ dl {
62
+ padding: 0;
63
+
64
+ dt {
65
+ padding: 0;
66
+ margin-top: $spacer-3;
67
+ font-size: 1em;
68
+ font-style: italic;
69
+ font-weight: $font-weight-bold;
70
+ }
71
+
72
+ dd {
73
+ padding: 0 $spacer-3;
74
+ margin-bottom: $spacer-3;
75
+ }
76
+ }
77
+ }
@@ -0,0 +1,99 @@
1
+ // All of our block level items should have the same margin
2
+ // stylelint-disable selector-max-type
3
+
4
+ // This is styling for generic markdownized text. Anything you put in a
5
+ // container with .markdown-body on it should render generally well. It also
6
+ // includes some GitHub Flavored Markdown specific styling (like @mentions)
7
+ .markdown-body {
8
+ font-family: $body-font;
9
+ font-size: $h4-size;
10
+ line-height: $body-line-height;
11
+ word-wrap: break-word;
12
+
13
+ @import "../base/kbd.scss"; // adds support for keyboard shortcuts
14
+
15
+ // Clearfix on the markdown body
16
+ &::before {
17
+ display: table;
18
+ content: "";
19
+ }
20
+
21
+ &::after {
22
+ display: table;
23
+ clear: both;
24
+ content: "";
25
+ }
26
+
27
+ > *:first-child {
28
+ margin-top: 0 !important;
29
+ }
30
+
31
+ > *:last-child {
32
+ margin-bottom: 0 !important;
33
+ }
34
+
35
+ // Anchors like <a name="examples">. These sometimes end up wrapped around
36
+ // text when users mistakenly forget to close the tag or use self-closing tag
37
+ // syntax. We don't want them to appear like links.
38
+ // FIXME: a:not(:link):not(:visited) would be a little clearer here (and
39
+ // possibly faster to match), but it breaks styling of <a href> elements due
40
+ // to https://bugs.webkit.org/show_bug.cgi?id=142737.
41
+ a:not([href]) {
42
+ color: inherit;
43
+ text-decoration: none;
44
+ }
45
+
46
+ // Link Colors
47
+ .absent {
48
+ color: $text-red;
49
+ }
50
+
51
+ .anchor {
52
+ float: left;
53
+ padding-right: $spacer-1;
54
+ // stylelint-disable-next-line primer/spacing
55
+ margin-left: -20px;
56
+ line-height: $lh-condensed-ultra;
57
+
58
+ &:focus {
59
+ outline: none;
60
+ }
61
+ }
62
+
63
+ p,
64
+ blockquote,
65
+ ul,
66
+ ol,
67
+ dl,
68
+ table,
69
+ pre,
70
+ details {
71
+ margin-top: 0;
72
+ margin-bottom: $spacer-3;
73
+ }
74
+
75
+ hr {
76
+ height: $em-spacer-3;
77
+ padding: 0;
78
+ margin: $spacer-4 0;
79
+ // stylelint-disable-next-line primer/colors
80
+ background-color: $gray-200;
81
+ border: 0;
82
+ }
83
+
84
+ blockquote {
85
+ // stylelint-disable-next-line primer/spacing
86
+ padding: 0 1em;
87
+ color: $text-gray-light;
88
+ // stylelint-disable-next-line primer/borders
89
+ border-left: 0.25em $border-style lighten($gray-300, 5%);
90
+
91
+ > :first-child {
92
+ margin-top: 0;
93
+ }
94
+
95
+ > :last-child {
96
+ margin-bottom: 0;
97
+ }
98
+ }
99
+ }
@@ -0,0 +1,38 @@
1
+ // Needs refactoring
2
+ // stylelint-disable selector-max-type
3
+ .markdown-body {
4
+ // Tables
5
+ table {
6
+ display: block;
7
+ width: 100%; // keep for backwards compatibility
8
+ width: max-content;
9
+ max-width: 100%;
10
+ overflow: auto;
11
+
12
+ th {
13
+ font-weight: $font-weight-bold;
14
+ }
15
+
16
+ th,
17
+ td {
18
+ // stylelint-disable-next-line primer/spacing
19
+ padding: 6px 13px;
20
+ // stylelint-disable-next-line primer/borders
21
+ border: $border-width $border-style lighten($gray-300, 5%);
22
+ }
23
+
24
+ tr {
25
+ background-color: $bg-white;
26
+ // stylelint-disable-next-line primer/borders
27
+ border-top: $border-width $border-style darken($gray-300, 4%);
28
+
29
+ &:nth-child(2n) {
30
+ background-color: $bg-gray;
31
+ }
32
+ }
33
+
34
+ img {
35
+ background-color: transparent;
36
+ }
37
+ }
38
+ }
@@ -0,0 +1,24 @@
1
+ ---
2
+ bundle: "support"
3
+ generated: true
4
+ ---
5
+
6
+ # Primer CSS: `support` bundle
7
+
8
+ ## Usage
9
+
10
+ Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
11
+
12
+ ```scss
13
+ @import "@primer/css/support/index.scss";
14
+ ```
15
+
16
+ ## Build
17
+
18
+ The `@primer/css` npm package includes a standalone CSS build of this module in `dist/support.css`.
19
+
20
+ ## License
21
+
22
+ [MIT](https://github.com/primer/css/blob/master/LICENSE) &copy; [GitHub](https://github.com/)
23
+
24
+ [scss]: https://sass-lang.com/documentation/syntax#scss
@@ -0,0 +1,11 @@
1
+ // variables
2
+ @import "./variables/typography.scss";
3
+ @import "./variables/colors.scss";
4
+ @import "./variables/layout.scss";
5
+ @import "./variables/misc.scss";
6
+
7
+ // mixins
8
+ @import "./mixins/typography.scss";
9
+ @import "./mixins/layout.scss";
10
+ @import "./mixins/buttons.scss";
11
+ @import "./mixins/misc.scss";
@@ -0,0 +1,184 @@
1
+ // TODO: See if the mixins below can be deprecated
2
+ // Might still be needed for .btn-blue
3
+ // ------------------------------------------------------------------
4
+
5
+ // Button color generator for primary and themed buttons
6
+
7
+ // New button hotness
8
+ @mixin btn-solid($color, $bg, $bg2) {
9
+ color: $color;
10
+ background-color: $bg2;
11
+ background-image: linear-gradient(-180deg, $bg 0%, $bg2 90%);
12
+
13
+ @if $bg == $gray-000 {
14
+ &:focus,
15
+ &.focus {
16
+ box-shadow: $btn-input-focus-shadow;
17
+ }
18
+
19
+ &:hover,
20
+ &.hover {
21
+ background-color: darken($bg2, 3%);
22
+ background-image: linear-gradient(
23
+ -180deg,
24
+ darken($bg, 3%) 0%,
25
+ darken($bg2, 3%) 90%
26
+ );
27
+ background-position: 0 -$em-spacer-5;
28
+ border-color: rgba($black, 0.35);
29
+ }
30
+
31
+ &:active,
32
+ &.selected,
33
+ &[aria-selected="true"],
34
+ [open] > & {
35
+ background-color: darken(desaturate($bg, 10%), 6%);
36
+ background-image: none;
37
+ border-color: rgba(
38
+ $black,
39
+ 0.35
40
+ ); // repeat to avoid shift on click-drag off of button
41
+ box-shadow: $btn-active-shadow;
42
+ }
43
+
44
+ &:disabled,
45
+ &.disabled,
46
+ &[aria-disabled="true"] {
47
+ color: rgba($color, 0.4);
48
+ background-color: $bg2;
49
+ background-image: none;
50
+ border-color: $border-color-button;
51
+ box-shadow: none;
52
+ }
53
+ } @else {
54
+ &:focus,
55
+ &.focus {
56
+ box-shadow: 0 0 0 0.2em rgba($bg, 0.4);
57
+ }
58
+
59
+ &:hover,
60
+ &.hover {
61
+ background-color: darken($bg2, 2%);
62
+ background-image: linear-gradient(
63
+ -180deg,
64
+ darken($bg, 2%) 0%,
65
+ darken($bg2, 2%) 90%
66
+ );
67
+ background-position: 0 -$em-spacer-5;
68
+ border-color: $black-fade-50;
69
+ }
70
+
71
+ &:active,
72
+ &.selected,
73
+ &[aria-selected="true"],
74
+ [open] > & {
75
+ background-color: darken(mix($bg, $bg2, 50%), 7%);
76
+ background-image: none;
77
+ border-color: $black-fade-50; // repeat to avoid shift on click-drag off of button
78
+ box-shadow: $btn-active-shadow;
79
+ }
80
+
81
+ &:disabled,
82
+ &.disabled,
83
+ &[aria-disabled="true"] {
84
+ color: rgba($color, 0.75);
85
+ background-color: mix($bg2, $white, 50%);
86
+ background-image: none;
87
+ border-color: $border-color-button;
88
+ box-shadow: none;
89
+ }
90
+
91
+ .Counter {
92
+ color: darken($bg, 8%);
93
+ background-color: $white;
94
+ }
95
+ }
96
+ }
97
+
98
+ // Inverse button hover style
99
+ @mixin btn-inverse($color, $bg, $bg2) {
100
+ color: $color;
101
+ background-color: $bg;
102
+ background-image: linear-gradient(-180deg, $bg 0%, $bg2 90%);
103
+
104
+ &:focus {
105
+ box-shadow: 0 0 0 0.2em rgba($color, 0.4);
106
+ }
107
+
108
+ &:hover {
109
+ color: $text-white;
110
+ background-color: $color;
111
+ background-image: linear-gradient(
112
+ -180deg,
113
+ lighten($color, 10%) 0%,
114
+ $color 90%
115
+ );
116
+ border-color: $black-fade-50;
117
+
118
+ .Counter {
119
+ color: $text-white;
120
+ }
121
+ }
122
+
123
+ &:active,
124
+ &.selected,
125
+ &[aria-selected="true"],
126
+ [open] > & {
127
+ color: $text-white;
128
+ background-color: darken($color, 5%);
129
+ background-image: none;
130
+ border-color: $black-fade-50;
131
+ box-shadow: $btn-active-shadow;
132
+ }
133
+
134
+ &:disabled,
135
+ &.disabled,
136
+ &[aria-disabled="true"] {
137
+ color: rgba($color, 0.4);
138
+ background-color: $bg2;
139
+ background-image: none;
140
+ border-color: $border-color-button;
141
+ box-shadow: none;
142
+ }
143
+ }
144
+
145
+ // Outline color generator for btn-outline to make the hover state inverse the text and bg colors.
146
+ @mixin btn-outline($text-color: $text-blue, $bg-color: $bg-white) {
147
+ color: $text-color;
148
+ background-color: $bg-color;
149
+ background-image: none;
150
+
151
+ .Counter {
152
+ background-color: rgba($black, 0.07);
153
+ }
154
+
155
+ &:hover,
156
+ &:active,
157
+ &.selected,
158
+ &[aria-selected="true"],
159
+ [open] > & {
160
+ color: $bg-color;
161
+ background-color: $text-color;
162
+ background-image: none;
163
+ border-color: $text-color;
164
+
165
+ .Counter {
166
+ color: $text-color;
167
+ background-color: $bg-color;
168
+ }
169
+ }
170
+
171
+ &:focus {
172
+ border-color: $text-color;
173
+ box-shadow: 0 0 0 0.2em rgba($text-color, 0.4);
174
+ }
175
+
176
+ &:disabled,
177
+ &.disabled,
178
+ &[aria-disabled="true"] {
179
+ color: $black-fade-30;
180
+ background-color: $bg-white;
181
+ border-color: $black-fade-15;
182
+ box-shadow: none;
183
+ }
184
+ }
@@ -0,0 +1,55 @@
1
+ // Responsive media queries
2
+
3
+ @mixin breakpoint($breakpoint) {
4
+ @if $breakpoint == "" {
5
+ @content;
6
+ } @else {
7
+ // Retrieves the value from the key
8
+ $value: map-get($breakpoints, $breakpoint);
9
+
10
+ // If the key exists in the map
11
+ @if $value != null {
12
+ // Prints a media query based on the value
13
+ @media (min-width: $value) {
14
+ @content;
15
+ }
16
+ }
17
+
18
+ // If the key doesn't exist in the map
19
+ @else {
20
+ @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
21
+ + "Please make sure it is defined in `$breakpoints` map.";
22
+ }
23
+ }
24
+ }
25
+
26
+ // Retina media query
27
+
28
+ @mixin retina-media-query {
29
+ @media only screen and (-webkit-min-device-pixel-ratio: 2),
30
+ only screen and (min--moz-device-pixel-ratio: 2),
31
+ only screen and (-moz-min-device-pixel-ratio: 2),
32
+ only screen and (-o-min-device-pixel-ratio: 2/1),
33
+ only screen and (min-device-pixel-ratio: 2),
34
+ only screen and (min-resolution: 192dpi),
35
+ only screen and (min-resolution: 2dppx) {
36
+ @content;
37
+ }
38
+ }
39
+
40
+ // Clearfix
41
+ //
42
+ // Clears floats via mixin.
43
+
44
+ @mixin clearfix {
45
+ &::before {
46
+ display: table;
47
+ content: "";
48
+ }
49
+
50
+ &::after {
51
+ display: table;
52
+ clear: both;
53
+ content: "";
54
+ }
55
+ }