github-docs 0.0.5 → 0.0.18

data/_sass/primer-support/variables/typography.scss

@@ -1,43 +0,0 @@
-// 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;

data/_sass/primer-utilities/animations.scss

@@ -1,184 +0,0 @@
-// This file contains reusable animations for github.
-// stylelint-disable primer/selector-no-utility
-
-/* Fade in an element */
-.anim-fade-in {
-  animation-name: fade-in;
-  animation-duration: 1s;
-  animation-timing-function: ease-in-out;
-
-  &.fast {
-    animation-duration: 300ms;
-  }
-}
-
-@keyframes fade-in {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-/* Fade out an element */
-.anim-fade-out {
-  animation-name: fade-out;
-  animation-duration: 1s;
-  animation-timing-function: ease-out;
-
-  &.fast {
-    animation-duration: 0.3s;
-  }
-}
-
-@keyframes fade-out {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-  }
-}
-
-/* Fade in and slide up an element */
-.anim-fade-up {
-  opacity: 0;
-  animation-name: fade-up;
-  animation-duration: 0.3s;
-  animation-fill-mode: forwards;
-  animation-timing-function: ease-out;
-  animation-delay: 1s;
-}
-
-@keyframes fade-up {
-  0% {
-    opacity: 0.8;
-    transform: translateY(100%);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* Fade an element out and slide down */
-.anim-fade-down {
-  animation-name: fade-down;
-  animation-duration: 0.3s;
-  animation-fill-mode: forwards;
-  animation-timing-function: ease-in;
-}
-
-@keyframes fade-down {
-  0% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-
-  100% {
-    opacity: 0.5;
-    transform: translateY(100%);
-  }
-}
-
-/* Grow an element width from 0 to 100% */
-.anim-grow-x {
-  width: 0%;
-  animation-name: grow-x;
-  animation-duration: 0.3s;
-  animation-fill-mode: forwards;
-  animation-timing-function: ease;
-  animation-delay: 0.5s;
-}
-
-@keyframes grow-x {
-  to { width: 100%; }
-}
-
-/* Shrink an element from 100% to 0% */
-.anim-shrink-x {
-  animation-name: shrink-x;
-  animation-duration: 0.3s;
-  animation-fill-mode: forwards;
-  animation-timing-function: ease-in-out;
-  animation-delay: 0.5s;
-}
-
-@keyframes shrink-x {
-  to { width: 0%; }
-}
-
-/* Fade in an element and scale it fast */
-.anim-scale-in {
-  animation-name: scale-in;
-  animation-duration: 0.15s;
-  animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1.5);
-}
-
-@keyframes scale-in {
-  0% {
-    opacity: 0;
-    transform: scale(0.5);
-  }
-
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-/* Pulse an element's opacity */
-.anim-pulse {
-  animation-name: pulse;
-  animation-duration: 2s;
-  animation-timing-function: linear;
-  animation-iteration-count: infinite;
-}
-
-@keyframes pulse {
-  0% {
-    opacity: 0.3;
-  }
-
-  10% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0.3;
-  }
-}
-
-/* Pulse in an element */
-.anim-pulse-in {
-  animation-name: pulse-in;
-  animation-duration: 0.5s;
-}
-
-@keyframes pulse-in {
-  0% {
-    transform: scale3d(1, 1, 1);
-  }
-
-  50% {
-    transform: scale3d(1.1, 1.1, 1.1);
-  }
-
-  100% {
-    transform: scale3d(1, 1, 1);
-  }
-}
-
-/* Increase scale of an element on hover */
-.hover-grow {
-  transition: transform 0.3s;
-  backface-visibility: hidden;
-
-  &:hover {
-    transform: scale(1.025);
-  }
-}

data/_sass/primer-utilities/borders.scss

@@ -1,100 +0,0 @@
-// Border utilities
-// stylelint-disable block-opening-brace-space-before, primer/selector-no-utility, comment-empty-line-before
-
-/* 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-light */
-.border-blue-light  { border-color: $border-blue-light !important; }
-/* Use with .border to turn the border green */
-.border-green       { border-color: $border-green !important; }
-/* Use with .border to turn the border green light */
-.border-green-light { border-color: $border-green-light !important; }
-/* Use with .border to turn the border red */
-.border-red         { border-color: $border-red !important; }
-/* Use with .border to turn the border red-light */
-.border-red-light   { border-color: $border-red-light !important; }
-/* Use with .border to turn the border purple */
-.border-purple      { border-color: $border-purple !important; }
-/* Use with .border to turn the border yellow */
-.border-yellow      { border-color: $border-yellow !important; }
-/* Use with .border to turn the border gray-light */
-.border-gray-light  { border-color: $border-gray-light !important; }
-/* Use with .border to turn the border gray-dark */
-.border-gray-dark   { border-color: $border-gray-dark !important; }
-/* Use with .border to turn the border rgba black 0.15 */
-.border-black-fade  { border-color: $border-black-fade !important; }
-
-$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 !important;
-        }
-      }
-
-      .rounded#{$variant}-#{$edge}-1 {
-        @each $corner in $corners {
-          border-#{$corner}-radius: $border-radius !important;
-        }
-      }
-
-      .rounded#{$variant}-#{$edge}-2 {
-        @each $corner in $corners {
-          border-#{$corner}-radius: $border-radius * 2 !important;
-        }
-      }
-    }
-  }
-}
-
-/* Add a 50% border-radius to make something into a circle */
-.circle { border-radius: 50% !important; }

data/_sass/primer-utilities/box-shadow.scss

@@ -1,26 +0,0 @@
-// Box shadow utilities
-// stylelint-disable primer/selector-no-utility
-
-// Box shadows
-
-.box-shadow {
-  box-shadow: $box-shadow !important;
-}
-
-.box-shadow-medium {
-  box-shadow: $box-shadow-medium !important;
-}
-
-.box-shadow-large {
-  box-shadow: $box-shadow-large !important;
-}
-
-.box-shadow-extra-large {
-  box-shadow: $box-shadow-extra-large !important;
-}
-
-// Turn off box shadow
-
-.box-shadow-none {
-  box-shadow: none !important;
-}

data/_sass/primer-utilities/colors.scss

@@ -1,106 +0,0 @@
-// Color utilities
-// stylelint-disable block-opening-brace-space-before, primer/selector-no-utility
-// stylelint-disable comment-empty-line-before
-
-// background colors
-/* Set the background to $bg-white */
-.bg-white      { background-color: $bg-white !important; }
-/* Set the background to $bg-blue */
-.bg-blue       { background-color: $bg-blue !important; }
-/* Set the background to $bg-blue-light */
-.bg-blue-light { background-color: $bg-blue-light !important; }
-/* Set the background to $bg-gray-dark */
-.bg-gray-dark  { background-color: $bg-gray-dark !important; }
-/* Set the background to $bg-gray */
-.bg-gray       { background-color: $bg-gray !important; }
-/* Set the background to $bg-gray-light */
-.bg-gray-light { background-color: $bg-gray-light !important; }
-/* Set the background to $bg-green */
-.bg-green      { background-color: $bg-green !important; }
-/* Set the background to $bg-green-light */
-.bg-green-light     { background-color: $bg-green-light !important; }
-/* Set the background to $bg-red */
-.bg-red        { background-color: $bg-red !important; }
-/* Set the background to $bg-red-light */
-.bg-red-light  { background-color: $bg-red-light !important; }
-/* Set the background to $bg-yellow */
-.bg-yellow     { background-color: $bg-yellow !important; }
-/* Set the background to $bg-yellow-light */
-.bg-yellow-light     { background-color: $bg-yellow-light !important; }
-/* Set the background to $bg-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($black, 0.065), rgba($black, 0)) !important;
-  background-repeat: no-repeat !important;
-  background-size: 100% 200px !important;
-}
-
-// text colors
-/* Set the text color to $text-blue */
-.text-blue          { color: $text-blue !important; }
-/* Set the text color to $text-red */
-.text-red           { color: $text-red !important; }
-/* Set the text color to $text-gray-light */
-.text-gray-light    { color: $text-gray-light !important; }
-/* Set the text color to $text-gray */
-.text-gray          { color: $text-gray !important; }
-/* Set the text color to $text-gray-dark */
-.text-gray-dark     { color: $text-gray-dark !important; }
-/* Set the text color to $text-green */
-.text-green         { color: $text-green !important; }
-/* Set the text color to $text-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 */
-.text-white         { color: $text-white !important; }
-/* Set the text color to inherit */
-.text-inherit       { color: inherit !important; }
-
-// Text states
-// 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
-.link-gray {
-  color: $text-gray !important;
-
-  &:hover {
-    color: $text-blue !important;
-  }
-}
-
-// Sets the links color to $text-gray-dark and $text-blue on hover
-.link-gray-dark {
-  color: $text-gray-dark !important;
-
-  &:hover {
-    color: $text-blue !important;
-  }
-}
-
-/* Set the link color to $text-blue on hover
-  Useful when you want only part of a link to turn blue on hover */
-.link-hover-blue {
-  &:hover {
-    color: $text-blue !important;
-  }
-}
-
-/* Make a link $text-gray, then $text-blue on hover and removes the underline */
-.muted-link {
-  color: $text-gray !important;
-
-  &:hover {
-    color: $text-blue !important;
-    text-decoration: none;
-  }
-}