Skip to content
Snippets Groups Projects
Unverified Commit 8968860b authored by Patrick Marsceill's avatar Patrick Marsceill
Browse files

Ignore node modules

parent aa5a4e52
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 620 additions and 160 deletions
.gitignore
+ 1
− 0
View file @ 8968860b
...@@ -3,3 +3,4 @@ ...@@ -3,3 +3,4 @@
.sass-cache .sass-cache
_site _site
Gemfile.lock Gemfile.lock
node_modules
_sass/base.scss
+ 1
− 1
View file @ 8968860b
// //
// Base element style overrides // Base element style overrides
// //
// stylelint-disable selector-no-type // stylelint-disable selector-no-type, selector-max-type
* { * {
box-sizing: border-box; box-sizing: border-box;
......
_sass/code.scss
+ 1
− 1
View file @ 8968860b
// //
// Code and syntax highlighting // 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 { code {
padding: 0.2em 0.15em; padding: 0.2em 0.15em;
......
_sass/content.scss
+ 1
− 1
View file @ 8968860b
// //
// Styles for rendered markdown in the .main-content container // 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 { .page-content {
ul, ul,
......
_sass/tables.scss
+ 1
− 1
View file @ 8968860b
// //
// Tables // Tables
// //
// stylelint-disable max-nesting-depth, selector-no-type // stylelint-disable max-nesting-depth, selector-no-type, selector-max-type
table { table {
display: block; display: block;
......
_sass/typography.scss
+ 1
− 1
View file @ 8968860b
// //
// Typography // Typography
// //
// stylelint-disable primer/selector-no-utility, selector-no-type // stylelint-disable primer/selector-no-utility, selector-no-type, selector-max-type
h1, h1,
.text-alpha { .text-alpha {
......
node_modules/primer-support/index.scss
+ 4
− 1
View file @ 8968860b
// variables // 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 // mixins
@import "./lib/mixins/typography.scss"; @import "./lib/mixins/typography.scss";
......
node_modules/primer-support/lib/mixins/buttons.scss
+ 106
− 83
View file @ 8968860b
// stylelint-disable block-closing-brace-newline-after
// Button color generator for primary and themed buttons // Button color generator for primary and themed buttons
@mixin solid-btn($foreground: $text-gray-dark, $background: #eee) { // New button hotness
color: $foreground; @mixin btn-solid($color, $bg, $bg2) {
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); color: $color;
background-color: $background; background-color: $bg2;
background-image: linear-gradient(saturate(lighten($background, 13%), 8%), saturate(darken($background, 9%), 5%)); background-image: linear-gradient(-180deg, $bg 0%, $bg2 90%);
border: 1px solid darken($background, 8%);
.counter { @if $bg == $gray-000 {
color: saturate(darken($background, 9%), 5%); &:focus,
background: $foreground; &.focus {
} box-shadow: $btn-input-focus-shadow;
}
&:hover, &:hover,
&:active, &.hover {
&.zeroclipboard-is-hover, background-color: darken($bg2, 3%);
&.zeroclipboard-is-active { background-image: linear-gradient(-180deg, darken($bg, 3%) 0%, darken($bg2, 3%) 90%);
background-color: darken($background, 10%); background-position: 0 -$em-spacer-5;
background-image: linear-gradient(lighten($background, 8%), darken($background, 13%)); border-color: rgba($black, 0.35);
border-color: darken($background, 12%); }
}
&:active, &:active,
&.selected, &.selected,
&.zeroclipboard-is-active { [open] > & {
background-color: darken($background, 15%); background-color: darken(desaturate($bg, 10%), 6%);
background-image: none; background-image: none;
border-color: darken($background, 20%); border-color: rgba($black, 0.35); // repeat to avoid shift on click-drag off of button
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15); box-shadow: $btn-active-shadow;
} }
&.selected:hover { &:disabled,
background-color: darken($background, 20%); &.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, } @else {
&.disabled { &:focus,
&, &.focus {
&:hover { box-shadow: 0 0 0 0.2em rgba($bg, 0.4);
color: $foreground; }
cursor: default;
background-color: mix(#fff, $background, 50%); &:hover,
background-image: linear-gradient(mix(#fff, $background, 60%), mix(#fff, darken($background, 5%), 45%)); &.hover {
border-color: mix(#fff, $background, 40%); 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; 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) { &:focus {
color: $foreground; box-shadow: 0 0 0 0.2em rgba($color, 0.4);
}
&:hover { &:hover {
color: $text-white; color: $text-white;
background-color: $foreground; background-color: $color;
background-image: linear-gradient(lighten($foreground, 30%), lighten($foreground, 10%)); background-image: linear-gradient(-180deg, lighten($color, 10%) 0%, $color 90%);
border-color: $foreground; border-color: $black-fade-50;
.Counter {
color: $text-white;
}
} }
&:active, &:active,
&.selected { &.selected,
[open] > & {
color: $text-white; color: $text-white;
background-color: darken($foreground, 5%); background-color: darken($color, 5%);
background-image: none; background-image: none;
border-color: darken($foreground, 8%); border-color: $black-fade-50;
} box-shadow: $btn-active-shadow;
&.selected:hover {
background-color: darken($foreground, 5%);
} }
&:disabled, &:disabled,
&.disabled { &.disabled {
&, color: rgba($color, 0.4);
&:hover { background-color: $bg2;
color: mix(#fff, $foreground, 50%); background-image: none;
background-color: #efefef; border-color: transparentize($black, 0.8); // back to default .btn
background-image: linear-gradient(#fefefe, #efefef); box-shadow: none;
border-color: #e1e1e1;
}
}
&:hover,
&:active,
&.selected {
.counter {
color: $text-white;
}
} }
} }
// Outline color generator for btn-outline to make the hover state inverse the text and bg colors. // 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) {
@mixin outline-btn($text-color: $text-blue, $bg-color: $bg-white) {
color: $text-color; color: $text-color;
background-color: $bg-color; background-color: $bg-color;
background-image: none; background-image: none;
border: 1px solid $border-gray;
.counter { .Counter {
background-color: rgba(0, 0, 0, 0.07); background-color: rgba($black, 0.07);
} }
&:hover, &:hover,
&:active, &:active,
&.selected, &.selected,
&.zeroclipboard-is-hover, [open] > & {
&.zeroclipboard-is-active {
color: $bg-color; color: $bg-color;
background-color: $text-color; background-color: $text-color;
background-image: none; background-image: none;
border-color: $text-color; border-color: $text-color;
.counter { .Counter {
color: $text-color; color: $text-color;
background-color: $bg-color; background-color: $bg-color;
} }
} }
&.selected:hover { &:focus {
background-color: darken($text-color, 5%); border-color: $text-color;
box-shadow: 0 0 0 0.2em rgba($text-color, 0.4);
} }
&:disabled, &:disabled,
&.disabled { &.disabled {
&, color: $black-fade-30;
&:hover { background-color: $bg-white;
color: $text-gray; border-color: $black-fade-15;
background-color: $bg-white; box-shadow: none;
background-image: none;
border-color: $border-gray;
}
} }
} }
node_modules/primer-support/lib/mixins/layout.scss
+ 18
− 12
View file @ 8968860b
// Responsive media queries // Responsive media queries
@mixin breakpoint($breakpoint) { @mixin breakpoint($breakpoint) {
// Retrieves the value from the key @if $breakpoint == "" {
$value: map-get($breakpoints, $breakpoint); @content;
// 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 { @else {
@warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. " // Retrieves the value from the key
+ "Please make sure it is defined in `$breakpoints` map."; $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.";
}
} }
} }
......
node_modules/primer-support/lib/mixins/misc.scss
+ 1
− 1
View file @ 8968860b
// Generate a two-color caret for any element. // 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, &::after,
&::before { &::before {
position: absolute; position: absolute;
......
node_modules/primer-support/lib/mixins/typography.scss
+ 26
− 18
View file @ 8968860b
...@@ -40,37 +40,45 @@ ...@@ -40,37 +40,45 @@
} }
// Responsive heading mixins // 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. // and don't need to be smaller on mobile.
@mixin h1-reponsive { @mixin f1-responsive {
font-size: 26px; font-size: $h1-size-mobile;
font-weight: $font-weight-bold;
// Up to 32px in future // 32px on desktop
@include breakpoint(md) { font-size: 30px; } @include breakpoint(md) { font-size: $h1-size; }
} }
@mixin h2-responsive { @mixin f2-responsive {
font-size: 20px; font-size: $h2-size-mobile;
font-weight: $font-weight-bold;
// Up to 22px or 24px in future // 24px on desktop
@include breakpoint(md) { font-size: 21px; } @include breakpoint(md) { font-size: $h2-size; }
} }
@mixin h3-responsive { @mixin f3-responsive {
font-size: 14px; font-size: $h3-size-mobile;
font-weight: $font-weight-bold;
@include breakpoint(md) { font-size: 16px; } // 20px on desktop
@include breakpoint(md) { font-size: $h3-size; }
} }
@mixin h4-responsive { // These use the mixins from above for responsive heading sizes.
font-size: 13px; // 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; 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;
} }
node_modules/primer-support/lib/variables/color-system.scss 0 → 100644
+ 114
− 0
View file @ 8968860b
//
//
// -------- 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;
node_modules/primer-support/lib/variables/colors.scss 0 → 100644
+ 67
− 0
View file @ 8968860b
@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;
node_modules/primer-support/lib/variables/layout.scss 0 → 100644
+ 72
− 0
View file @ 8968860b
// 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}"));
}
node_modules/primer-support/lib/variables/misc.scss 0 → 100644
+ 40
− 0
View file @ 8968860b
// 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;
node_modules/primer-support/lib/variables/typography.scss 0 → 100644
+ 43
− 0
View file @ 8968860b
// 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;
node_modules/primer-utilities/index.scss
+ 1
− 0
View file @ 8968860b
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
@import "./lib/borders.scss"; @import "./lib/borders.scss";
@import "./lib/box-shadow.scss"; @import "./lib/box-shadow.scss";
@import "./lib/colors.scss"; @import "./lib/colors.scss";
@import "./lib/details.scss";
@import "./lib/flexbox.scss"; @import "./lib/flexbox.scss";
@import "./lib/layout.scss"; @import "./lib/layout.scss";
@import "./lib/margin.scss"; @import "./lib/margin.scss";
......
node_modules/primer-utilities/lib/animations.scss
+ 33
− 2
View file @ 8968860b
// This file contains reusable animations for github. // This file contains reusable animations for github.
// stylelint-disable primer/selector-no-utility // 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 { .anim-fade-in {
animation-name: fade-in; animation-name: fade-in;
animation-duration: 1s; animation-duration: 1s;
...@@ -22,6 +22,27 @@ ...@@ -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 */ /* Fade in and slide up an element */
.anim-fade-up { .anim-fade-up {
opacity: 0; opacity: 0;
...@@ -151,3 +172,13 @@ ...@@ -151,3 +172,13 @@
transform: scale3d(1, 1, 1); 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);
}
}
node_modules/primer-utilities/lib/borders.scss
+ 85
− 38
View file @ 8968860b
// Border utilities // Border utilities
// stylelint-disable block-opening-brace-space-before, primer/selector-no-utility, comment-empty-line-before // stylelint-disable block-opening-brace-space-before, primer/selector-no-utility, comment-empty-line-before
/* Add a gray border */ /* Add a gray border on all sides */
.border { border: $border !important; } .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 to the left and right */ /* Add a gray border to the left and right */
.border-y { .border-y {
border-top: $border !important; border-top: $border !important;
border-bottom: $border !important; border-bottom: $border !important;
} }
/* Remove borders from all sides */
.border-0 { border: 0 !important; }
.border-dashed { border-style: dashed !important; } .border-dashed { border-style: dashed !important; }
/* Use with .border to turn the border blue */ /* Use with .border to turn the border blue */
.border-blue { border-color: $border-blue !important; } .border-blue { border-color: $border-blue !important; }
/* Use with .border to turn the border blue */ /* Use with .border to turn the border blue-light */
.border-blue-dark { border-color: $border-blue-dark !important; } .border-blue-light { border-color: $border-blue-light !important; }
/* Use with .border to turn the border red */ /* Use with .border to turn the border green */
.border-red { border-color: $border-red !important; } .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 */ /* 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 */ /* 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 */ /* Use with .border to turn the border gray-dark */
.border-gray-dark { border-color: $border-gray-dark !important; } .border-gray-dark { border-color: $border-gray-dark !important; }
/* Use with .border to turn the border rgba black 0.15 */
// Without borders .border-black-fade { border-color: $border-black-fade !important; }
/* Remove all borders */
.border-0 { border: 0 !important; } $edges: (
/* Remove the top border */ top: (top-left, top-right),
.border-top-0 { border-top: 0 !important; } right: (top-right, bottom-right),
/* Remove the right border */ bottom: (bottom-right, bottom-left),
.border-right-0 { border-right: 0 !important; } left: (bottom-left, top-left)
/* Remove the bottom border */ );
.border-bottom-0 { border-bottom: 0 !important; }
/* Remove the left border */ @each $breakpoint, $variant in $responsive-variants {
.border-left-0 { border-left: 0 !important; } @include breakpoint($breakpoint) {
/* Add a gray border */
// Rounded corners /* Add a gray border to the top */
/* Remove the border-radius */ .border#{$variant}-top { border-top: $border !important; }
.rounded-0 { border-radius: 0 !important; } /* Add a gray border to the right */
/* Add a border-radius to all corners */ .border#{$variant}-right { border-right: $border !important; }
.rounded-1 { border-radius: $border-radius !important; } /* Add a gray border to the bottom */
/* Add a 2x border-radius to all corners */ .border#{$variant}-bottom { border-bottom: $border !important; }
.rounded-2 { border-radius: $border-radius * 2 !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; }
node_modules/primer-utilities/lib/box-shadow.scss
+ 4
− 0
View file @ 8968860b
...@@ -15,6 +15,10 @@ ...@@ -15,6 +15,10 @@
box-shadow: $box-shadow-large !important; box-shadow: $box-shadow-large !important;
} }
.box-shadow-extra-large {
box-shadow: $box-shadow-extra-large !important;
}
// Turn off box shadow // Turn off box shadow
.box-shadow-none { .box-shadow-none {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment