@tacc/core-styles 2.39.4 → 2.40.0

package/src/lib/_imports/tools/x-pagination/x-pagination.hbs

@@ -0,0 +1,194 @@
+<!-- Single Page -->
+<nav>
+  <ul class="x-pagination">
+    <li class="x-pagination__end-item x-pagination__disabled-item">
+        <span class="x-pagination__end-link x-pagination__page-link--disabled">&lt; Previous</span>
+    </li>
+    <li class="x-pagination__page-item x-pagination__active-item">
+        <span class="x-pagination__page-link x-pagination__page-link--active">1</span>
+    </li>
+    <li class="x-pagination__end-item x-pagination__disabled-item">
+        <span class="x-pagination__end-link x-pagination__page-link--disabled">Next &gt;</span>
+    </li>
+  </ul>
+</nav>
+
+<!-- Few Pages (Current: 2 of 4) -->
+<nav>
+  <ul class="x-pagination">
+    <li class="x-pagination__end-item">
+        <a class="x-pagination__end-link" href="#">&lt; Previous</a>
+    </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">1</a>
+    </li>
+    <li class="x-pagination__page-item x-pagination__active-item">
+        <span class="x-pagination__page-link x-pagination__page-link--active">2</span>
+    </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">3</a>
+    </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">4</a>
+    </li>
+    <li class="x-pagination__end-item">
+        <a class="x-pagination__end-link" href="#">Next &gt;</a>
+    </li>
+  </ul>
+</nav>
+
+<!-- Few Pages (Current: Last) -->
+<nav>
+  <ul class="x-pagination">
+    <li class="x-pagination__end-item">
+        <a class="x-pagination__end-link" href="#">&lt; Previous</a>
+    </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">1</a>
+    </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">2</a>
+    </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">3</a>
+    </li>
+    <li class="x-pagination__page-item x-pagination__active-item">
+        <span class="x-pagination__page-link x-pagination__page-link--active">4</span>
+    </li>
+    <li class="x-pagination__end-item x-pagination__disabled-item">
+        <span class="x-pagination__end-link x-pagination__page-link--disabled">Next &gt;</span>
+    </li>
+  </ul>
+</nav>
+
+<!-- Many Pages - Near Start (Current: 3 of 20) -->
+<nav>
+  <ul class="x-pagination">
+    <li class="x-pagination__end-item">
+        <a class="x-pagination__end-link" href="#">&lt; Previous</a>
+    </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">1</a>
+    </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">2</a>
+    </li>
+    <li class="x-pagination__page-item x-pagination__active-item">
+        <span class="x-pagination__page-link x-pagination__page-link--active">3</span>
+    </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">4</a>
+    </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">5</a>
+    </li>
+    <li class="x-pagination__skipped-item">
+        <span class="x-pagination__skipped-link">...</span>
+    </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">20</a>
+    </li>
+    <li class="x-pagination__end-item">
+        <a class="x-pagination__end-link" href="#">Next &gt;</a>
+    </li>
+  </ul>
+</nav>
+
+<!-- Many Pages - Middle (Current: 10 of 20) -->
+<nav>
+  <ul class="x-pagination">
+    <li class="x-pagination__end-item">
+        <a class="x-pagination__end-link" href="#">&lt; Previous</a>
+    </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">1</a>
+    </li>
+    <li class="x-pagination__skipped-item">
+        <span class="x-pagination__skipped-link">...</span>
+    </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">8</a>
+    </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">9</a>
+    </li>
+    <li class="x-pagination__page-item x-pagination__active-item">
+        <span class="x-pagination__page-link x-pagination__page-link--active">10</span>
+    </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">11</a>
+    </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">12</a>
+    </li>
+    <li class="x-pagination__skipped-item">
+        <span class="x-pagination__skipped-link">...</span>
+    </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">20</a>
+    </li>
+    <li class="x-pagination__end-item">
+        <a class="x-pagination__end-link" href="#">Next &gt;</a>
+    </li>
+  </ul>
+</nav>
+
+<!-- Many Pages - Near End (Current: 18 of 20) -->
+<nav>
+  <ul class="x-pagination">
+    <li class="x-pagination__end-item">
+        <a class="x-pagination__end-link" href="#">&lt; Previous</a>
+    </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">1</a>
+    </li>
+    <li class="x-pagination__skipped-item">
+        <span class="x-pagination__skipped-link">...</span>
+    </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">16</a>
+    </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">17</a>
+    </li>
+    <li class="x-pagination__page-item x-pagination__active-item">
+        <span class="x-pagination__page-link x-pagination__page-link--active">18</span>
+    </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">19</a>
+    </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">20</a>
+    </li>
+    <li class="x-pagination__end-item">
+        <a class="x-pagination__end-link" href="#">Next &gt;</a>
+    </li>
+  </ul>
+</nav>
+
+<!-- Example with Disabled Link -->
+<nav>
+  <ul class="x-pagination">
+    <li class="x-pagination__end-item">
+        <a class="x-pagination__end-link" href="#">&lt; Previous</a>
+    </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">1</a>
+    </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">2</a>
+    </li>
+    <li class="x-pagination__page-item x-pagination__active-item">
+        <span class="x-pagination__page-link x-pagination__page-link--active">3</span>
+    </li>
+    <li class="x-pagination__page-item x-pagination__disabled-item">
+        <span class="x-pagination__page-link x-pagination__page-link--disabled">4</span>
+    </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">5</a>
+    </li>
+    <li class="x-pagination__end-item">
+        <a class="x-pagination__end-link" href="#">Next &gt;</a>
+    </li>
+  </ul>
+</nav> 

package/src/lib/_imports/tools/x-pagination.css

@@ -0,0 +1,203 @@
+@import url("../tools/x-link.css");
+/* TODO: Use x-button (instead of copied styles) */
+/* @import url("../tools/x-button.css"); */
+
+
+
+
+/* BASE */
+
+@define-mixin pagination {
+  display: flex;
+  flex-direction: row;
+  place-content: center;
+  place-items: center;
+
+  margin-bottom: unset; /* overwrites core-styles.base.css */
+
+  font-size: var(--global-font-size--small);
+
+  &:is(ol, ul) {
+    padding-left: unset;
+    list-style: none;
+  }
+}
+/* DEMO-USE ONLY */
+.x-pagination {
+  @mixin pagination;
+}
+
+
+
+
+/* ELEMENTS */
+
+
+/* Item */
+
+@define-mixin pagination__end-item {
+  padding: 0 12px;
+  line-height: 1;
+
+  white-space: nowrap;
+
+  &:is(button) {
+    background-color: transparent;
+    border: none;
+    border-radius: unset;
+  }
+}
+/* DEMO-USE ONLY */
+.x-pagination__end-item {
+  @mixin pagination__end-item;
+}
+
+@define-mixin pagination__page-item {
+  &:not(
+    :first-child,
+    :last-child
+  ) {
+    margin-inline: 0.25em;
+  }
+}
+/* DEMO-USE ONLY */
+.x-pagination__page-item {
+  @mixin pagination__page-item;
+}
+
+@define-mixin pagination__skipped-item {
+  display: flex;
+  place-content: center;
+
+  cursor: default;
+}
+/* DEMO-USE ONLY */
+.x-pagination__skipped-item {
+  @mixin pagination__skipped-item;
+}
+
+@define-mixin pagination__active-item {
+  /* no styles needed */
+}
+/* DEMO-USE ONLY */
+.x-pagination__active-item {
+  @mixin pagination__active-item;
+}
+
+@define-mixin pagination__disabled-item {
+  pointer-events: none;
+}
+/* DEMO-USE ONLY */
+.x-pagination__disabled-item {
+  @mixin pagination__disabled-item;
+}
+
+
+/* Link */
+
+@define-mixin pagination__link {
+  display: flex;
+  place-content: center;
+
+  padding: 5px;
+  line-height: 1;
+  min-width: 1em;
+  box-sizing: content-box; /* to support square links and button links */
+
+  &:is(button) {
+    cursor: pointer;
+  }
+}
+@define-mixin pagination__page-link {
+  @mixin pagination__link;
+
+  background-color: var(--global-color-primary--x-light);
+  border-color: var(--global-color-primary--xx-dark);
+  border-style: solid;
+  border-width: var(--global-border-width--normal);
+  color: var(--global-color-primary--xx-dark);
+
+  &:hover {
+    background-color: var(--global-color-accent--x-light);
+    border-color: var(--global-color-accent--normal);
+    color: var(--global-color-primary--xx-dark);
+
+    &:is(a) {
+      text-decoration: none;
+    }
+  }
+  &:focus {
+    background-color: var(--global-color-accent--x-light);
+    border-color: var(--global-color-primary--xx-dark);
+    color: var(--global-color-primary--xx-dark);
+
+    outline: var(--global-border-width--thick) solid var(--global-color-accent--light);
+  }
+  &:active {
+    background-color: var(--global-color-accent--x-light);
+    border-color: var(--global-color-accent--dark);
+    border-width: var(--global-border-width--normal);
+    color: var(--global-color-primary--xx-dark);
+
+    outline: var(--global-border-width--normal) solid var(--global-color-accent--dark);
+  }
+}
+/* DEMO-USE ONLY */
+.x-pagination__page-link {
+  @mixin pagination__page-link;
+}
+
+@define-mixin pagination__end-link {
+  @mixin pagination__link;
+
+  &:focus {
+    outline: var(--global-border-width--thick) solid var(--global-color-accent--light);
+  }
+
+  &:is(button):not(:disabled) {
+    @mixin link;
+    &:hover { @mixin link--hover; }
+    &:active { @mixin link--active; }
+  }
+}
+/* DEMO-USE ONLY */
+.x-pagination__end-link {
+  @mixin pagination__end-link;
+}
+
+@define-mixin pagination__skipped-link {
+  @mixin pagination__link;
+
+  /* FAQ: If client applies this with other mixins,
+          then client must resolve conflicting styles
+          (like in Bootstrap4 pagination.css) */
+}
+/* DEMO-USE ONLY */
+.x-pagination__skipped-link {
+  @mixin pagination__skipped-link;
+}
+
+@define-mixin pagination__page-link--active {
+  background-color: var(--global-color-accent--x-light);
+  border-color: var(--global-color-primary--xx-dark);
+  color: var(--global-color-primary--xx-dark);
+
+  &:hover {
+    background-color: var(--global-color-accent--xx-light);
+    border-color: var(--global-color-accent--dark);
+  }
+}
+/* DEMO-USE ONLY */
+.x-pagination__page-link--active {
+  @mixin pagination__page-link--active;
+}
+
+@define-mixin pagination__page-link--disabled {
+  color: var(--global-color-primary--light);
+  background-color: var(--global-color-primary--xx-light);
+  border-color: var(--global-color-primary--light);
+}
+/* DEMO-USE ONLY */
+.x-pagination__page-link--disabled {
+  @mixin pagination__page-link--disabled;
+}

package/dist/_utils/js/open-ext-links-in-new-window.js

@@ -1,4 +0,0 @@
-/* To open external links in new window */
-Array.from(document.links)
-  .filter(link => link.hostname != window.location.hostname)
-  .forEach(link => link.target = '_blank');

package/dist/components/c-card-list/c-card-list.demo.css

@@ -1 +0,0 @@
-/*! @tacc/core-styles 2.38.0+ | MIT | github.com/TACC/Core-Styles */.c-card-list{list-style:none;padding-left:unset}

package/src/lib/_imports/components/c-page.html

@@ -1,203 +0,0 @@
-<!-- Pagination with one page -->
-<div class="c-page-list">
-  <button class="c-button c-button--as-link c-page-end" disabled type="button">
-    &lt; Previous
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--is-active c-button--size-small c-page-item c-page-link c-page-link--always-click"
-    type="button"
-  >
-    1
-  </button>
-  <button class="c-button c-button--as-link c-page-end" disabled type="button">
-    Next &gt;
-  </button>
-</div>
-
-<!-- Pagination with fewer than 7 pages -->
-<div class="c-page-list">
-  <button class="c-button c-button--as-link c-page-end" type="button">
-    &lt; Previous
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
-    type="button"
-  >
-    1
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--is-active c-button--size-small c-page-item c-page-link c-page-link--always-click"
-    type="button"
-  >
-    2
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
-    type="button"
-  >
-    3
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
-    type="button"
-  >
-    4
-  </button>
-  <button class="c-button c-button--as-link c-page-end" type="button">
-    Next &gt;
-  </button>
-</div>
-
-<!-- Pagination with current page near start -->
-<div class="c-page-list">
-  <button class="c-button c-button--as-link c-page-end" type="button">
-    &lt; Previous
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
-    type="button"
-  >
-    1
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
-    type="button"
-  >
-    2
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--is-active c-button--size-small c-page-item c-page-link c-page-link--always-click"
-    type="button"
-  >
-    3
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
-    type="button"
-  >
-    4
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
-    type="button"
-  >
-    5
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
-    type="button"
-  >
-    6
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
-    type="button"
-  >
-    7
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
-    type="button"
-  >
-    8
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
-    type="button"
-  >
-    9
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
-    type="button"
-  >
-    10
-  </button>
-  <span class="c-page-item--etcetera">...</span>
-  <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
-    type="button"
-  >
-    20
-  </button>
-  <button class="c-button c-button--as-link c-page-end" type="button">
-    Next &gt;
-  </button>
-</div>
-
-<!-- Pagination with current page near end -->
-<div class="c-page-list">
-  <button class="c-button c-button--as-link c-page-end" type="button">
-    &lt; Previous
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
-    type="button"
-  >
-    1
-  </button>
-  <span class="c-page-item--etcetera">...</span>
-  <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
-    type="button"
-  >
-    11
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
-    type="button"
-  >
-    12
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
-    type="button"
-  >
-    13
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
-    type="button"
-  >
-    14
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
-    type="button"
-  >
-    15
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
-    type="button"
-  >
-    16
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
-    type="button"
-  >
-    17
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--is-active c-button--size-small c-page-item c-page-link c-page-link--always-click"
-    type="button"
-  >
-    18
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
-    type="button"
-  >
-    19
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
-    type="button"
-  >
-    20
-  </button>
-  <button class="c-button c-button--as-link c-page-end" type="button">
-    Next &gt;
-  </button>
-</div>