feat(pagination): WIP See TODO and XXX

- 🚧 bootstrap4 .pagination
    - ✅ default
    - 🐞 tacc (CMS/Portal)
        - UI bugs
        - consider combining
- ✅ djangocms-blog .pagination
- ❌ TACC .c-page
    - deleted out of ignorance
    - must be restored
    - reference provided

src/lib/_imports/bootstrap4/pagination.postcss

@@ -0,0 +1,34 @@
+@import url("../tools/x-pagination.postcss");
+
+.pagination {
+  @mixin pagination;
+}
+
+.page-item:not( :first-child, :last-child ) {
+  @mixin pagination__item;
+}
+.page-item:is( :first-child, :last-child ) {
+  @mixin pagination__item--end;
+}
+
+.page-item.skip {
+  @mixin pagination__item--etc;
+}
+
+.page-link {
+  @mixin pagination__link;
+
+  .page-item:is( :first-child, :last-child ) & {
+    @mixin pagination__link--end;
+  }
+  .page-item.skip & {
+    @mixin pagination__link--etc;
+  }
+
+  .page-item.active & {
+    @mixin pagination__link--active;
+  }
+  .page-item.disabled & {
+    @mixin pagination__link--disabled;
+  }
+}

src/lib/_imports/bootstrap4/pagination/config.yml

@@ -0,0 +1,18 @@
+variants:
+  - name: default
+    label: Bootstrap
+    status: reference
+    context:
+      shouldSkipBase: true
+  - name: tacc-portal
+    label: TACC (Portal)
+    status: prototype
+    context:
+      shouldSkipPattern: false
+      shouldLoadPortal: true
+  - name: tacc-cms
+    label: TACC (CMS)
+    status: prototype
+    context:
+      shouldSkipPattern: false
+      shouldLoadCMS: true

src/lib/_imports/bootstrap4/pagination/pagination.hbs

@@ -0,0 +1,25 @@
+<nav aria-label="Page navigation example">
+    <ul class="pagination">
+        <li class="page-item">
+            <a class="page-link" href="#">&lt; Previous</a>
+        </li>
+        <li class="page-item active">
+            <a class="page-link" href="#">1</a>
+        </li>
+        <li class="page-item disabled">
+            <a class="page-link" href="#">2</a>
+        </li>
+        <li class="page-item">
+            <a class="page-link" href="#">3</a>
+        </li>
+        <li class="page-item skip">
+            <span class="page-link">...</span>
+        </li>
+        <li class="page-item">
+            <a class="page-link" href="#">14</a>
+        </li>
+        <li class="page-item">
+            <a class="page-link" href="#">Next &gt;</a>
+        </li>
+    </ul>
+</nav>

src/lib/_imports/bootstrap4/pagination/readme.md

@@ -0,0 +1,3 @@
+To override and extend [Bootstrap Pagination](https://getbootstrap.com/docs/4.0/components/pagination/).
+
+<script src="{{path '/assets/scripts/open-ext-links-in-new-window.js'}}" />

src/lib/_imports/bootstrap4/pagination/reference/_pagination.scss

@@ -0,0 +1,74 @@
+.pagination {
+  display: flex;
+  @include list-unstyled();
+  @include border-radius();
+}
+
+.page-link {
+  position: relative;
+  display: block;
+  padding: $pagination-padding-y $pagination-padding-x;
+  margin-left: -$pagination-border-width;
+  line-height: $pagination-line-height;
+  color: $pagination-color;
+  text-decoration: if($link-decoration == none, null, none);
+  background-color: $pagination-bg;
+  border: $pagination-border-width solid $pagination-border-color;
+
+  &:hover {
+    z-index: 2;
+    color: $pagination-hover-color;
+    text-decoration: none;
+    background-color: $pagination-hover-bg;
+    border-color: $pagination-hover-border-color;
+  }
+
+  &:focus {
+    z-index: 3;
+    outline: $pagination-focus-outline;
+    box-shadow: $pagination-focus-box-shadow;
+  }
+}
+
+.page-item {
+  &:first-child {
+    .page-link {
+      margin-left: 0;
+      @include border-left-radius($border-radius);
+    }
+  }
+  &:last-child {
+    .page-link {
+      @include border-right-radius($border-radius);
+    }
+  }
+
+  &.active .page-link {
+    z-index: 3;
+    color: $pagination-active-color;
+    background-color: $pagination-active-bg;
+    border-color: $pagination-active-border-color;
+  }
+
+  &.disabled .page-link {
+    color: $pagination-disabled-color;
+    pointer-events: none;
+    // Opinionated: remove the "hand" cursor set previously for .page-link
+    cursor: auto;
+    background-color: $pagination-disabled-bg;
+    border-color: $pagination-disabled-border-color;
+  }
+}
+
+
+//
+// Sizing
+//
+
+.pagination-lg {
+  @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, $pagination-border-radius-lg);
+}
+
+.pagination-sm {
+  @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, $pagination-border-radius-sm);
+}

src/lib/_imports/components/c-page.postcss

@@ -1,96 +1,7 @@
-/*
-Pagination
+@import url("../tools/x-pagination.postcss");
 
-A navigation list of sequential page toggles with end cap links.
+/* TODO: Support /c-page.html classes */
+/* FAQ: Core-Components Paginator module expects them */
+/* SEE: https://github.com/TACC/Core-Components/blob/v0.0.4/src/lib/Paginator/Paginator.module.css */
 
-Markup: c-page.html
 
-Styleguide Components.Pagination
-*/
-@import url("../components/c-button.selectors.postcss");
-
-
-
-/* Pagination: Variables */
-
-.c-page-list {
-  --item-width: 2em;
-  --item-buffer: 3px;
-  --item-border: var(--global-border-width--normal); /* WARNING: assumption */
-}
-
-
-
-/* Pagination: List */
-
-.c-page-list {
-  display: flex;
-  flex-direction: row;
-  align-items: baseline;
-  list-style: none;
-
-  font-size: 14px; /* TEMPORARY: Should be 14px and have commented rem value */
-}
-ul.c-page-list {
-  list-style: none;
-}
-
-/* Pagination: List: Constant Hover */
-
-.c-page-link--always-click {
-  position: relative;
-  box-sizing: content-box;
-}
-.c-page-link--always-click::before,
-.c-page-link--always-click::after {
-  --width: var(--item-buffer);
-  --vert-offset: calc( -1 * var(--item-border) );
-  --horz-offset: calc( 100% + var(--item-border) );
-
-  content: '';
-  width: var(--width);
-  position: absolute;
-  top: var(--vert-offset);
-  bottom: var(--vert-offset);
-}
-.c-page-link--always-click:--c-button {
-  overflow: visible; /* overwrite `.c-button` so pseudo elements show */
-}
-.c-page-link--always-click::before { right: var(--horz-offset) }
-.c-page-link--always-click::after { left: var(--horz-offset) }
-
-
-
-
-
-/* Pagination: Item */
-
-.c-page-item              { margin-inline: var(--item-buffer) }
-.c-page-item:first-child  { margin-left: 0 }
-.c-page-item:last-child   { margin-right: 0 }
-
-/* Pagination: Item: Truncated */
-
-.c-page-item--etcetera {
-  min-width: var(--item-width);
-  margin-inline: 2px;
-  text-align: center;
-
-  cursor: default;
-}
-
-
-
-/* Pagination: End */
-
-.c-page-end { padding: 4px 12px }
-
-
-
-/* Pagination: Link */
-
-.c-page-link {
-  padding: 5px 0;
-  min-width: var(--item-width);
-  line-height: 1.2;
-}

src/lib/_imports/djangocms-blog/cms-pagination.postcss

@@ -1,26 +1,20 @@
-/*
-Pagination (Bootstrap)
-
-Style Bootstrap pagination. See:
-
-- [Bootstrap Pagination](https://getbootstrap.com/docs/4.0/components/pagination/)
-
-Styleguide Components.Bootstrap.Pagination
-*/
-@import url("../components/c-page.postcss");
-
+@import url("../tools/x-pagination.postcss");
 
 .pagination {
-  @extend .c-page-list;
+  @mixin pagination;
 
   margin-block: var(--global-space--x-large);
 
   width: fit-content;
   margin-inline: auto;
 }
-.pagination a,
+.pagination a {
+  @mixin pagination__item--end;
+
+  padding-block: 0;
+}
 .pagination span {
-  @extend .c-page-end;
+  @mixin pagination__item;
 
   padding-block: 0;
 }