@tacc/core-styles 0.5.1

package/source/_imports/components/c-page.html

@@ -0,0 +1,192 @@
+<!-- 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>

package/source/_imports/components/c-recognition.css

@@ -0,0 +1,102 @@
+/*
+Recognition
+
+A callout (often legal or obligatory) of recognition for an entity.
+
+> __⚠️ Warning__: Incompatible on a Bootstrap column element. You can use this pattern *within* a column instead.
+
+.c-recognition--style-dark  - A dark background and light text
+.c-recognition--style-light - A light background and dark text
+
+Markup:
+<aside class="c-recognition {{modifier_class}}">
+  <h3>Citation</h3>
+  <p>Teams who have NSF Petascale Computational Resource (PRAC) Awards should also acknowledge those awards.</p>
+  <p><em>Dan Stanzione, John West, R. Todd Evans, Tommy Minyard, Omar Ghattas, and Dhabaleswar K. Panda. 2020. Frontera: The Evolution of Leadership Computing at the National Science Foundation. In Practice and Experience in Advanced Research Computing (PEARC ’20), July 26–30, 2020, Portland, OR, USA. ACM, New York, NY, USA, 11 pages. https://doi.org/ 10.1145/3311790.3396656</em></p>
+</aside>
+
+Styleguide Components.Recognition
+*/
+
+
+
+
+
+/* Block */
+
+.c-recognition {
+  font-size: var(--global-font-size--small);
+}
+
+/* Overwrite Bootstrap padding but restore it with margin of same dimensions */
+/* NOTE: Ignore Bootstrap `ml-`/`mr-` class cuz they override w/ `!important` */
+.c-recognition {
+  padding: 0 2.14em;
+
+  /* Contain margins of children (there are other one-line solutions) */
+  /* SEE: https://stackoverflow.com/q/13573653/11817077 */
+  overflow: auto;
+}
+
+
+
+
+
+/* Elements */
+
+.c-recognition h3 {
+  margin-top: 0.7em;
+}
+.c-recognition > p:last-child {
+  margin-bottom: 1.4em;
+}
+
+
+
+
+
+/* Modifiers */
+
+
+
+/* Modifers: Style: Dark */
+
+.c-recognition--style-dark {
+  color: var(--global-color-primary--xx-light);
+  background-color: var(--global-color-primary--xx-dark);
+}
+.c-recognition--style-dark a {
+  color: var(--global-color-link-on-dark--normal);
+}
+.c-recognition--style-dark h1,
+.c-recognition--style-dark h2,
+.c-recognition--style-dark h3,
+.c-recognition--style-dark h4,
+.c-recognition--style-dark h5,
+.c-recognition--style-dark h6 {
+  color: var(--global-color-accent--normal);
+}
+
+
+
+/* Modifers: Style: Light */
+
+.c-recognition--style-light {
+  color: var(--global-color-primary--dark);
+  background-color: var(--global-color-primary--xx-light);
+
+  border-width: var(--global-border-width--normal) 0;
+  border-style: solid;
+  border-color: var(--global-color-primary--xx-dark);
+}
+.c-recognition--style-light a {
+  color: var(--global-color-link-on-light--normal);
+}
+.c-recognition--style-light h1,
+.c-recognition--style-light h2,
+.c-recognition--style-light h3,
+.c-recognition--style-light h4,
+.c-recognition--style-light h5,
+.c-recognition--style-light h6 {
+  color: var(--global-color-primary--xx-dark);
+}

package/source/_imports/components/c-see-all-link.css

@@ -0,0 +1,52 @@
+/*
+See All Link
+
+A link to all content to which a subset of content before it belongs.
+
+Markup:
+<a class="c-see-all-link" href="#">
+  <i class="c-see-all-link__icon  icon icon-push-right"></i>
+  <span class="c-see-all-link__text">See All</span>
+</a>
+
+Styleguide Components.SeeAllLink
+*/
+@import url("_imports/tools/x-truncate.css");
+
+
+
+/* Base i.e. Container */
+
+.c-see-all-link {
+  display: inline-block;
+
+  padding-top: 1.0em;
+  padding-right: 1.0em;
+  padding-bottom: 1.0em;
+  margin-bottom: -1.0em; /* to "undo" space added from `padding-bottom` */
+
+  @extend %x-truncate--one-line;
+  max-width: 100%; /* SEE: https://stackoverflow.com/a/44521595 */
+
+  font-size: 1.2rem;
+  font-weight: var(--bold);
+}
+
+
+
+/* Children */
+
+.c-see-all-link__icon {
+  margin-right: 0.75em;
+
+  font-size: 1.167em; /* to get size 14px from 12px base */
+  vertical-align: text-bottom;
+
+  /* To hide the `text-decoration: underline` of the anchor */
+  /* SEE: https://stackoverflow.com/a/15688237/11817077 */
+  display: inline-block;
+}
+
+.c-see-all-link__text {
+  font-size: 1em;
+}

package/source/_imports/components/c-show-more.css

@@ -0,0 +1,50 @@
+/*
+Show More
+
+A CSS-only way to support a "Show More…" feature. It requires a container and three children in order:
+- state checkbox (must be first)
+- target text
+- toggle element
+
+.c-show-more--one-line   - Truncated text may only be one line tall.
+.c-show-more--many-lines - Truncated text may be many lines tall.
+
+Styleguide: Components.ShowMore
+*/
+@import url("_imports/tools/x-truncate.css");
+
+/* Truncation */
+
+/* Many Lines */
+.c-show-more--many-lines .c-show-more__target {
+  @extend .x-truncate--many-lines;
+}
+.c-show-more--many-lines .c-show-more__state:checked ~ .c-show-more__target {
+  @extend .x-untruncate--many-lines;
+}
+
+/* One Line */
+.c-show-more--one-line .c-show-more__target {
+  @extend .x-truncate--one-line;
+}
+.c-show-more--one-line .c-show-more__state:checked ~ .c-show-more__target {
+  @extend .x-untruncate--one-line;
+}
+
+/* Show More / Show Less */
+
+/* State */
+.c-show-more__state,
+.c-show-more__on-text,
+.c-show-more__off-text {
+  display: none;
+}
+.c-show-more__state:not(:checked) ~ .c-show-more__toggle .c-show-more__on-text,
+.c-show-more__state:checked ~ .c-show-more__toggle .c-show-more__off-text {
+  display: block;
+}
+
+/* Toggle */
+.c-show-more__toggle {
+  cursor: pointer;
+}

package/source/_imports/elements/README.css

@@ -0,0 +1,47 @@
+/* DO NOT ADD STYLES HERE; ADD THEM INSIDE STYLESHEETS IN THIS DIRECTORY */
+
+/*
+Elements
+
+Element styles are those for bare HTML elements (like `<h1>`, `<a>`, etc.). These come with default styling from the browser; we can redefine them here.
+
+Reference:
+
+- [Creative Bloq: Manage Large CSS Projects With ITCSS](https://www.creativebloq.com/web-design/manage-large-css-projects-itcss-101517528) (find "Elements")
+- [MDN: HTML element reference](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list)
+
+Rules:
+
+- Element tags may be styled.
+- Pseudo classes may be styled.
+- Pseudo elements may be styled.
+
+Weight: 4
+
+Styleguide Elements
+*/
+
+/* Add styles to the `html-elements.css` stylesheet */
+
+
+
+
+
+/*
+TACC Elements
+
+Styles for TACC custom elements (like `<tacc-search-bar>`) and their parts (which may inherit standard HTML element styles).
+
+Reference:
+
+- [MDN: Web Components: Using custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)
+
+Rules:
+
+- Style via `[part="button"]`.
+- Style via `:host`.
+
+Styleguide Elements.TACC
+*/
+
+/* Add styles to an individual stylesheet for each custom element */

package/source/_imports/elements/figure.css

@@ -0,0 +1,23 @@
+/*
+Figure & Figcaption (Text Content)
+
+Element that represents self-contained content, potentially with an optional caption.
+
+Reference:
+
+- [HTML: Figure | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure)
+- [HTML: Figcaption | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption)
+
+Styleguide Elements.TextContent.Figure
+*/
+
+figure > a > img,
+figure > img {
+  margin-bottom: 20px;
+}
+figcaption {
+  color: var(--global-color-primary--dark);
+  font-size: var(--global-font-size--medium);
+  border-top: var(--global-border-width--normal) solid var(--global-color-primary--normal);
+  padding-top: 12px;
+}