jekyll-rtd-theme 1.1.8 → 2.0.0.pre.beta

data/_sass/@primer/utilities/animations.scss

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

data/_sass/@primer/utilities/borders.scss

@@ -0,0 +1,184 @@
+// Core border utilities
+// stylelint-disable block-opening-brace-space-before, comment-empty-line-before
+
+/* Add a gray border to the left and right */
+.border-x {
+  border-right: $border !important;
+  border-left: $border !important;
+}
+
+/* Add a gray border to the top and bottom */
+.border-y {
+  border-top: $border !important;
+  border-bottom: $border !important;
+}
+
+/* Responsive gray borders */
+@each $breakpoint, $variant in $responsive-variants {
+  @include breakpoint($breakpoint) {
+    /* Add a gray border on all sides at/above this breakpoint */
+    .border#{$variant} {
+      border: $border !important;
+    }
+    /* Set the border width to 0 on all sides at/above this breakpoint */
+    .border#{$variant}-0 {
+      border: 0 !important;
+    }
+
+    /* Add a gray border to the top */
+    .border#{$variant}-top {
+      border-top: $border !important;
+    }
+    /* Add a gray border to the right */
+    .border#{$variant}-right {
+      border-right: $border !important;
+    }
+    /* Add a gray border to the bottom */
+    .border#{$variant}-bottom {
+      border-bottom: $border !important;
+    }
+    /* Add a gray border to the left */
+    .border#{$variant}-left {
+      border-left: $border !important;
+    }
+
+    /* Remove the top border */
+    .border#{$variant}-top-0 {
+      border-top: 0 !important;
+    }
+    /* Remove the right border */
+    .border#{$variant}-right-0 {
+      border-right: 0 !important;
+    }
+    /* Remove the bottom border */
+    .border#{$variant}-bottom-0 {
+      border-bottom: 0 !important;
+    }
+    /* Remove the left border */
+    .border#{$variant}-left-0 {
+      border-left: 0 !important;
+    }
+
+    // Rounded corners
+    .rounded#{$variant} {
+      border-radius: $border-radius !important;
+    }
+    .rounded#{$variant}-0 {
+      border-radius: 0 !important;
+    }
+    .rounded#{$variant}-1 {
+      border-radius: $border-radius-1 !important;
+    }
+    .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 / 2 !important;
+        }
+      }
+
+      .rounded#{$variant}-#{$edge}-2 {
+        @each $corner in $corners {
+          border-#{$corner}-radius: $border-radius !important;
+        }
+      }
+
+      .rounded#{$variant}-#{$edge}-3 {
+        @each $corner in $corners {
+          border-#{$corner}-radius: $border-radius * 2 !important;
+        }
+      }
+    }
+  }
+}
+
+/* Add a 50% border-radius to make something into a circle */
+.circle {
+  border-radius: 50% !important;
+}
+
+/* Change the border style to dashed, in conjunction with another utility */
+.border-dashed {
+  // stylelint-disable-next-line primer/borders
+  border-style: dashed !important;
+}
+
+/* Use with .border to turn the border blue */
+.border-blue {
+  border-color: $border-blue !important;
+}
+/* Use with .border to turn the border blue-light */
+.border-blue-light {
+  border-color: $border-blue-light !important;
+}
+/* Use with .border to turn the border green */
+.border-green {
+  border-color: $border-green !important;
+}
+/* Use with .border to turn the border green light */
+.border-green-light {
+  border-color: $border-green-light !important;
+}
+/* Use with .border to turn the border red */
+.border-red {
+  border-color: $border-red !important;
+}
+/* Use with .border to turn the border red-light */
+.border-red-light {
+  border-color: $border-red-light !important;
+}
+/* Use with .border to turn the border purple */
+.border-purple {
+  border-color: $border-purple !important;
+}
+/* Use with .border to turn the border yellow */
+.border-yellow {
+  border-color: $border-yellow !important;
+}
+/* Use with .border to turn the border gray-light */
+.border-gray-light {
+  border-color: $border-gray-light !important;
+}
+/* Use with .border to turn the border gray-dark */
+.border-gray-dark {
+  border-color: $border-gray-dark !important;
+}
+
+/* Use with .border to turn the border rgba black 0.15 */
+.border-black-fade {
+  border-color: $border-black-fade !important;
+}
+/* Use with .border to turn the border rgba white 0.15 */
+.border-white-fade {
+  border-color: $border-white-fade !important;
+}
+
+/* Use with .border to turn the border white w/varying transparency */
+.border-white-fade-15 {
+  border-color: $border-white-fade !important;
+}
+// stylelint-disable-next-line primer/borders
+.border-white-fade-30 {
+  border-color: $white-fade-30 !important;
+}
+// stylelint-disable-next-line primer/borders
+.border-white-fade-50 {
+  border-color: $white-fade-50 !important;
+}
+// stylelint-disable-next-line primer/borders
+.border-white-fade-70 {
+  border-color: $white-fade-70 !important;
+}
+// stylelint-disable-next-line primer/borders
+.border-white-fade-85 {
+  border-color: $white-fade-85 !important;
+}

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

@@ -0,0 +1,25 @@
+// Box shadow utilities
+
+// Box shadows
+
+.box-shadow {
+  box-shadow: $box-shadow !important;
+}
+
+.box-shadow-medium {
+  box-shadow: $box-shadow-medium !important;
+}
+
+.box-shadow-large {
+  box-shadow: $box-shadow-large !important;
+}
+
+.box-shadow-extra-large {
+  box-shadow: $box-shadow-extra-large !important;
+}
+
+// Turn off box shadow
+
+.box-shadow-none {
+  box-shadow: none !important;
+}

data/_sass/@primer/utilities/colors.scss

@@ -0,0 +1,185 @@
+// Color utilities
+// stylelint-disable block-opening-brace-space-before, comment-empty-line-before
+
+// background colors
+/* Set the background to $bg-white */
+.bg-white {
+  background-color: $bg-white !important;
+}
+/* Set the background to $bg-blue */
+.bg-blue {
+  background-color: $bg-blue !important;
+}
+/* Set the background to $bg-blue-light */
+.bg-blue-light {
+  background-color: $bg-blue-light !important;
+}
+/* Set the background to $bg-gray-dark */
+.bg-gray-dark {
+  background-color: $bg-gray-dark !important;
+}
+/* Set the background to $bg-gray */
+.bg-gray {
+  background-color: $bg-gray !important;
+}
+/* Set the background to $bg-gray-light */
+.bg-gray-light {
+  background-color: $bg-gray-light !important;
+}
+/* Set the background to $bg-green */
+.bg-green {
+  background-color: $bg-green !important;
+}
+/* Set the background to $bg-green-light */
+.bg-green-light {
+  background-color: $bg-green-light !important;
+}
+/* Set the background to $bg-red */
+.bg-red {
+  background-color: $bg-red !important;
+}
+/* Set the background to $bg-red-light */
+.bg-red-light {
+  background-color: $bg-red-light !important;
+}
+/* Set the background to $bg-yellow */
+.bg-yellow {
+  background-color: $bg-yellow !important;
+}
+/* Set the background to $bg-yellow-light */
+.bg-yellow-light {
+  background-color: $bg-yellow-light !important;
+}
+/* Set the background to $bg-yellow-dark */
+.bg-yellow-dark {
+  background-color: $bg-yellow-dark !important;
+}
+/* Set the background to $bg-purple */
+.bg-purple {
+  background-color: $bg-purple !important;
+}
+/* Set the background to $bg-pink */
+.bg-pink {
+  background-color: $bg-pink !important;
+}
+/* Set the background to $bg-purple-light */
+.bg-purple-light {
+  background-color: $bg-purple-light !important;
+}
+/* Set the background to $bg-orange */
+.bg-orange {
+  background-color: $bg-orange !important;
+}
+
+// Generate a foreground and background utility for every shade of every hue
+@each $hue, $shades in $hue-maps {
+  @each $index, $color in $shades {
+    .color-#{$hue}-#{$index} {
+      color: $color !important;
+    }
+    .bg-#{$hue}-#{$index} {
+      background-color: $color !important;
+    }
+  }
+}
+
+.bg-shade-gradient {
+  background-image: linear-gradient(
+    180deg,
+    rgba($black, 0.065),
+    rgba($black, 0)
+  ) !important;
+  background-repeat: no-repeat !important;
+  background-size: 100% 200px !important;
+}
+
+// text colors
+/* Set the text color to $text-blue */
+.text-blue {
+  color: $text-blue !important;
+}
+/* Set the text color to $text-red */
+.text-red {
+  color: $text-red !important;
+}
+/* Set the text color to $text-gray-light */
+.text-gray-light {
+  color: $text-gray-light !important;
+}
+/* Set the text color to $text-gray */
+.text-gray {
+  color: $text-gray !important;
+}
+/* Set the text color to $text-gray-dark */
+.text-gray-dark {
+  color: $text-gray-dark !important;
+}
+/* Set the text color to $text-green */
+.text-green {
+  color: $text-green !important;
+}
+/* Set the text color to $text-yellow */
+.text-yellow {
+  color: $text-yellow !important;
+}
+/* Set the text color to $text-orange */
+.text-orange {
+  color: $text-orange !important;
+}
+/* Set the text color to $text-orange-light */
+.text-orange-light {
+  color: $text-orange-light !important;
+}
+/* Set the text color to $text-purple */
+.text-purple {
+  color: $text-purple !important;
+}
+/* Set the text color to $text-pink */
+.text-pink {
+  color: $text-pink !important;
+}
+/* Set the text color to $text-white */
+.text-white {
+  color: $text-white !important;
+}
+/* Set the text color to inherit */
+.text-inherit {
+  color: inherit !important;
+}
+
+// Link colors
+// Sets the links color to $text-gray and $text-blue on hover
+.link-gray {
+  color: $text-gray !important;
+
+  &:hover {
+    color: $text-blue !important;
+  }
+}
+
+// Sets the links color to $text-gray-dark and $text-blue on hover
+.link-gray-dark {
+  color: $text-gray-dark !important;
+
+  &:hover {
+    color: $text-blue !important;
+  }
+}
+
+/* Set the link color to $text-blue on hover
+  Useful when you want only part of a link to turn blue on hover */
+.link-hover-blue {
+  &:hover {
+    color: $text-blue !important;
+  }
+}
+
+/* Make a link $text-gray, then $text-blue on hover and removes the underline */
+.muted-link {
+  color: $text-gray !important;
+
+  &:hover {
+    color: $text-blue !important;
+    text-decoration: none;
+  }
+}

data/_sass/@primer/utilities/details.scss

@@ -0,0 +1,34 @@
+// stylelint-disable selector-max-type
+
+.details-overlay[open] > summary::before {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 80;
+  display: block;
+  cursor: default;
+  content: " ";
+  background: transparent;
+}
+
+.details-overlay-dark[open] > summary::before {
+  z-index: 99;
+  background: $bg-black-fade;
+}
+
+.details-reset {
+  // Remove marker added by the display: list-item browser default
+  > summary {
+    list-style: none;
+  }
+  // Remove marker added by details polyfill
+  > summary::before {
+    display: none;
+  }
+  // Remove marker added by Chrome
+  > summary::-webkit-details-marker {
+    display: none;
+  }
+}