8 files changed, 642 insertions, 0 deletions
diff --git a/assets/sass/@primer/css/navigation/README.md b/assets/sass/@primer/css/navigation/README.md
new file mode 100644
index 0000000..bf7ef02
--- /dev/null
+++ b/assets/sass/@primer/css/navigation/README.md
@@ -0,0 +1,25 @@
+---
+bundle: "navigation"
+generated: true
+---
+
+# Primer CSS: `navigation` bundle
+
+## Usage
+
+Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
+
+```scss
+@import "@primer/css/navigation/index.scss";
+```
+
+## Build
+
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/navigation.css`.
+
+## License
+
+[MIT](https://github.com/primer/css/blob/master/LICENSE) &copy; [GitHub](https://github.com/)
+
+
+[scss]: https://sass-lang.com/documentation/syntax#scss
diff --git a/assets/sass/@primer/css/navigation/filter-list.scss b/assets/sass/@primer/css/navigation/filter-list.scss
new file mode 100644
index 0000000..2d09947
--- /dev/null
+++ b/assets/sass/@primer/css/navigation/filter-list.scss
@@ -0,0 +1,68 @@
+// Filters list
+//
+// A vertical list of filters.
+.filter-list {
+  list-style-type: none;
+
+  &.small .filter-item {
+    padding: $spacer-1 10px;
+    // stylelint-disable-next-line primer/spacing
+    margin: 0 0 2px;
+    font-size: $font-size-small;
+  }
+
+  &.pjax-active .filter-item {
+    color: $text-gray;
+    background-color: transparent;
+
+    &.pjax-active {
+      color: $text-white;
+      background-color: $bg-blue;
+    }
+  }
+}
+
+.filter-item {
+  position: relative;
+  display: block;
+  padding: $spacer-2 10px;
+  // stylelint-disable-next-line primer/spacing
+  margin-bottom: 5px;
+  overflow: hidden;
+  font-size: $h5-size;
+  color: $text-gray;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+  border-radius: $border-radius;
+
+  &:hover {
+    text-decoration: none;
+    // stylelint-disable-next-line primer/colors
+    background-color: lighten($gray-200, 3%);
+  }
+
+  &.selected,
+  &[aria-selected=true],
+  &[aria-current] {
+    color: $text-white;
+    background-color: $bg-blue;
+  }
+
+  .count {
+    float: right;
+    font-weight: $font-weight-bold;
+  }
+
+  .bar {
+    position: absolute;
+    top: 2px;
+    right: 0;
+    bottom: 2px;
+    z-index: -1;
+    display: inline-block;
+    // stylelint-disable-next-line primer/colors
+    background-color: darken($gray-100, 2%);
+  }
+}
diff --git a/assets/sass/@primer/css/navigation/index.scss b/assets/sass/@primer/css/navigation/index.scss
new file mode 100644
index 0000000..c3002c5
--- /dev/null
+++ b/assets/sass/@primer/css/navigation/index.scss
@@ -0,0 +1,8 @@
+@import "../support/index.scss";
+// Navigation
+@import "./menu.scss";
+@import "./tabnav.scss";
+@import "./filter-list.scss";
+@import "./sidenav.scss";
+@import "./subnav.scss";
+@import "./underline-nav.scss";
diff --git a/assets/sass/@primer/css/navigation/menu.scss b/assets/sass/@primer/css/navigation/menu.scss
new file mode 100644
index 0000000..cc7e858
--- /dev/null
+++ b/assets/sass/@primer/css/navigation/menu.scss
@@ -0,0 +1,133 @@
+// Side menu
+//
+// A menu on the side of a page, defaults to left side. e.g. github.com/about
+
+.menu {
+  // stylelint-disable-next-line primer/spacing
+  margin-bottom: 15px;
+  list-style: none;
+  background-color: $bg-white;
+  border: $border-width $border-style $border-gray-dark;
+  border-radius: $border-radius;
+}
+
+.menu-item {
+  position: relative;
+  display: block;
+  padding: $spacer-2 10px;
+  border-bottom: $border;
+
+  &:first-child {
+    border-top: 0;
+    // stylelint-disable-next-line primer/borders
+    border-top-left-radius: 2px;
+    // stylelint-disable-next-line primer/borders
+    border-top-right-radius: 2px;
+
+    // stylelint-disable-next-line primer/borders
+    &::before { border-top-left-radius: 2px; }
+  }
+
+  &:last-child {
+    border-bottom: 0;
+    // stylelint-disable-next-line primer/borders
+    border-bottom-right-radius: 2px;
+    // stylelint-disable-next-line primer/borders
+    border-bottom-left-radius: 2px;
+
+    // stylelint-disable-next-line primer/borders
+    &::before { border-bottom-left-radius: 2px; }
+  }
+
+  &:hover {
+    text-decoration: none;
+    background-color: $bg-gray;
+  }
+
+  &.selected,
+  &[aria-selected=true],
+  &[aria-current] {
+    font-weight: $font-weight-bold;
+    color: $text-gray-dark;
+    cursor: default;
+    background-color: $bg-white;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      width: 2px;
+      content: "";
+      // stylelint-disable-next-line primer/colors
+      background-color: $orange-600;
+    }
+  }
+
+  .octicon {
+    width: 16px;
+    // stylelint-disable-next-line primer/spacing
+    margin-right: 5px;
+    color: $text-gray-dark;
+    text-align: center;
+  }
+
+  .Counter {
+    float: right;
+    // stylelint-disable-next-line primer/spacing
+    margin-left: 5px;
+  }
+
+  .menu-warning {
+    float: right;
+    // stylelint-disable-next-line primer/colors
+    color: $red-900;
+  }
+
+  .avatar {
+    float: left;
+    // stylelint-disable-next-line primer/spacing
+    margin-right: 5px;
+  }
+
+  &.alert {
+    .Counter {
+      color: $text-red;
+    }
+  }
+}
+
+.menu-heading {
+  display: block;
+  padding: $spacer-2 10px;
+  margin-top: 0;
+  margin-bottom: 0;
+  // stylelint-disable-next-line primer/typography
+  font-size: 13px;
+  font-weight: $font-weight-bold;
+  // stylelint-disable-next-line primer/typography
+  line-height: 20px;
+  color: $text-gray;
+  // stylelint-disable-next-line primer/colors
+  background-color: darken($gray-100, 1%);
+  border-bottom: $border;
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  &:first-child {
+    // stylelint-disable-next-line primer/borders
+    border-top-left-radius: 2px;
+    // stylelint-disable-next-line primer/borders
+    border-top-right-radius: 2px;
+  }
+
+  &:last-child {
+    border-bottom: 0;
+    // stylelint-disable-next-line primer/borders
+    border-bottom-right-radius: 2px;
+    // stylelint-disable-next-line primer/borders
+    border-bottom-left-radius: 2px;
+  }
+}
diff --git a/assets/sass/@primer/css/navigation/sidenav.scss b/assets/sass/@primer/css/navigation/sidenav.scss
new file mode 100644
index 0000000..35bffdd
--- /dev/null
+++ b/assets/sass/@primer/css/navigation/sidenav.scss
@@ -0,0 +1,111 @@
+// Side Nav
+//
+// A vertical list of navigational links, typically used on the left side of a page.
+
+.SideNav {
+  background-color: $bg-gray-light;
+}
+
+.SideNav-item {
+  position: relative;
+  display: block;
+  width: 100%;
+  padding: $spacer-3;
+  color: $text-gray;
+  text-align: left;
+  background-color: transparent;
+  border: 0;
+  border-top: $border;
+
+  &:first-child {
+    border-top: 0;
+  }
+
+  &:last-child {
+    // makes sure there is a "bottom border" in case the list is not long enough
+    // stylelint-disable-next-line primer/box-shadow
+    box-shadow: 0 $border-width 0 $border-color;
+  }
+
+  // Bar on the left
+  &::before {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    width: 3px;
+    pointer-events: none;
+    content: "";
+  }
+}
+
+// States
+
+.SideNav-item:hover,
+.SideNav-item:focus {
+  color: $text-gray-dark;
+  text-decoration: none;
+  background-color: $bg-gray;
+  outline: none;
+
+  // Bar on the left
+  &::before {
+    // stylelint-disable-next-line primer/colors
+    background-color: $gray-300;
+  }
+}
+
+.SideNav-item:active {
+  background-color: $bg-white;
+}
+
+.SideNav-item[aria-current="page"],
+.SideNav-item[aria-selected="true"] {
+  font-weight: $font-weight-semibold;
+  color: $text-gray-dark;
+  background-color: $bg-white;
+
+  // Bar on the left
+  &::before {
+    // stylelint-disable-next-line primer/colors
+    background-color: $orange-600;
+  }
+}
+
+// Icon
+//
+// Makes sure multiple icons are vertically aligned
+
+.SideNav-icon {
+  width: 16px;
+  color: $text-gray-light;
+}
+
+// Sub Nav
+//
+// A more lightweight version, suited as a sub nav
+
+.SideNav-subItem {
+  position: relative;
+  display: block;
+  width: 100%;
+  padding: $spacer-1 0;
+  color: $text-blue;
+  text-align: left;
+  background-color: transparent;
+  border: 0;
+}
+
+.SideNav-subItem:hover,
+.SideNav-subItem:focus {
+  color: $text-gray-dark;
+  text-decoration: none;
+  outline: none;
+}
+
+.SideNav-subItem[aria-current="page"],
+.SideNav-subItem[aria-selected="true"] {
+  font-weight: $font-weight-semibold;
+  color: $text-gray-dark;
+}
diff --git a/assets/sass/@primer/css/navigation/subnav.scss b/assets/sass/@primer/css/navigation/subnav.scss
new file mode 100644
index 0000000..f268a89
--- /dev/null
+++ b/assets/sass/@primer/css/navigation/subnav.scss
@@ -0,0 +1,132 @@
+// Needs refactoring
+// Sub nav
+.subnav {
+  // stylelint-disable-next-line primer/spacing
+  margin-bottom: 20px;
+
+  @include clearfix();
+}
+
+.subnav-bordered {
+  // stylelint-disable-next-line primer/spacing
+  padding-bottom: 20px;
+  border-bottom: $border-width $border-style $border-gray-light;
+}
+
+.subnav-flush {
+  margin-bottom: 0;
+}
+
+.subnav-item {
+  position: relative;
+  float: left;
+  // stylelint-disable-next-line primer/spacing
+  padding: 6px 14px;
+  font-weight: $font-weight-bold;
+  // stylelint-disable-next-line primer/typography
+  line-height: 20px;
+  color: $text-gray;
+  border: $border;
+
+  + .subnav-item {
+    // stylelint-disable-next-line primer/spacing
+    margin-left: -1px;
+  }
+
+  &:hover,
+  &:focus {
+    text-decoration: none;
+    background-color: $bg-gray;
+  }
+
+  &.selected,
+  &[aria-selected=true],
+  &[aria-current] {
+    z-index: 2;
+    color: $text-white;
+    background-color: $bg-blue;
+    // stylelint-disable-next-line primer/borders
+    border-color: $blue;
+  }
+
+  &:first-child {
+    border-top-left-radius: $border-radius;
+    border-bottom-left-radius: $border-radius;
+  }
+
+  &:last-child {
+    border-top-right-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
+  }
+}
+
+.subnav-search {
+  position: relative;
+  // stylelint-disable-next-line primer/spacing
+  margin-left: 10px;
+}
+
+.subnav-search-input {
+  width: 320px;
+  // stylelint-disable-next-line primer/spacing
+  padding-left: 30px;
+  color: $text-gray;
+}
+
+.subnav-search-input-wide {
+  width: 500px;
+}
+
+.subnav-search-icon {
+  position: absolute;
+  top: 9px;
+  left: 8px;
+  display: block;
+  // stylelint-disable-next-line primer/colors
+  color: darken($gray-300, 4%);
+  text-align: center;
+  pointer-events: none;
+}
+
+.subnav-search-context {
+  .btn {
+    // stylelint-disable-next-line primer/colors
+    color: $gray-700;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+
+    &:hover,
+    &:focus,
+    &:active,
+    &.selected {
+      z-index: 2;
+    }
+  }
+
+  + .subnav-search {
+    // stylelint-disable-next-line primer/spacing
+    margin-left: -1px;
+
+    .subnav-search-input {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+
+  .select-menu-modal-holder {
+    z-index: 30;
+  }
+
+  .select-menu-modal {
+    width: 220px;
+  }
+
+  .select-menu-item-icon {
+    color: inherit;
+  }
+}
+
+.subnav-spacer-right {
+  // stylelint-disable-next-line primer/spacing
+  padding-right: 10px;
+}
diff --git a/assets/sass/@primer/css/navigation/tabnav.scss b/assets/sass/@primer/css/navigation/tabnav.scss
new file mode 100644
index 0000000..fd90406
--- /dev/null
+++ b/assets/sass/@primer/css/navigation/tabnav.scss
@@ -0,0 +1,84 @@
+// Outer wrapper
+// stylelint-disable selector-max-type
+.tabnav {
+  margin-top: 0;
+  // stylelint-disable-next-line primer/spacing
+  margin-bottom: 15px;
+  border-bottom: $border-width $border-style $border-gray-dark;
+
+  .Counter {
+    // stylelint-disable-next-line primer/spacing
+    margin-left: 5px;
+  }
+}
+
+.tabnav-tabs {
+  // stylelint-disable-next-line primer/spacing
+  margin-bottom: -1px;
+}
+
+.tabnav-tab {
+  display: inline-block;
+  padding: $spacer-2 12px;
+  font-size: $h5-size;
+  // stylelint-disable-next-line primer/typography
+  line-height: 20px;
+  color: $text-gray;
+  text-decoration: none;
+  background-color: transparent;
+  border: $border-width $border-style transparent;
+  border-bottom: 0;
+
+  &.selected,
+  &[aria-selected=true],
+  &[aria-current] {
+    color: $text-gray-dark;
+    background-color: $bg-white;
+    border-color: $border-gray-dark;
+    border-radius: $border-radius $border-radius 0 0;
+  }
+
+  &:hover,
+  &:focus {
+    color: $text-gray-dark;
+    text-decoration: none;
+  }
+}
+
+// Tabnav extras
+//
+// Tabnav extras are non-tab elements that sit in the tabnav. Usually they're
+// inline text or links.
+
+.tabnav-extra {
+  display: inline-block;
+  // stylelint-disable-next-line primer/spacing
+  padding-top: 10px;
+  // stylelint-disable-next-line primer/spacing
+  margin-left: 10px;
+  font-size: $font-size-small;
+  color: $text-gray;
+
+  > .octicon {
+    // stylelint-disable-next-line primer/spacing
+    margin-right: 2px;
+  }
+}
+
+// When tabnav-extra are anchors
+// stylelint-disable selector-no-qualifying-type
+a.tabnav-extra:hover {
+  color: $text-blue;
+  text-decoration: none;
+}
+// stylelint-enable selector-no-qualifying-type
+
+// Tabnav buttons
+//
+// For when there are multiple buttons, space them out appropriately. Requires
+// the buttons to be floated or inline-block.
+
+.tabnav-btn {
+  // stylelint-disable-next-line primer/spacing
+  margin-left: 10px;
+}
diff --git a/assets/sass/@primer/css/navigation/underline-nav.scss b/assets/sass/@primer/css/navigation/underline-nav.scss
new file mode 100644
index 0000000..7b9309d
--- /dev/null
+++ b/assets/sass/@primer/css/navigation/underline-nav.scss
@@ -0,0 +1,81 @@
+.UnderlineNav {
+  display: flex;
+  overflow-x: auto;
+  overflow-y: hidden;
+  border-bottom: $border;
+  justify-content: space-between;
+}
+
+.UnderlineNav-body {
+  display: flex;
+}
+
+.UnderlineNav-item {
+  padding: $spacer-3 $spacer-2;
+  margin-right: $spacer-3;
+  font-size: $body-font-size;
+  line-height: $lh-default;
+  color: $text-gray;
+  text-align: center;
+  white-space: nowrap;
+  background-color: transparent;
+  border: 0;
+  // stylelint-disable-next-line primer/borders
+  border-bottom: 2px $border-style transparent;
+
+  &:hover,
+  &:focus {
+    color: $text-gray-dark;
+    text-decoration: none;
+    border-bottom-color: $border-gray-dark;
+    transition: 0.2s ease;
+
+    .UnderlineNav-octicon {
+      color: $text-gray-light;
+    }
+  }
+
+  &.selected,
+  &[role=tab][aria-selected=true],
+  &[aria-current] {
+    font-weight: $font-weight-bold;
+    color: $text-gray-dark;
+    // stylelint-disable-next-line primer/borders
+    border-bottom-color: $orange-600;
+
+    .UnderlineNav-octicon {
+      color: $text-gray-light;
+    }
+  }
+}
+
+.UnderlineNav--right {
+  justify-content: flex-end;
+
+  .UnderlineNav-item {
+    margin-right: 0;
+    margin-left: $spacer-3;
+  }
+
+  .UnderlineNav-actions {
+    flex: 1 1 auto;
+  }
+}
+
+.UnderlineNav-actions {
+  align-self: center;
+}
+
+.UnderlineNav--full {
+  display: block;
+}
+
+.UnderlineNav-octicon {
+  // stylelint-disable-next-line primer/colors
+  color: $gray-400;
+}
+
+.UnderlineNav-container {
+  display: flex;
+  justify-content: space-between;
+}