@tacc/core-styles 2.17.5 → 2.18.0

package/src/lib/_imports/components/c-pill.selectors.css

@@ -0,0 +1,28 @@
+@import url("../tools/selectors.css");
+
+@custom-selector :--c-pill
+    .c-pill,
+    [class*="pill--"];
+
+@custom-selector :--c-pill--should-truncate
+    .c-pill--should-truncate,
+    [class*="pill--truncate"];
+
+@custom-selector :--c-pill--is-danger
+    .c-pill--is-danger,
+    [class*="pill--danger"];
+@custom-selector :--c-pill--is-success
+    .c-pill--is-success,
+    [class*="pill--success"];
+@custom-selector :--c-pill--is-warning
+    .c-pill--is-warning,
+    [class*="pill--warning"];
+@custom-selector :--c-pill--is-normal
+    .c-pill--is-normal,
+    [class*="pill--normal"];
+@custom-selector :--c-pill--is-fixed
+    .c-pill--is-fixed,
+    [class*="pill--fixed"];
+@custom-selector :--c-pill--is-updated
+    .c-pill--is-updated,
+    [class*="pill--updated"];

package/src/lib/_imports/components/c-tag/01-c-tag--types.hbs

@@ -0,0 +1,14 @@
+<dl>
+  <dt>Standard</dt>
+  <dd>
+    There are no standard tag types.<br />
+    <small>Clients must create their own modifier classes.</small>
+  </dd>
+  <dt>Custom</dt>
+  <dd>
+    There are <a href="https://github.com/TACC/tup-ui/blob/v1.0.13/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-tup-cms/components/c-tag.css#L11-L63" target="_blank">examples (code) on TACC website</a>.
+  </dd>
+  <dd>
+    {{> @c-tag type="whatever" name="whatever" }}
+  </dd>
+</dl>

package/src/lib/_imports/components/c-tag/02-c-tag--html-elements.hbs

@@ -0,0 +1 @@
+{{> @inline-element-samples class="c-tag" name="tag" }}

package/src/lib/_imports/components/c-tag/c-tag.hbs

@@ -1,22 +1 @@
-<dl>
-  <dt><code>&lt;span&gt;</code> <small>e.g. <code>display: inline</code></small></dt>
-  <dd>
-    <span class="c-tag">i am tag</span>
-  </dd>
-  <dt><code>&lt;span <small>style="display: inline-block"</small>&gt;</code></dt>
-  <dd>
-    <span class="c-tag" style="display: inline-block">i am tag</span>
-  </dd>
-  <dt><code>&lt;div&gt;</code> <small>e.g. <code>display: block</code></small></dt>
-  <dd>
-    <div class="c-tag">i am tag</div>
-  </dd>
-  <dt><code>&lt;a&gt;</code></dt>
-  <dd>
-    <a href="#" class="c-tag">i am tag</a>
-  </dd>
-  <dt><code>&lt;button&gt;</code></dt>
-  <dd>
-    <button class="c-tag">i am tag</button>
-  </dd>
-</dl>
+<span class="c-tag c-tag--is-{{ type }}">{{ name }}</span>

package/src/lib/_imports/components/c-tag/config.yml

@@ -0,0 +1,6 @@
+status: ready
+variants:
+  - name: default
+    hidden: true
+  - name: html-elements
+    label: HTML Elements

package/src/lib/_imports/components/c-tag/demo.css

@@ -1,6 +1,11 @@
 /* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
 
-.c-tag {
+.c-tag:not([class*="c-tag--"]) {
   color: var(--global-color-primary--xx-light);
   background-color: var(--global-color-primary--xxx-dark);
 }
+
+.c-tag--is-whatever {
+  color: var(--global-color-tertiary--xx-light);
+  background-color: var(--global-color-tertiary--dark);
+}

package/src/lib/_imports/components/c-tag/readme.md

@@ -1 +1,6 @@
 To organize similar elements e.g. category, tag, type, group.
+
+| Class (Std.)               | Class (Alt.)             | Description
+| - | - | - |
+| `.c-tag`                   | `.tag`                   | space, shape, and size
+| `.c-tag--is-...`           | `.tag--...`              | to apply custom colors

package/src/lib/_imports/components/c-tag.css

@@ -12,4 +12,4 @@
   font-weight: var(--bold);
   text-transform: uppercase;
   white-space: nowrap;
-}
+}

package/src/lib/_imports/components/c-tag.selectors.css

@@ -1,5 +1,3 @@
-@import url("../tools/selectors.css");
-
 @custom-selector :--c-tag
     .c-tag,
     [class*="tag--"];

package/src/lib/_imports/components/django-cms-forms/readme.md

@@ -12,9 +12,4 @@ To style forms built by [Django CMS forms][djcms-forms].
 [djcms-forms-tpl]: https://github.com/avryhof/djangocms-forms/blob/ab38b22/djangocms_forms/templates/djangocms_forms/form_template/default.html "DjangoCMS Forms (Maintained) Template"
 [django-form-widgets]: https://docs.djangoproject.com/en/2.2/ref/forms/widgets/ "Django Form Widgets"
 
-<script>
-/* To open external links in new window */
-Array.from(document.links)
-  .filter(link => link.hostname != window.location.hostname)
-  .forEach(link => link.target = '_blank');
-</script>
+<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

package/src/lib/_imports/components/pymdownx/pymdownx.readme.md

@@ -1,8 +1,3 @@
 Styles for markup with classes from [PyMdown Extensions](https://facelessuser.github.io/pymdown-extensions/).
 
-<script>
-/* To open external links in new window */
-Array.from(document.links)
-  .filter(link => link.hostname != window.location.hostname)
-  .forEach(link => link.target = '_blank');
-</script>
+<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

package/src/lib/_imports/components/tacc-docs/readme.md

@@ -15,9 +15,4 @@ Components used on [TACC-Docs].
 [TACC-Docs]: https://github.com/TACC/TACC-Docs/
 [Node]: https://nodejs.org/en/
 
-<script>
-/* To open external links in new window */
-Array.from(document.links)
-  .filter(link => link.hostname != window.location.hostname)
-  .forEach(link => link.target = '_blank');
-</script>
+<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

package/src/lib/_imports/core-styles.base.css

@@ -40,6 +40,7 @@
 @import url("./components/c-island.css");
 @import url("./components/c-nav.css");
 @import url("./components/c-page.css");
+@import url("./components/c-pill.css");
 @import url("./components/c-see-all-link.css");
 @import url("./components/c-tag.css");
 

package/src/lib/_imports/elements/form.cms/readme.md

@@ -8,9 +8,4 @@
 >
 > These overwrite, but may accidentally rely on, [Bootstrap Reboot: Forms](https://getbootstrap.com/docs/4.0/content/reboot/#forms).
 
-<script>
-/* To open external links in new window */
-Array.from(document.links)
-  .filter(link => link.hostname != window.location.hostname)
-  .forEach(link => link.target = '_blank');
-</script>
+<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

package/src/lib/_imports/elements/headings/readme.md

@@ -4,9 +4,4 @@
 <h1> <h2> <h3> <h4> <h5> <h6>
 ```
 
-<script>
-/* To open external links in new window */
-Array.from(document.links)
-  .filter(link => link.hostname != window.location.hostname)
-  .forEach(link => link.target = '_blank');
-</script>
+<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

package/src/lib/_imports/elements/links/readme.md

@@ -1,8 +1,3 @@
 The [`<a>` anchor element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a).
 
-<script>
-/* To open external links in new window */
-Array.from(document.links)
-  .filter(link => link.hostname != window.location.hostname)
-  .forEach(link => link.target = '_blank');
-</script>
+<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

package/src/lib/_imports/elements/root/readme.md

@@ -1,8 +1,3 @@
 The [`<html>` element (Main root)](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Main_root) and [`<body>` element (Sectioning root)](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Sectioning_root).
 
-<script>
-/* To open external links in new window */
-Array.from(document.links)
-  .filter(link => link.hostname != window.location.hostname)
-  .forEach(link => link.target = '_blank');
-</script>
+<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

package/src/lib/_imports/elements/table/readme.md

@@ -4,9 +4,4 @@
 <table> <thead> <tbody> <th> <td> <tfoot> <colgroup> <col> <caption>
 ```
 
-<script>
-/* To open external links in new window */
-Array.from(document.links)
-  .filter(link => link.hostname != window.location.hostname)
-  .forEach(link => link.target = '_blank');
-</script>
+<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

package/src/lib/_imports/elements/table/table--via-paragraphs.readme.md

@@ -5,9 +5,4 @@ A [table]({{path './table' }}) that uses [paragraphs](https://developer.mozilla.
 > - Text will not truncate. It will wrap.
 > - Only a single column is supported.
 
-<script>
-/* To open external links in new window */
-Array.from(document.links)
-  .filter(link => link.hostname != window.location.hostname)
-  .forEach(link => link.target = '_blank');
-</script>
+<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

package/src/lib/_imports/elements/table/table--with-paragraphs.readme.md

@@ -4,9 +4,4 @@ A [table]({{path './table' }}) with cells that have [paragraphs](https://develop
 >
 > On [Portal tables]({{path './table--with-paragraphs-portal' }}) and [`s-truncated-table`s]({{path './s-data-table' }}), text in a `<p>` tag. will truncate at N lines; see [truncate mixin]({{path './x-truncate' }}) to control line count.
 
-<script>
-/* To open external links in new window */
-Array.from(document.links)
-  .filter(link => link.hostname != window.location.hostname)
-  .forEach(link => link.target = '_blank');
-</script>
+<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

package/src/lib/_imports/objects/o-fixed-header-table/readme.md

@@ -14,9 +14,4 @@ A [table]({{path './table' }}) with its header pinned during vertical scroll.
 
 [source]: https://css-tricks.com/position-sticky-and-table-headers/ "CSS Tricks: Position Sticky & Table Headers"
 
-<script>
-/* To open external links in new window */
-Array.from(document.links)
-  .filter(link => link.hostname != window.location.hostname)
-  .forEach(link => link.target = '_blank');
-</script>
+<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

package/src/lib/_imports/objects/o-flex-item-table-wrap/readme.md

@@ -14,9 +14,4 @@ Make [table]({{path './table' }}) behave like a flex item, for a specific CEPv2
 
 [source]: https://stackoverflow.com/a/41421700/11817077 "Stack Overflow: Why does flex-box work with a div, but not a table?"
 
-<script>
-/* To open external links in new window */
-Array.from(document.links)
-  .filter(link => link.hostname != window.location.hostname)
-  .forEach(link => link.target = '_blank');
-</script>
+<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

package/src/lib/_imports/objects/o-section/readme.md

@@ -24,9 +24,4 @@ Older features are not illustrated in the demo:
 | `.o-section--layout-c`    | (on wider screens) 1 narrow column & 1 wide column
 | `.o-section--layout-d`    | (on wider screens) 3 even columns
 
-<script>
-/* To open external links in new window */
-Array.from(document.links)
-  .filter(link => link.hostname != window.location.hostname)
-  .forEach(link => link.target = '_blank');
-</script>
+<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

package/src/lib/_imports/objects/o-table-wrap/o-table-wrap--flexible-horz.readme.md

@@ -12,9 +12,4 @@ For extra customization, see relevant <code>extra…</code> "File" from "Assets"
 
 [source-flex]: https://stackoverflow.com/a/41421700/11817077 "Stack Overflow: Why does flex-box work with a div, but not a table?"
 
-<script>
-/* To open external links in new window */
-Array.from(document.links)
-  .filter(link => link.hostname != window.location.hostname)
-  .forEach(link => link.target = '_blank');
-</script>
+<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

package/src/lib/_imports/objects/o-table-wrap/o-table-wrap--flexible-vert.readme.md

@@ -10,9 +10,4 @@ Make [table]({{path './table' }}) width able to <strong>stretch</strong> <em>but
 
 [source-flex]: https://stackoverflow.com/a/41421700/11817077 "Stack Overflow: Why does flex-box work with a div, but not a table?"
 
-<script>
-/* To open external links in new window */
-Array.from(document.links)
-  .filter(link => link.hostname != window.location.hostname)
-  .forEach(link => link.target = '_blank');
-</script>
+<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

package/src/lib/_imports/objects/o-table-wrap/o-table-wrap--overflow-hidden.readme.md

@@ -6,9 +6,4 @@ For extra customization, see relevant <code>extra…</code> "File" from "Assets"
 >
 > This class can **only** be used on a table wrapper. It has **no** affect when used on table directly.
 
-<script>
-/* To open external links in new window */
-Array.from(document.links)
-  .filter(link => link.hostname != window.location.hostname)
-  .forEach(link => link.target = '_blank');
-</script>
+<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

package/src/lib/_imports/objects/o-table-wrap/o-table-wrap--overflow-scroll-extra.readme.md

@@ -10,9 +10,4 @@ Make [table]({{path './table' }}) overflow <strong>scrollable</strong> (advanced
 
 [source-scroll]: https://stackoverflow.com/a/19794391/11817077 "Stack Overflow: Horizontal scroll on overflow of table (answer)"
 
-<script>
-/* To open external links in new window */
-Array.from(document.links)
-  .filter(link => link.hostname != window.location.hostname)
-  .forEach(link => link.target = '_blank');
-</script>
+<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

package/src/lib/_imports/objects/o-table-wrap/o-table-wrap--overflow-scroll.readme.md

@@ -12,9 +12,4 @@ For extra customization, see relevant <code>extra…</code> "File" from "Assets"
 
 [source-scroll]: https://stackoverflow.com/a/19794391/11817077 "Stack Overflow: Horizontal scroll on overflow of table (answer)"
 
-<script>
-/* To open external links in new window */
-Array.from(document.links)
-  .filter(link => link.hostname != window.location.hostname)
-  .forEach(link => link.target = '_blank');
-</script>
+<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

package/src/lib/_imports/objects/o-table-wrap/readme.md

@@ -16,9 +16,4 @@ For client customization examples, see relevant <code>example.…-….css</code>
 [source-flex]: https://stackoverflow.com/a/41421700/11817077 "Stack Overflow: Why does flex-box work with a div, but not a table?"
 [source-scroll]: https://stackoverflow.com/a/19794391/11817077 "Stack Overflow: Horizontal scroll on overflow of table (answer)"
 
-<script>
-/* To open external links in new window */
-Array.from(document.links)
-  .filter(link => link.hostname != window.location.hostname)
-  .forEach(link => link.target = '_blank');
-</script>
+<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

package/src/lib/_imports/settings/color/readme.md

@@ -1,8 +1,3 @@
 [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Variables) for colors.
 
-<script>
-/* To open external links in new window */
-Array.from(document.links)
-  .filter(link => link.hostname != window.location.hostname)
-  .forEach(link => link.target = '_blank');
-</script>
+<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

package/src/lib/_imports/settings/font/readme.md

@@ -1,8 +1,3 @@
 [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Variables) for [font](https://developer.mozilla.org/en-US/docs/Web/CSS/font) properties.
 
-<script>
-/* To open external links in new window */
-Array.from(document.links)
-  .filter(link => link.hostname != window.location.hostname)
-  .forEach(link => link.target = '_blank');
-</script>
+<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

package/src/lib/_imports/tools/x-link/readme.md

@@ -7,9 +7,4 @@ UI states of [`<a>` anchor element](https://developer.mozilla.org/en-US/docs/Web
 | `.x-link--hover`  | `:hover` state
 | `.x-link--active` | `:active` (click) state
 
-<script>
-/* To open external links in new window */
-Array.from(document.links)
-  .filter(link => link.hostname != window.location.hostname)
-  .forEach(link => link.target = '_blank');
-</script>
+<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

package/src/lib/_imports/tools/x-tabs/readme.md

@@ -14,9 +14,4 @@ Mixins for tab components e.g. [Bootstrap Nav Tabs]({{path './bootstrap--nav-tab
 | `.x-tabs__content--active`       | visible content
 | `.x-tabs__content--force-active` | to force content to be visible
 
-<script>
-/* To open external links in new window */
-Array.from(document.links)
-  .filter(link => link.hostname != window.location.hostname)
-  .forEach(link => link.target = '_blank');
-</script>
+<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

package/src/lib/_imports/trumps/s-affixed-input-wrapper/README.md

@@ -16,9 +16,4 @@ _This is an isolated feature from [Bootstrap Input Group](https://getbootstrap.c
    - `<input type="date">` calendar
    - `<input type="time">` clock
 
-<script>
-/* To open external links in new window */
-Array.from(document.links)
-  .filter(link => link.hostname != window.location.hostname)
-  .forEach(link => link.target = '_blank');
-</script>
+<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

package/src/lib/_imports/trumps/s-blockquote/readme.md

@@ -4,9 +4,4 @@ A [`<blockquote>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blo
 >
 > Should this be implemented as `figure.has-blockquote` (fallback) `figure:has(blockquote)` (actual)? We can retain legacy support for `figure.s-blockquote` as an alternate class name.
 
-<script>
-/* To open external links in new window */
-Array.from(document.links)
-  .filter(link => link.hostname != window.location.hostname)
-  .forEach(link => link.target = '_blank');
-</script>
+<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

package/src/lib/_imports/trumps/s-form/readme.md

@@ -1,8 +1,3 @@
 To style when mostly raw [Form elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#table_content) are sufficient.
 
-<script>
-/* To open external links in new window */
-Array.from(document.links)
-  .filter(link => link.hostname != window.location.hostname)
-  .forEach(link => link.target = '_blank');
-</script>
+<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

package/src/lib/_imports/trumps/s-form-page/_s-form-page--footer.hbs

@@ -0,0 +1,13 @@
+<footer>
+  <a href="https://tacc.utexas.edu/about/security-and-compliance/">
+    Security
+  </a>
+  <a href="https://tacc.utexas.edu/use-tacc/user-policies/">
+    Policies
+  </a>
+  <a href="https://www.nsf.gov/" target="_blank">
+    Funded by:
+    <img src="https://cep.tacc.utexas.edu/static/site_cms/img/org_logos/nsf-logo.svg"
+      alt="NSF" title="National Science Foundation" height="50px">
+  </a>
+</footer>

package/src/lib/_imports/trumps/s-form-page/s-form-page--login.hbs

@@ -1,11 +1,4 @@
 <div class="s-form-page">
   {{ render '@s-form--login' }}
-  <footer>
-    <a href="https://tacc.utexas.edu/about/security-and-compliance/">
-      Security
-    </a>
-    <a href="https://tacc.utexas.edu/use-tacc/user-policies/">
-      Policies
-    </a>
-  </footer>
+  {{> @s-form-page--footer }}
 </div>

package/src/lib/_imports/trumps/s-form-page/s-form-page.hbs

@@ -2,12 +2,5 @@
   <form>
     [ form goes here ]
   </form>
-  <footer>
-    <a href="https://tacc.utexas.edu/about/security-and-compliance/">
-      Security
-    </a>
-    <a href="https://tacc.utexas.edu/use-tacc/user-policies/">
-      Policies
-    </a>
-  </footer>
+  {{> @s-form-page--footer }}
 </div>

package/src/lib/_imports/trumps/s-form-page.css

@@ -30,6 +30,8 @@
   display: flex;
   gap: 1.5em;
   margin-top: var(--global-space--normal);
+  /* In case children are different height (e.g. one has or is an image) */
+  align-items: center;
 
   font-family: var(--global-font-family--sans--cms);
   font-size: var(--global-font-size--small);
@@ -46,3 +48,16 @@
   color: var(--global-color-primary--x-dark);
   font-weight: var(--bold);
 }
+
+/* To allow image inside link wiht a gap between it and text */
+.s-form-page > footer a {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5em;
+}
+
+@media (min-width: 768px) {
+    .s-form-page>footer {
+        align-items: center;
+    }
+}

package/src/lib/_imports/trumps/s-paragraph-table/readme.md

@@ -5,9 +5,4 @@ A [table]({{path './table' }}) that uses [paragraphs](https://developer.mozilla.
 > - Text will not truncate. It will wrap.
 > - Only a single column is supported.
 
-<script>
-/* To open external links in new window */
-Array.from(document.links)
-  .filter(link => link.hostname != window.location.hostname)
-  .forEach(link => link.target = '_blank');
-</script>
+<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

package/src/lib/_imports/trumps/s-truncated-table/readme.md

@@ -4,9 +4,4 @@ A [table]({{path './table' }}) that uses a [table](https://developer.mozilla.org
 >
 > - Text will truncate only if it is in a `<p>` tag.
 
-<script>
-/* To open external links in new window */
-Array.from(document.links)
-  .filter(link => link.hostname != window.location.hostname)
-  .forEach(link => link.target = '_blank');
-</script>
+<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

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

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