Initial commit

node_modules/primer-support/lib/mixins/buttons.scss

@@ -0,0 +1,137 @@
+// Button color generator for primary and themed buttons
+
+@mixin solid-btn($foreground: $text-gray-dark, $background: #eee) {
+  color: $foreground;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
+  background-color: $background;
+  background-image: linear-gradient(saturate(lighten($background, 13%), 8%), saturate(darken($background, 9%), 5%));
+  border: 1px solid darken($background, 8%);
+
+  .counter {
+    color: saturate(darken($background, 9%), 5%);
+    background: $foreground;
+  }
+
+  &:hover,
+  &:active,
+  &.zeroclipboard-is-hover,
+  &.zeroclipboard-is-active {
+    background-color: darken($background, 10%);
+    background-image: linear-gradient(lighten($background, 8%), darken($background, 13%));
+    border-color: darken($background, 12%);
+  }
+
+  &:active,
+  &.selected,
+  &.zeroclipboard-is-active {
+    background-color: darken($background, 15%);
+    background-image: none;
+    border-color: darken($background, 20%);
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
+  }
+
+  &.selected:hover {
+    background-color: darken($background, 20%);
+  }
+
+  &:disabled,
+  &.disabled {
+    &,
+    &:hover {
+      color: $foreground;
+      cursor: default;
+      background-color: mix(#fff, $background, 50%);
+      background-image: linear-gradient(mix(#fff, $background, 60%), mix(#fff, darken($background, 5%), 45%));
+      border-color: mix(#fff, $background, 40%);
+      box-shadow: none;
+    }
+  }
+}
+
+// Button color generator for default-y buttons with grey bgs and colored text, like btn-danger
+
+@mixin inverse-hover-btn($foreground: $text-gray-dark) {
+  color: $foreground;
+
+  &:hover {
+    color: $text-white;
+    background-color: $foreground;
+    background-image: linear-gradient(lighten($foreground, 30%), lighten($foreground, 10%));
+    border-color: $foreground;
+  }
+
+  &:active,
+  &.selected {
+    color: $text-white;
+    background-color: darken($foreground, 5%);
+    background-image: none;
+    border-color: darken($foreground, 8%);
+  }
+
+  &.selected:hover {
+    background-color: darken($foreground, 5%);
+  }
+
+  &:disabled,
+  &.disabled {
+    &,
+    &:hover {
+      color: mix(#fff, $foreground, 50%);
+      background-color: #efefef;
+      background-image: linear-gradient(#fefefe, #efefef);
+      border-color: #e1e1e1;
+    }
+  }
+
+  &:hover,
+  &:active,
+  &.selected {
+    .counter {
+      color: $text-white;
+    }
+  }
+}
+
+// Outline color generator for btn-outline to make the hover state inverse the text and bg colors.
+
+@mixin outline-btn($text-color: $text-blue, $bg-color: $bg-white) {
+  color: $text-color;
+  background-color: $bg-color;
+  background-image: none;
+  border: 1px solid $border-gray;
+
+  .counter {
+    background-color: rgba(0, 0, 0, 0.07);
+  }
+
+  &:hover,
+  &:active,
+  &.selected,
+  &.zeroclipboard-is-hover,
+  &.zeroclipboard-is-active {
+    color: $bg-color;
+    background-color: $text-color;
+    background-image: none;
+    border-color: $text-color;
+
+    .counter {
+      color: $text-color;
+      background-color: $bg-color;
+    }
+  }
+
+  &.selected:hover {
+    background-color: darken($text-color, 5%);
+  }
+
+  &:disabled,
+  &.disabled {
+    &,
+    &:hover {
+      color: $text-gray;
+      background-color: $bg-white;
+      background-image: none;
+      border-color: $border-gray;
+    }
+  }
+}

node_modules/primer-support/lib/mixins/layout.scss

@@ -0,0 +1,52 @@
+// 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 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.";
+  }
+}
+
+// Retina media query
+
+@mixin retina-media-query {
+  @media
+    only screen and (-webkit-min-device-pixel-ratio: 2),
+    only screen and (min--moz-device-pixel-ratio: 2),
+    only screen and (-moz-min-device-pixel-ratio: 2),
+    only screen and (-o-min-device-pixel-ratio: 2/1),
+    only screen and (min-device-pixel-ratio: 2),
+    only screen and (min-resolution: 192dpi),
+    only screen and (min-resolution: 2dppx) {
+    @content;
+  }
+}
+
+// Clearfix
+//
+// Clears floats via mixin.
+
+@mixin clearfix {
+  &::before {
+    display: table;
+    content: "";
+  }
+
+  &::after {
+    display: table;
+    clear: both;
+    content: "";
+  }
+}

node_modules/primer-support/lib/mixins/misc.scss

@@ -0,0 +1,29 @@
+// Generate a two-color caret for any element.
+@mixin double-caret($foreground: #fff, $background: #ddd) {
+  &::after,
+  &::before {
+    position: absolute;
+    top: 11px;
+    right: 100%;
+    left: -16px;
+    display: block;
+    width: 0;
+    height: 0;
+    pointer-events: none;
+    content: " ";
+    border-color: transparent;
+    border-style: solid solid outset;
+  }
+
+  &::after {
+    margin-top: 1px;
+    margin-left: 2px;
+    border-width: 7px;
+    border-right-color: $foreground;
+  }
+
+  &::before {
+    border-width: 8px;
+    border-right-color: $background;
+  }
+}

node_modules/primer-support/lib/mixins/typography.scss

@@ -0,0 +1,76 @@
+// Text hiding for image based text replacement.
+// Higher performance than -9999px because it only renders
+// the size of the actual text, not a full 9999px box.
+@mixin hide-text() {
+  overflow: hidden;
+  text-indent: 100%;
+  white-space: nowrap;
+}
+
+// Heading mixins for use within components
+// These match heading utilities in utilities/typography
+@mixin h1 {
+  font-size: $h1-size;
+  font-weight: $font-weight-bold;
+}
+
+@mixin h2 {
+  font-size: $h2-size;
+  font-weight: $font-weight-bold;
+}
+
+@mixin h3 {
+  font-size: $h3-size;
+  font-weight: $font-weight-bold;
+}
+
+@mixin h4 {
+  font-size: $h4-size;
+  font-weight: $font-weight-bold;
+}
+
+@mixin h5 {
+  font-size: $h5-size;
+  font-weight: $font-weight-bold;
+}
+
+@mixin h6 {
+  font-size: $h6-size;
+  font-weight: $font-weight-bold;
+}
+
+// Responsive heading mixins
+// There are no responsive mixins for h5 and h6 because they are small
+// and don't need to be smaller on mobile.
+@mixin h1-reponsive {
+  font-size: 26px;
+  font-weight: $font-weight-bold;
+
+  // Up to 32px in future
+  @include breakpoint(md) { font-size: 30px; }
+
+}
+
+@mixin h2-responsive {
+  font-size: 20px;
+  font-weight: $font-weight-bold;
+
+  // Up to 22px or 24px in future
+  @include breakpoint(md) { font-size: 21px; }
+}
+
+@mixin h3-responsive {
+  font-size: 14px;
+  font-weight: $font-weight-bold;
+
+  @include breakpoint(md) { font-size: 16px; }
+
+}
+
+@mixin h4-responsive {
+  font-size: 13px;
+  font-weight: $font-weight-bold;
+
+  @include breakpoint(md) { font-size: 14px; }
+
+}