From dfb6e1f80754c1c8f2d4d332c5292319f008a67b Mon Sep 17 00:00:00 2001 From: amzrk2 Date: Wed, 27 May 2020 22:53:13 +0800 Subject: v2 original port --- assets/sass/@primer/css/support/README.md | 25 --- assets/sass/@primer/css/support/index.scss | 11 - .../sass/@primer/css/support/mixins/buttons.scss | 167 -------------- assets/sass/@primer/css/support/mixins/layout.scss | 58 ----- assets/sass/@primer/css/support/mixins/misc.scss | 29 --- .../@primer/css/support/mixins/typography.scss | 84 ------- .../css/support/variables/color-system.scss | 243 --------------------- .../sass/@primer/css/support/variables/colors.scss | 63 ------ .../sass/@primer/css/support/variables/layout.scss | 129 ----------- .../sass/@primer/css/support/variables/misc.scss | 26 --- .../@primer/css/support/variables/typography.scss | 42 ---- 11 files changed, 877 deletions(-) delete mode 100644 assets/sass/@primer/css/support/README.md delete mode 100644 assets/sass/@primer/css/support/index.scss delete mode 100644 assets/sass/@primer/css/support/mixins/buttons.scss delete mode 100644 assets/sass/@primer/css/support/mixins/layout.scss delete mode 100644 assets/sass/@primer/css/support/mixins/misc.scss delete mode 100644 assets/sass/@primer/css/support/mixins/typography.scss delete mode 100644 assets/sass/@primer/css/support/variables/color-system.scss delete mode 100644 assets/sass/@primer/css/support/variables/colors.scss delete mode 100644 assets/sass/@primer/css/support/variables/layout.scss delete mode 100644 assets/sass/@primer/css/support/variables/misc.scss delete mode 100644 assets/sass/@primer/css/support/variables/typography.scss (limited to 'assets/sass/@primer/css/support') 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; -- cgit v1.2.3