jekyll-theme-primer 0.5.1 → 0.6.0

data/_sass/primer-support/lib/mixins/layout.scss

@@ -1,21 +1,27 @@
 // Responsive media queries
 
 @mixin breakpoint($breakpoint) {
-  // 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 $breakpoint == "" {
+    @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.";
+    // 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.";
+    }
   }
 }
 

data/_sass/primer-support/lib/variables/layout.scss

@@ -22,6 +22,7 @@ $spacers: (
 ) !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
@@ -29,6 +30,14 @@ $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;
@@ -51,8 +60,13 @@ $breakpoints: (
   sm: $width-sm,
   // Medium screen / tablet
   md: $width-md,
-  // Large screen / desktop (980 + (12 * 2)) <= container + gutters
+  // 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}"));
+}

data/_sass/primer-support/lib/variables/misc.scss

@@ -19,7 +19,7 @@ $box-shadow-extra-large: 0 10px 50px rgba($black, 0.07) !default;
 
 // Tooltips
 $tooltip-max-width: 250px !default;
-$tooltip-background-color: rgba($black, 0.8) !default;
+$tooltip-background-color: $black;
 $tooltip-text-color: $white !default;
 $tooltip-delay: 0.4s !default;
 $tooltip-duration: 0.1s !default;

data/_sass/primer-utilities/index.scss

@@ -4,6 +4,7 @@
 @import "./lib/borders.scss";
 @import "./lib/box-shadow.scss";
 @import "./lib/colors.scss";
+@import "./lib/details.scss";
 @import "./lib/flexbox.scss";
 @import "./lib/layout.scss";
 @import "./lib/margin.scss";

data/_sass/primer-utilities/lib/animations.scss

@@ -1,7 +1,7 @@
 // This file contains reusable animations for github.
 // 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 {
   animation-name: fade-in;
   animation-duration: 1s;
@@ -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 */
 .anim-fade-up {
   opacity: 0;
@@ -151,3 +172,13 @@
     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/lib/borders.scss

@@ -1,63 +1,100 @@
 // Border utilities
 // stylelint-disable block-opening-brace-space-before, primer/selector-no-utility, comment-empty-line-before
 
-/* Add a gray border */
-.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 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; }
+.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; }
+.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; }
+.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; }
+.border-purple      { border-color: $border-purple !important; }
 /* Use with .border to turn the border yellow */
-.border-yellow  { border-color: $border-yellow !important; }
+.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; }
+.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; }
+.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; }
-
-// Without borders
-/* Remove all borders */
-.border-0        { border: 0 !important; }
-/* Remove the top border */
-.border-top-0    { border-top: 0 !important; }
-/* Remove the right border */
-.border-right-0  { border-right: 0 !important; }
-/* Remove the bottom border */
-.border-bottom-0 { border-bottom: 0 !important; }
-/* Remove the left border */
-.border-left-0   { border-left: 0 !important; }
-
-// Rounded corners
-/* Remove the border-radius */
-.rounded-0 { border-radius: 0 !important; }
-/* Add a border-radius to all corners */
-.rounded-1 { border-radius: $border-radius !important; }
-/* Add a 2x border-radius to all corners */
-.rounded-2 { border-radius: $border-radius * 2 !important; }
+.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/lib/details.scss

@@ -0,0 +1,18 @@
+// 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: $black-fade-50;
+}

data/_sass/primer-utilities/lib/flexbox.scss

@@ -1,80 +1,52 @@
 // Flex utility classes
-
 // stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before
 // stylelint-disable comment-empty-line-before
 
-// - - - - - - - - - - - - - - - - - - - - - - -
-// This is a template for generating the flex utility classes.
-// A version of each class will be generated without a breakpoint,
-// along with a variant for each breakpoint.
-// - - - - - - - - - - - - - - - - - - - - - - -
-
-@mixin flexUtility($breakpoint: 0) {
-
-  // This is the breakpoint that will be inserted into class names
-  $breakstring: -#{$breakpoint}; // example: `.d-sm-flex`
-
-  // If there's no breakpoint, the $breakstring value will be blank.
-  @if $breakpoint == 0 {
-    $breakstring: ""; // example: `.d-flex`
-  }
-
-  // Flexbox classes
-  // Container
-
-  .flex#{$breakstring}-row         { flex-direction: row !important; }
-  .flex#{$breakstring}-row-reverse { flex-direction: row-reverse !important; }
-  .flex#{$breakstring}-column      { flex-direction: column !important; }
-
-  .flex#{$breakstring}-wrap     { flex-wrap: wrap !important; }
-  .flex#{$breakstring}-nowrap   { flex-wrap: nowrap !important; }
-
-  .flex#{$breakstring}-justify-start    { justify-content: flex-start !important; }
-  .flex#{$breakstring}-justify-end      { justify-content: flex-end !important; }
-  .flex#{$breakstring}-justify-center   { justify-content: center !important; }
-  .flex#{$breakstring}-justify-between  { justify-content: space-between !important; }
-  .flex#{$breakstring}-justify-around   { justify-content: space-around !important; }
-
-  .flex#{$breakstring}-items-start      { align-items: flex-start !important; }
-  .flex#{$breakstring}-items-end        { align-items: flex-end !important; }
-  .flex#{$breakstring}-items-center     { align-items: center !important; }
-  .flex#{$breakstring}-items-baseline   { align-items: baseline !important; }
-  .flex#{$breakstring}-items-stretch    { align-items: stretch !important; }
-
-  .flex#{$breakstring}-content-start    { align-content: flex-start !important; }
-  .flex#{$breakstring}-content-end      { align-content: flex-end !important; }
-  .flex#{$breakstring}-content-center   { align-content: center !important; }
-  .flex#{$breakstring}-content-between  { align-content: space-between !important; }
-  .flex#{$breakstring}-content-around   { align-content: space-around !important; }
-  .flex#{$breakstring}-content-stretch  { align-content: stretch !important; }
-
-  // Item
-  .flex#{$breakstring}-auto { flex: 1 1 auto !important; }
-  .flex#{$breakstring}-shrink-0 { flex-shrink: 0 !important; }
-
-  .flex#{$breakstring}-self-auto        { align-self: auto !important; }
-  .flex#{$breakstring}-self-start       { align-self: flex-start !important; }
-  .flex#{$breakstring}-self-end         { align-self: flex-end !important; }
-  .flex#{$breakstring}-self-center      { align-self: center !important; }
-  .flex#{$breakstring}-self-baseline    { align-self: baseline !important; }
-  .flex#{$breakstring}-self-stretch     { align-self: stretch !important; }
-
-  // Shorthand for equal width and height cols
-  .flex#{$breakstring}-item-equal {
-    flex-grow: 1;
-    flex-basis: 0;
-  }
-}
-
-// Generate basic flexbox classes
-@include flexUtility();
-
-// Loop through the breakpoint values to create responsive classes
-@each $breakpoint in map-keys($breakpoints) {
-
-  // Loop through the spacer values
+@each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
-    @include flexUtility($breakpoint);
+    // Flexbox classes
+    // Container
+    .flex#{$variant}-row         { flex-direction: row !important; }
+    .flex#{$variant}-row-reverse { flex-direction: row-reverse !important; }
+    .flex#{$variant}-column      { flex-direction: column !important; }
+
+    .flex#{$variant}-wrap     { flex-wrap: wrap !important; }
+    .flex#{$variant}-nowrap   { flex-wrap: nowrap !important; }
+
+    .flex#{$variant}-justify-start    { justify-content: flex-start !important; }
+    .flex#{$variant}-justify-end      { justify-content: flex-end !important; }
+    .flex#{$variant}-justify-center   { justify-content: center !important; }
+    .flex#{$variant}-justify-between  { justify-content: space-between !important; }
+    .flex#{$variant}-justify-around   { justify-content: space-around !important; }
+
+    .flex#{$variant}-items-start      { align-items: flex-start !important; }
+    .flex#{$variant}-items-end        { align-items: flex-end !important; }
+    .flex#{$variant}-items-center     { align-items: center !important; }
+    .flex#{$variant}-items-baseline   { align-items: baseline !important; }
+    .flex#{$variant}-items-stretch    { align-items: stretch !important; }
+
+    .flex#{$variant}-content-start    { align-content: flex-start !important; }
+    .flex#{$variant}-content-end      { align-content: flex-end !important; }
+    .flex#{$variant}-content-center   { align-content: center !important; }
+    .flex#{$variant}-content-between  { align-content: space-between !important; }
+    .flex#{$variant}-content-around   { align-content: space-around !important; }
+    .flex#{$variant}-content-stretch  { align-content: stretch !important; }
+
+    // Item
+    .flex#{$variant}-auto { flex: 1 1 auto !important; }
+    .flex#{$variant}-shrink-0 { flex-shrink: 0 !important; }
+
+    .flex#{$variant}-self-auto        { align-self: auto !important; }
+    .flex#{$variant}-self-start       { align-self: flex-start !important; }
+    .flex#{$variant}-self-end         { align-self: flex-end !important; }
+    .flex#{$variant}-self-center      { align-self: center !important; }
+    .flex#{$variant}-self-baseline    { align-self: baseline !important; }
+    .flex#{$variant}-self-stretch     { align-self: stretch !important; }
+
+    // Shorthand for equal width and height cols
+    .flex#{$variant}-item-equal {
+      flex-grow: 1;
+      flex-basis: 0;
+    }
   }
-
 }

data/_sass/primer-utilities/lib/layout.scss

@@ -30,6 +30,8 @@
 .v-align-text-top    { vertical-align: text-top !important; }
 /* Vertical align to the bottom of the text */
 .v-align-text-bottom { vertical-align: text-bottom !important; }
+/* Vertical align to the parent's baseline */
+.v-align-baseline    { vertical-align: baseline !important; }
 
 // Overflow utilities
 // overflow-hidden can also be used to create a new
@@ -48,23 +50,14 @@
 }
 
 // Floats
-/* Float to the right */
-.float-right { float: right !important; }
-/* Float to the left */
-.float-left { float: left !important; }
-/* Don't float left or right */
-.float-none { float: none !important; }
-
-// Responsive float utlities
-// .float-md-left, .float-lg-right, ...
-@each $breakpoint in map-keys($breakpoints) {
+@each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
-    /* Float to the left at the #{$breakpoint} breakpoint */
-    .float-#{$breakpoint}-left  { float: left !important; }
-    /* Float to the right at the #{$breakpoint} breakpoint */
-    .float-#{$breakpoint}-right  { float: right !important; }
-    /* No float at the #{$breakpoint} breakpoint */
-    .float-#{$breakpoint}-none { float: none !important; }
+    /* Float to the left */
+    .float#{$variant}-left  { float: left !important; }
+    /* Float to the right */
+    .float#{$variant}-right  { float: right !important; }
+    /* No float */
+    .float#{$variant}-none { float: none !important; }
   }
 }
 
@@ -74,23 +67,19 @@
 .width-fit   { max-width: 100% !important; }
 /* Set the width to 100% */
 .width-full  { width: 100% !important; }
+/* Max height 100% */
+.height-fit  { max-height: 100% !important; }
 /* Set the height to 100% */
 .height-full { height: 100% !important; }
 
 /* Remove min-width from element */
 .min-width-0 { min-width: 0 !important; }
 
-// Direction utilities
-
-.direction-rtl { direction: rtl !important; }
-
-.direction-ltr { direction: ltr !important; }
-
-@each $breakpoint in map-keys($breakpoints) {
+@each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
-    /* Set the direction to ltr at the #{$breakpoint} breakpoint */
-    .direction-#{$breakpoint}-rtl { direction: rtl !important; }
-    /* Set the direction to ltr at the #{$breakpoint} breakpoint */
-    .direction-#{$breakpoint}-ltr { direction: ltr !important; }
+    /* Set the direction to rtl */
+    .direction#{$variant}-rtl { direction: rtl !important; }
+    /* Set the direction to ltr */
+    .direction#{$variant}-ltr { direction: ltr !important; }
   }
 }