Initial commit

3 files changed, 113 insertions, 0 deletions

diff --git a/assets/sass/@primer/css/pagination/README.md b/assets/sass/@primer/css/pagination/README.md
new file mode 100644
index 0000000..cb41808
--- /dev/null
+++ b/assets/sass/@primer/css/pagination/README.md
@@ -0,0 +1,25 @@
+---
+bundle: "pagination"
+generated: true
+---
+
+# Primer CSS: `pagination` 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/pagination/index.scss";
+```
+
+## Build
+
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/pagination.css`.
+
+## License
+
+[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
+
+
+[scss]: https://sass-lang.com/documentation/syntax#scss
diff --git a/assets/sass/@primer/css/pagination/index.scss b/assets/sass/@primer/css/pagination/index.scss
new file mode 100644
index 0000000..c624f95
--- /dev/null
+++ b/assets/sass/@primer/css/pagination/index.scss
@@ -0,0 +1,3 @@
+// support files
+@import "../support/index.scss";
+@import "./pagination.scss";
diff --git a/assets/sass/@primer/css/pagination/pagination.scss b/assets/sass/@primer/css/pagination/pagination.scss
new file mode 100644
index 0000000..253011d
--- /dev/null
+++ b/assets/sass/@primer/css/pagination/pagination.scss
@@ -0,0 +1,85 @@
+// Needs refactoring
+// stylelint-disable selector-max-type
+.pagination {
+  @include clearfix;
+
+  a,
+  span,
+  em {
+    position: relative;
+    float: left;
+    // stylelint-disable-next-line primer/spacing
+    padding: 7px 12px;
+    // stylelint-disable-next-line primer/spacing
+    margin-left: -1px;
+    // stylelint-disable-next-line primer/typography
+    font-size: 13px;
+    font-style: normal;
+    font-weight: $font-weight-bold;
+    color: $text-blue;
+    white-space: nowrap;
+    vertical-align: middle;
+    cursor: pointer;
+    user-select: none;
+    background: $bg-white; // Reset default gradient backgrounds and colors
+    border: $border-width $border-style $border-gray;
+
+    &:first-child {
+      margin-left: 0;
+      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;
+    }
+
+    // Bring any button into forefront for proper borders given negative margin below
+    &:hover,
+    &:focus {
+      z-index: 2;
+      text-decoration: none;
+      // stylelint-disable-next-line primer/colors
+      background-color: darken($gray-100, 2%);
+      border-color: $border-gray;
+    }
+  }
+
+  .selected { z-index: 3; }
+
+  .current,
+  .current:hover,
+  [aria-current],
+  [aria-current]:hover {
+    z-index: 3;
+    color: $text-white;
+    background-color: $bg-blue;
+    border-color: $border-blue;
+  }
+
+  .gap,
+  .disabled,
+  [aria-disabled=true],
+  .gap:hover,
+  .disabled:hover,
+  [aria-disabled=true]:hover {
+    // stylelint-disable-next-line primer/colors
+    color: $gray-300;
+    cursor: default;
+    background-color: $bg-gray-light;
+  }
+}
+
+// Unified centered pagination across the site
+.paginate-container {
+  // stylelint-disable-next-line primer/spacing
+  margin-top: 20px;
+  // stylelint-disable-next-line primer/spacing
+  margin-bottom: 15px;
+  text-align: center;
+
+  .pagination {
+    display: inline-block;
+  }
+}