@tacc/core-styles 0.5.1

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

@@ -0,0 +1,210 @@
+/*
+Button
+
+A button that may have icon(s) before and/or after its text.
+
+.c-button--primary - A primary (expected) user action
+.c-button--secondary - For an optional user action
+.c-button--is-active - A button that represents the current state
+.c-button--as-link - A button that visually resembles a link
+.c-button--is-busy - A clicked button that started an incomplete process
+
+Markup: c-button.html
+
+Styleguide Components.Button
+*/
+@import url("_imports/tools/x-truncate.css");
+
+
+
+
+
+/* Base */
+
+[class*='c-button'] {
+  --min-width: 75px;
+  --mid-width: 110px;
+  --max-width: 130px;
+}
+.c-button {
+  display: inline-block;
+
+  border-width: var(--global-border-width--normal);
+  border-style: solid;
+
+  font-weight: 500;
+  font-size: 0.75rem; /* 12px (10px design * 1.2 design-to-app ratio) */
+
+  @extend %x-truncate--one-line;
+}
+
+.c-button:not(:disabled) {
+  cursor: pointer; /* WARNING: Opinionated */
+}
+.c-button:disabled:not(.c-button--is-busy) {
+  color: var(--global-color-primary--dark);
+  background-color: var(--global-color-primary--xx-light);
+  border-color: var(--global-color-primary--dark);
+
+  pointer-events: none;
+}
+
+.c-button:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+
+
+
+
+/* Modifiers */
+
+
+/* Modifiers: Types */
+
+.c-button--primary,
+.c-button--secondary {
+  padding: 6px 18px;
+  min-width: var(--min-width);
+  max-width: var(--max-width);
+}
+
+/* Modifiers: Types: Primary */
+
+.c-button--primary:hover {
+  color: var(--global-color-primary--xx-light);
+  background-color: var(--global-color-accent--dark);
+  border-color: var(--global-color-accent--dark);
+}
+
+.c-button--primary:active {
+  color: var(--global-color-primary--xx-light);
+  background-color: var(--global-color-accent--x-dark);
+  border-color: var(--global-color-accent--dark);
+
+  border-width: var(--global-border-width--normal);
+  outline: var(--global-border-width--normal) solid
+    var(--global-color-accent--dark);
+}
+
+.c-button--primary:focus:not(:active) {
+  color: var(--global-color-primary--xx-light);
+  background-color: var(--global-color-accent--normal);
+  border-color: var(--global-color-primary--xx-light);
+
+  outline: var(--global-border-width--normal) solid
+    var(--global-color-accent--light);
+}
+
+.c-button--primary.c-button--is-busy,
+.c-button--primary:not(
+  .c-button:hover,
+  .c-button:focus,
+  .c-button:active,
+  .c-button:disabled
+) {
+  color: var(--global-color-primary--xx-light);
+  background-color: var(--global-color-accent--normal);
+  border-color: var(--global-color-accent--normal);
+}
+
+/* Modifiers: Types: Secondary */
+
+.c-button--secondary:hover {
+  color: var(--global-color-primary--xx-dark);
+  background-color: var(--global-color-primary--light);
+  border-color: var(--global-color-accent--dark);
+}
+
+.c-button--secondary:active {
+  color: var(--global-color-primary--xx-dark);
+  background-color: var(--global-color-accent--x-light);
+  border-color: var(--global-color-accent--dark);
+
+  border-width: var(--global-border-width--normal);
+  outline: var(--global-border-width--normal) solid
+    var(--global-color-accent--dark);
+}
+
+.c-button--secondary:focus:not(:active) {
+  color: var(--global-color-primary--xx-dark);
+  background-color: var(--global-color-primary--light);
+  border-color: var(--global-color-primary--xx-dark);
+
+  outline: var(--global-border-width--thick) solid
+    var(--global-color-accent--light);
+}
+
+.c-button--secondary.c-button--is-busy,
+.c-button--secondary:not(
+  .c-button:hover,
+  .c-button:focus,
+  .c-button:active,
+  .c-button:disabled
+) {
+  color: var(--global-color-primary--xx-dark);
+  background-color: var(--global-color-primary--xx-light);
+  border-color: var(--global-color-primary--xx-dark);
+}
+
+/* Modifiers: Types: Is Active */
+
+.c-button--is-active:not(
+  .c-button:hover,
+  .c-button:focus,
+  .c-button:active
+) {
+  background-color: var(--global-color-accent--x-light);
+}
+
+/* Modifiers: Types: As Link */
+
+.c-button--as-link {
+  color: var(--global-color-accent--normal);
+
+  background: unset;
+  border: unset;
+  padding-inline: unset;
+}
+.c-button--as-link:not(:disabled):hover {
+  text-decoration: underline;
+}
+
+/* Modifiers: Types: Is Busy */
+
+.c-button--is-busy {
+  opacity: 0.5;
+}
+.c-button--is-busy .c-button__text {
+  opacity: 0.3;
+}
+
+/* Modifiers: Sizes */
+
+.c-button--width-short {
+  width: var(--min-width);
+}
+.c-button--width-medium {
+  width: var(--mid-width);
+}
+.c-button--width-long {
+  width: var(--max-width);
+}
+.c-button--size-small {
+  min-width: 0;
+  padding: 3px 9px;
+  line-height: 1;
+}
+
+
+
+
+
+/* Elements */
+
+.c-button__icon--before {
+  margin-right: 0.5em;
+}
+.c-button__icon--after {
+  margin-left: 0.5em;
+}

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

@@ -0,0 +1,31 @@
+<button class="c-button c-button--secondary">
+  <i class="c-button__icon--before" data-icon="X">(clear input)</i>
+  <span class="c-button__text">Cancel</span>
+</button>
+
+<button class="c-button c-button--primary">
+  <i class="c-button__icon" data-icon="✓">(check input)</i>
+  <span class="c-button__text">Confirm</span>
+  <i class="c-button__icon--after" data-icon="→">(and exit)</i>
+</button>
+
+<button class="c-button c-button--secondary">
+  <span class="c-button__text">Skip</span>
+  <i class="c-button__icon--after" data-icon="→">(and move to next form)</i>
+</button>
+
+<button class="c-button c-button--is-active">
+  <span class="c-button__text">Current Item</span>
+</button>
+
+<button class="c-button c-button--as-link">
+  Return to Previous Screen
+</button>
+
+<button class="c-button c-button--secondary c-button--is-busy">
+  <span class="c-button__text">Submit (Secondary)</span>
+</button>
+
+<button class="c-button c-button--primary c-button--is-busy">
+  <span class="c-button__text">Submit (Primary)</span>
+</button>

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

@@ -0,0 +1,183 @@
+/*
+Callout
+
+Interrupt or end Sections with a "call to action".
+
+Markup: c-callout.html
+
+Styleguide Components.Callout
+*/
+@import url("_imports/tools/media-queries.css");
+@import url("_imports/tools/x-article-link.css");
+
+
+
+
+
+/* Layout */
+
+.c-callout {
+  --figure-width--no-units: 310;
+  --figure-height--no-units: 130;
+
+  display: grid;
+}
+.c-callout > :is(img, figure)            { grid-area: figure; }
+.c-callout > :is(h1, h2, h3, h4, h5, h6) { grid-area: title; }
+.c-callout > p                           { grid-area: desc; }
+
+/* Let title `margin-top` and desc `margin-bottom` manage gap between them */
+/* FAQ: Bootstrap does this too but auto. pattern library has no Bootstrap */
+.c-callout > p { margin-top: 0; }
+
+
+
+/* Layout: Figure / Image */
+
+/* Ensure title and desc determine height of figure and callout */
+/* FAQ: Options that use `min-height: 0` have bug (narrow cell) on Firefox:
+        - https://stackoverflow.com/a/48943583/11817077
+        - https://stackoverflow.com/a/61297418/11817077 */
+.c-callout > img,
+.c-callout > figure > img {
+  object-fit: cover;
+
+  aspect-ratio: var(--figure-width--no-units) / var(--figure-height--no-units);
+  /* NOTE: The required height or width property is set within media queries */
+  /* CAVEAT: If using `aspect-ratio`:
+              - image can grow beyond intrinsic size
+              - `max-width|height` appears ineffectual
+              - `width|height` breaks `aspect-ratio` */
+}
+
+/* Wrap figcaption at figure width */
+.c-callout > figure { width: min-content; }
+
+
+
+/* Layout: Wide Screen */
+
+@media only screen and (--narrow-and-above) {
+  .c-callout {
+    padding: 20px;
+    text-align: left;
+
+    grid-template-columns: min-content auto; /* prevent extra figure h. space */
+    grid-template-rows: auto min-content;    /* prevent extra title v. space */
+    grid-template-areas:
+      'figure title'
+      'figure desc';
+  }
+
+  /* Create gap without using `*-gap` property on container */
+  /* FAQ: Container does not know if it has figure but gap is only for figure */
+  .c-callout > figure { margin: 0; /* overwrite browser and Bootstrap */ }
+  .c-callout > :is(img, figure) { margin-right: 40px;}
+
+
+
+  /* Layout: Wide Screen: Figure / Image */
+
+  /* Trigger ratio, Limit stretch */
+  .c-callout > img,
+  .c-callout > figure > img {
+    width: calc( var(--figure-width--no-units) * 1px);
+    max-width: fit-content;
+  }
+  /* Let image grow tall */
+  .c-callout > img {
+    min-height: 100%;
+  }
+}
+
+
+
+/* Layout: Narrow Screen */
+
+@media only screen and (--narrow-and-below) {
+  .c-callout {
+    padding: 20px 40px;
+    text-align: center;
+
+    grid-template-areas:
+      'figure'
+      'title'
+      'desc';
+  }
+
+  /* Create gap without using `*-gap` property on container */
+  /* FAQ: Container does not know if it has figure but gap is only for figure */
+  .c-callout > figure { margin: 0; /* overwrite browser and Bootstrap */ }
+  .c-callout > :is(img, figure) { margin-bottom: 20px;}
+
+
+
+  /* Layout: Narrow Screen: Figure / Image */
+
+  /* Trigger ratio, Limit stretch */
+  .c-callout > img,
+  .c-callout > figure > img {
+    height: calc( var(--figure-height--no-units) * 1px);
+    max-height: fit-content;
+  }
+  /* Let image grow wide */
+  .c-callout > img {
+    min-width: 100%;
+  }
+}
+
+/* Align figure to exact center (only relevant if content is smaller) */
+.c-callout > :is(img, figure) { place-self: center; }
+
+/* Force wrap before full width (to match design) */
+/* NOTE: 1200px window, design has 15px but this was 7px (wraps the same) */
+/* FAQ: Using a percentage so narrow screen wrap limit is not noticeable */
+.c-callout > p { padding-right: 1%; }
+
+
+
+
+
+/* Style */
+
+.c-callout {
+  background-color: var(--global-color-link-on-light--normal);
+}
+
+/* Make all headings look the same */
+.c-callout > :is(h1, h2, h3, h4, h5, h6) {
+  margin-top: 0;
+  padding-bottom: 12px;
+  margin-bottom: 12px;
+  border-bottom: 1px solid var(--global-color-primary--xx-light);
+
+  font-size: var(--global-font-size--x-large);
+  font-weight: var(--medium);
+}
+/* override html-elements.css */
+.c-callout > :is(h1, h2, h3, h4, h5, h6),
+/* override o-section.css */
+[class*="o-section--style"] .c-callout > :is(h1, h2, h3, h4, h5, h6) {
+  color: var(--global-color-primary--xx-light); /* override h1–h6 styles */
+}
+
+/* Style non-headings */
+.c-callout > :not(h1, h2, h3, h4, h5, h6) {
+  color: var(--global-color-primary--xx-light);
+}
+/* FAQ: Ignore figures so figcaptions can be styled by other components */
+/* FAQ: Do not ignore images, so alt text is visible if image load fails */
+.c-callout > :not(h1, h2, h3, h4, h5, h6, figure) {
+  font-size: var(--global-font-size--large);
+  font-weight: var(--medium);
+}
+
+
+
+
+
+/* As a Link */
+
+a.c-callout:hover { @extend %x-article-link-hover; text-decoration: none; }
+a.c-callout:active { @extend %x-article-link-active; }
+a.c-callout:focus { text-decoration: none; }

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

@@ -0,0 +1,52 @@
+<style>
+#c-callout { margin-inline: 3em; }
+#c-callout > * + * { margin-top: 3em; }
+</style>
+<div id="c-callout">
+  <aside class="c-callout">
+    <h2>Style ▸ Text</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper, lacus eu vulputate eleifend, nibh sem finibus mi, eget vulputate eros nulla et arcu.</p>
+  </aside>
+
+  <aside class="c-callout">
+    <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/5b/3b/5b3bbbf6-eb43-4853-b19e-9b7c67944648/spectrum-square-1024px.png__310x130_q85_crop_subject_location-171%2C166_subsampling-2_upscale.png" alt="">
+    <h2>Style ▸ Image (Thumbnail) + Text</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper, lacus eu vulputate eleifend, nibh sem finibus mi, eget vulputate eros nulla et arcu.</p>
+  </aside>
+
+  <aside class="c-callout">
+    <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/69/85/698569d0-641f-4289-94c2-664389d626e8/spectrum-square-240px.png__240x240_q85_subject_location-152%2C186_subsampling-2.png" alt="">
+    <h2>Style ▸ Image (Square) + Text</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper, lacus eu vulputate eleifend, nibh sem finibus mi, eget vulputate eros nulla et arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper, lacus eu vulputate eleifend, nibh sem finibus mi, eget vulputate eros nulla et arcu.</p>
+  </aside>
+
+  <a href="#" class="c-callout">
+    <h1>Link ▸ Image (Wide) + Text</h1>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper, lacus eu vulputate eleifend, nibh sem finibus mi, eget vulputate eros nulla et arcu.</p>
+    <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png__320x160_q85_subject_location-157%2C78_subsampling-2.png" alt="">
+  </a>
+
+  <a href="#" class="c-callout">
+    <h1>Link ▸ Image (Tall) + Text</h1>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper, lacus eu vulputate eleifend, nibh sem finibus mi, eget vulputate eros nulla et arcu.</p>
+    <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/c9/eb/c9ebd744-14d3-43ed-bc2e-86ed96eeef8a/spectrum-tall-320px.png__160x320_q85_subject_location-76%2C160_subsampling-2.jpg" alt="">
+  </a>
+
+  <a href="#" class="c-callout">
+    <h1>Link ▸ Image w/ Caption (Wide) + Text</h1>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper, lacus eu vulputate eleifend, nibh sem finibus mi, eget vulputate eros nulla et arcu.</p>
+    <figure>
+      <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png__320x160_q85_subject_location-157%2C78_subsampling-2.png" alt="">
+      <figcaption>Lorem ipsum dolor sit amet, et cetera.</figcaption>
+    </figure>
+  </a>
+
+  <a href="#" class="c-callout">
+    <h1>Link ▸ Image w/ Caption (Tall) + Text</h1>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper, lacus eu vulputate eleifend, nibh sem finibus mi, eget vulputate eros nulla et arcu.</p>
+    <figure>
+      <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/c9/eb/c9ebd744-14d3-43ed-bc2e-86ed96eeef8a/spectrum-tall-320px.png__160x320_q85_subject_location-76%2C160_subsampling-2.jpg" alt="">
+      <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</figcaption>
+    </figure>
+  </a>
+</div>

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

@@ -0,0 +1,57 @@
+/*
+Card
+
+Container with content and action(s) about a single subject.
+
+> __ℹ️ Notice__: No default styling.
+
+.c-card--frontera-about-page - Container/Link with image and large heading below
+
+Markup: c-card.html
+
+Styleguide Components.Card
+*/
+@import url("_imports/tools/x-article-link.css");
+
+/* Modifiers */
+
+
+
+/* Modifiers: Frontera About Page */
+
+.c-card--frontera-about-page {
+  width: fit-content;
+
+  border-bottom: var(--global-border-width--normal) solid var(--global-color-primary--dark);
+  margin-bottom: 4.6rem;
+}
+
+/* Plugins: Link / Image with Link */
+a.c-card--frontera-about-page {
+  display: inline-block;
+
+  text-decoration: none;
+}
+a.c-card--frontera-about-page:hover { @extend %x-article-link-hover; }
+a.c-card--frontera-about-page:active { @extend %x-article-link-active; }
+
+/* Plugins: * > Image + Text */
+.c-card--frontera-about-page img + h3 {
+  margin-top: 1.6rem;
+}
+.c-card--frontera-about-page img ~ :last-child {
+  margin-bottom: 1.25rem;
+}
+
+/* Plugins: * > Image with Caption */
+.c-card--frontera-about-page figure {
+  margin: 0;
+}
+.c-card--frontera-about-page figcaption {
+  color: var(--global-color-primary--xx-dark);
+  font-size: var(--global-font-size--x-large);
+  font-weight: var(--bold);
+
+  margin-top: 1.6rem;
+  margin-bottom: 1.25rem;
+}

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

@@ -0,0 +1,32 @@
+<div class="o-grid o-grid--col-min-width" style="--width: 320px">
+  <a href="./" class="c-card {{modifier_class}}">
+      <figure>
+          <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png__320x160_q85_subject_location-157%2C78_subsampling-2.png" alt="">
+          <figcaption>Image w/ Caption &amp; Link</figcaption>
+      </figure>
+  </a>
+
+  <a href="./" class="c-card {{modifier_class}}">
+      <figure>
+          <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png__320x160_q85_subject_location-157%2C78_subsampling-2.png" alt="">
+          <figcaption>Link ▸ Image w/ Caption</figcaption>
+      </figure>
+  </a>
+
+  <a href="./" class="c-card {{modifier_class}}">
+      <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png__320x160_q85_subject_location-157%2C78_subsampling-2.png" alt="">
+      <h3>Link ▸ Image + Text</h3>
+  </a>
+
+  <div class="c-card {{modifier_class}}" style="display: inline-block">
+      <figure>
+          <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png__320x160_q85_subject_location-157%2C78_subsampling-2.png" alt="">
+          <figcaption>Style ▸ Image w/ Caption</figcaption>
+      </figure>
+  </div>
+
+  <div class="c-card {{modifier_class}}" style="display: inline-block">
+      <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png__320x160_q85_subject_location-157%2C78_subsampling-2.png" alt="">
+      <h3>Style ▸ Image + Text</h3>
+  </div>
+</div>