jekyll-theme-primer 0.5.3 → 0.5.4

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

@@ -50,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; }
   }
 }
 
@@ -84,17 +75,11 @@
 /* Remove min-width from element */
 .min-width-0 { min-width: 0 !important; }
 
-// Direction utilities
-/* Set the direction to rtl */
-.direction-rtl { direction: rtl !important; }
-/* Set the direction to ltr */
-.direction-ltr { direction: ltr !important; }
-
-@each $breakpoint in map-keys($breakpoints) {
+@each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
-    /* Set the direction to rtl 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; }
   }
 }

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

@@ -1,86 +1,53 @@
 // Margin spacer utilities
 // stylelint-disable block-opening-brace-space-before, declaration-colon-space-before, primer/selector-no-utility, comment-empty-line-before
-@for $i from 1 through length($spacers) {
-  $size: #{nth($spacers, $i)};
-  $scale: #{$i - 1};
-
-  /* Set a #{$size} margin to all sides */
-  .m-#{$scale}  { margin       : #{$size} !important; }
-  /* Set a #{$size} margin on the top */
-  .mt-#{$scale} { margin-top   : #{$size} !important; }
-  /* Set a #{$size} margin on the right */
-  .mr-#{$scale} { margin-right : #{$size} !important; }
-  /* Set a #{$size} margin on the bottom */
-  .mb-#{$scale} { margin-bottom: #{$size} !important; }
-  /* Set a #{$size} margin on the left */
-  .ml-#{$scale} { margin-left  : #{$size} !important; }
-  /* Set a negative #{$size} margin on top */
-  .mt-n#{$scale} { margin-top   : -#{$size} !important; }
-  /* Set a negative #{$size} margin on the right */
-  .mr-n#{$scale} { margin-right : -#{$size} !important; }
-  /* Set a negative #{$size} margin on the bottom */
-  .mb-n#{$scale} { margin-bottom: -#{$size} !important; }
-  /* Set a negative #{$size} margin on the left */
-  .ml-n#{$scale} { margin-left  : -#{$size} !important; }
-
-  /* Set a #{$size} margin on the left & right */
-  .mx-#{$scale} {
-    margin-right: #{$size} !important;
-    margin-left : #{$size} !important;
-  }
-
-  /* Set a #{$size} margin on the top & bottom */
-  .my-#{$scale} {
-    margin-top   : #{$size} !important;
-    margin-bottom: #{$size} !important;
-  }
-}
-
-/* Set an auto margin on left & right */
-.mx-auto {
-  margin-right: auto !important;
-  margin-left: auto !important;
-}
 
 // Loop through the breakpoint values
-@each $breakpoint in map-keys($breakpoints) {
-
-  // Loop through the spacer values
-  @for $i from 1 through length($spacers) {
-    @include breakpoint($breakpoint) {
-      $size: #{nth($spacers, $i)}; // sm, md, lg, xl
-      $scale: #{$i - 1};  // 0, 1, 2, 3, 4, 5, 6
-
-      /* Set a #{$size} margin to all sides at the breakpoint #{$breakpoint} */
-      .m-#{$breakpoint}-#{$scale}  { margin: #{$size} !important; }
-      /* Set a #{$size} margin on the top at the breakpoint #{$breakpoint} */
-      .mt-#{$breakpoint}-#{$scale} { margin-top: #{$size} !important; }
-      /* Set a #{$size} margin on the right at the breakpoint #{$breakpoint} */
-      .mr-#{$breakpoint}-#{$scale} { margin-right: #{$size} !important; }
-      /* Set a #{$size} margin on the bottom at the breakpoint #{$breakpoint} */
-      .mb-#{$breakpoint}-#{$scale} { margin-bottom: #{$size} !important; }
-      /* Set a #{$size} margin on the left at the breakpoint #{$breakpoint} */
-      .ml-#{$breakpoint}-#{$scale} { margin-left: #{$size} !important; }
-      /* Set a negative #{$size} margin on top at the breakpoint #{$breakpoint} */
-      .mt-#{$breakpoint}-n#{$scale} { margin-top   : -#{$size} !important; }
-      /* Set a negative #{$size} margin on the right at the breakpoint #{$breakpoint} */
-      .mr-#{$breakpoint}-n#{$scale} { margin-right : -#{$size} !important; }
-      /* Set a negative #{$size} margin on the bottom at the breakpoint #{$breakpoint} */
-      .mb-#{$breakpoint}-n#{$scale} { margin-bottom: -#{$size} !important; }
-      /* Set a negative #{$size} margin on the left at the breakpoint #{$breakpoint} */
-      .ml-#{$breakpoint}-n#{$scale} { margin-left  : -#{$size} !important; }
+@each $breakpoint, $variant in $responsive-variants {
+  @include breakpoint($breakpoint) {
+    // Loop through the spacer values
+    @for $i from 1 through length($spacers) {
+      $size: nth($spacers, $i); // sm, md, lg, xl
+      $scale: $i - 1;  // 0, 1, 2, 3, 4, 5, 6
+
+      /* Set a $size margin to all sides at $breakpoint */
+      .m#{$variant}-#{$scale}  { margin: $size !important; }
+      /* Set a $size margin on the top at $breakpoint */
+      .mt#{$variant}-#{$scale} { margin-top: $size !important; }
+      /* Set a $size margin on the right at $breakpoint */
+      .mr#{$variant}-#{$scale} { margin-right: $size !important; }
+      /* Set a $size margin on the bottom at $breakpoint */
+      .mb#{$variant}-#{$scale} { margin-bottom: $size !important; }
+      /* Set a $size margin on the left at $breakpoint */
+      .ml#{$variant}-#{$scale} { margin-left: $size !important; }
+
+      @if ($size != 0) {
+        /* Set a negative $size margin on top at $breakpoint */
+        .mt#{$variant}-n#{$scale} { margin-top   : -$size !important; }
+        /* Set a negative $size margin on the right at $breakpoint */
+        .mr#{$variant}-n#{$scale} { margin-right : -$size !important; }
+        /* Set a negative $size margin on the bottom at $breakpoint */
+        .mb#{$variant}-n#{$scale} { margin-bottom: -$size !important; }
+        /* Set a negative $size margin on the left at $breakpoint */
+        .ml#{$variant}-n#{$scale} { margin-left  : -$size !important; }
+      }
 
-      /* Set a #{$size} margin on the left & right at the breakpoint #{$breakpoint} */
-      .mx-#{$breakpoint}-#{$scale} {
-        margin-right: #{$size} !important;
-        margin-left: #{$size} !important;
+      /* Set a $size margin on the left & right at $breakpoint */
+      .mx#{$variant}-#{$scale} {
+        margin-right: $size !important;
+        margin-left: $size !important;
       }
 
-      /* Set a #{$size} margin on the top & bottom at the breakpoint #{$breakpoint} */
-      .my-#{$breakpoint}-#{$scale} {
-        margin-top: #{$size} !important;
-        margin-bottom: #{$size} !important;
+      /* Set a $size margin on the top & bottom at $breakpoint */
+      .my#{$variant}-#{$scale} {
+        margin-top: $size !important;
+        margin-bottom: $size !important;
       }
     }
+
+    /* responsive horizontal auto margins */
+    .mx#{$variant}-auto {
+      margin-right: auto !important;
+      margin-left: auto !important;
+    }
   }
 }

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

@@ -1,66 +1,36 @@
 // Padding spacer utilities
 // stylelint-disable block-opening-brace-space-before, declaration-colon-space-before
 // stylelint-disable comment-empty-line-before
-@for $i from 1 through length($spacers) {
-  $size: #{nth($spacers, $i)};
-  $scale: #{$i - 1};
-
-  /* Set a #{$size} padding to all sides */
-  .p-#{$scale}   { padding       : #{$size} !important; }
-  /* Set a #{$size} padding to the top */
-  .pt-#{$scale}  { padding-top   : #{$size} !important; }
-  /* Set a #{$size} padding to the right */
-  .pr-#{$scale}  { padding-right : #{$size} !important; }
-  /* Set a #{$size} padding to the bottom */
-  .pb-#{$scale}  { padding-bottom: #{$size} !important; }
-  /* Set a #{$size} padding to the left */
-  .pl-#{$scale}  { padding-left  : #{$size} !important; }
-
-  /* Set a #{$size} padding to the left & right */
-  .px-#{$scale} {
-    padding-right: #{$size} !important;
-    padding-left: #{$size} !important;
-  }
-
-  /* Set a #{$size} padding to the top & bottom */
-  .py-#{$scale} {
-    padding-top: #{$size} !important;
-    padding-bottom: #{$size} !important;
-  }
-}
 
 // Responsive padding spacer utilities
-
-// Loop through the breakpoint values
-@each $breakpoint in map-keys($breakpoints) {
-
-  // Loop through the spacer values
-  @for $i from 1 through length($spacers) {
-    @include breakpoint($breakpoint) {
-      $size: #{nth($spacers, $i)}; // xs, sm, md, lg, xl
-      $scale: #{$i - 1};  // 0, 1, 2, 3, 4, 5, 6
-
-      /* Set a #{$size} padding to all sides at the #{$breakpoint} breakpoint */
-      .p-#{$breakpoint}-#{$scale}  { padding: #{$size} !important; }
-      /* Set a #{$size} padding to the top at the #{$breakpoint} breakpoint */
-      .pt-#{$breakpoint}-#{$scale} { padding-top: #{$size} !important; }
-      /* Set a #{$size} padding to the right at the #{$breakpoint} breakpoint */
-      .pr-#{$breakpoint}-#{$scale} { padding-right: #{$size} !important; }
-      /* Set a #{$size} padding to the bottom at the #{$breakpoint} breakpoint */
-      .pb-#{$breakpoint}-#{$scale} { padding-bottom: #{$size} !important; }
-      /* Set a #{$size} padding to the left at the #{$breakpoint} breakpoint */
-      .pl-#{$breakpoint}-#{$scale} { padding-left: #{$size} !important; }
-
-      /* Set a #{$size} padding to the left & right at the #{$breakpoint} breakpoint */
-      .px-#{$breakpoint}-#{$scale} {
-        padding-right: #{$size} !important;
-        padding-left: #{$size} !important;
+@each $breakpoint, $variant in $responsive-variants {
+  @include breakpoint($breakpoint) {
+    // Loop through the spacer values
+    @for $i from 1 through length($spacers) {
+      $size: nth($spacers, $i); // xs, sm, md, lg, xl
+      $scale: $i - 1;  // 0, 1, 2, 3, 4, 5, 6
+
+      /* Set a $size padding to all sides at $breakpoint */
+      .p#{$variant}-#{$scale}  { padding: $size !important; }
+      /* Set a $size padding to the top at $breakpoint */
+      .pt#{$variant}-#{$scale} { padding-top: $size !important; }
+      /* Set a $size padding to the right at $breakpoint */
+      .pr#{$variant}-#{$scale} { padding-right: $size !important; }
+      /* Set a $size padding to the bottom at $breakpoint */
+      .pb#{$variant}-#{$scale} { padding-bottom: $size !important; }
+      /* Set a $size padding to the left at $breakpoint */
+      .pl#{$variant}-#{$scale} { padding-left: $size !important; }
+
+      /* Set a $size padding to the left & right at $breakpoint */
+      .px#{$variant}-#{$scale} {
+        padding-right: $size !important;
+        padding-left: $size !important;
       }
 
-      /* Set a #{$size} padding to the top & bottom at the #{$breakpoint} breakpoint */
-      .py-#{$breakpoint}-#{$scale} {
-        padding-top: #{$size} !important;
-        padding-bottom: #{$size} !important;
+      /* Set a $size padding to the top & bottom at $breakpoint */
+      .py#{$variant}-#{$scale} {
+        padding-top: $size !important;
+        padding-bottom: $size !important;
       }
     }
   }

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

@@ -20,7 +20,6 @@
   font-size: $h1-size-mobile !important;
 
   @include breakpoint(md) { font-size: $h1-size !important; }
-
 }
 
 /* Set the font size to 22px */
@@ -35,13 +34,11 @@
   font-size: $h3-size-mobile !important;
 
   @include breakpoint(md) { font-size: $h3-size !important; }
-
 }
 
 /* Set the font size to #{$h4-size} */
 .h4 {
   font-size: $h4-size !important;
-
 }
 
 /* Set the font size to #{$h5-size} */
@@ -61,7 +58,6 @@
   font-size: $h1-size-mobile !important;
 
   @include breakpoint(md) { font-size: $h1-size !important; }
-
 }
 
 /* Set the font size to 22px */
@@ -76,7 +72,6 @@
   font-size: $h3-size-mobile !important;
 
   @include breakpoint(md) { font-size: $h3-size !important; }
-
 }
 
 /* Set the font size to #{$h4-size} */
@@ -84,7 +79,6 @@
   font-size: $h4-size !important;
 
   @include breakpoint(md) { font-size: $h4-size !important; }
-
 }
 
 /* Set the font size to #{$h5-size} */
@@ -99,7 +93,6 @@
   font-weight: $font-weight-light !important;
 
   @include breakpoint(md) { font-size: $h00-size !important; }
-
 }
 
 /* Set the font size to 32px and weight to light */
@@ -108,7 +101,6 @@
   font-weight: $font-weight-light !important;
 
   @include breakpoint(md) { font-size: $h0-size !important; }
-
 }
 
 /* Set the font size to 26px and weight to light */
@@ -117,7 +109,6 @@
   font-weight: $font-weight-light !important;
 
   @include breakpoint(md) { font-size: $h1-size !important; }
-
 }
 
 /* Set the font size to 22px and weight to light */
@@ -126,8 +117,8 @@
   font-weight: $font-weight-light !important;
 
   @include breakpoint(md) { font-size: $h2-size !important; }
-
 }
+
 // Same size and weight as .lead but without color property
 /* Set the font size to 18px and weight to light */
 .f3-light {
@@ -135,7 +126,6 @@
   font-weight: $font-weight-light !important;
 
   @include breakpoint(md) { font-size: $h3-size !important; }
-
 }
 
 // Smallest text size
@@ -160,22 +150,19 @@
 .lh-condensed { line-height: $lh-condensed !important; }
 /* Set the line height to default */
 .lh-default { line-height: $lh-default !important; }
+/* Set the line height to zero */
+.lh-0 { line-height: 0 !important; }
 
 // Text alignments
-/* Text align to the right */
-.text-right { text-align: right !important; }
-/* Text align to the left */
-.text-left { text-align: left !important; }
-/* Text align to the center */
-.text-center { text-align: center !important; }
-
 // Responsive text alignment
-// .text-md-left, .text-lg-right, ...
-@each $breakpoint in map-keys($breakpoints) {
+@each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
-    .text-#{$breakpoint}-right { text-align: right !important; }
-    .text-#{$breakpoint}-left { text-align: left !important; }
-    .text-#{$breakpoint}-center { text-align: center !important; }
+    /* Text align to the right */
+    .text#{$variant}-right { text-align: right !important; }
+    /* Text align to the left */
+    .text#{$variant}-left { text-align: left !important; }
+    /* Text align to the center */
+    .text#{$variant}-center { text-align: center !important; }
   }
 }
 
@@ -189,6 +176,8 @@
 /* Make text uppercase */
 .text-uppercase { text-transform: uppercase !important; }
 /* Underline text */
+.text-underline { text-decoration: underline !important; }
+/* Don't underline text */
 .no-underline { text-decoration: none !important; }
 /* Don't wrap white space */
 .no-wrap { white-space: nowrap !important; }
@@ -214,3 +203,13 @@
 .text-shadow-light {
   text-shadow: 0 1px 0 rgba($white, 0.5);
 }
+
+/* Set to monospace font */
+.text-mono {
+  font-family: $mono-font;
+}
+
+/* Disallow user from selecting text */
+.user-select-none {
+  user-select: none !important;
+}

data/_sass/primer-utilities/lib/visibility-display.scss

@@ -2,56 +2,29 @@
 // stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, primer/selector-no-utility
 // stylelint-disable comment-empty-line-before
 
-// Visibility utilities
-/* Visibility hidden */
-.v-hidden { visibility: hidden !important; }
-/* Visibility visible */
-.v-visible { visibility: visible !important; }
-
-// Display utilites
-/* Set the display to table */
-.d-table      { display: table !important; }
-/* Set the display to table-cell */
-.d-table-cell { display: table-cell !important; }
-/* Set the table-layout to fixed */
-.table-fixed { table-layout: fixed !important; }
-
-/* Set the display to block */
-.d-block        { display: block !important; }
-/* Set the display to inline */
-.d-inline       { display: inline !important; }
-/* Set the display to inline-block */
-.d-inline-block { display: inline-block !important; }
-/* Set the display to flex */
-.d-flex { display: flex !important; }
-/* Set the display to inline-flex */
-.d-inline-flex { display: inline-flex !important; }
-/* Set the display to none */
-.d-none         { display: none !important; }
+$display-values: (
+  block,
+  flex,
+  inline,
+  inline-block,
+  inline-flex,
+  none,
+  table,
+  table-cell
+);
 
-// Responsive display utlities
-// .d-sm-none, .d-lg-inline, ...
-@each $breakpoint in map-keys($breakpoints) {
+// Responsive display utilities
+@each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
-    /* Set the display to table at the #{$breakpoint} breakpoint */
-    .d-#{$breakpoint}-table      { display: table !important; }
-    /* Set the display to table cell at the #{$breakpoint} breakpoint */
-    .d-#{$breakpoint}-table-cell { display: table-cell !important; }
-    /* Set the display to block at the #{$breakpoint} breakpoint */
-    .d-#{$breakpoint}-block  { display: block !important; }
-    /* Set the display to inline at the #{$breakpoint} breakpoint */
-    .d-#{$breakpoint}-inline  { display: inline !important; }
-    /* Set the display to inline block at the #{$breakpoint} breakpoint */
-    .d-#{$breakpoint}-inline-block  { display: inline-block !important; }
-    /* Set the display to flex at the #{$breakpoint} breakpoint */
-    .d-#{$breakpoint}-flex  { display: flex !important; }
-    /* Set the display to flex at the #{$breakpoint} breakpoint */
-    .d-#{$breakpoint}-inline-flex  { display: inline-flex !important; }
-    /* Set the display to none at the #{$breakpoint} breakpoint */
-    .d-#{$breakpoint}-none  { display: none !important; }
+    @each $display in $display-values {
+      .d#{$variant}-#{$display} { display: $display !important; }
+    }
   }
 }
 
+.v-hidden { visibility: hidden !important; }
+.v-visible { visibility: visible !important; }
+
 // Hide utilities for each breakpoint
 // Each hide utility only applies to one breakpoint range.
 @media (max-width: $width-sm) {
@@ -78,6 +51,9 @@
   }
 }
 
+/* Set the table-layout to fixed */
+.table-fixed { table-layout: fixed !important; }
+
 // Only display content to screen readers
 //
 // See: http://a11yproject.com/posts/how-to-hide-content/