diff --git a/.gitignore b/.gitignore
index 867d3792d5a49d181a19956058e3fe5c4882b75e..b447a12d605ace944d4b5f46e384a2513e8af4f1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,4 @@
.sass-cache
_site
Gemfile.lock
+node_modules
diff --git a/_sass/base.scss b/_sass/base.scss
index 6fdf05869e596f2f88c34d744c8da35d761c40ef..7f417f3067f794dcdbc619ed2b47242d1645c99a 100644
--- a/_sass/base.scss
+++ b/_sass/base.scss
@@ -1,7 +1,7 @@
//
// Base element style overrides
//
-// stylelint-disable selector-no-type
+// stylelint-disable selector-no-type, selector-max-type
* {
box-sizing: border-box;
diff --git a/_sass/code.scss b/_sass/code.scss
index 7d2b68a2a0ef021b1701748909363cae9e852f2e..0f08daa0962c5c565cbd4c0cb5bc07cc733a50f2 100644
--- a/_sass/code.scss
+++ b/_sass/code.scss
@@ -1,7 +1,7 @@
//
// Code and syntax highlighting
//
-// stylelint-disable selector-no-qualifying-type, declaration-block-semicolon-newline-after,declaration-block-single-line-max-declarations, selector-no-type
+// stylelint-disable selector-no-qualifying-type, declaration-block-semicolon-newline-after,declaration-block-single-line-max-declarations, selector-no-type, selector-max-type
code {
padding: 0.2em 0.15em;
diff --git a/_sass/content.scss b/_sass/content.scss
index fbec8ff28381535e54443724a0cf233ea91e13ff..4ef15ce12476bc806df07f84535ed96b0ed91a2e 100644
--- a/_sass/content.scss
+++ b/_sass/content.scss
@@ -1,7 +1,7 @@
//
// Styles for rendered markdown in the .main-content container
//
-// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors
+// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type
.page-content {
ul,
diff --git a/_sass/tables.scss b/_sass/tables.scss
index 5728c88419ddbc6d691d6ba54c98ae15d391b7e2..d97ed0779e499e3b78a55e537d3db92c65d1c8f7 100644
--- a/_sass/tables.scss
+++ b/_sass/tables.scss
@@ -1,7 +1,7 @@
//
// Tables
//
-// stylelint-disable max-nesting-depth, selector-no-type
+// stylelint-disable max-nesting-depth, selector-no-type, selector-max-type
table {
display: block;
diff --git a/_sass/typography.scss b/_sass/typography.scss
index acb89ececd6eb2d9135c90732ff1f464cbb56eec..ac1eed986a4f82f2e6484e9aeda23e28bfb5fe0a 100644
--- a/_sass/typography.scss
+++ b/_sass/typography.scss
@@ -1,7 +1,7 @@
//
// Typography
//
-// stylelint-disable primer/selector-no-utility, selector-no-type
+// stylelint-disable primer/selector-no-utility, selector-no-type, selector-max-type
h1,
.text-alpha {
diff --git a/node_modules/primer-support/index.scss b/node_modules/primer-support/index.scss
index 7a91cda946822cf6cf83ef433a9ebc59cd89a3e0..1b5abdd8080dfc37d49cfc0117e36b256423ab6d 100644
--- a/node_modules/primer-support/index.scss
+++ b/node_modules/primer-support/index.scss
@@ -1,5 +1,8 @@
// variables
-@import "./lib/variables.scss";
+@import "./lib/variables/typography.scss";
+@import "./lib/variables/colors.scss";
+@import "./lib/variables/layout.scss";
+@import "./lib/variables/misc.scss";
// mixins
@import "./lib/mixins/typography.scss";
diff --git a/node_modules/primer-support/lib/mixins/buttons.scss b/node_modules/primer-support/lib/mixins/buttons.scss
index 298dabf782cba2f255f04d80fb95e5c2ced160a3..8b0f30be001a4000e5c4a98b2f26e0972341e382 100644
--- a/node_modules/primer-support/lib/mixins/buttons.scss
+++ b/node_modules/primer-support/lib/mixins/buttons.scss
@@ -1,137 +1,160 @@
+// stylelint-disable block-closing-brace-newline-after
+
// Button color generator for primary and themed buttons
-@mixin solid-btn($foreground: $text-gray-dark, $background: #eee) {
- color: $foreground;
- text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
- background-color: $background;
- background-image: linear-gradient(saturate(lighten($background, 13%), 8%), saturate(darken($background, 9%), 5%));
- border: 1px solid darken($background, 8%);
+// New button hotness
+@mixin btn-solid($color, $bg, $bg2) {
+ color: $color;
+ background-color: $bg2;
+ background-image: linear-gradient(-180deg, $bg 0%, $bg2 90%);
- .counter {
- color: saturate(darken($background, 9%), 5%);
- background: $foreground;
- }
+ @if $bg == $gray-000 {
+ &:focus,
+ &.focus {
+ box-shadow: $btn-input-focus-shadow;
+ }
- &:hover,
- &:active,
- &.zeroclipboard-is-hover,
- &.zeroclipboard-is-active {
- background-color: darken($background, 10%);
- background-image: linear-gradient(lighten($background, 8%), darken($background, 13%));
- border-color: darken($background, 12%);
- }
+ &: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,
- &.zeroclipboard-is-active {
- background-color: darken($background, 15%);
- background-image: none;
- border-color: darken($background, 20%);
- box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
- }
+ &:active,
+ &.selected,
+ [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;
+ }
- &.selected:hover {
- background-color: darken($background, 20%);
- }
+ &:disabled,
+ &.disabled {
+ color: rgba($color, 0.4);
+ background-color: $bg2;
+ background-image: none;
+ border-color: transparentize($black, 0.8); // back to default .btn
+ box-shadow: none;
+ }
- &:disabled,
- &.disabled {
- &,
- &:hover {
- color: $foreground;
- cursor: default;
- background-color: mix(#fff, $background, 50%);
- background-image: linear-gradient(mix(#fff, $background, 60%), mix(#fff, darken($background, 5%), 45%));
- border-color: mix(#fff, $background, 40%);
+ } @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,
+ [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 {
+ color: rgba($color, 0.75);
+ background-color: mix($bg2, $white, 50%);
+ background-image: none;
+ border-color: transparentize($black, 0.8); // repeat .btn default to avoid shift on click-drag off of button
box-shadow: none;
}
+
+ .Counter {
+ color: darken($bg, 8%);
+ background-color: $white;
+ }
}
}
-// Button color generator for default-y buttons with grey bgs and colored text, like btn-danger
+// Inverse button hover style
+@mixin btn-inverse($color, $bg, $bg2) {
+ color: $color;
+ background-color: $bg;
+ background-image: linear-gradient(-180deg, $bg 0%, $bg2 90%);
-@mixin inverse-hover-btn($foreground: $text-gray-dark) {
- color: $foreground;
+ &:focus {
+ box-shadow: 0 0 0 0.2em rgba($color, 0.4);
+ }
&:hover {
color: $text-white;
- background-color: $foreground;
- background-image: linear-gradient(lighten($foreground, 30%), lighten($foreground, 10%));
- border-color: $foreground;
+ 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 {
+ &.selected,
+ [open] > & {
color: $text-white;
- background-color: darken($foreground, 5%);
+ background-color: darken($color, 5%);
background-image: none;
- border-color: darken($foreground, 8%);
- }
-
- &.selected:hover {
- background-color: darken($foreground, 5%);
+ border-color: $black-fade-50;
+ box-shadow: $btn-active-shadow;
}
&:disabled,
&.disabled {
- &,
- &:hover {
- color: mix(#fff, $foreground, 50%);
- background-color: #efefef;
- background-image: linear-gradient(#fefefe, #efefef);
- border-color: #e1e1e1;
- }
- }
-
- &:hover,
- &:active,
- &.selected {
- .counter {
- color: $text-white;
- }
+ color: rgba($color, 0.4);
+ background-color: $bg2;
+ background-image: none;
+ border-color: transparentize($black, 0.8); // back to default .btn
+ box-shadow: none;
}
}
// Outline color generator for btn-outline to make the hover state inverse the text and bg colors.
-
-@mixin outline-btn($text-color: $text-blue, $bg-color: $bg-white) {
+@mixin btn-outline($text-color: $text-blue, $bg-color: $bg-white) {
color: $text-color;
background-color: $bg-color;
background-image: none;
- border: 1px solid $border-gray;
- .counter {
- background-color: rgba(0, 0, 0, 0.07);
+ .Counter {
+ background-color: rgba($black, 0.07);
}
&:hover,
&:active,
&.selected,
- &.zeroclipboard-is-hover,
- &.zeroclipboard-is-active {
+ [open] > & {
color: $bg-color;
background-color: $text-color;
background-image: none;
border-color: $text-color;
- .counter {
+ .Counter {
color: $text-color;
background-color: $bg-color;
}
}
- &.selected:hover {
- background-color: darken($text-color, 5%);
+ &:focus {
+ border-color: $text-color;
+ box-shadow: 0 0 0 0.2em rgba($text-color, 0.4);
}
&:disabled,
&.disabled {
- &,
- &:hover {
- color: $text-gray;
- background-color: $bg-white;
- background-image: none;
- border-color: $border-gray;
- }
+ color: $black-fade-30;
+ background-color: $bg-white;
+ border-color: $black-fade-15;
+ box-shadow: none;
}
}
diff --git a/node_modules/primer-support/lib/mixins/layout.scss b/node_modules/primer-support/lib/mixins/layout.scss
index ec319d4f54884cf28118fa8b2d3162346fcc1f4d..a6d30cf1879eaf02258d8106bbc0bc460a264247 100644
--- a/node_modules/primer-support/lib/mixins/layout.scss
+++ b/node_modules/primer-support/lib/mixins/layout.scss
@@ -1,21 +1,27 @@
// Responsive media queries
@mixin breakpoint($breakpoint) {
- // 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 $breakpoint == "" {
+ @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.";
+ // 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.";
+ }
}
}
diff --git a/node_modules/primer-support/lib/mixins/misc.scss b/node_modules/primer-support/lib/mixins/misc.scss
index 5e399046f803a39a2fa2468fec920d3b1a89074b..ebdd32d04683dabcbf90f0c5eaf2cd9ff133d457 100644
--- a/node_modules/primer-support/lib/mixins/misc.scss
+++ b/node_modules/primer-support/lib/mixins/misc.scss
@@ -1,5 +1,5 @@
// Generate a two-color caret for any element.
-@mixin double-caret($foreground: #fff, $background: #ddd) {
+@mixin double-caret($foreground: $text-white, $background: lighten($gray-300, 5%)) {
&::after,
&::before {
position: absolute;
diff --git a/node_modules/primer-support/lib/mixins/typography.scss b/node_modules/primer-support/lib/mixins/typography.scss
index a35629302c9e0a42fb102555968ad776fb45254a..d39aa44c1f5c923bb0429404e821d7e46bc59e37 100644
--- a/node_modules/primer-support/lib/mixins/typography.scss
+++ b/node_modules/primer-support/lib/mixins/typography.scss
@@ -40,37 +40,45 @@
}
// Responsive heading mixins
-// There are no responsive mixins for h5 and h6 because they are small
+// There are no responsive mixins for h4—h6 because they are small
// and don't need to be smaller on mobile.
-@mixin h1-reponsive {
- font-size: 26px;
- font-weight: $font-weight-bold;
+@mixin f1-responsive {
+ font-size: $h1-size-mobile;
- // Up to 32px in future
- @include breakpoint(md) { font-size: 30px; }
+ // 32px on desktop
+ @include breakpoint(md) { font-size: $h1-size; }
}
-@mixin h2-responsive {
- font-size: 20px;
- font-weight: $font-weight-bold;
+@mixin f2-responsive {
+ font-size: $h2-size-mobile;
- // Up to 22px or 24px in future
- @include breakpoint(md) { font-size: 21px; }
+ // 24px on desktop
+ @include breakpoint(md) { font-size: $h2-size; }
}
-@mixin h3-responsive {
- font-size: 14px;
- font-weight: $font-weight-bold;
+@mixin f3-responsive {
+ font-size: $h3-size-mobile;
- @include breakpoint(md) { font-size: 16px; }
+ // 20px on desktop
+ @include breakpoint(md) { font-size: $h3-size; }
}
-@mixin h4-responsive {
- font-size: 13px;
+// 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;
+}
- @include breakpoint(md) { font-size: 14px; }
+@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/node_modules/primer-support/lib/variables/color-system.scss b/node_modules/primer-support/lib/variables/color-system.scss
new file mode 100644
index 0000000000000000000000000000000000000000..0ea1a7116c026af9526072816e76d03eb5d26d42
--- /dev/null
+++ b/node_modules/primer-support/lib/variables/color-system.scss
@@ -0,0 +1,114 @@
+//
+//
+// -------- 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;
+
+// -------- Fades --------
+// Black based on same hue as $gray-900
+$black: #1b1f23 !default;
+$white: #fff !default;
+
+$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;
diff --git a/node_modules/primer-support/lib/variables/colors.scss b/node_modules/primer-support/lib/variables/colors.scss
new file mode 100644
index 0000000000000000000000000000000000000000..36dc3c8a747ae2266248aa1a906c46a6e4ce9d13
--- /dev/null
+++ b/node_modules/primer-support/lib/variables/colors.scss
@@ -0,0 +1,67 @@
+@import "color-system.scss";
+// Color variables
+// stylelint-disable declaration-bang-space-before
+
+// State indicators.
+$status-pending: desaturate($yellow-700, 15%) !default;
+
+// Repository type colors
+// Should be able to deprecate these in future
+$repo-private-text: $black-fade-70 !default;
+$repo-private-bg: $yellow-000 !default;
+$repo-private-icon: transparentize($yellow-900, 0.5) !default;
+
+// Highlight used for things like search
+$highlight-yellow: rgba(255, 247, 140, 0.5);
+
+// Border colors
+$border-black-fade: $black-fade-15 !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-purple: $purple !default;
+
+$border-yellow: desaturate($yellow-300, 60%) !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;
+
+// Background colors
+$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-red: $red-500 !default;
+$bg-red-light: $red-100 !default;
+$bg-white: $white !default;
+$bg-yellow: $yellow-500 !default;
+$bg-yellow-light: $yellow-200 !default;
+
+// Text colors
+$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-red: $red-600 !default;
+$text-white: $white !default;
diff --git a/node_modules/primer-support/lib/variables/layout.scss b/node_modules/primer-support/lib/variables/layout.scss
new file mode 100644
index 0000000000000000000000000000000000000000..284407a4655beb061a2b8baa025464ac73c04eeb
--- /dev/null
+++ b/node_modules/primer-support/lib/variables/layout.scss
@@ -0,0 +1,72 @@
+// Layout variables
+// stylelint-disable declaration-bang-space-before
+
+// 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;
+$spacers: (
+ 0,
+ round($spacer / 2),
+ $spacer,
+ $spacer * 2,
+ $spacer * 3,
+ $spacer * 4,
+ $spacer * 5
+) !default;
+
+// Aliases for easy use
+$spacer-0: nth($spacers, 1) !default; // 0
+$spacer-1: nth($spacers, 2) !default; // 4px
+$spacer-2: nth($spacers, 3) !default; // 8px
+$spacer-3: nth($spacers, 4) !default; // 16px
+$spacer-4: nth($spacers, 5) !default; // 24px
+$spacer-5: nth($spacers, 6) !default; // 32px
+$spacer-6: nth($spacers, 7) !default; // 40px
+
+// 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;
+$width-sm: 544px;
+$width-md: 768px;
+$width-lg: 1012px;
+$width-xl: 1280px;
+
+// Responsive container widths
+$container-md: $width-md !default;
+$container-lg: $width-lg !default;
+$container-xl: $width-xl !default;
+
+// Breakpoints
+$breakpoints: (
+ // Small screen / phone
+ sm: $width-sm,
+ // Medium screen / tablet
+ md: $width-md,
+ // Large screen / desktop (980 + (16 * 2)) <= container + gutters
+ lg: $width-lg,
+ // Extra large screen / wide desktop
+ xl: $width-xl
+) !default;
+
+$responsive-variants: ("": "");
+@each $key in map-keys($breakpoints) {
+ $responsive-variants: map-merge($responsive-variants, ($key: "-#{$key}"));
+}
diff --git a/node_modules/primer-support/lib/variables/misc.scss b/node_modules/primer-support/lib/variables/misc.scss
new file mode 100644
index 0000000000000000000000000000000000000000..cd6414f533b0fed4e2d8f91e99f134c095f9f02d
--- /dev/null
+++ b/node_modules/primer-support/lib/variables/misc.scss
@@ -0,0 +1,40 @@
+// Miscellaneous variables
+// stylelint-disable declaration-bang-space-before
+
+// 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;
+
+// Custom explore grid border
+$exploregrid-item-border-radius: 4px;
+
+// 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;
+
+// Tooltips
+$tooltip-max-width: 250px !default;
+$tooltip-background-color: $black;
+$tooltip-text-color: $white !default;
+$tooltip-delay: 0.4s !default;
+$tooltip-duration: 0.1s !default;
+
+// Should be moved into custom github css
+$stats-switcher-py: 10px;
+// Future proof this `height` value by finding the computed line-height, then
+// adding the total value of the vertical padding. This var is used to toggle
+// between the stats bar and language breakdown.
+$stats-viewport-height: ($body-font-size * $body-line-height) + ($stats-switcher-py * 2);
+
+$min_tab_size: 1;
+$max_tab_size: 12;
+
+// Button and form variables
+$form-control-shadow: inset 0 1px 2px rgba($black, 0.075);
+$btn-input-focus-shadow: 0 0 0 0.2em rgba($blue, 0.3);
+$btn-active-shadow: inset 0 0.15em 0.3em $black-fade-15;
diff --git a/node_modules/primer-support/lib/variables/typography.scss b/node_modules/primer-support/lib/variables/typography.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c3d857317a0af6cdb25b3ff8b7f6704ae4990bd7
--- /dev/null
+++ b/node_modules/primer-support/lib/variables/typography.scss
@@ -0,0 +1,43 @@
+// Typography variables
+// stylelint-disable declaration-bang-space-before
+
+// 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", "Segoe UI Symbol" !default;
+
+// Monospace font stack
+$mono-font: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace !default;
+
+// The base body size
+$body-font-size: 14px !default;
+$body-line-height: $lh-default !default;
diff --git a/node_modules/primer-utilities/index.scss b/node_modules/primer-utilities/index.scss
index ff916bbdf9cc06d091b139388dd1d19e230509d9..307b6de06dfe9238cd62f9f8f27485472db25d6c 100644
--- a/node_modules/primer-utilities/index.scss
+++ b/node_modules/primer-utilities/index.scss
@@ -4,6 +4,7 @@
@import "./lib/borders.scss";
@import "./lib/box-shadow.scss";
@import "./lib/colors.scss";
+@import "./lib/details.scss";
@import "./lib/flexbox.scss";
@import "./lib/layout.scss";
@import "./lib/margin.scss";
diff --git a/node_modules/primer-utilities/lib/animations.scss b/node_modules/primer-utilities/lib/animations.scss
index ef751cc8841f0117726d7d3b424ca25c64916ebb..9b530d4fb3a649d704ab688479d8dbee05976a09 100644
--- a/node_modules/primer-utilities/lib/animations.scss
+++ b/node_modules/primer-utilities/lib/animations.scss
@@ -1,7 +1,7 @@
// This file contains reusable animations for github.
// stylelint-disable primer/selector-no-utility
-// Fade in
-// A class to fade in an element on the page.
+
+/* Fade in an element */
.anim-fade-in {
animation-name: fade-in;
animation-duration: 1s;
@@ -22,6 +22,27 @@
}
}
+/* 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;
@@ -151,3 +172,13 @@
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/node_modules/primer-utilities/lib/borders.scss b/node_modules/primer-utilities/lib/borders.scss
index 5a1ec2bd5a51cc1f3d3a9d6b27461670b7cecd2a..4bdd48f3953249abe55ec4fc35c1d2910d09e18d 100644
--- a/node_modules/primer-utilities/lib/borders.scss
+++ b/node_modules/primer-utilities/lib/borders.scss
@@ -1,53 +1,100 @@
// Border utilities
// stylelint-disable block-opening-brace-space-before, primer/selector-no-utility, comment-empty-line-before
-/* Add a gray border */
-.border { border: $border !important; }
-/* Add a gray border to the top */
-.border-top { border-top: $border !important; }
-/* Add a gray border to the right */
-.border-right { border-right: $border !important; }
-/* Add a gray border to the bottom */
-.border-bottom { border-bottom: $border !important; }
-/* Add a gray border to the left */
-.border-left { border-left: $border !important; }
+/* Add a gray border on all sides */
+.border { border: $border !important; }
+
/* Add a gray border to the left and right */
.border-y {
border-top: $border !important;
border-bottom: $border !important;
}
+/* Remove borders from all sides */
+.border-0 { border: 0 !important; }
+
.border-dashed { 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 */
-.border-blue-dark { border-color: $border-blue-dark !important; }
-/* Use with .border to turn the border red */
-.border-red { border-color: $border-red !important; }
+.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-dark { border-color: $border-red-dark !important; }
+.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; }
+.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; }
-
-// Without borders
-/* Remove all borders */
-.border-0 { border: 0 !important; }
-/* Remove the top border */
-.border-top-0 { border-top: 0 !important; }
-/* Remove the right border */
-.border-right-0 { border-right: 0 !important; }
-/* Remove the bottom border */
-.border-bottom-0 { border-bottom: 0 !important; }
-/* Remove the left border */
-.border-left-0 { border-left: 0 !important; }
-
-// Rounded corners
-/* Remove the border-radius */
-.rounded-0 { border-radius: 0 !important; }
-/* Add a border-radius to all corners */
-.rounded-1 { border-radius: $border-radius !important; }
-/* Add a 2x border-radius to all corners */
-.rounded-2 { border-radius: $border-radius * 2 !important; }
+.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; }
+
+$edges: (
+ top: (top-left, top-right),
+ right: (top-right, bottom-right),
+ bottom: (bottom-right, bottom-left),
+ left: (bottom-left, top-left)
+);
+
+@each $breakpoint, $variant in $responsive-variants {
+ @include breakpoint($breakpoint) {
+ /* Add a gray border */
+ /* 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;
+ }
+ }
+
+ .rounded#{$variant}-#{$edge}-1 {
+ @each $corner in $corners {
+ border-#{$corner}-radius: $border-radius;
+ }
+ }
+
+ .rounded#{$variant}-#{$edge}-2 {
+ @each $corner in $corners {
+ border-#{$corner}-radius: $border-radius * 2;
+ }
+ }
+ }
+ }
+}
+
+/* Add a 50% border-radius to make something into a circle */
+.circle { border-radius: 50% !important; }
diff --git a/node_modules/primer-utilities/lib/box-shadow.scss b/node_modules/primer-utilities/lib/box-shadow.scss
index e68f8cd2d9b90ac6be6a02b70fec4d1d8ac85009..9093da305cfc2b42451c1e4ce82f3dcf816e4815 100644
--- a/node_modules/primer-utilities/lib/box-shadow.scss
+++ b/node_modules/primer-utilities/lib/box-shadow.scss
@@ -15,6 +15,10 @@
box-shadow: $box-shadow-large !important;
}
+.box-shadow-extra-large {
+ box-shadow: $box-shadow-extra-large !important;
+}
+
// Turn off box shadow
.box-shadow-none {
diff --git a/node_modules/primer-utilities/lib/colors.scss b/node_modules/primer-utilities/lib/colors.scss
index 9d6c009034c15b2e78bff7ce0135b0a6c1b093c5..0f22a810d30e5b5b63deb4d9c0158e7cd61cf660 100644
--- a/node_modules/primer-utilities/lib/colors.scss
+++ b/node_modules/primer-utilities/lib/colors.scss
@@ -29,9 +29,11 @@
.bg-yellow-light { background-color: $bg-yellow-light !important; }
/* Set the background to $bg-purple */
.bg-purple { background-color: $bg-purple !important; }
+/* Set the background to $bg-purple-light */
+.bg-purple-light { background-color: $bg-purple-light !important; }
.bg-shade-gradient {
- background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.065), rgba(0, 0, 0, 0)) !important;
+ background-image: linear-gradient(180deg, rgba($black, 0.065), rgba($black, 0)) !important;
background-repeat: no-repeat !important;
background-size: 100% 200px !important;
}
@@ -51,6 +53,8 @@
.text-green { color: $text-green !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-white */
@@ -59,8 +63,10 @@
.text-inherit { color: inherit !important; }
// Text states
-.text-renamed { color: $status-renamed !important; }
-.text-pending { color: $status-pending !important; }
+// These can probably all be regular utilities
+.text-pending { color: $yellow-800 !important; }
+// Separate text and background colors in future to improve a11y
+.bg-pending { color: $yellow-700 !important; }
// Link colors
// Sets the links color to $text-gray and $text-blue on hover
@@ -98,12 +104,3 @@
text-decoration: none;
}
}
-
-// Shade gradient
-//
-// Shade gradient style from Basecoat
-.shade-gradient {
- background-image: linear-gradient(180deg, #f5f5f5, #fff);
- background-repeat: no-repeat;
- background-size: 100% 200px;
-}
diff --git a/node_modules/primer-utilities/lib/details.scss b/node_modules/primer-utilities/lib/details.scss
new file mode 100644
index 0000000000000000000000000000000000000000..32ad69eec2e50ca7f9802c2a5f927d2485f87236
--- /dev/null
+++ b/node_modules/primer-utilities/lib/details.scss
@@ -0,0 +1,18 @@
+// 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: $black-fade-50;
+}
diff --git a/node_modules/primer-utilities/lib/flexbox.scss b/node_modules/primer-utilities/lib/flexbox.scss
index 6d236c1f43b153f1d42f129d070bfb8e14115bb2..63e5121f30d8df3cce94a0e3e47fb67d46b8cfb6 100644
--- a/node_modules/primer-utilities/lib/flexbox.scss
+++ b/node_modules/primer-utilities/lib/flexbox.scss
@@ -1,81 +1,52 @@
// Flex utility classes
-
// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before
// stylelint-disable comment-empty-line-before
-// - - - - - - - - - - - - - - - - - - - - - - -
-// This is a template for generating the flex utility classes.
-// A version of each class will be generated without a breakpoint,
-// along with a variant for each breakpoint.
-// - - - - - - - - - - - - - - - - - - - - - - -
-
-@mixin flexUtility($breakpoint: 0) {
-
- // This is the breakpoint that will be inserted into class names
- $breakstring: -#{$breakpoint}; // example: `.d-sm-flex`
-
- // If there's no breakpoint, the $breakstring value will be blank.
- @if $breakpoint == 0 {
- $breakstring: ""; // example: `.d-flex`
- }
-
- // Flexbox classes
- // Container
- .d#{$breakstring}-flex { display: flex !important; }
- .d#{$breakstring}-inline-flex { display: inline-flex !important; }
-
- .flex#{$breakstring}-row { flex-direction: row !important; }
- .flex#{$breakstring}-column { flex-direction: column !important; }
-
- .flex#{$breakstring}-wrap { flex-wrap: wrap !important; }
- .flex#{$breakstring}-nowrap { flex-wrap: nowrap !important; }
-
- .flex#{$breakstring}-justify-start { justify-content: flex-start !important; }
- .flex#{$breakstring}-justify-end { justify-content: flex-end !important; }
- .flex#{$breakstring}-justify-center { justify-content: center !important; }
- .flex#{$breakstring}-justify-between { justify-content: space-between !important; }
- .flex#{$breakstring}-justify-around { justify-content: space-around !important; }
-
- .flex#{$breakstring}-items-start { align-items: flex-start !important; }
- .flex#{$breakstring}-items-end { align-items: flex-end !important; }
- .flex#{$breakstring}-items-center { align-items: center !important; }
- .flex#{$breakstring}-items-baseline { align-items: baseline !important; }
- .flex#{$breakstring}-items-stretch { align-items: stretch !important; }
-
- .flex#{$breakstring}-content-start { align-content: flex-start !important; }
- .flex#{$breakstring}-content-end { align-content: flex-end !important; }
- .flex#{$breakstring}-content-center { align-content: center !important; }
- .flex#{$breakstring}-content-between { align-content: space-between !important; }
- .flex#{$breakstring}-content-around { align-content: space-around !important; }
- .flex#{$breakstring}-content-stretch { align-content: stretch !important; }
-
- // Item
- .flex#{$breakstring}-auto { flex: 1 1 auto !important; }
- .flex#{$breakstring}-shrink-0 { flex-shrink: 0 !important; }
-
- .flex#{$breakstring}-self-auto { align-self: auto !important; }
- .flex#{$breakstring}-self-start { align-self: flex-start !important; }
- .flex#{$breakstring}-self-end { align-self: flex-end !important; }
- .flex#{$breakstring}-self-center { align-self: center !important; }
- .flex#{$breakstring}-self-baseline { align-self: baseline !important; }
- .flex#{$breakstring}-self-stretch { align-self: stretch !important; }
-
- // Shorthand for equal width and height cols
- .flex#{$breakstring}-item-equal {
- flex-grow: 1;
- flex-basis: 0;
- }
-}
-
-// Generate basic flexbox classes
-@include flexUtility();
-
-// Loop through the breakpoint values to create responsive classes
-@each $breakpoint in map-keys($breakpoints) {
-
- // Loop through the spacer values
+@each $breakpoint, $variant in $responsive-variants {
@include breakpoint($breakpoint) {
- @include flexUtility($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}-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}-auto { flex: 1 1 auto !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; }
+
+ // Shorthand for equal width and height cols
+ .flex#{$variant}-item-equal {
+ flex-grow: 1;
+ flex-basis: 0;
+ }
}
-
}
diff --git a/node_modules/primer-utilities/lib/layout.scss b/node_modules/primer-utilities/lib/layout.scss
index 5a2bada8df4fd70adbb6c66f4cd0cc7f7b1a8bb1..d5a4210c9f57391dd6b327f057e8693227f81cb0 100644
--- a/node_modules/primer-utilities/lib/layout.scss
+++ b/node_modules/primer-utilities/lib/layout.scss
@@ -30,6 +30,8 @@
.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
// overflow-hidden can also be used to create a new
@@ -48,23 +50,14 @@
}
// Floats
-/* Float to the right */
-.float-right { float: right !important; }
-/* Float to the left */
-.float-left { float: left !important; }
-/* Don't float left or right */
-.float-none { float: none !important; }
-
-// Responsive float utlities
-// .float-md-left, .float-lg-right, ...
-@each $breakpoint in map-keys($breakpoints) {
+@each $breakpoint, $variant in $responsive-variants {
@include breakpoint($breakpoint) {
- /* Float to the left at the #{$breakpoint} breakpoint */
- .float-#{$breakpoint}-left { float: left !important; }
- /* Float to the right at the #{$breakpoint} breakpoint */
- .float-#{$breakpoint}-right { float: right !important; }
- /* No float at the #{$breakpoint} breakpoint */
- .float-#{$breakpoint}-none { float: none !important; }
+ /* 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; }
}
}
@@ -74,23 +67,19 @@
.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; }
-// Direction utilities
-
-.direction-rtl { direction: rtl !important; }
-
-.direction-ltr { direction: ltr !important; }
-
-@each $breakpoint in map-keys($breakpoints) {
+@each $breakpoint, $variant in $responsive-variants {
@include breakpoint($breakpoint) {
- /* Set the direction to ltr at the #{$breakpoint} breakpoint */
- .direction-#{$breakpoint}-rtl { direction: rtl !important; }
- /* Set the direction to ltr at the #{$breakpoint} breakpoint */
- .direction-#{$breakpoint}-ltr { direction: ltr !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/node_modules/primer-utilities/lib/margin.scss b/node_modules/primer-utilities/lib/margin.scss
index 7bb56040e2d5aca8d19416549f7f4efe9dbc4068..c47fc14fbd251f90b4829aa7e47a21c084de72f2 100644
--- a/node_modules/primer-utilities/lib/margin.scss
+++ b/node_modules/primer-utilities/lib/margin.scss
@@ -1,70 +1,53 @@
// Margin spacer utilities
// stylelint-disable block-opening-brace-space-before, declaration-colon-space-before, primer/selector-no-utility, comment-empty-line-before
-@for $i from 1 through length($spacers) {
- $size: #{nth($spacers, $i)};
- $scale: #{$i - 1};
-
- /* Set a #{$size} margin to all sides */
- .m-#{$scale} { margin : #{$size} !important; }
- /* Set a #{$size} margin on the top */
- .mt-#{$scale} { margin-top : #{$size} !important; }
- /* Set a #{$size} margin on the right */
- .mr-#{$scale} { margin-right : #{$size} !important; }
- /* Set a #{$size} margin on the bottom */
- .mb-#{$scale} { margin-bottom: #{$size} !important; }
- /* Set a #{$size} margin on the left */
- .ml-#{$scale} { margin-left : #{$size} !important; }
-
- /* Set a #{$size} margin on the left & right */
- .mx-#{$scale} {
- margin-right: #{$size} !important;
- margin-left : #{$size} !important;
- }
-
- /* Set a #{$size} margin on the top & bottom */
- .my-#{$scale} {
- margin-top : #{$size} !important;
- margin-bottom: #{$size} !important;
- }
-}
// Loop through the breakpoint values
-@each $breakpoint in map-keys($breakpoints) {
-
- // Loop through the spacer values
- @for $i from 1 through length($spacers) {
- @include breakpoint($breakpoint) {
- $size: #{nth($spacers, $i)}; // sm, md, lg, xl
- $scale: #{$i - 1}; // 0, 1, 2, 3, 4, 5, 6
-
- /* Set a #{$size} margin to all sides at the breakpoint #{$breakpoint} */
- .m-#{$breakpoint}-#{$scale} { margin: #{$size} !important; }
- /* Set a #{$size} margin on the top at the breakpoint #{$breakpoint} */
- .mt-#{$breakpoint}-#{$scale} { margin-top: #{$size} !important; }
- /* Set a #{$size} margin on the right at the breakpoint #{$breakpoint} */
- .mr-#{$breakpoint}-#{$scale} { margin-right: #{$size} !important; }
- /* Set a #{$size} margin on the bottom at the breakpoint #{$breakpoint} */
- .mb-#{$breakpoint}-#{$scale} { margin-bottom: #{$size} !important; }
- /* Set a #{$size} margin on the left at the breakpoint #{$breakpoint} */
- .ml-#{$breakpoint}-#{$scale} { margin-left: #{$size} !important; }
+@each $breakpoint, $variant in $responsive-variants {
+ @include breakpoint($breakpoint) {
+ // Loop through the spacer values
+ @for $i from 1 through length($spacers) {
+ $size: nth($spacers, $i); // sm, md, lg, xl
+ $scale: $i - 1; // 0, 1, 2, 3, 4, 5, 6
+
+ /* 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 the breakpoint #{$breakpoint} */
- .mx-#{$breakpoint}-#{$scale} {
- margin-right: #{$size} !important;
- 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 the breakpoint #{$breakpoint} */
- .my-#{$breakpoint}-#{$scale} {
- margin-top: #{$size} !important;
- margin-bottom: #{$size} !important;
+ /* Set a $size margin on the top & bottom at $breakpoint */
+ .my#{$variant}-#{$scale} {
+ margin-top: $size !important;
+ margin-bottom: $size !important;
}
}
- }
-}
-/* Set an auto margin on left & right */
-.mx-auto {
- margin-right: auto !important;
- margin-left: auto !important;
+ /* responsive horizontal auto margins */
+ .mx#{$variant}-auto {
+ margin-right: auto !important;
+ margin-left: auto !important;
+ }
+ }
}
diff --git a/node_modules/primer-utilities/lib/padding.scss b/node_modules/primer-utilities/lib/padding.scss
index 80038f7d750f55b3aa5c27c3dca4aeb241a12efe..bc3ba09c6dcc4c83ce22a841fb12cda1380b3f1e 100644
--- a/node_modules/primer-utilities/lib/padding.scss
+++ b/node_modules/primer-utilities/lib/padding.scss
@@ -1,67 +1,54 @@
// Padding spacer utilities
// stylelint-disable block-opening-brace-space-before, declaration-colon-space-before
// stylelint-disable comment-empty-line-before
-@for $i from 1 through length($spacers) {
- $size: #{nth($spacers, $i)};
- $scale: #{$i - 1};
- /* Set a #{$size} padding to all sides */
- .p-#{$scale} { padding : #{$size} !important; }
- /* Set a #{$size} padding to the top */
- .pt-#{$scale} { padding-top : #{$size} !important; }
- /* Set a #{$size} padding to the right */
- .pr-#{$scale} { padding-right : #{$size} !important; }
- /* Set a #{$size} padding to the bottom */
- .pb-#{$scale} { padding-bottom: #{$size} !important; }
- /* Set a #{$size} padding to the left */
- .pl-#{$scale} { padding-left : #{$size} !important; }
-
- /* Set a #{$size} padding to the left & right */
- .px-#{$scale} {
- padding-right: #{$size} !important;
- padding-left: #{$size} !important;
- }
+// Responsive padding spacer utilities
+@each $breakpoint, $variant in $responsive-variants {
+ @include breakpoint($breakpoint) {
+ // Loop through the spacer values
+ @for $i from 1 through length($spacers) {
+ $size: nth($spacers, $i); // xs, sm, md, lg, xl
+ $scale: $i - 1; // 0, 1, 2, 3, 4, 5, 6
+
+ /* 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 */
- .py-#{$scale} {
- padding-top: #{$size} !important;
- padding-bottom: #{$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 spacer utilities
-
-// Loop through the breakpoint values
-@each $breakpoint in map-keys($breakpoints) {
-
- // Loop through the spacer values
- @for $i from 1 through length($spacers) {
- @include breakpoint($breakpoint) {
- $size: #{nth($spacers, $i)}; // xs, sm, md, lg, xl
- $scale: #{$i - 1}; // 0, 1, 2, 3, 4, 5, 6
+// responsive padding for containers
+// stylelint-disable-next-line primer/selector-no-utility
+.p-responsive {
+ padding-right: $spacer-3 !important;
+ padding-left: $spacer-3 !important;
- /* Set a #{$size} padding to all sides at the #{$breakpoint} breakpoint */
- .p-#{$breakpoint}-#{$scale} { padding: #{$size} !important; }
- /* Set a #{$size} padding to the top at the #{$breakpoint} breakpoint */
- .pt-#{$breakpoint}-#{$scale} { padding-top: #{$size} !important; }
- /* Set a #{$size} padding to the right at the #{$breakpoint} breakpoint */
- .pr-#{$breakpoint}-#{$scale} { padding-right: #{$size} !important; }
- /* Set a #{$size} padding to the bottom at the #{$breakpoint} breakpoint */
- .pb-#{$breakpoint}-#{$scale} { padding-bottom: #{$size} !important; }
- /* Set a #{$size} padding to the left at the #{$breakpoint} breakpoint */
- .pl-#{$breakpoint}-#{$scale} { padding-left: #{$size} !important; }
-
- /* Set a #{$size} padding to the left & right at the #{$breakpoint} breakpoint */
- .px-#{$breakpoint}-#{$scale} {
- padding-right: #{$size} !important;
- padding-left: #{$size} !important;
- }
+ @include breakpoint(sm) {
+ padding-right: $spacer-6 !important;
+ padding-left: $spacer-6 !important;
+ }
- /* Set a #{$size} padding to the top & bottom at the #{$breakpoint} breakpoint */
- .py-#{$breakpoint}-#{$scale} {
- padding-top: #{$size} !important;
- padding-bottom: #{$size} !important;
- }
- }
+ @include breakpoint(lg) {
+ padding-right: $spacer-3 !important;
+ padding-left: $spacer-3 !important;
}
}
diff --git a/node_modules/primer-utilities/lib/typography.scss b/node_modules/primer-utilities/lib/typography.scss
index 7e588b1d12bdc6849b860367dd981d879c4cd6e9..5d2fb03504a0ca9c7e9ffff0fa4ff971885fdb52 100644
--- a/node_modules/primer-utilities/lib/typography.scss
+++ b/node_modules/primer-utilities/lib/typography.scss
@@ -1,6 +1,11 @@
// stylelint-disable block-closing-brace-space-before, primer/selector-no-utility, selector-list-comma-newline-after
// stylelint-disable comment-empty-line-before
// Type scale variables found in primer-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;
@@ -12,33 +17,28 @@
/* Set the font size to 26px */
.h1 {
- font-size: 26px !important;
+ font-size: $h1-size-mobile !important;
@include breakpoint(md) { font-size: $h1-size !important; }
-
}
/* Set the font size to 22px */
.h2 {
- font-size: 22px !important;
+ font-size: $h2-size-mobile !important;
@include breakpoint(md) { font-size: $h2-size !important; }
}
/* Set the font size to 18px */
.h3 {
- font-size: 18px !important;
+ 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;
-
- @include breakpoint(md) { font-size: $h4-size !important; }
-
}
/* Set the font size to #{$h5-size} */
@@ -55,25 +55,23 @@
// Type utilities that match type sale
/* Set the font size to 26px */
.f1 {
- font-size: 26px !important;
+ font-size: $h1-size-mobile !important;
@include breakpoint(md) { font-size: $h1-size !important; }
-
}
/* Set the font size to 22px */
.f2 {
- font-size: 22px !important;
+ font-size: $h2-size-mobile !important;
@include breakpoint(md) { font-size: $h2-size !important; }
}
/* Set the font size to 18px */
.f3 {
- font-size: 18px !important;
+ font-size: $h3-size-mobile !important;
@include breakpoint(md) { font-size: $h3-size !important; }
-
}
/* Set the font size to #{$h4-size} */
@@ -81,7 +79,6 @@
font-size: $h4-size !important;
@include breakpoint(md) { font-size: $h4-size !important; }
-
}
/* Set the font size to #{$h5-size} */
@@ -92,47 +89,43 @@
// Type utils with light weight that match type scale
/* Set the font size to 40px and weight to light */
.f00-light {
- font-size: 40px !important;
+ 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 {
- font-size: 32px !important;
+ 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 {
- font-size: 26px !important;
+ 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 {
- font-size: 22px !important;
+ 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 {
- font-size: 18px !important;
+ font-size: $h3-size-mobile !important;
font-weight: $font-weight-light !important;
@include breakpoint(md) { font-size: $h3-size !important; }
-
}
// Smallest text size
@@ -144,7 +137,7 @@
margin-bottom: 30px;
font-size: $h3-size;
font-weight: $font-weight-light;
- color: #555;
+ color: $gray-600;
}
// Line-height variations
@@ -157,28 +150,25 @@
.lh-condensed { line-height: $lh-condensed !important; }
/* Set the line height to default */
.lh-default { line-height: $lh-default !important; }
+/* Set the line height to zero */
+.lh-0 { line-height: 0 !important; }
// Text alignments
-/* Text align to the right */
-.text-right { text-align: right !important; }
-/* Text align to the left */
-.text-left { text-align: left !important; }
-/* Text align to the center */
-.text-center { text-align: center !important; }
-
// Responsive text alignment
-// .text-md-left, .text-lg-right, ...
-@each $breakpoint in map-keys($breakpoints) {
+@each $breakpoint, $variant in $responsive-variants {
@include breakpoint($breakpoint) {
- .text-#{$breakpoint}-right { text-align: right !important; }
- .text-#{$breakpoint}-left { text-align: left !important; }
- .text-#{$breakpoint}-center { text-align: center !important; }
+ /* 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: normal !important; }
+.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 */
@@ -186,9 +176,13 @@
/* 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; }
/* Allow long lines with no spaces to line break */
.wb-break-all { word-break: break-all !important; }
@@ -203,9 +197,19 @@
// Text Shadows
/* Add a dark text shadow */
.text-shadow-dark {
- text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25), 0 1px 25px rgba(0, 0, 0, 0.75);
+ 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(255, 255, 255, 0.5);
+ text-shadow: 0 1px 0 rgba($white, 0.5);
+}
+
+/* Set to monospace font */
+.text-mono {
+ font-family: $mono-font;
+}
+
+/* Disallow user from selecting text */
+.user-select-none {
+ user-select: none !important;
}
diff --git a/node_modules/primer-utilities/lib/visibility-display.scss b/node_modules/primer-utilities/lib/visibility-display.scss
index 08b6d608d4146234bf00dde30bfda14546956942..8a2f71c0afbf40fbc997d1e5fc448ace154d1fb8 100644
--- a/node_modules/primer-utilities/lib/visibility-display.scss
+++ b/node_modules/primer-utilities/lib/visibility-display.scss
@@ -2,48 +2,32 @@
// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, primer/selector-no-utility
// stylelint-disable comment-empty-line-before
+$display-values: (
+ block,
+ flex,
+ inline,
+ inline-block,
+ inline-flex,
+ none,
+ table,
+ table-cell
+);
+
+// Responsive display utilities
+@each $breakpoint, $variant in $responsive-variants {
+ @include breakpoint($breakpoint) {
+ @each $display in $display-values {
+ .d#{$variant}-#{$display} { display: $display !important; }
+ }
+ }
+}
+
// Visibility utilities
/* Visibility hidden */
.v-hidden { visibility: hidden !important; }
/* Visibility visible */
.v-visible { visibility: visible !important; }
-// Display utilites
-/* Set the display to table */
-.d-table { display: table !important; }
-/* Set the display to table-cell */
-.d-table-cell { display: table-cell !important; }
-/* Set the table-layout to fixed */
-.table-fixed { table-layout: fixed !important; }
-
-/* Set the display to block */
-.d-block { display: block !important; }
-/* Set the display to inline */
-.d-inline { display: inline !important; }
-/* Set the display to inline-block */
-.d-inline-block { display: inline-block !important; }
-/* Set the display to none */
-.d-none { display: none !important; }
-
-// Responsive display utlities
-// .d-sm-none, .d-lg-inline, ...
-@each $breakpoint in map-keys($breakpoints) {
- @include breakpoint($breakpoint) {
- /* Set the display to table at the #{$breakpoint} breakpoint */
- .d-#{$breakpoint}-table { display: table !important; }
- /* Set the display to table cell at the #{$breakpoint} breakpoint */
- .d-#{$breakpoint}-table-cell { display: table-cell !important; }
- /* Set the display to block at the #{$breakpoint} breakpoint */
- .d-#{$breakpoint}-block { display: block !important; }
- /* Set the display to inline at the #{$breakpoint} breakpoint */
- .d-#{$breakpoint}-inline { display: inline !important; }
- /* Set the display to inline block at the #{$breakpoint} breakpoint */
- .d-#{$breakpoint}-inline-block { display: inline-block !important; }
- /* Set the display to none at the #{$breakpoint} breakpoint */
- .d-#{$breakpoint}-none { display: none !important; }
- }
-}
-
// Hide utilities for each breakpoint
// Each hide utility only applies to one breakpoint range.
@media (max-width: $width-sm) {
@@ -70,19 +54,37 @@
}
}
+/* 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;
- margin: -1px;
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;
+ }
+}