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

data/_sass/@primer/base/typography-base.scss

@@ -0,0 +1,100 @@
+// Headings
+// --------------------------------------------------
+// stylelint-disable selector-max-type
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+h1 {
+  @include h1;
+}
+h2 {
+  @include h2;
+}
+h3 {
+  @include h3;
+}
+h4 {
+  @include h4;
+}
+h5 {
+  @include h5;
+}
+h6 {
+  @include h6;
+}
+
+// Body text
+// --------------------------------------------------
+
+p {
+  margin-top: 0;
+  // stylelint-disable-next-line primer/spacing
+  margin-bottom: 10px;
+}
+
+small {
+  // stylelint-disable-next-line primer/typography
+  font-size: 90%;
+}
+
+blockquote {
+  margin: 0;
+}
+
+// Lists
+// --------------------------------------------------
+
+ul,
+ol {
+  padding-left: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+ol ol,
+ul ol {
+  list-style-type: lower-roman;
+}
+
+ul ul ol,
+ul ol ol,
+ol ul ol,
+ol ol ol {
+  list-style-type: lower-alpha;
+}
+
+dd {
+  margin-left: 0;
+}
+
+// Code
+// --------------------------------------------------
+
+tt,
+code {
+  font-family: $mono-font;
+  font-size: $font-size-small;
+}
+
+pre {
+  margin-top: 0;
+  margin-bottom: 0;
+  font-family: $mono-font;
+  font-size: $font-size-small;
+}
+
+// Octicons
+// --------------------------------------------------
+
+// Move this over here as a temporary override to the octicons source repo
+// instead of updating that upstream.
+.octicon {
+  vertical-align: text-bottom;
+}

data/_sass/@primer/breadcrumb/breadcrumb.scss

@@ -0,0 +1,28 @@
+.breadcrumb-item {
+  display: inline-block;
+  // stylelint-disable-next-line primer/spacing
+  margin-left: -0.35em;
+  white-space: nowrap;
+  list-style: none;
+
+  &::after {
+    padding-right: $em-spacer-5;
+    padding-left: $em-spacer-5;
+    // stylelint-disable-next-line primer/colors
+    color: $border-gray;
+    content: "/";
+  }
+
+  &:first-child {
+    margin-left: 0;
+  }
+}
+
+.breadcrumb-item-selected,
+.breadcrumb-item[aria-current]:not([aria-current="false"]) {
+  color: $text-gray;
+
+  &::after {
+    content: none;
+  }
+}

data/_sass/@primer/breadcrumb/index.scss

@@ -0,0 +1,3 @@
+// support files
+@import "../support/index.scss";
+@import "./breadcrumb.scss";

data/_sass/@primer/buttons/button-group.scss

@@ -0,0 +1,91 @@
+// Button group
+//
+// A button group is a series of buttons laid out next to each other, all part
+// of one visual button, but separated by rules to be separate.
+
+.BtnGroup {
+  display: inline-block;
+  vertical-align: middle;
+  @include clearfix();
+
+  // Proper spacing for multiple button groups (a la, gollum editor)
+  + .BtnGroup,
+  + .btn {
+    margin-left: $spacer-1;
+  }
+}
+
+.BtnGroup-item {
+  position: relative;
+  float: left;
+  border-right-width: 0;
+  border-radius: 0;
+
+  &:first-child {
+    border-top-left-radius: $border-radius;
+    border-bottom-left-radius: $border-radius;
+  }
+
+  &:last-child {
+    border-right-width: $border-width;
+    border-top-right-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
+  }
+
+  &.selected,
+  &[aria-selected="true"],
+  &:focus,
+  &:active,
+  &:hover {
+    border-right-width: $border-width;
+
+    + .BtnGroup-item,
+    + .BtnGroup-parent .BtnGroup-item {
+      border-left-width: 0;
+    }
+  }
+}
+
+.BtnGroup-parent {
+  float: left;
+
+  &:first-child .BtnGroup-item {
+    border-top-left-radius: $border-radius;
+    border-bottom-left-radius: $border-radius;
+  }
+
+  &:last-child .BtnGroup-item {
+    border-right-width: $border-width;
+    border-top-right-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
+  }
+
+  .BtnGroup-item {
+    border-right-width: 0;
+    border-radius: 0;
+  }
+
+  &.selected,
+  &[aria-selected="true"],
+  &:focus,
+  &:active,
+  &:hover {
+    .BtnGroup-item {
+      border-right-width: $border-width;
+    }
+
+    + .BtnGroup-item,
+    + .BtnGroup-parent .BtnGroup-item {
+      border-left-width: 0;
+    }
+  }
+}
+
+// ensure that the focus ring sits above the adjacent buttons
+.BtnGroup-item,
+.BtnGroup-parent {
+  &:focus,
+  &:active {
+    z-index: 1;
+  }
+}

data/_sass/@primer/buttons/button.scss

@@ -0,0 +1,296 @@
+// stylelint-disable selector-max-type, block-opening-brace-space-before, no-duplicate-selectors
+
+// Base button styles
+.btn {
+  position: relative;
+  display: inline-block;
+  // stylelint-disable-next-line primer/spacing
+  padding: 5px $spacer-3;
+  font-size: $body-font-size;
+  font-weight: $font-weight-semibold;
+  // stylelint-disable-next-line primer/typography
+  line-height: 20px; // Specifically not inherit our `<body>` default
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  user-select: none;
+  border: $border-width $border-style;
+  border-radius: $border-radius;
+  appearance: none; // Corrects inability to style clickable `input` types in iOS.
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  &:disabled,
+  &.disabled,
+  &[aria-disabled="true"] {
+    cursor: default;
+
+    .octicon {
+      color: inherit;
+    }
+  }
+
+  i {
+    font-style: normal;
+    font-weight: $font-weight-semibold;
+    opacity: 0.75;
+  }
+
+  .octicon {
+    margin-right: $spacer-1;
+    color: $text-gray-light;
+    vertical-align: text-bottom;
+
+    &:only-child {
+      margin-right: 0;
+    }
+  }
+
+  .Counter {
+    // stylelint-disable-next-line primer/spacing
+    margin-left: 2px;
+    color: inherit;
+    text-shadow: none;
+    vertical-align: top;
+    // stylelint-disable-next-line primer/colors
+    background-color: rgba(
+      $black,
+      0.08
+    ); // Darken for just a tad more contrast against the button background
+  }
+
+  .dropdown-caret {
+    margin-left: $spacer-1;
+    opacity: 0.8;
+  }
+}
+
+// Default button
+
+.btn {
+  $bg-default: $bg-gray-light;
+  $bg-hover: #f3f4f6; // custom gray
+  $bg-active: darken($bg-hover, 2%);
+  $bg-disabled: $bg-default;
+
+  color: $text-gray-dark;
+  background-color: $bg-default;
+  border-color: $border-color-button;
+  box-shadow: $box-shadow, $box-shadow-highlight;
+  transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+
+  &:hover,
+  &.hover,
+  [open] > & {
+    background-color: $bg-hover;
+    transition-duration: 0.1s;
+  }
+
+  &:active,
+  &.selected,
+  &[aria-selected="true"] {
+    background-color: $bg-active;
+    box-shadow: $box-shadow-inset;
+    transition: none;
+  }
+
+  &:disabled,
+  &.disabled,
+  &[aria-disabled="true"] {
+    // stylelint-disable-next-line primer/colors
+    color: $gray-400;
+    background-color: $bg-disabled;
+    border-color: $border-color-button;
+  }
+
+  // Keep :focus after :disabled. Allows to see the focus ring even on disabled buttons
+  &:focus,
+  &.focus {
+    outline: 1px dotted transparent; // Support Firfox custom colors
+    outline-offset: 2px;
+    box-shadow: $box-shadow-focus;
+  }
+}
+
+// Primary button
+
+.btn-primary {
+  $bg-default: #2ea44f; // custom green
+  $bg-hover: #2c974b; // custom green
+  $bg-active: darken($bg-hover, 2%);
+  $bg-disabled: #94d3a2; // custom green
+
+  $shadow: $green-900;
+  $box-shadow: 0 1px 0 rgba($black, 0.1), inset 0 1px 0 rgba($white, 0.03);
+
+  color: $text-white;
+  background-color: $bg-default;
+  // stylelint-disable-next-line primer/borders
+  border-color: rgba($black, 0.15);
+  box-shadow: $box-shadow;
+
+  &:hover,
+  &.hover,
+  [open] > & {
+    background-color: $bg-hover;
+  }
+
+  &:active,
+  &.selected,
+  &[aria-selected="true"] {
+    background-color: $bg-active;
+    // stylelint-disable-next-line primer/box-shadow
+    box-shadow: inset 0 1px 0 rgba($shadow, 0.2);
+  }
+
+  &:disabled,
+  &.disabled,
+  &[aria-disabled="true"] {
+    // stylelint-disable-next-line primer/colors
+    color: rgba($text-white, 0.8);
+    background-color: $bg-disabled;
+    // stylelint-disable-next-line primer/borders
+    border-color: rgba($black, 0.1);
+    box-shadow: $box-shadow;
+  }
+
+  &:focus,
+  &.focus {
+    // stylelint-disable-next-line primer/box-shadow
+    box-shadow: 0 0 0 3px rgba($bg-default, 0.4);
+  }
+
+  .Counter {
+    color: inherit;
+    // stylelint-disable-next-line primer/colors
+    background-color: rgba($bg-white, 0.2);
+  }
+
+  .octicon {
+    // stylelint-disable-next-line primer/colors
+    color: rgba($text-white, 0.8);
+  }
+}
+
+// Mixin: btn-inverse-on-hover
+
+@mixin btn-inverse-on-hover($color, $bg-hover, $bg-active, $shadow) {
+  color: $color;
+  transition: none;
+
+  &:hover,
+  [open] > & {
+    color: $text-white;
+    background-color: $bg-hover;
+    border-color: rgba($black, 0.15);
+    box-shadow: 0 1px 0 rgba($black, 0.1), inset 0 1px 0 rgba($white, 0.03);
+
+    .Counter {
+      background-color: rgba($bg-white, 0.2);
+    }
+
+    .octicon {
+      color: inherit;
+    }
+  }
+
+  &:active,
+  &.selected,
+  &[aria-selected="true"] {
+    color: $text-white;
+    background-color: $bg-active;
+    border-color: rgba($black, 0.15);
+    box-shadow: inset 0 1px 0 rgba($shadow, 0.2);
+  }
+
+  &:disabled,
+  &.disabled,
+  &[aria-disabled="true"] {
+    color: rgba($color, 0.5);
+    background-color: $bg-gray-light;
+    border-color: $border-color-button;
+    box-shadow: $box-shadow, $box-shadow-highlight;
+
+    .Counter {
+      background-color: rgba($color, 0.05);
+    }
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 3px rgba($bg-hover, 0.4);
+  }
+
+  .Counter {
+    color: inherit;
+    background-color: rgba($color, 0.1);
+  }
+}
+
+// Danger button
+
+.btn-danger {
+  @include btn-inverse-on-hover(
+    $color: $text-red,
+    $bg-hover: $red-600,
+    $bg-active: darken($red-600, 3%),
+    $shadow: $red-900
+  );
+}
+
+// Outline button
+
+.btn-outline {
+  @include btn-inverse-on-hover(
+    $color: $blue-500,
+    $bg-hover: $blue-500,
+    $bg-active: darken($blue-500, 3%),
+    $shadow: $blue-900
+  );
+}
+
+// Solid buttons TODO: Deprecate?
+//
+//
+.btn-blue {
+  @include btn-solid(
+    $text-white,
+    lighten($blue-500, 8%),
+    darken($blue-500, 2%)
+  );
+}
+
+// Sizes
+//
+// Tweak `line-height` to make them smaller.
+.btn-sm {
+  // stylelint-disable-next-line primer/spacing
+  padding: 3px 12px;
+  font-size: $font-size-small;
+  // stylelint-disable-next-line primer/typography
+  line-height: 20px;
+
+  .octicon {
+    vertical-align: text-top;
+  }
+}
+
+// Large button adds more padding around text. Use font-size utils to increase font-size.. e.g, <p class="text-gamma"><button class="btn btn-large btn-primary" type="button">Big green button</button></p>
+.btn-large {
+  padding: $em-spacer-6 1.5em;
+  font-size: inherit;
+  line-height: $lh-default;
+
+  // stylelint-disable-next-line primer/borders
+  border-radius: 0.5em;
+}
+
+// Full-width button
+//
+// These buttons expand to the full width of their parent container
+.btn-block {
+  display: block;
+  width: 100%;
+  text-align: center;
+}