jekyll-rtd-theme 1.1.7 → 2.0.2

data/_sass/@primer/support/variables/misc.scss

@@ -0,0 +1,42 @@
+// Miscellaneous variables
+
+// Border
+$border-width: 1px !default;
+$border-color: $border-gray !default;
+$border-style: solid !default;
+$border: $border-width $border-color $border-style !default;
+
+// Border Radius
+$border-radius-1: 4px !default;
+$border-radius-2: 6px !default;
+$border-radius: $border-radius-2 !default;
+
+// Box shadow
+$box-shadow: 0 1px 0 rgba($black, 0.04) !default;
+$box-shadow-medium: 0 3px 6px rgba($gray-400, 0.15) !default;
+$box-shadow-large: 0 8px 24px rgba($gray-400, 0.2) !default;
+$box-shadow-extra-large: 0 12px 48px rgba($gray-400, 0.3) !default;
+
+$box-shadow-highlight: inset 0 1px 0 rgba($white, 0.25) !default; // top highlight
+$box-shadow-inset: inset 0 1px 0 rgba($border-color, 0.2) !default; // top inner shadow
+$box-shadow-focus: 0 0 0 3px rgba($border-blue, 0.3) !default; // blue focus ring
+
+// Button variables
+$border-color-button: $black-fade-15 !default;
+$btn-active-shadow: inset 0 0.15em 0.3em $black-fade-15 !default; // TODO: Deprecate?
+
+// Form variables
+$form-control-shadow: inset 0 1px 2px rgba($black, 0.075) !default; // TODO: Deprecate?
+$btn-input-focus-shadow: 0 0 0 0.2em rgba($blue, 0.3) !default; // TODO: Deprecate? Replaced by $box-shadow-focus
+
+// 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;
+
+// diffstat background colors
+$bg-diffstat-added: darken($green-400, 5%) !default;
+$bg-diffstat-deleted: $red-600 !default;
+$bg-diffstat-neutral: $gray-300 !default;

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

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

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;
+}