diff options
Diffstat (limited to 'assets/sass/@primer')
44 files changed, 0 insertions, 3284 deletions
diff --git a/assets/sass/@primer/css/base/README.md b/assets/sass/@primer/css/base/README.md deleted file mode 100644 index 4961486..0000000 --- a/assets/sass/@primer/css/base/README.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -bundle: "base" -generated: true ---- - -# Primer CSS: `base` bundle - -## Usage - -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: - -```scss -@import "@primer/css/base/index.scss"; -``` - -## Build - -The `@primer/css` npm package includes a standalone CSS build of this module in `dist/base.css`. - -## License - -[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/) - - -[scss]: https://sass-lang.com/documentation/syntax#scss diff --git a/assets/sass/@primer/css/base/base.scss b/assets/sass/@primer/css/base/base.scss deleted file mode 100644 index 381fa89..0000000 --- a/assets/sass/@primer/css/base/base.scss +++ /dev/null @@ -1,86 +0,0 @@ -// stylelint-disable selector-max-type -* { - box-sizing: border-box; -} - -input, -select, -textarea, -button { - font-family: inherit; - font-size: inherit; - line-height: inherit; -} - -body { - font-family: $body-font; - font-size: $body-font-size; - line-height: $body-line-height; - color: $text-gray-dark; - background-color: $bg-white; -} - -a { - color: $text-blue; - text-decoration: none; - - &:hover { - text-decoration: underline; - } -} - -b, -strong { - font-weight: $font-weight-bold; -} - -// Horizontal lines -// -// TODO-MDO: Remove `.rule` from everywhere and replace with `<hr>`s -hr, -.rule { - height: 0; - // stylelint-disable-next-line primer/spacing - margin: 15px 0; - overflow: hidden; - background: transparent; - border: 0; - // stylelint-disable-next-line primer/borders - border-bottom: $border-width $border-style lighten($gray-300, 5%); - @include clearfix(); -} - -// -// Remove most spacing between table cells. -// - -table { - border-spacing: 0; - border-collapse: collapse; -} - -td, -th { - padding: 0; -} - -button { - cursor: pointer; - // Remove border radius added by Chrome macOS - border-radius: 0; -} - -// increase the selector specificity for [hidden] -// so that it always overrides utility classes (.d-block, etc.) -[hidden][hidden] { - display: none !important; -} - -details { - summary { cursor: pointer; } - - &:not([open]) { - // Set details content hidden by default for browsers that don't do this - > *:not(summary) { display: none !important; } - } -} diff --git a/assets/sass/@primer/css/base/index.scss b/assets/sass/@primer/css/base/index.scss deleted file mode 100644 index 2c7f8b9..0000000 --- a/assets/sass/@primer/css/base/index.scss +++ /dev/null @@ -1,6 +0,0 @@ -@import "../support/index.scss"; - -@import "./normalize.scss"; -@import "./base.scss"; -@import "./kbd.scss"; -@import "./typography-base.scss"; diff --git a/assets/sass/@primer/css/base/kbd.scss b/assets/sass/@primer/css/base/kbd.scss deleted file mode 100644 index 7ee4503..0000000 --- a/assets/sass/@primer/css/base/kbd.scss +++ /dev/null @@ -1,21 +0,0 @@ -// Keyboard shortcuts -// stylelint-disable selector-max-type - -kbd { - display: inline-block; - // stylelint-disable-next-line primer/spacing - padding: ($spacer-1 - 1) ($spacer-1 + 1); - font: 11px $mono-font; - // stylelint-disable-next-line primer/typography - line-height: 10px; - // stylelint-disable-next-line primer/colors - color: $gray-700; - vertical-align: middle; - background-color: $bg-gray-light; - // stylelint-disable-next-line primer/borders - border: $border-style $border-width $border-gray-dark; - border-bottom-color: $border-gray-dark; - border-radius: $border-radius; - // stylelint-disable-next-line primer/box-shadow - box-shadow: inset 0 -1px 0 $border-gray-dark; -} diff --git a/assets/sass/@primer/css/base/normalize.scss b/assets/sass/@primer/css/base/normalize.scss deleted file mode 100644 index 95931e7..0000000 --- a/assets/sass/@primer/css/base/normalize.scss +++ /dev/null @@ -1,421 +0,0 @@ -// stylelint-disable -/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */ - -/** - * 1. Change the default font family in all browsers (opinionated). - * 2. Prevent adjustments of font size after orientation changes in IE and iOS. - */ - -html { - font-family: sans-serif; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ - -webkit-text-size-adjust: 100%; /* 2 */ -} - -/** - * Remove the margin in all browsers (opinionated). - */ - -body { - margin: 0; -} - -/* HTML5 display definitions - ========================================================================== */ - -/** - * Add the correct display in IE 9-. - * 1. Add the correct display in Edge, IE, and Firefox. - * 2. Add the correct display in IE. - */ - -article, -aside, -details, /* 1 */ -figcaption, -figure, -footer, -header, -main, /* 2 */ -menu, -nav, -section { /* 1 */ - display: block; -} - -summary { - display: list-item; -} - -/** - * Add the correct display in IE 9-. - */ - -audio, -canvas, -progress, -video { - display: inline-block; -} - -/** - * Add the correct display in iOS 4-7. - */ - -audio:not([controls]) { - display: none; - height: 0; -} - -/** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. - */ - -progress { - vertical-align: baseline; -} - -/** - * Add the correct display in IE 10-. - * 1. Add the correct display in IE. - */ - -template, /* 1 */ -[hidden] { - display: none !important; -} - -/* Links - ========================================================================== */ - -/** - * Remove the gray background on active links in IE 10. - */ - -a { - background-color: transparent; /* 1 */ -} - -/** - * Remove the outline on focused links when they are also active or hovered - * in all browsers (opinionated). - */ - -a:active, -a:hover { - outline-width: 0; -} - -/* Text-level semantics - ========================================================================== */ - -/** - * 1. Remove the bottom border in Firefox 39-. - * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. - */ - -abbr[title] { - border-bottom: none; /* 1 */ - text-decoration: underline; /* 2 */ - text-decoration: underline dotted; /* 2 */ -} - -/** - * Prevent the duplicate application of `bolder` by the next rule in Safari 6. - */ - -b, -strong { - font-weight: inherit; -} - -/** - * Add the correct font weight in Chrome, Edge, and Safari. - */ - -b, -strong { - font-weight: bolder; -} - -/** - * Add the correct font style in Android 4.3-. - */ - -dfn { - font-style: italic; -} - -/** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -/** - * Add the correct background and color in IE 9-. - */ - -mark { - background-color: #ff0; - color: $text-black; -} - -/** - * Add the correct font size in all browsers. - */ - -small { - font-size: 80%; -} - -/** - * Prevent `sub` and `sup` elements from affecting the line height in - * all browsers. - */ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* Embedded content - ========================================================================== */ - -/** - * Remove the border on images inside links in IE 10-. - */ - -img { - border-style: none; -} - -/** - * Hide the overflow in IE. - */ - -svg:not(:root) { - overflow: hidden; -} - -/* Grouping content - ========================================================================== */ - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -code, -kbd, -pre, -samp { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/** - * Add the correct margin in IE 8. - */ - -figure { - margin: 1em $spacer-6; -} - -/** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. - */ - -hr { - box-sizing: content-box; /* 1 */ - height: 0; /* 1 */ - overflow: visible; /* 2 */ -} - -/* Forms - ========================================================================== */ - -/** - * 1. Change font properties to `inherit` in all browsers (opinionated). - * 2. Remove the margin in Firefox and Safari. - */ - -button, -input, -select, -textarea { - font: inherit; /* 1 */ - margin: 0; /* 2 */ -} - -/** - * Restore the font weight unset by the previous rule. - */ - -optgroup { - font-weight: $font-weight-bold; -} - -/** - * Show the overflow in IE. - * 1. Show the overflow in Edge. - */ - -button, -input { /* 1 */ - overflow: visible; -} - -/** - * Remove the inheritance of text transform in Edge, Firefox, and IE. - * 1. Remove the inheritance of text transform in Firefox. - */ - -button, -select { /* 1 */ - text-transform: none; -} - -/** - * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` - * controls in Android 4. - * 2. Correct the inability to style clickable types in iOS and Safari. - */ - -button, -html [type="button"], /* 1 */ -[type="reset"], -[type="submit"] { - -webkit-appearance: button; /* 2 */ -} - -/** - * Remove the inner border and padding in Firefox. - */ - -button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { - border-style: none; - padding: 0; -} - -/** - * Restore the focus styles unset by the previous rule. - */ - -button:-moz-focusring, -[type="button"]:-moz-focusring, -[type="reset"]:-moz-focusring, -[type="submit"]:-moz-focusring { - outline: 1px dotted ButtonText; -} - -/** - * Change the border, margin, and padding in all browsers (opinionated). - */ - -fieldset { - border: $border-width $border-style #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em $em-spacer-6; -} - -/** - * 1. Correct the text wrapping in Edge and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - * 3. Remove the padding so developers are not caught out when they zero out - * `fieldset` elements in all browsers. - */ - -legend { - box-sizing: border-box; /* 1 */ - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - padding: 0; /* 3 */ - white-space: normal; /* 1 */ -} - -/** - * Remove the default vertical scrollbar in IE. - */ - -textarea { - overflow: auto; -} - -/** - * 1. Add the correct box sizing in IE 10-. - * 2. Remove the padding in IE 10-. - */ - -[type="checkbox"], -[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Correct the cursor style of increment and decrement buttons in Chrome. - */ - -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { - height: auto; -} - -/** - * 1. Correct the odd appearance in Chrome and Safari. - * 2. Correct the outline style in Safari. - */ - -[type="search"] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ -} - -/** - * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. - */ - -[type="search"]::-webkit-search-cancel-button, -[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * Correct the text style of placeholders in Chrome, Edge, and Safari. - */ - -::-webkit-input-placeholder { - color: inherit; - opacity: 0.54; -} - -/** - * 1. Correct the inability to style clickable types in iOS and Safari. - * 2. Change font properties to `inherit` in Safari. - */ - -::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ -} diff --git a/assets/sass/@primer/css/base/typography-base.scss b/assets/sass/@primer/css/base/typography-base.scss deleted file mode 100644 index 83eb995..0000000 --- a/assets/sass/@primer/css/base/typography-base.scss +++ /dev/null @@ -1,88 +0,0 @@ -// Headings -// -------------------------------------------------- -// stylelint-disable selector-max-type -h1, -h2, -h3, -h4, -h5, -h6 { - margin-top: 0; - margin-bottom: 0; -} - -h1 { @include h1; } -h2 { @include h2; } -h3 { @include h3; } -h4 { @include h4; } -h5 { @include h5; } -h6 { @include h6; } - -// Body text -// -------------------------------------------------- - -p { - margin-top: 0; - // stylelint-disable-next-line primer/spacing - margin-bottom: 10px; -} - -small { - // stylelint-disable-next-line primer/typography - font-size: 90%; -} - -blockquote { - margin: 0; -} - -// Lists -// -------------------------------------------------- - -ul, -ol { - padding-left: 0; - margin-top: 0; - margin-bottom: 0; -} - -ol ol, -ul ol { - list-style-type: lower-roman; -} - -ul ul ol, -ul ol ol, -ol ul ol, -ol ol ol { - list-style-type: lower-alpha; -} - -dd { - margin-left: 0; -} - -// Code -// -------------------------------------------------- - -tt, -code { - font-family: $mono-font; - font-size: $font-size-small; -} - -pre { - margin-top: 0; - margin-bottom: 0; - font-family: $mono-font; - font-size: $font-size-small; -} - -// Octicons -// -------------------------------------------------- - -// Move this over here as a temporary override to the octicons source repo -// instead of updating that upstream. -.octicon { - vertical-align: text-bottom; -} diff --git a/assets/sass/@primer/css/layout/README.md b/assets/sass/@primer/css/layout/README.md deleted file mode 100644 index 3d078ce..0000000 --- a/assets/sass/@primer/css/layout/README.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -bundle: "layout" -generated: true ---- - -# Primer CSS: `layout` bundle - -## Usage - -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: - -```scss -@import "@primer/css/layout/index.scss"; -``` - -## Build - -The `@primer/css` npm package includes a standalone CSS build of this module in `dist/layout.css`. - -## License - -[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/) - - -[scss]: https://sass-lang.com/documentation/syntax#scss diff --git a/assets/sass/@primer/css/layout/container.scss b/assets/sass/@primer/css/layout/container.scss deleted file mode 100644 index 7e70a6b..0000000 --- a/assets/sass/@primer/css/layout/container.scss +++ /dev/null @@ -1,30 +0,0 @@ -// Fixed-width, centered column for site content. -// Handy container styles that match our breakpoints - -// 544px -.container-sm { - max-width: $width-sm; - margin-right: auto; - margin-left: auto; -} - -// 768px -.container-md { - max-width: $container-md; - margin-right: auto; - margin-left: auto; -} - -// 1004px - this matches the current fixed width: 980px + padding: px-3 -.container-lg { - max-width: $container-lg; - margin-right: auto; - margin-left: auto; -} - -// 1280px -.container-xl { - max-width: $container-xl; - margin-right: auto; - margin-left: auto; -} diff --git a/assets/sass/@primer/css/layout/grid-offset.scss b/assets/sass/@primer/css/layout/grid-offset.scss deleted file mode 100644 index bc2115d..0000000 --- a/assets/sass/@primer/css/layout/grid-offset.scss +++ /dev/null @@ -1,19 +0,0 @@ -// Optional offset options to work with grid.scss - -// Offset Columns - -@each $breakpoint, $variant in $responsive-variants { - @include breakpoint($breakpoint) { - .offset#{$variant}-1 { margin-left: (1 / 12 * 100%) !important; } - .offset#{$variant}-2 { margin-left: (2 / 12 * 100%) !important; } - .offset#{$variant}-3 { margin-left: (3 / 12 * 100%) !important; } - .offset#{$variant}-4 { margin-left: (4 / 12 * 100%) !important; } - .offset#{$variant}-5 { margin-left: (5 / 12 * 100%) !important; } - .offset#{$variant}-6 { margin-left: (6 / 12 * 100%) !important; } - .offset#{$variant}-7 { margin-left: (7 / 12 * 100%) !important; } - .offset#{$variant}-8 { margin-left: (8 / 12 * 100%) !important; } - .offset#{$variant}-9 { margin-left: (9 / 12 * 100%) !important; } - .offset#{$variant}-10 { margin-left: (10 / 12 * 100%) !important; } - .offset#{$variant}-11 { margin-left: (11 / 12 * 100%) !important; } - } -} diff --git a/assets/sass/@primer/css/layout/grid.scss b/assets/sass/@primer/css/layout/grid.scss deleted file mode 100644 index 5126c6b..0000000 --- a/assets/sass/@primer/css/layout/grid.scss +++ /dev/null @@ -1,64 +0,0 @@ -// GRID - -// Columns -.col-1 { width: (1 / 12 * 100%); } -.col-2 { width: (2 / 12 * 100%); } -.col-3 { width: (3 / 12 * 100%); } -.col-4 { width: (4 / 12 * 100%); } -.col-5 { width: (5 / 12 * 100%); } -.col-6 { width: (6 / 12 * 100%); } -.col-7 { width: (7 / 12 * 100%); } -.col-8 { width: (8 / 12 * 100%); } -.col-9 { width: (9 / 12 * 100%); } -.col-10 { width: (10 / 12 * 100%); } -.col-11 { width: (11 / 12 * 100%); } -.col-12 { width: 100%; } - -@each $breakpoint in map-keys($breakpoints) { - @include breakpoint($breakpoint) { - .col-#{$breakpoint}-1 { width: ( 1 / 12 * 100%); } - .col-#{$breakpoint}-2 { width: ( 2 / 12 * 100%); } - .col-#{$breakpoint}-3 { width: ( 3 / 12 * 100%); } - .col-#{$breakpoint}-4 { width: ( 4 / 12 * 100%); } - .col-#{$breakpoint}-5 { width: ( 5 / 12 * 100%); } - .col-#{$breakpoint}-6 { width: ( 6 / 12 * 100%); } - .col-#{$breakpoint}-7 { width: ( 7 / 12 * 100%); } - .col-#{$breakpoint}-8 { width: ( 8 / 12 * 100%); } - .col-#{$breakpoint}-9 { width: ( 9 / 12 * 100%); } - .col-#{$breakpoint}-10 { width: ( 10 / 12 * 100%); } - .col-#{$breakpoint}-11 { width: ( 11 / 12 * 100%); } - .col-#{$breakpoint}-12 { width: 100%; } - } -} - -// Gutters -// Apply padding and a negative margin to the outside of the container -@mixin gutters ($gutter-width: $spacer-3) { - margin-right: -$gutter-width; - margin-left: -$gutter-width; - - > [class*="col-"] { - padding-right: $gutter-width !important; - padding-left: $gutter-width !important; - } -} - -.gutter { - @include gutters($spacer-3); -} - -.gutter-condensed { - @include gutters($spacer-2); -} - -.gutter-spacious { - @include gutters($spacer-4); -} - -@each $breakpoint in map-keys($breakpoints) { - @include breakpoint($breakpoint) { - .gutter-#{$breakpoint} { @include gutters($spacer-3); } - .gutter-#{$breakpoint}-condensed { @include gutters($spacer-2); } - .gutter-#{$breakpoint}-spacious { @include gutters($spacer-4); } - } -} diff --git a/assets/sass/@primer/css/layout/index.scss b/assets/sass/@primer/css/layout/index.scss deleted file mode 100644 index 5d1aa33..0000000 --- a/assets/sass/@primer/css/layout/index.scss +++ /dev/null @@ -1,4 +0,0 @@ -@import "../support/index.scss"; -@import "./container.scss"; -@import "./grid.scss"; -@import "./grid-offset.scss"; diff --git a/assets/sass/@primer/css/markdown/README.md b/assets/sass/@primer/css/markdown/README.md deleted file mode 100644 index 6097f4b..0000000 --- a/assets/sass/@primer/css/markdown/README.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -bundle: "markdown" -generated: true ---- - -# Primer CSS: `markdown` bundle - -## Usage - -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: - -```scss -@import "@primer/css/markdown/index.scss"; -``` - -## Build - -The `@primer/css` npm package includes a standalone CSS build of this module in `dist/markdown.css`. - -## License - -[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/) - - -[scss]: https://sass-lang.com/documentation/syntax#scss diff --git a/assets/sass/@primer/css/markdown/blob-csv.scss b/assets/sass/@primer/css/markdown/blob-csv.scss deleted file mode 100644 index e97e447..0000000 --- a/assets/sass/@primer/css/markdown/blob-csv.scss +++ /dev/null @@ -1,29 +0,0 @@ -// stylelint-disable selector-max-type -.markdown-body .csv-data { - td, - th { - // stylelint-disable-next-line primer/spacing - padding: 5px; - overflow: hidden; - font-size: $font-size-small; - line-height: $lh-condensed-ultra; - text-align: left; - white-space: nowrap; - } - - .blob-num { - // stylelint-disable-next-line primer/spacing - padding: 10px $spacer-2 9px; - text-align: right; - background: $bg-white; - border: 0; - } - - tr { border-top: 0; } - - th { - font-weight: $font-weight-bold; - background: $bg-gray; - border-top: 0; - } -} diff --git a/assets/sass/@primer/css/markdown/code.scss b/assets/sass/@primer/css/markdown/code.scss deleted file mode 100644 index fbd2d16..0000000 --- a/assets/sass/@primer/css/markdown/code.scss +++ /dev/null @@ -1,69 +0,0 @@ -// stylelint-disable selector-max-type -.markdown-body { - // Inline code snippets - code, - tt { - // stylelint-disable-next-line primer/spacing - padding: 0.2em 0.4em; - margin: 0; - // stylelint-disable-next-line primer/typography - font-size: 85%; - // stylelint-disable-next-line primer/colors - background-color: rgba($black, 0.05); - border-radius: $border-radius; - - br { display: none; } - } - - del code { text-decoration: inherit; } - - pre { - word-wrap: normal; - - // Code tags within code blocks (<pre>s) - > code { - padding: 0; - margin: 0; - // stylelint-disable-next-line primer/typography - font-size: 100%; - word-break: normal; - white-space: pre; - background: transparent; - border: 0; - } - } - - .highlight { - margin-bottom: $spacer-3; - - pre { - margin-bottom: 0; - word-break: normal; - } - } - - .highlight pre, - pre { - padding: $spacer-3; - overflow: auto; - // stylelint-disable-next-line primer/typography - font-size: 85%; - // stylelint-disable-next-line primer/typography - line-height: 1.45; - background-color: $bg-gray; - border-radius: $border-radius; - } - - pre code, - pre tt { - display: inline; - max-width: auto; - padding: 0; - margin: 0; - overflow: visible; - line-height: inherit; - word-wrap: normal; - background-color: transparent; - border: 0; - } -} diff --git a/assets/sass/@primer/css/markdown/headings.scss b/assets/sass/@primer/css/markdown/headings.scss deleted file mode 100644 index 26347bb..0000000 --- a/assets/sass/@primer/css/markdown/headings.scss +++ /dev/null @@ -1,72 +0,0 @@ -// Needs refactoring -// stylelint-disable selector-max-compound-selectors, selector-max-specificity -// stylelint-disable selector-max-type -.markdown-body { - // Headings - h1, - h2, - h3, - h4, - h5, - h6 { - margin-top: $spacer-4; - margin-bottom: $spacer-3; - font-weight: $font-weight-bold; - line-height: $lh-condensed; - - .octicon-link { - color: $text-black; - vertical-align: middle; - visibility: hidden; - } - - &:hover .anchor { - text-decoration: none; - - .octicon-link { - visibility: visible; - } - } - - tt, - code { - font-size: inherit; - } - } - - h1 { - // stylelint-disable-next-line primer/spacing - padding-bottom: 0.3em; - // stylelint-disable-next-line primer/typography - font-size: 2em; - border-bottom: $border-width $border-style $border-gray-light; - } - - h2 { - // stylelint-disable-next-line primer/spacing - padding-bottom: 0.3em; - // stylelint-disable-next-line primer/typography - font-size: 1.5em; - border-bottom: $border-width $border-style $border-gray-light; - } - - h3 { - // stylelint-disable-next-line primer/typography - font-size: 1.25em; - } - - h4 { - font-size: 1em; - } - - h5 { - // stylelint-disable-next-line primer/typography - font-size: 0.875em; - } - - h6 { - // stylelint-disable-next-line primer/typography - font-size: 0.85em; - color: $text-gray-light; - } -} diff --git a/assets/sass/@primer/css/markdown/images.scss b/assets/sass/@primer/css/markdown/images.scss deleted file mode 100644 index caea502..0000000 --- a/assets/sass/@primer/css/markdown/images.scss +++ /dev/null @@ -1,131 +0,0 @@ -// Need to target base styles -// stylelint-disable selector-max-compound-selectors, selector-no-qualifying-type -// stylelint-disable selector-max-type -.markdown-body { - // Images & Stuff - img { - max-width: 100%; - // because we put padding on the images to hide header lines, and some people - // specify the width of their images in their markdown. - box-sizing: content-box; - background-color: $bg-white; - - &[align=right] { - // stylelint-disable-next-line primer/spacing - padding-left: 20px; - } - - &[align=left] { - // stylelint-disable-next-line primer/spacing - padding-right: 20px; - } - } - - .emoji { - max-width: none; - vertical-align: text-top; - // Override `<img>` styles so Emjois don't clash with zebra striping in our tables - background-color: transparent; - } - - // Gollum Image Tags - - // Framed - span.frame { - display: block; - overflow: hidden; - - > span { - display: block; - float: left; - width: auto; - // stylelint-disable-next-line primer/spacing - padding: 7px; - // stylelint-disable-next-line primer/spacing - margin: 13px 0 0; - overflow: hidden; - // stylelint-disable-next-line primer/borders - border: $border-width $border-style lighten($gray-300, 5%); - } - - span img { - display: block; - float: left; - } - - span span { - display: block; - // stylelint-disable-next-line primer/spacing - padding: 5px 0 0; - clear: both; - color: $text-gray-dark; - } - } - - span.align-center { - display: block; - overflow: hidden; - clear: both; - - > span { - display: block; - // stylelint-disable-next-line primer/spacing - margin: 13px auto 0; - overflow: hidden; - text-align: center; - } - - span img { - margin: 0 auto; - text-align: center; - } - } - - span.align-right { - display: block; - overflow: hidden; - clear: both; - - > span { - display: block; - // stylelint-disable-next-line primer/spacing - margin: 13px 0 0; - overflow: hidden; - text-align: right; - } - - span img { - margin: 0; - text-align: right; - } - } - - span.float-left { - display: block; - float: left; - // stylelint-disable-next-line primer/spacing - margin-right: 13px; - overflow: hidden; - - span { - // stylelint-disable-next-line primer/spacing - margin: 13px 0 0; - } - } - - span.float-right { - display: block; - float: right; - // stylelint-disable-next-line primer/spacing - margin-left: 13px; - overflow: hidden; - - > span { - display: block; - // stylelint-disable-next-line primer/spacing - margin: 13px auto 0; - overflow: hidden; - text-align: right; - } - } -} diff --git a/assets/sass/@primer/css/markdown/index.scss b/assets/sass/@primer/css/markdown/index.scss deleted file mode 100644 index b2e8d3d..0000000 --- a/assets/sass/@primer/css/markdown/index.scss +++ /dev/null @@ -1,8 +0,0 @@ -@import "../support/index.scss"; -@import "./markdown-body.scss"; -@import "./headings.scss"; -@import "./lists.scss"; -@import "./tables.scss"; -@import "./images.scss"; -@import "./code.scss"; -@import "./blob-csv.scss"; diff --git a/assets/sass/@primer/css/markdown/lists.scss b/assets/sass/@primer/css/markdown/lists.scss deleted file mode 100644 index b680faf..0000000 --- a/assets/sass/@primer/css/markdown/lists.scss +++ /dev/null @@ -1,77 +0,0 @@ -// Base styles -// stylelint-disable selector-no-qualifying-type -// stylelint-disable selector-max-type -.markdown-body { - - // Lists, Blockquotes & Such - ul, - ol { - // stylelint-disable-next-line primer/spacing - padding-left: 2em; - - &.no-list { - padding: 0; - list-style-type: none; - } - } - - // Did someone complain about list spacing? Encourage them - // to create the spacing with their markdown formatting. - // List behavior should be controled by the markup, not the css. - // - // For lists with padding between items, use blank - // lines between items. This will generate paragraphs with - // padding to space things out. - // - // - item - // - // - item - // - // - item - // - // For list without padding, don't use blank lines. - // - // - item - // - item - // - item - // - // Modifying the css to emulate these behaviors merely brakes - // one case in the process of solving another. Don't change - // this unless it's really really a bug. - ul ul, - ul ol, - ol ol, - ol ul { - margin-top: 0; - margin-bottom: 0; - } - - li { - word-wrap: break-all; - } - - li > p { - margin-top: $spacer-3; - } - - li + li { - margin-top: $em-spacer-3; - } - - dl { - padding: 0; - - dt { - padding: 0; - margin-top: $spacer-3; - font-size: 1em; - font-style: italic; - font-weight: $font-weight-bold; - } - - dd { - padding: 0 $spacer-3; - margin-bottom: $spacer-3; - } - } -} diff --git a/assets/sass/@primer/css/markdown/markdown-body.scss b/assets/sass/@primer/css/markdown/markdown-body.scss deleted file mode 100644 index 6581f19..0000000 --- a/assets/sass/@primer/css/markdown/markdown-body.scss +++ /dev/null @@ -1,99 +0,0 @@ -// All of our block level items should have the same margin -// stylelint-disable selector-max-type - -// This is styling for generic markdownized text. Anything you put in a -// container with .markdown-body on it should render generally well. It also -// includes some GitHub Flavored Markdown specific styling (like @mentions) -.markdown-body { - font-family: $body-font; - font-size: $h4-size; - line-height: $body-line-height; - word-wrap: break-word; - - @import "../base/kbd.scss"; // adds support for keyboard shortcuts - - // Clearfix on the markdown body - &::before { - display: table; - content: ""; - } - - &::after { - display: table; - clear: both; - content: ""; - } - - > *:first-child { - margin-top: 0 !important; - } - - > *:last-child { - margin-bottom: 0 !important; - } - - // Anchors like <a name="examples">. These sometimes end up wrapped around - // text when users mistakenly forget to close the tag or use self-closing tag - // syntax. We don't want them to appear like links. - // FIXME: a:not(:link):not(:visited) would be a little clearer here (and - // possibly faster to match), but it breaks styling of <a href> elements due - // to https://bugs.webkit.org/show_bug.cgi?id=142737. - a:not([href]) { - color: inherit; - text-decoration: none; - } - - // Link Colors - .absent { - color: $text-red; - } - - .anchor { - float: left; - padding-right: $spacer-1; - // stylelint-disable-next-line primer/spacing - margin-left: -20px; - line-height: $lh-condensed-ultra; - - &:focus { - outline: none; - } - } - - p, - blockquote, - ul, - ol, - dl, - table, - pre, - details { - margin-top: 0; - margin-bottom: $spacer-3; - } - - hr { - height: $em-spacer-3; - padding: 0; - margin: $spacer-4 0; - // stylelint-disable-next-line primer/colors - background-color: $gray-200; - border: 0; - } - - blockquote { - // stylelint-disable-next-line primer/spacing - padding: 0 1em; - color: $text-gray-light; - // stylelint-disable-next-line primer/borders - border-left: 0.25em $border-style lighten($gray-300, 5%); - - > :first-child { - margin-top: 0; - } - - > :last-child { - margin-bottom: 0; - } - } -} diff --git a/assets/sass/@primer/css/markdown/tables.scss b/assets/sass/@primer/css/markdown/tables.scss deleted file mode 100644 index 9d73d17..0000000 --- a/assets/sass/@primer/css/markdown/tables.scss +++ /dev/null @@ -1,36 +0,0 @@ -// Needs refactoring -// stylelint-disable selector-max-type -.markdown-body { - // Tables - table { - display: block; - width: 100%; - overflow: auto; - - th { - font-weight: $font-weight-bold; - } - - th, - td { - // stylelint-disable-next-line primer/spacing - padding: 6px 13px; - // stylelint-disable-next-line primer/borders - border: $border-width $border-style lighten($gray-300, 5%); - } - - tr { - background-color: $bg-white; - // stylelint-disable-next-line primer/borders - border-top: $border-width $border-style darken($gray-300, 4%); - - &:nth-child(2n) { - background-color: $bg-gray; - } - } - - img { - background-color: transparent; - } - } -} diff --git a/assets/sass/@primer/css/support/README.md b/assets/sass/@primer/css/support/README.md deleted file mode 100644 index 7fa2b21..0000000 --- a/assets/sass/@primer/css/support/README.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -bundle: "support" -generated: true ---- - -# Primer CSS: `support` bundle - -## Usage - -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: - -```scss -@import "@primer/css/support/index.scss"; -``` - -## Build - -The `@primer/css` npm package includes a standalone CSS build of this module in `dist/support.css`. - -## License - -[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/) - - -[scss]: https://sass-lang.com/documentation/syntax#scss diff --git a/assets/sass/@primer/css/support/index.scss b/assets/sass/@primer/css/support/index.scss deleted file mode 100644 index 93f9449..0000000 --- a/assets/sass/@primer/css/support/index.scss +++ /dev/null @@ -1,11 +0,0 @@ -// variables -@import "./variables/typography.scss"; -@import "./variables/colors.scss"; -@import "./variables/layout.scss"; -@import "./variables/misc.scss"; - -// mixins -@import "./mixins/typography.scss"; -@import "./mixins/layout.scss"; -@import "./mixins/buttons.scss"; -@import "./mixins/misc.scss"; diff --git a/assets/sass/@primer/css/support/mixins/buttons.scss b/assets/sass/@primer/css/support/mixins/buttons.scss deleted file mode 100644 index 4b6cbb3..0000000 --- a/assets/sass/@primer/css/support/mixins/buttons.scss +++ /dev/null @@ -1,167 +0,0 @@ -// Button color generator for primary and themed buttons - -// New button hotness -@mixin btn-solid($color, $bg, $bg2) { - color: $color; - background-color: $bg2; - background-image: linear-gradient(-180deg, $bg 0%, $bg2 90%); - - @if $bg == $gray-000 { - &:focus, - &.focus { - box-shadow: $btn-input-focus-shadow; - } - - &:hover, - &.hover { - background-color: darken($bg2, 3%); - background-image: linear-gradient(-180deg, darken($bg, 3%) 0%, darken($bg2, 3%) 90%); - background-position: 0 -$em-spacer-5; - border-color: rgba($black, 0.35); - } - - &:active, - &.selected, - &[aria-selected=true], - [open] > & { - background-color: darken(desaturate($bg, 10%), 6%); - background-image: none; - border-color: rgba($black, 0.35); // repeat to avoid shift on click-drag off of button - box-shadow: $btn-active-shadow; - } - - &:disabled, - &.disabled, - &[aria-disabled=true] { - color: rgba($color, 0.4); - background-color: $bg2; - background-image: none; - border-color: $border-color-button; - box-shadow: none; - } - - } - @else { - &:focus, - &.focus { - box-shadow: 0 0 0 0.2em rgba($bg, 0.4); - } - - &:hover, - &.hover { - background-color: darken($bg2, 2%); - background-image: linear-gradient(-180deg, darken($bg, 2%) 0%, darken($bg2, 2%) 90%); - background-position: 0 -$em-spacer-5; - border-color: $black-fade-50; - } - - &:active, - &.selected, - &[aria-selected=true], - [open] > & { - background-color: darken(mix($bg, $bg2, 50%), 7%); - background-image: none; - border-color: $black-fade-50; // repeat to avoid shift on click-drag off of button - box-shadow: $btn-active-shadow; - } - - &:disabled, - &.disabled, - &[aria-disabled=true] { - color: rgba($color, 0.75); - background-color: mix($bg2, $white, 50%); - background-image: none; - border-color: $border-color-button; - box-shadow: none; - } - - .Counter { - color: darken($bg, 8%); - background-color: $white; - } - } -} - -// Inverse button hover style -@mixin btn-inverse($color, $bg, $bg2) { - color: $color; - background-color: $bg; - background-image: linear-gradient(-180deg, $bg 0%, $bg2 90%); - - &:focus { - box-shadow: 0 0 0 0.2em rgba($color, 0.4); - } - - &:hover { - color: $text-white; - background-color: $color; - background-image: linear-gradient(-180deg, lighten($color, 10%) 0%, $color 90%); - border-color: $black-fade-50; - - .Counter { - color: $text-white; - } - } - - &:active, - &.selected, - &[aria-selected=true], - [open] > & { - color: $text-white; - background-color: darken($color, 5%); - background-image: none; - border-color: $black-fade-50; - box-shadow: $btn-active-shadow; - } - - &:disabled, - &.disabled, - &[aria-disabled=true] { - color: rgba($color, 0.4); - background-color: $bg2; - background-image: none; - border-color: $border-color-button; - box-shadow: none; - } -} - -// Outline color generator for btn-outline to make the hover state inverse the text and bg colors. -@mixin btn-outline($text-color: $text-blue, $bg-color: $bg-white) { - color: $text-color; - background-color: $bg-color; - background-image: none; - - .Counter { - background-color: rgba($black, 0.07); - } - - &:hover, - &:active, - &.selected, - &[aria-selected=true], - [open] > & { - color: $bg-color; - background-color: $text-color; - background-image: none; - border-color: $text-color; - - .Counter { - color: $text-color; - background-color: $bg-color; - } - } - - &:focus { - border-color: $text-color; - box-shadow: 0 0 0 0.2em rgba($text-color, 0.4); - } - - &:disabled, - &.disabled, - &[aria-disabled=true] { - color: $black-fade-30; - background-color: $bg-white; - border-color: $black-fade-15; - box-shadow: none; - } -} diff --git a/assets/sass/@primer/css/support/mixins/layout.scss b/assets/sass/@primer/css/support/mixins/layout.scss deleted file mode 100644 index a6d30cf..0000000 --- a/assets/sass/@primer/css/support/mixins/layout.scss +++ /dev/null @@ -1,58 +0,0 @@ -// Responsive media queries - -@mixin breakpoint($breakpoint) { - @if $breakpoint == "" { - @content; - } - - @else { - // Retrieves the value from the key - $value: map-get($breakpoints, $breakpoint); - - // If the key exists in the map - @if $value != null { - // Prints a media query based on the value - @media (min-width: $value) { - @content; - } - } - - // If the key doesn't exist in the map - @else { - @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. " - + "Please make sure it is defined in `$breakpoints` map."; - } - } -} - -// Retina media query - -@mixin retina-media-query { - @media - only screen and (-webkit-min-device-pixel-ratio: 2), - only screen and (min--moz-device-pixel-ratio: 2), - only screen and (-moz-min-device-pixel-ratio: 2), - only screen and (-o-min-device-pixel-ratio: 2/1), - only screen and (min-device-pixel-ratio: 2), - only screen and (min-resolution: 192dpi), - only screen and (min-resolution: 2dppx) { - @content; - } -} - -// Clearfix -// -// Clears floats via mixin. - -@mixin clearfix { - &::before { - display: table; - content: ""; - } - - &::after { - display: table; - clear: both; - content: ""; - } -} diff --git a/assets/sass/@primer/css/support/mixins/misc.scss b/assets/sass/@primer/css/support/mixins/misc.scss deleted file mode 100644 index ebdd32d..0000000 --- a/assets/sass/@primer/css/support/mixins/misc.scss +++ /dev/null @@ -1,29 +0,0 @@ -// Generate a two-color caret for any element. -@mixin double-caret($foreground: $text-white, $background: lighten($gray-300, 5%)) { - &::after, - &::before { - position: absolute; - top: 11px; - right: 100%; - left: -16px; - display: block; - width: 0; - height: 0; - pointer-events: none; - content: " "; - border-color: transparent; - border-style: solid solid outset; - } - - &::after { - margin-top: 1px; - margin-left: 2px; - border-width: 7px; - border-right-color: $foreground; - } - - &::before { - border-width: 8px; - border-right-color: $background; - } -} diff --git a/assets/sass/@primer/css/support/mixins/typography.scss b/assets/sass/@primer/css/support/mixins/typography.scss deleted file mode 100644 index 23ec0e3..0000000 --- a/assets/sass/@primer/css/support/mixins/typography.scss +++ /dev/null @@ -1,84 +0,0 @@ -// Text hiding for image based text replacement. -// Higher performance than -9999px because it only renders -// the size of the actual text, not a full 9999px box. -@mixin hide-text() { - overflow: hidden; - text-indent: 100%; - white-space: nowrap; -} - -// Heading mixins for use within components -// These match heading utilities in utilities/typography -@mixin h1 { - font-size: $h1-size; - font-weight: $font-weight-bold; -} - -@mixin h2 { - font-size: $h2-size; - font-weight: $font-weight-bold; -} - -@mixin h3 { - font-size: $h3-size; - font-weight: $font-weight-bold; -} - -@mixin h4 { - font-size: $h4-size; - font-weight: $font-weight-bold; -} - -@mixin h5 { - font-size: $h5-size; - font-weight: $font-weight-bold; -} - -@mixin h6 { - font-size: $h6-size; - font-weight: $font-weight-bold; -} - -// Responsive heading mixins -// There are no responsive mixins for h4-h6 because they are small -// and don't need to be smaller on mobile. -@mixin f1-responsive { - font-size: $h1-size-mobile; - - // 32px on desktop - @include breakpoint(md) { font-size: $h1-size; } - -} - -@mixin f2-responsive { - font-size: $h2-size-mobile; - - // 24px on desktop - @include breakpoint(md) { font-size: $h2-size; } -} - -@mixin f3-responsive { - font-size: $h3-size-mobile; - - // 20px on desktop - @include breakpoint(md) { font-size: $h3-size; } - -} - -// These use the mixins from above for responsive heading sizes. -// The following mixins can be used where it's convenient or necessary to -// couple the responsive font-size with the font-weight. -@mixin h1-responsive { - @include f1-responsive; - font-weight: $font-weight-bold; -} - -@mixin h2-responsive { - @include f2-responsive; - font-weight: $font-weight-bold; -} - -@mixin h3-responsive { - @include f3-responsive; - font-weight: $font-weight-bold; -} diff --git a/assets/sass/@primer/css/support/variables/color-system.scss b/assets/sass/@primer/css/support/variables/color-system.scss deleted file mode 100644 index febc58b..0000000 --- a/assets/sass/@primer/css/support/variables/color-system.scss +++ /dev/null @@ -1,243 +0,0 @@ -// Black based on same hue as $gray-900 -$black: #1b1f23 !default; -$white: #fff !default; - -// -// -// -------- Grays -------- -$gray-000: #fafbfc !default; -$gray-100: #f6f8fa !default; -$gray-200: #e1e4e8 !default; -$gray-300: #d1d5da !default; -$gray-400: #959da5 !default; -$gray-500: #6a737d !default; -$gray-600: #586069 !default; -$gray-700: #444d56 !default; -$gray-800: #2f363d !default; -$gray-900: #24292e !default; // body font color - -// -------- Blue -------- -$blue-000: #f1f8ff !default; -$blue-100: #dbedff !default; -$blue-200: #c8e1ff !default; -$blue-300: #79b8ff !default; -$blue-400: #2188ff !default; -$blue-500: #0366d6 !default; // Default: Passes AA with #fff -$blue-600: #005cc5 !default; -$blue-700: #044289 !default; -$blue-800: #032f62 !default; -$blue-900: #05264c !default; // Passes with 1/2/300 blues - -// -------- Green -------- -$green-000: #f0fff4 !default; -$green-100: #dcffe4 !default; -$green-200: #bef5cb !default; -$green-300: #85e89d !default; -$green-400: #34d058 !default; -$green-500: #28a745 !default; // Default. passes AA Large -$green-600: #22863a !default; // Text green, passes AA on #fff -$green-700: #176f2c !default; -$green-800: #165c26 !default; -$green-900: #144620 !default; - -// -------- Yellow -------- -$yellow-000: #fffdef !default; -$yellow-100: #fffbdd !default; -$yellow-200: #fff5b1 !default; -$yellow-300: #ffea7f !default; -$yellow-400: #ffdf5d !default; -$yellow-500: #ffd33d !default; -$yellow-600: #f9c513 !default; -$yellow-700: #dbab09 !default; -$yellow-800: #b08800 !default; -$yellow-900: #735c0f !default; - -// -------- Orange -------- -$orange-000: #fff8f2 !default; -$orange-100: #ffebda !default; -$orange-200: #ffd1ac !default; -$orange-300: #ffab70 !default; -$orange-400: #fb8532 !default; -$orange-500: #f66a0a !default; // Default. passes AA Large with #fff -$orange-600: #e36209 !default; -$orange-700: #d15704 !default; -$orange-800: #c24e00 !default; -$orange-900: #a04100 !default; - -// -------- Red -------- -$red-000: #ffeef0 !default; -$red-100: #ffdce0 !default; -$red-200: #fdaeb7 !default; -$red-300: #f97583 !default; -$red-400: #ea4a5a !default; -$red-500: #d73a49 !default; // Default. passes AA -$red-600: #cb2431 !default; -$red-700: #b31d28 !default; -$red-800: #9e1c23 !default; -$red-900: #86181d !default; - -// -------- Purple -------- -$purple-000: #f5f0ff !default; -$purple-100: #e6dcfd !default; -$purple-200: #d1bcf9 !default; -$purple-300: #b392f0 !default; -$purple-400: #8a63d2 !default; -$purple-500: #6f42c1 !default; // passes AA with #fff -$purple-600: #5a32a3 !default; -$purple-700: #4c2889 !default; -$purple-800: #3a1d6e !default; -$purple-900: #29134e !default; - -// -------- Pink -------- -$pink-000: #ffeef8 !default; -$pink-100: #fedbf0 !default; -$pink-200: #f9b3dd !default; -$pink-300: #f692ce !default; -$pink-400: #ec6cb9 !default; -$pink-500: #ea4aaa !default; -$pink-600: #d03592 !default; -$pink-700: #b93a86 !default; -$pink-800: #99306f !default; -$pink-900: #6d224f !default; - -// -------- Fades -------- -$black-fade-15: rgba($black, 0.15) !default; -$black-fade-30: rgba($black, 0.3) !default; -$black-fade-50: rgba($black, 0.5) !default; -$black-fade-70: rgba($black, 0.7) !default; -$black-fade-85: rgba($black, 0.85) !default; - -$white-fade-15: rgba($white, 0.15) !default; -$white-fade-30: rgba($white, 0.3) !default; -$white-fade-50: rgba($white, 0.5) !default; -$white-fade-70: rgba($white, 0.7) !default; -$white-fade-85: rgba($white, 0.85) !default; - -// -------- Color defaults -------- -$red: $red-500 !default; -$purple: $purple-500 !default; -$blue: $blue-500 !default; -$green: $green-500 !default; -$yellow: $yellow-500 !default; -$orange: $orange-500 !default; - -$gray-dark: $gray-900 !default; -$gray-light: $gray-400 !default; -$gray: $gray-500 !default; - -// -------- Color gradient maps -------- - -$grays: ( - 0: $gray-000, - 1: $gray-100, - 2: $gray-200, - 3: $gray-300, - 4: $gray-400, - 5: $gray-500, - 6: $gray-600, - 7: $gray-700, - 8: $gray-800, - 9: $gray-900, -) !default; - -$blues: ( - 0: $blue-000, - 1: $blue-100, - 2: $blue-200, - 3: $blue-300, - 4: $blue-400, - 5: $blue-500, - 6: $blue-600, - 7: $blue-700, - 8: $blue-800, - 9: $blue-900, -) !default; - -$greens: ( - 0: $green-000, - 1: $green-100, - 2: $green-200, - 3: $green-300, - 4: $green-400, - 5: $green-500, - 6: $green-600, - 7: $green-700, - 8: $green-800, - 9: $green-900, -) !default; - -$yellows: ( - 0: $yellow-000, - 1: $yellow-100, - 2: $yellow-200, - 3: $yellow-300, - 4: $yellow-400, - 5: $yellow-500, - 6: $yellow-600, - 7: $yellow-700, - 8: $yellow-800, - 9: $yellow-900, -) !default; - -$oranges: ( - 0: $orange-000, - 1: $orange-100, - 2: $orange-200, - 3: $orange-300, - 4: $orange-400, - 5: $orange-500, - 6: $orange-600, - 7: $orange-700, - 8: $orange-800, - 9: $orange-900, -) !default; - -$reds: ( - 0: $red-000, - 1: $red-100, - 2: $red-200, - 3: $red-300, - 4: $red-400, - 5: $red-500, - 6: $red-600, - 7: $red-700, - 8: $red-800, - 9: $red-900, -) !default; - -$purples: ( - 0: $purple-000, - 1: $purple-100, - 2: $purple-200, - 3: $purple-300, - 4: $purple-400, - 5: $purple-500, - 6: $purple-600, - 7: $purple-700, - 8: $purple-800, - 9: $purple-900, -) !default; - -$pinks: ( - 0: $pink-000, - 1: $pink-100, - 2: $pink-200, - 3: $pink-300, - 4: $pink-400, - 5: $pink-500, - 6: $pink-600, - 7: $pink-700, - 8: $pink-800, - 9: $pink-900, -) !default; - -$hue-maps: ( - "gray": $grays, - "blue": $blues, - "green": $greens, - "yellow": $yellows, - "orange": $oranges, - "red": $reds, - "purple": $purples, - "pink": $pinks, -) !default; diff --git a/assets/sass/@primer/css/support/variables/colors.scss b/assets/sass/@primer/css/support/variables/colors.scss deleted file mode 100644 index ffbf018..0000000 --- a/assets/sass/@primer/css/support/variables/colors.scss +++ /dev/null @@ -1,63 +0,0 @@ -@import "color-system.scss"; -// Color variables - -// Border colors -$border-white: $white !default; -$border-black-fade: $black-fade-15 !default; -$border-white-fade: $white-fade-15 !default; -$border-gray-dark: $gray-300 !default; -$border-gray-darker: $gray-700 !default; -$border-gray-light: lighten($gray-200, 3%) !default; -$border-gray: $gray-200 !default; -$border-blue: $blue-500 !default; -$border-blue-light: $blue-200 !default; -$border-green: $green-400 !default; -$border-green-light: desaturate($green-300, 40%) !default; -$border-purple: $purple !default; -$border-red: $red !default; -$border-red-light: desaturate($red-300, 60%) !default; -$border-yellow: desaturate($yellow-300, 60%) !default; - -// Buttons have a slightly more opaque border than $border-black-fade (15% alpha) -$border-color-button: rgba($black, 0.2) !default; - -// Background colors -$bg-white: $white !default; -$bg-black: $black !default; -$bg-black-fade: $black-fade-50 !default; -$bg-blue-light: $blue-000 !default; -$bg-blue: $blue-500 !default; -$bg-gray-dark: $gray-900 !default; -$bg-gray-light: $gray-000 !default; -$bg-gray: $gray-100 !default; -$bg-green: $green-500 !default; -$bg-green-light: $green-100 !default; -$bg-orange: $orange-700 !default; -$bg-purple: $purple-500 !default; -$bg-purple-light: $purple-000 !default; -$bg-pink: $pink-500 !default; -$bg-red: $red-500 !default; -$bg-red-light: $red-100 !default; -$bg-yellow: $yellow-500 !default; -$bg-yellow-light: $yellow-200 !default; -$bg-yellow-dark: $yellow-700 !default; - -// diffstat background colors -$bg-diffstat-added: darken($green-400, 5%) !default; -$bg-diffstat-deleted: $red-600 !default; -$bg-diffstat-neutral: $gray-300 !default; - -// Text colors -$text-black: $black !default; -$text-white: $white !default; -$text-blue: $blue-500 !default; -$text-gray-dark: $gray-900 !default; -$text-gray-light: $gray-500 !default; -$text-gray: $gray-600 !default; -$text-green: $green-500 !default; -$text-orange: $orange-900 !default; -$text-orange-light: $orange-600 !default; -$text-purple: $purple !default; -$text-pink: $pink-500 !default; -$text-red: $red-600 !default; -$text-yellow: $yellow-800 !default; diff --git a/assets/sass/@primer/css/support/variables/layout.scss b/assets/sass/@primer/css/support/variables/layout.scss deleted file mode 100644 index cec508c..0000000 --- a/assets/sass/@primer/css/support/variables/layout.scss +++ /dev/null @@ -1,129 +0,0 @@ -// Layout variables - -// these are values for the display CSS property -$display-values: ( - block, - flex, - inline, - inline-block, - inline-flex, - none, - table, - table-cell -) !default; - -// maps edges to respective corners for border-radius -$edges: ( - top: (top-left, top-right), - right: (top-right, bottom-right), - bottom: (bottom-right, bottom-left), - left: (bottom-left, top-left) -) !default; - -// These are our margin and padding utility spacers. The default step size we -// use is 8px. This gives us a key of: -// 0 => 0px -// 1 => 4px -// 2 => 8px -// 3 => 16px -// 4 => 24px -// 5 => 32px -// 6 => 40px -$spacer: 8px !default; - -// Our spacing scale -$spacer-0: 0 !default; // 0 -$spacer-1: round($spacer / 2) !default; // 4px -$spacer-2: $spacer !default; // 8px -$spacer-3: $spacer * 2 !default; // 16px -$spacer-4: $spacer * 3 !default; // 24px -$spacer-5: $spacer * 4 !default; // 32px -$spacer-6: $spacer * 5 !default; // 40px - -// The list of spacer values -$spacers: ( - $spacer-0, - $spacer-1, - $spacer-2, - $spacer-3, - $spacer-4, - $spacer-5, - $spacer-6, -) !default; - -// And the map of spacers, for easier looping: -// @each $scale, $length in $spacer-map { ... } -$spacer-map: ( - 0: $spacer-0, - 1: $spacer-1, - 2: $spacer-2, - 3: $spacer-3, - 4: $spacer-4, - 5: $spacer-5, - 6: $spacer-6, -) !default; - -// Em spacer variables -$em-spacer-1: 0.0625em !default; // 1/16 -$em-spacer-2: 0.125em !default; // 1/8 -$em-spacer-3: 0.25em !default; // 1/4 -$em-spacer-4: 0.375em !default; // 3/8 -$em-spacer-5: 0.5em !default; // 1/2 -$em-spacer-6: 0.75em !default; // 3/4 - -// Fixed-width container variables -$container-width: 980px !default; -$grid-gutter: 10px !default; - -// Breakpoint widths -$width-xs: 0 !default; -// Small screen / phone -$width-sm: 544px !default; -// Medium screen / tablet -$width-md: 768px !default; -// Large screen / desktop (980 + (16 * 2)) <= container + gutters -$width-lg: 1012px !default; -// Extra large screen / wide desktop -$width-xl: 1280px !default; - -// Responsive container widths -$container-sm: $width-sm !default; -$container-md: $width-md !default; -$container-lg: $width-lg !default; -$container-xl: $width-xl !default; - -// Breakpoints in the form (name: length) -$breakpoints: ( - sm: $width-sm, - md: $width-md, - lg: $width-lg, - xl: $width-xl -) !default; - -// This map in the form (breakpoint: variant) is used to iterate over -// breakpoints and create both responsive and non-responsive classes in one -// loop: -// -// ```scss -// @each $breakpoint, $variant of $responsive-variants { -// @include breakpoint($breakpoint) { -// .foo#{$variant}-bar { foo: bar !important; } -// } -// } -// ``` -$responsive-variants: ( - "": "", - sm: "-sm", - md: "-md", - lg: "-lg", - xl: "-xl", -) !default; - -// responive utility position values -$responsive-positions: ( - static, - relative, - absolute, - fixed, - sticky -) !default; diff --git a/assets/sass/@primer/css/support/variables/misc.scss b/assets/sass/@primer/css/support/variables/misc.scss deleted file mode 100644 index 30a8363..0000000 --- a/assets/sass/@primer/css/support/variables/misc.scss +++ /dev/null @@ -1,26 +0,0 @@ -// Miscellaneous variables - -// Border size -$border-width: 1px !default; -$border-color: $border-gray !default; -$border-style: solid !default; -$border: $border-width $border-color $border-style !default; -$border-radius: 3px !default; - -// Box shadow -$box-shadow: 0 1px 1px rgba($black, 0.1) !default; -$box-shadow-medium: 0 1px 5px $black-fade-15 !default; -$box-shadow-large: 0 1px 15px $black-fade-15 !default; -$box-shadow-extra-large: 0 10px 50px rgba($black, 0.07) !default; - -// Button and form variables -$form-control-shadow: inset 0 1px 2px rgba($black, 0.075) !default; -$btn-input-focus-shadow: 0 0 0 0.2em rgba($blue, 0.3) !default; -$btn-active-shadow: inset 0 0.15em 0.3em $black-fade-15 !default; - -// Tooltips -$tooltip-max-width: 250px !default; -$tooltip-background-color: $black !default; -$tooltip-text-color: $white !default; -$tooltip-delay: 0.4s !default; -$tooltip-duration: 0.1s !default; diff --git a/assets/sass/@primer/css/support/variables/typography.scss b/assets/sass/@primer/css/support/variables/typography.scss deleted file mode 100644 index dcb57a7..0000000 --- a/assets/sass/@primer/css/support/variables/typography.scss +++ /dev/null @@ -1,42 +0,0 @@ -// Typography variables - -// Heading sizes - mobile -// h4-h6 remain the same size on both mobile & desktop -$h00-size-mobile: 40px !default; -$h0-size-mobile: 32px !default; -$h1-size-mobile: 26px !default; -$h2-size-mobile: 22px !default; -$h3-size-mobile: 18px !default; - -// Heading sizes - desktop -$h00-size: 48px !default; -$h0-size: 40px !default; -$h1-size: 32px !default; -$h2-size: 24px !default; -$h3-size: 20px !default; -$h4-size: 16px !default; -$h5-size: 14px !default; -$h6-size: 12px !default; - -$font-size-small: 12px !default; - -// Font weights -$font-weight-bold: 600 !default; -$font-weight-semibold: 500 !default; -$font-weight-normal: 400 !default; -$font-weight-light: 300 !default; - -// Line heights -$lh-condensed-ultra: 1 !default; -$lh-condensed: 1.25 !default; -$lh-default: 1.5 !default; - -// Font stacks -$body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !default; - -// Monospace font stack -$mono-font: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace !default; - -// The base body size -$body-font-size: 14px !default; -$body-line-height: $lh-default !default; diff --git a/assets/sass/@primer/css/utilities/README.md b/assets/sass/@primer/css/utilities/README.md deleted file mode 100644 index 95eade2..0000000 --- a/assets/sass/@primer/css/utilities/README.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -bundle: "utilities" -generated: true ---- - -# Primer CSS: `utilities` bundle - -## Usage - -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: - -```scss -@import "@primer/css/utilities/index.scss"; -``` - -## Build - -The `@primer/css` npm package includes a standalone CSS build of this module in `dist/utilities.css`. - -## License - -[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/) - - -[scss]: https://sass-lang.com/documentation/syntax#scss diff --git a/assets/sass/@primer/css/utilities/animations.scss b/assets/sass/@primer/css/utilities/animations.scss deleted file mode 100644 index bb1422e..0000000 --- a/assets/sass/@primer/css/utilities/animations.scss +++ /dev/null @@ -1,183 +0,0 @@ -// This file contains reusable animations for github. - -/* Fade in an element */ -.anim-fade-in { - animation-name: fade-in; - animation-duration: 1s; - animation-timing-function: ease-in-out; - - &.fast { - animation-duration: 300ms; - } -} - -@keyframes fade-in { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } -} - -/* Fade out an element */ -.anim-fade-out { - animation-name: fade-out; - animation-duration: 1s; - animation-timing-function: ease-out; - - &.fast { - animation-duration: 0.3s; - } -} - -@keyframes fade-out { - 0% { - opacity: 1; - } - - 100% { - opacity: 0; - } -} - -/* Fade in and slide up an element */ -.anim-fade-up { - opacity: 0; - animation-name: fade-up; - animation-duration: 0.3s; - animation-fill-mode: forwards; - animation-timing-function: ease-out; - animation-delay: 1s; -} - -@keyframes fade-up { - 0% { - opacity: 0.8; - transform: translateY(100%); - } - - 100% { - opacity: 1; - transform: translateY(0); - } -} - -/* Fade an element out and slide down */ -.anim-fade-down { - animation-name: fade-down; - animation-duration: 0.3s; - animation-fill-mode: forwards; - animation-timing-function: ease-in; -} - -@keyframes fade-down { - 0% { - opacity: 1; - transform: translateY(0); - } - - 100% { - opacity: 0.5; - transform: translateY(100%); - } -} - -/* Grow an element width from 0 to 100% */ -.anim-grow-x { - width: 0%; - animation-name: grow-x; - animation-duration: 0.3s; - animation-fill-mode: forwards; - animation-timing-function: ease; - animation-delay: 0.5s; -} - -@keyframes grow-x { - to { width: 100%; } -} - -/* Shrink an element from 100% to 0% */ -.anim-shrink-x { - animation-name: shrink-x; - animation-duration: 0.3s; - animation-fill-mode: forwards; - animation-timing-function: ease-in-out; - animation-delay: 0.5s; -} - -@keyframes shrink-x { - to { width: 0%; } -} - -/* Fade in an element and scale it fast */ -.anim-scale-in { - animation-name: scale-in; - animation-duration: 0.15s; - animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1.5); -} - -@keyframes scale-in { - 0% { - opacity: 0; - transform: scale(0.5); - } - - 100% { - opacity: 1; - transform: scale(1); - } -} - -/* Pulse an element's opacity */ -.anim-pulse { - animation-name: pulse; - animation-duration: 2s; - animation-timing-function: linear; - animation-iteration-count: infinite; -} - -@keyframes pulse { - 0% { - opacity: 0.3; - } - - 10% { - opacity: 1; - } - - 100% { - opacity: 0.3; - } -} - -/* Pulse in an element */ -.anim-pulse-in { - animation-name: pulse-in; - animation-duration: 0.5s; -} - -@keyframes pulse-in { - 0% { - transform: scale3d(1, 1, 1); - } - - 50% { - transform: scale3d(1.1, 1.1, 1.1); - } - - 100% { - transform: scale3d(1, 1, 1); - } -} - -/* Increase scale of an element on hover */ -.hover-grow { - transition: transform 0.3s; - backface-visibility: hidden; - - &:hover { - transform: scale(1.025); - } -} diff --git a/assets/sass/@primer/css/utilities/borders.scss b/assets/sass/@primer/css/utilities/borders.scss deleted file mode 100644 index d3df5ae..0000000 --- a/assets/sass/@primer/css/utilities/borders.scss +++ /dev/null @@ -1,116 +0,0 @@ -// Core border utilities -// stylelint-disable block-opening-brace-space-before, comment-empty-line-before - -/* Add a gray border to the left and right */ -.border-x { - border-right: $border !important; - border-left: $border !important; -} - -/* Add a gray border to the top and bottom */ -.border-y { - border-top: $border !important; - border-bottom: $border !important; -} - -/* Responsive gray borders */ -@each $breakpoint, $variant in $responsive-variants { - @include breakpoint($breakpoint) { - /* Add a gray border on all sides at/above this breakpoint */ - .border#{$variant} { border: $border !important; } - /* Set the border width to 0 on all sides at/above this breakpoint */ - .border#{$variant}-0 { border: 0 !important; } - - /* Add a gray border to the top */ - .border#{$variant}-top { border-top: $border !important; } - /* Add a gray border to the right */ - .border#{$variant}-right { border-right: $border !important; } - /* Add a gray border to the bottom */ - .border#{$variant}-bottom { border-bottom: $border !important; } - /* Add a gray border to the left */ - .border#{$variant}-left { border-left: $border !important; } - - /* Remove the top border */ - .border#{$variant}-top-0 { border-top: 0 !important; } - /* Remove the right border */ - .border#{$variant}-right-0 { border-right: 0 !important; } - /* Remove the bottom border */ - .border#{$variant}-bottom-0 { border-bottom: 0 !important; } - /* Remove the left border */ - .border#{$variant}-left-0 { border-left: 0 !important; } - - // Rounded corners - /* Remove the border-radius */ - .rounded#{$variant}-0 { border-radius: 0 !important; } - /* Add a border-radius to all corners */ - .rounded#{$variant}-1 { border-radius: $border-radius !important; } - /* Add a 2x border-radius to all corners */ - .rounded#{$variant}-2 { border-radius: $border-radius * 2 !important; } - - @each $edge, $corners in $edges { - .rounded#{$variant}-#{$edge}-0 { - @each $corner in $corners { - border-#{$corner}-radius: 0 !important; - } - } - - .rounded#{$variant}-#{$edge}-1 { - @each $corner in $corners { - border-#{$corner}-radius: $border-radius !important; - } - } - - .rounded#{$variant}-#{$edge}-2 { - @each $corner in $corners { - border-#{$corner}-radius: $border-radius * 2 !important; - } - } - } - } -} - -/* Add a 50% border-radius to make something into a circle */ -.circle { border-radius: 50% !important; } - -/* Change the border style to dashed, in conjunction with another utility */ -.border-dashed { - // stylelint-disable-next-line primer/borders - border-style: dashed !important; -} - -/* Use with .border to turn the border blue */ -.border-blue { border-color: $border-blue !important; } -/* Use with .border to turn the border blue-light */ -.border-blue-light { border-color: $border-blue-light !important; } -/* Use with .border to turn the border green */ -.border-green { border-color: $border-green !important; } -/* Use with .border to turn the border green light */ -.border-green-light { border-color: $border-green-light !important; } -/* Use with .border to turn the border red */ -.border-red { border-color: $border-red !important; } -/* Use with .border to turn the border red-light */ -.border-red-light { border-color: $border-red-light !important; } -/* Use with .border to turn the border purple */ -.border-purple { border-color: $border-purple !important; } -/* Use with .border to turn the border yellow */ -.border-yellow { border-color: $border-yellow !important; } -/* Use with .border to turn the border gray-light */ -.border-gray-light { border-color: $border-gray-light !important; } -/* Use with .border to turn the border gray-dark */ -.border-gray-dark { border-color: $border-gray-dark !important; } - -/* Use with .border to turn the border rgba black 0.15 */ -.border-black-fade { border-color: $border-black-fade !important; } -/* Use with .border to turn the border rgba white 0.15 */ -.border-white-fade { border-color: $border-white-fade !important; } - -/* Use with .border to turn the border white w/varying transparency */ -.border-white-fade-15 { border-color: $border-white-fade !important; } -// stylelint-disable-next-line primer/borders -.border-white-fade-30 { border-color: $white-fade-30 !important; } -// stylelint-disable-next-line primer/borders -.border-white-fade-50 { border-color: $white-fade-50 !important; } -// stylelint-disable-next-line primer/borders -.border-white-fade-70 { border-color: $white-fade-70 !important; } -// stylelint-disable-next-line primer/borders -.border-white-fade-85 { border-color: $white-fade-85 !important; } diff --git a/assets/sass/@primer/css/utilities/box-shadow.scss b/assets/sass/@primer/css/utilities/box-shadow.scss deleted file mode 100644 index fb5b1d6..0000000 --- a/assets/sass/@primer/css/utilities/box-shadow.scss +++ /dev/null @@ -1,25 +0,0 @@ -// Box shadow utilities - -// Box shadows - -.box-shadow { - box-shadow: $box-shadow !important; -} - -.box-shadow-medium { - box-shadow: $box-shadow-medium !important; -} - -.box-shadow-large { - box-shadow: $box-shadow-large !important; -} - -.box-shadow-extra-large { - box-shadow: $box-shadow-extra-large !important; -} - -// Turn off box shadow - -.box-shadow-none { - box-shadow: none !important; -} diff --git a/assets/sass/@primer/css/utilities/colors.scss b/assets/sass/@primer/css/utilities/colors.scss deleted file mode 100644 index 0864f8f..0000000 --- a/assets/sass/@primer/css/utilities/colors.scss +++ /dev/null @@ -1,115 +0,0 @@ -// Color utilities -// stylelint-disable block-opening-brace-space-before, comment-empty-line-before - -// background colors -/* Set the background to $bg-white */ -.bg-white { background-color: $bg-white !important; } -/* Set the background to $bg-blue */ -.bg-blue { background-color: $bg-blue !important; } -/* Set the background to $bg-blue-light */ -.bg-blue-light { background-color: $bg-blue-light !important; } -/* Set the background to $bg-gray-dark */ -.bg-gray-dark { background-color: $bg-gray-dark !important; } -/* Set the background to $bg-gray */ -.bg-gray { background-color: $bg-gray !important; } -/* Set the background to $bg-gray-light */ -.bg-gray-light { background-color: $bg-gray-light !important; } -/* Set the background to $bg-green */ -.bg-green { background-color: $bg-green !important; } -/* Set the background to $bg-green-light */ -.bg-green-light { background-color: $bg-green-light !important; } -/* Set the background to $bg-red */ -.bg-red { background-color: $bg-red !important; } -/* Set the background to $bg-red-light */ -.bg-red-light { background-color: $bg-red-light !important; } -/* Set the background to $bg-yellow */ -.bg-yellow { background-color: $bg-yellow !important; } -/* Set the background to $bg-yellow-light */ -.bg-yellow-light { background-color: $bg-yellow-light !important; } -/* Set the background to $bg-yellow-dark */ -.bg-yellow-dark { background-color: $bg-yellow-dark !important; } -/* Set the background to $bg-purple */ -.bg-purple { background-color: $bg-purple !important; } -/* Set the background to $bg-pink */ -.bg-pink { background-color: $bg-pink !important; } -/* Set the background to $bg-purple-light */ -.bg-purple-light { background-color: $bg-purple-light !important; } - -// Generate a foreground and background utility for every shade of every hue -@each $hue, $shades in $hue-maps { - @each $index, $color in $shades { - .color-#{$hue}-#{$index} { color: $color !important; } - .bg-#{$hue}-#{$index} { background-color: $color !important; } - } -} - -.bg-shade-gradient { - background-image: linear-gradient(180deg, rgba($black, 0.065), rgba($black, 0)) !important; - background-repeat: no-repeat !important; - background-size: 100% 200px !important; -} - -// text colors -/* Set the text color to $text-blue */ -.text-blue { color: $text-blue !important; } -/* Set the text color to $text-red */ -.text-red { color: $text-red !important; } -/* Set the text color to $text-gray-light */ -.text-gray-light { color: $text-gray-light !important; } -/* Set the text color to $text-gray */ -.text-gray { color: $text-gray !important; } -/* Set the text color to $text-gray-dark */ -.text-gray-dark { color: $text-gray-dark !important; } -/* Set the text color to $text-green */ -.text-green { color: $text-green !important; } -/* Set the text color to $text-yellow */ -.text-yellow { color: $text-yellow !important; } -/* Set the text color to $text-orange */ -.text-orange { color: $text-orange !important; } -/* Set the text color to $text-orange-light */ -.text-orange-light { color: $text-orange-light !important; } -/* Set the text color to $text-purple */ -.text-purple { color: $text-purple !important; } -/* Set the text color to $text-pink */ -.text-pink { color: $text-pink !important; } -/* Set the text color to $text-white */ -.text-white { color: $text-white !important; } -/* Set the text color to inherit */ -.text-inherit { color: inherit !important; } - -// Link colors -// Sets the links color to $text-gray and $text-blue on hover -.link-gray { - color: $text-gray !important; - - &:hover { - color: $text-blue !important; - } -} - -// Sets the links color to $text-gray-dark and $text-blue on hover -.link-gray-dark { - color: $text-gray-dark !important; - - &:hover { - color: $text-blue !important; - } -} - -/* Set the link color to $text-blue on hover - Useful when you want only part of a link to turn blue on hover */ -.link-hover-blue { - &:hover { - color: $text-blue !important; - } -} - -/* Make a link $text-gray, then $text-blue on hover and removes the underline */ -.muted-link { - color: $text-gray !important; - - &:hover { - color: $text-blue !important; - text-decoration: none; - } -} diff --git a/assets/sass/@primer/css/utilities/details.scss b/assets/sass/@primer/css/utilities/details.scss deleted file mode 100644 index 935bc05..0000000 --- a/assets/sass/@primer/css/utilities/details.scss +++ /dev/null @@ -1,28 +0,0 @@ -// stylelint-disable selector-max-type - -.details-overlay[open] > summary::before { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 80; - display: block; - cursor: default; - content: " "; - background: transparent; -} - -.details-overlay-dark[open] > summary::before { - z-index: 99; - background: $bg-black-fade; -} - -.details-reset { - // Remove marker added by the display: list-item browser default - > summary { list-style: none; } - // Remove marker added by details polyfill - > summary::before { display: none; } - // Remove marker added by Chrome - > summary::-webkit-details-marker { display: none; } -} diff --git a/assets/sass/@primer/css/utilities/flexbox.scss b/assets/sass/@primer/css/utilities/flexbox.scss deleted file mode 100644 index a0cd73a..0000000 --- a/assets/sass/@primer/css/utilities/flexbox.scss +++ /dev/null @@ -1,51 +0,0 @@ -// Flex utility classes -// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before -@each $breakpoint, $variant in $responsive-variants { - @include breakpoint($breakpoint) { - // Flexbox classes - // Container - .flex#{$variant}-row { flex-direction: row !important; } - .flex#{$variant}-row-reverse { flex-direction: row-reverse !important; } - .flex#{$variant}-column { flex-direction: column !important; } - .flex#{$variant}-column-reverse { flex-direction: column-reverse !important; } - - .flex#{$variant}-wrap { flex-wrap: wrap !important; } - .flex#{$variant}-nowrap { flex-wrap: nowrap !important; } - - .flex#{$variant}-justify-start { justify-content: flex-start !important; } - .flex#{$variant}-justify-end { justify-content: flex-end !important; } - .flex#{$variant}-justify-center { justify-content: center !important; } - .flex#{$variant}-justify-between { justify-content: space-between !important; } - .flex#{$variant}-justify-around { justify-content: space-around !important; } - - .flex#{$variant}-items-start { align-items: flex-start !important; } - .flex#{$variant}-items-end { align-items: flex-end !important; } - .flex#{$variant}-items-center { align-items: center !important; } - .flex#{$variant}-items-baseline { align-items: baseline !important; } - .flex#{$variant}-items-stretch { align-items: stretch !important; } - - .flex#{$variant}-content-start { align-content: flex-start !important; } - .flex#{$variant}-content-end { align-content: flex-end !important; } - .flex#{$variant}-content-center { align-content: center !important; } - .flex#{$variant}-content-between { align-content: space-between !important; } - .flex#{$variant}-content-around { align-content: space-around !important; } - .flex#{$variant}-content-stretch { align-content: stretch !important; } - - // Item - .flex#{$variant}-1 { flex: 1 !important; } - .flex#{$variant}-auto { flex: auto !important; } - .flex#{$variant}-grow-0 { flex-grow: 0 !important; } - .flex#{$variant}-shrink-0 { flex-shrink: 0 !important; } - - .flex#{$variant}-self-auto { align-self: auto !important; } - .flex#{$variant}-self-start { align-self: flex-start !important; } - .flex#{$variant}-self-end { align-self: flex-end !important; } - .flex#{$variant}-self-center { align-self: center !important; } - .flex#{$variant}-self-baseline { align-self: baseline !important; } - .flex#{$variant}-self-stretch { align-self: stretch !important; } - - .flex#{$variant}-order-1 { order: 1 !important; } - .flex#{$variant}-order-2 { order: 2 !important; } - .flex#{$variant}-order-none { order: inherit !important; } - } -} diff --git a/assets/sass/@primer/css/utilities/index.scss b/assets/sass/@primer/css/utilities/index.scss deleted file mode 100644 index 7d68a09..0000000 --- a/assets/sass/@primer/css/utilities/index.scss +++ /dev/null @@ -1,14 +0,0 @@ -@import "../support/index.scss"; -// utilities -@import "./animations.scss"; -@import "./borders.scss"; -@import "./box-shadow.scss"; -@import "./colors.scss"; -@import "./details.scss"; -@import "./flexbox.scss"; -@import "./layout.scss"; -@import "./margin.scss"; -@import "./padding.scss"; -@import "./typography.scss"; -// Visibility and display should always come last in the imports so that they override other utilities with !important -@import "./visibility-display.scss"; diff --git a/assets/sass/@primer/css/utilities/layout.scss b/assets/sass/@primer/css/utilities/layout.scss deleted file mode 100644 index 1b4da95..0000000 --- a/assets/sass/@primer/css/utilities/layout.scss +++ /dev/null @@ -1,87 +0,0 @@ -// Layout -// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, comment-empty-line-before - -// Loop through the breakpoint values -@each $breakpoint, $variant in $responsive-variants { - @include breakpoint($breakpoint) { - @each $position in $responsive-positions { - .position#{$variant}-#{$position} { - position: $position !important; - } - } - } -} - -/* Set top 0 */ -.top-0 { top: 0 !important; } -/* Set right 0 */ -.right-0 { right: 0 !important; } -/* Set bottom 0 */ -.bottom-0 { bottom: 0 !important; } -/* Set left 0 */ -.left-0 { left: 0 !important; } - -/* Vertical align middle */ -.v-align-middle { vertical-align: middle !important; } -/* Vertical align top */ -.v-align-top { vertical-align: top !important; } -/* Vertical align bottom */ -.v-align-bottom { vertical-align: bottom !important; } -/* Vertical align to the top of the text */ -.v-align-text-top { vertical-align: text-top !important; } -/* Vertical align to the bottom of the text */ -.v-align-text-bottom { vertical-align: text-bottom !important; } -/* Vertical align to the parent's baseline */ -.v-align-baseline { vertical-align: baseline !important; } - -// Overflow utilities -@each $overflow in (visible, hidden, auto, scroll) { - .overflow-#{$overflow} { overflow: $overflow !important; } - .overflow-x-#{$overflow} { overflow-x: $overflow !important; } - .overflow-y-#{$overflow} { overflow-y: $overflow !important; } -} - -// Clear floats -/* Clear floats around the element */ -.clearfix { - @include clearfix; -} - -// Floats -@each $breakpoint, $variant in $responsive-variants { - @include breakpoint($breakpoint) { - /* Float to the left */ - .float#{$variant}-left { float: left !important; } - /* Float to the right */ - .float#{$variant}-right { float: right !important; } - /* No float */ - .float#{$variant}-none { float: none !important; } - } -} - -// Width and height utilities, helpful in combination -// with display-table utilities and images -/* Max width 100% */ -.width-fit { max-width: 100% !important; } -/* Set the width to 100% */ -.width-full { width: 100% !important; } -/* Max height 100% */ -.height-fit { max-height: 100% !important; } -/* Set the height to 100% */ -.height-full { height: 100% !important; } - -/* Remove min-width from element */ -.min-width-0 { min-width: 0 !important; } - -@each $breakpoint, $variant in $responsive-variants { - @include breakpoint($breakpoint) { - - // Auto varients - .width#{$variant}-auto { width: auto !important; } - - /* Set the direction to rtl */ - .direction#{$variant}-rtl { direction: rtl !important; } - /* Set the direction to ltr */ - .direction#{$variant}-ltr { direction: ltr !important; } - } -} diff --git a/assets/sass/@primer/css/utilities/margin.scss b/assets/sass/@primer/css/utilities/margin.scss deleted file mode 100644 index 2212e91..0000000 --- a/assets/sass/@primer/css/utilities/margin.scss +++ /dev/null @@ -1,50 +0,0 @@ -// Margin spacer utilities -// stylelint-disable block-opening-brace-space-before, declaration-colon-space-before, comment-empty-line-before - -// Loop through the breakpoint values -@each $breakpoint, $variant in $responsive-variants { - @include breakpoint($breakpoint) { - // Loop through the spacer values - @each $scale, $size in $spacer-map { - /* Set a $size margin to all sides at $breakpoint */ - .m#{$variant}-#{$scale} { margin: $size !important; } - /* Set a $size margin on the top at $breakpoint */ - .mt#{$variant}-#{$scale} { margin-top: $size !important; } - /* Set a $size margin on the right at $breakpoint */ - .mr#{$variant}-#{$scale} { margin-right: $size !important; } - /* Set a $size margin on the bottom at $breakpoint */ - .mb#{$variant}-#{$scale} { margin-bottom: $size !important; } - /* Set a $size margin on the left at $breakpoint */ - .ml#{$variant}-#{$scale} { margin-left: $size !important; } - - @if ($size != 0) { - /* Set a negative $size margin on top at $breakpoint */ - .mt#{$variant}-n#{$scale} { margin-top : -$size !important; } - /* Set a negative $size margin on the right at $breakpoint */ - .mr#{$variant}-n#{$scale} { margin-right : -$size !important; } - /* Set a negative $size margin on the bottom at $breakpoint */ - .mb#{$variant}-n#{$scale} { margin-bottom: -$size !important; } - /* Set a negative $size margin on the left at $breakpoint */ - .ml#{$variant}-n#{$scale} { margin-left : -$size !important; } - } - - /* Set a $size margin on the left & right at $breakpoint */ - .mx#{$variant}-#{$scale} { - margin-right: $size !important; - margin-left: $size !important; - } - - /* Set a $size margin on the top & bottom at $breakpoint */ - .my#{$variant}-#{$scale} { - margin-top: $size !important; - margin-bottom: $size !important; - } - } - - /* responsive horizontal auto margins */ - .mx#{$variant}-auto { - margin-right: auto !important; - margin-left: auto !important; - } - } -} diff --git a/assets/sass/@primer/css/utilities/padding.scss b/assets/sass/@primer/css/utilities/padding.scss deleted file mode 100644 index 9914bb8..0000000 --- a/assets/sass/@primer/css/utilities/padding.scss +++ /dev/null @@ -1,49 +0,0 @@ -// Padding spacer utilities -// stylelint-disable block-opening-brace-space-before, declaration-colon-space-before, comment-empty-line-before - -// Responsive padding spacer utilities -@each $breakpoint, $variant in $responsive-variants { - @include breakpoint($breakpoint) { - // Loop through the spacer values - @each $scale, $size in $spacer-map { - /* Set a $size padding to all sides at $breakpoint */ - .p#{$variant}-#{$scale} { padding: $size !important; } - /* Set a $size padding to the top at $breakpoint */ - .pt#{$variant}-#{$scale} { padding-top: $size !important; } - /* Set a $size padding to the right at $breakpoint */ - .pr#{$variant}-#{$scale} { padding-right: $size !important; } - /* Set a $size padding to the bottom at $breakpoint */ - .pb#{$variant}-#{$scale} { padding-bottom: $size !important; } - /* Set a $size padding to the left at $breakpoint */ - .pl#{$variant}-#{$scale} { padding-left: $size !important; } - - /* Set a $size padding to the left & right at $breakpoint */ - .px#{$variant}-#{$scale} { - padding-right: $size !important; - padding-left: $size !important; - } - - /* Set a $size padding to the top & bottom at $breakpoint */ - .py#{$variant}-#{$scale} { - padding-top: $size !important; - padding-bottom: $size !important; - } - } - } -} - -// responsive padding for containers -.p-responsive { - padding-right: $spacer-3 !important; - padding-left: $spacer-3 !important; - - @include breakpoint(sm) { - padding-right: $spacer-6 !important; - padding-left: $spacer-6 !important; - } - - @include breakpoint(lg) { - padding-right: $spacer-3 !important; - padding-left: $spacer-3 !important; - } -} diff --git a/assets/sass/@primer/css/utilities/typography.scss b/assets/sass/@primer/css/utilities/typography.scss deleted file mode 100644 index f790a71..0000000 --- a/assets/sass/@primer/css/utilities/typography.scss +++ /dev/null @@ -1,255 +0,0 @@ -// stylelint-disable block-closing-brace-space-before, comment-empty-line-before - -// Type scale variables found in ../support/lib/variables.scss -// $h00-size-mobile: 40px; -// $h0-size-mobile: 32px; -// $h1-size-mobile: 26px; -// $h2-size-mobile: 22px; -// $h3-size-mobile: 18px; -// $h00-size: 48px; -// $h0-size: 40px; -// $h1-size: 32px; -// $h2-size: 24px; -// $h3-size: 20px; -// $h4-size: 16px; -// $h5-size: 14px; -// $h6-size: 12px; - -/* Set the font size to 26px */ -.h1 { - // stylelint-disable-next-line primer/typography - font-size: $h1-size-mobile !important; - - @include breakpoint(md) { font-size: $h1-size !important; } -} - -/* Set the font size to 22px */ -.h2 { - // stylelint-disable-next-line primer/typography - font-size: $h2-size-mobile !important; - - @include breakpoint(md) { font-size: $h2-size !important; } -} - -/* Set the font size to 18px */ -.h3 { - // stylelint-disable-next-line primer/typography - font-size: $h3-size-mobile !important; - - @include breakpoint(md) { font-size: $h3-size !important; } -} - -/* Set the font size to #{$h4-size} */ -.h4 { - font-size: $h4-size !important; -} - -/* Set the font size to #{$h5-size} */ -.h5 { font-size: $h5-size !important; } - -// Does not include color property like typography base -// styles, color should be applied with color utilities. -/* Set the font size to #{$h6-size} */ -.h6 { font-size: $h6-size !important; } - -// Heading utilities -.h1, -.h2, -.h3, -.h4, -.h5, -.h6 { font-weight: $font-weight-bold !important; } - -// Type utilities that match type sale -/* Set the font size to 26px */ -.f1 { - // stylelint-disable-next-line primer/typography - font-size: $h1-size-mobile !important; - - @include breakpoint(md) { font-size: $h1-size !important; } -} - -/* Set the font size to 22px */ -.f2 { - // stylelint-disable-next-line primer/typography - font-size: $h2-size-mobile !important; - - @include breakpoint(md) { font-size: $h2-size !important; } -} - -/* Set the font size to 18px */ -.f3 { - // stylelint-disable-next-line primer/typography - font-size: $h3-size-mobile !important; - - @include breakpoint(md) { font-size: $h3-size !important; } -} - -/* Set the font size to #{$h4-size} */ -.f4 { - font-size: $h4-size !important; - - @include breakpoint(md) { font-size: $h4-size !important; } -} - -/* Set the font size to #{$h5-size} */ -.f5 { font-size: $h5-size !important; } -/* Set the font size to #{$h6-size} */ -.f6 { font-size: $h6-size !important; } - -// Type utils with light weight that match type scale -/* Set the font size to 40px and weight to light */ -.f00-light { - // stylelint-disable-next-line primer/typography - font-size: $h00-size-mobile !important; - font-weight: $font-weight-light !important; - - @include breakpoint(md) { font-size: $h00-size !important; } -} - -/* Set the font size to 32px and weight to light */ -.f0-light { - // stylelint-disable-next-line primer/typography - font-size: $h0-size-mobile !important; - font-weight: $font-weight-light !important; - - @include breakpoint(md) { font-size: $h0-size !important; } -} - -/* Set the font size to 26px and weight to light */ -.f1-light { - // stylelint-disable-next-line primer/typography - font-size: $h1-size-mobile !important; - font-weight: $font-weight-light !important; - - @include breakpoint(md) { font-size: $h1-size !important; } -} - -/* Set the font size to 22px and weight to light */ -.f2-light { - // stylelint-disable-next-line primer/typography - font-size: $h2-size-mobile !important; - font-weight: $font-weight-light !important; - - @include breakpoint(md) { font-size: $h2-size !important; } -} - -// Same size and weight as .lead but without color property -/* Set the font size to 18px and weight to light */ -.f3-light { - // stylelint-disable-next-line primer/typography - font-size: $h3-size-mobile !important; - font-weight: $font-weight-light !important; - - @include breakpoint(md) { font-size: $h3-size !important; } -} - -// Smallest text size -/* Set the font size to ${#h6-size} */ -.text-small { font-size: $h6-size !important; } // 12px - -/* Large leading paragraphs */ -.lead { - // stylelint-disable-next-line primer/spacing - margin-bottom: 30px; - font-size: $h3-size; - font-weight: $font-weight-light; - color: $text-gray; -} - -// Line-height variations -// Close to commonly used line-heights. Most line-heights -// combined with type size equate to whole pixels. -// Will be improved with future typography scale updates. -// Responsive line-height -@each $breakpoint, $variant in $responsive-variants { - @include breakpoint($breakpoint) { - /* Set the line height to ultra condensed */ - .lh#{$variant}-condensed-ultra { line-height: $lh-condensed-ultra !important; } - /* Set the line height to condensed */ - .lh#{$variant}-condensed { line-height: $lh-condensed !important; } - /* Set the line height to default */ - .lh#{$variant}-default { line-height: $lh-default !important; } - /* Set the line height to zero */ - .lh#{$variant}-0 { line-height: 0 !important; } - } -} - -// Text alignments -// Responsive text alignment -@each $breakpoint, $variant in $responsive-variants { - @include breakpoint($breakpoint) { - /* Text align to the right */ - .text#{$variant}-right { text-align: right !important; } - /* Text align to the left */ - .text#{$variant}-left { text-align: left !important; } - /* Text align to the center */ - .text#{$variant}-center { text-align: center !important; } - } -} - -// Text styles -/* Set the font weight to normal */ -.text-normal { font-weight: $font-weight-normal !important; } -/* Set the font weight to bold */ -.text-bold { font-weight: $font-weight-bold !important;} -/* Set the font to italic */ -.text-italic { font-style: italic !important; } -/* Make text uppercase */ -.text-uppercase { text-transform: uppercase !important; } -/* Underline text */ -.text-underline { text-decoration: underline !important; } -/* Don't underline text */ -.no-underline { text-decoration: none !important; } -/* Don't wrap white space */ -.no-wrap { white-space: nowrap !important; } -/* Normal white space */ -.ws-normal { white-space: normal !important; } - -/* Force long "words" to wrap if they exceed the width of the container */ -.break-word { - word-break: break-word !important; - // this is for backwards compatibility with browsers that don't respect overflow-wrap - word-wrap: break-word !important; - overflow-wrap: break-word !important; -} - -/* - * Specifically apply word-break: break-all; per MDN: - * - * > Note: In contrast to `word-break: break-word` and `overflow-wrap: break-word`, - * > `word-break: break-all` will create a break at the exact place where text would - * > otherwise overflow its container (even if putting an entire word on its own line - * > would negate the need for a break). - * - * see: https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#Values - */ -.wb-break-all { word-break: break-all !important; } - -.text-emphasized { - font-weight: $font-weight-bold; - color: $text-gray-dark; -} - -// List styles -.list-style-none { list-style: none !important; } - -// Text Shadows -/* Add a dark text shadow */ -.text-shadow-dark { - text-shadow: 0 1px 1px rgba($black, 0.25), 0 1px 25px rgba($black, 0.75); -} -/* Add a light text shadow */ -.text-shadow-light { - text-shadow: 0 1px 0 rgba($white, 0.5); -} - -/* Set to monospace font */ -.text-mono { - font-family: $mono-font !important; -} - -/* Disallow user from selecting text */ -.user-select-none { - user-select: none !important; -} diff --git a/assets/sass/@primer/css/utilities/visibility-display.scss b/assets/sass/@primer/css/utilities/visibility-display.scss deleted file mode 100644 index 61c6f5f..0000000 --- a/assets/sass/@primer/css/utilities/visibility-display.scss +++ /dev/null @@ -1,74 +0,0 @@ -// Visibility and display utilities - -// Responsive display utilities -@each $breakpoint, $variant in $responsive-variants { - @include breakpoint($breakpoint) { - @each $display in $display-values { - .d#{$variant}-#{$display} { display: $display !important; } - } - } -} - -.v-hidden { visibility: hidden !important; } -.v-visible { visibility: visible !important; } - -// Hide utilities for each breakpoint -// Each hide utility only applies to one breakpoint range. -@media (max-width: $width-sm - 1px) { - .hide-sm { - display: none !important; - } -} - -@media (min-width: $width-sm) and (max-width: $width-md - 1px) { - .hide-md { - display: none !important; - } -} - -@media (min-width: $width-md) and (max-width: $width-lg - 1px) { - .hide-lg { - display: none !important; - } -} - -@media (min-width: $width-lg) { - .hide-xl { - display: none !important; - } -} - -/* Set the table-layout to fixed */ -.table-fixed { table-layout: fixed !important; } - -// Only display content to screen readers -// -// See: http://a11yproject.com/posts/how-to-hide-content/ -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - overflow: hidden; - clip: rect(0, 0, 0, 0); - // Workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=1241631 - word-wrap: normal; - border: 0; -} - -// Only display content on focus -.show-on-focus { - position: absolute; - width: 1px; - height: 1px; - margin: 0; - overflow: hidden; - clip: rect(1px, 1px, 1px, 1px); - - &:focus { - z-index: 20; - width: auto; - height: auto; - clip: auto; - } -} |