feat: Initial after clean slate

1 files changed, 77 insertions, 0 deletions

diff --git a/apps/web-shared/src/styles/components/pagination.scss b/apps/web-shared/src/styles/components/pagination.scss
new file mode 100644
index 0000000..0a09210
--- /dev/null
+++ b/apps/web-shared/src/styles/components/pagination.scss
@@ -0,0 +1,77 @@
+@use '../base' as *;
+
+/* --------------------------------
+
+File#: _1_pagination
+Title: Pagination
+Descr: Component used to navigate through pages of related content
+Usage: codyhouse.co/license
+
+-------------------------------- */
+
+.pagination {}
+
+.pagination__list > li {
+  display: inline-block; // flex fallback
+}
+
+// --split - push first + last item to sides
+.pagination--split {
+  .pagination__list {
+    width: 100%;
+
+    > *:first-child {
+      margin-right: auto;
+    }
+
+    > *:last-child {
+      margin-left: auto;
+    }
+  }
+}
+
+.pagination__item {
+  display: inline-block; // flex fallback
+  display: inline-flex;
+  height: 100%;
+  align-items: center;
+  padding: var(--space-xs) calc(1.355 * var(--space-xs));
+
+  white-space: nowrap;
+  line-height: 1;
+  border-radius: var(--radius-md);
+
+  text-decoration: none;
+  color: var(--color-contrast-high);
+  @include fontSmooth;
+
+  will-change: transform;
+
+  &:hover:not(.pagination__item--selected):not(.pagination__item--ellipsis) {
+    background-color: alpha(var(--color-contrast-higher), 0.1);
+  }
+}
+
+.pagination__item--selected {
+  background-color: var(--color-contrast-higher);
+  color: var(--color-bg);
+  box-shadow: var(--shadow-sm);
+}
+
+.pagination__item--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+// --jumper
+.pagination__jumper {
+  .form-control {
+    width: 3em;
+    margin-right: var(--space-xs);
+  }
+
+  em {
+    flex-shrink: 0;
+    white-space: nowrap;
+  }
+}