@tacc/core-styles 2.38.0 → 2.39.1

package/src/lib/_imports/components/cortal.icon/cortal.icon.hbs

@@ -0,0 +1,112 @@
+{{#*inline "icon-grid"}}
+<div class="demo-grid">
+  {{#each icons}}
+  <div class="demo-item">
+    <i class="icon icon-{{this}}"></i>
+    <code>.icon-{{this}}</code>
+  </div>
+  {{/each}}
+</div>
+{{/inline}}
+
+<h2>Table of Contents</h2>
+<dl>
+  <dt>Types</dt>
+  <dd>
+    <nav class="c-nav c-nav--no-list">
+      {{#each sections}}
+      <a href="#{{id}}">{{title}}</a>
+      {{/each}}
+    </nav>
+  </dd>
+
+  <dt>Adjustments</dt>
+  <dd>
+    <nav class="c-nav c-nav--no-list">
+      <a href="#sizes">Sizes</a>
+      <a href="#transforms">Transformations</a>
+      <a href="#buttons">in Buttons</a>
+      <a href="#labels">with Labels</a>
+    </nav>
+  </dd>
+</dl>
+
+<h2>Icons</h2>
+<dl>
+  <dt>Types</dt>
+  <dd>
+    <dl>
+      {{#each sections}}
+      <dt id="{{id}}">{{title}}</dt>
+      <dd>{{> icon-grid icons=icons}}</dd>
+      {{/each}}
+    </dl>
+  </dd>
+
+  <dt>Adjustments</dt>
+  <dd>
+    <dl>
+      <dt id="sizes">Sizes</dt>
+      <dd>
+        <dl>
+          <dt>Relative Units</dt>
+          <dd class="demo-grid">
+            {{#each sizes.relative}}
+            <div class="demo-item">
+              <i class="icon icon-dashboard {{this.class}}"></i>
+              <code>{{this.label}}</code>
+            </div>
+            {{/each}}
+          </dd>
+
+          <dt>Absolute Units</dt>
+          <dd class="demo-grid">
+            {{#each sizes.absolute}}
+            <div class="demo-item">
+              <i class="icon icon-dashboard {{this.class}}"></i>
+              <code>{{this.label}}</code>
+            </div>
+            {{/each}}
+          </dd>
+        </dl>
+      </dd>
+
+      <dt id="transforms">Transformations</dt>
+      <dd>
+        <div class="demo-grid">
+          {{#each transforms}}
+          <div class="demo-item">
+            <i class="icon {{this.icon}} {{this.class}}"></i>
+            <code>{{this.label}}</code>
+          </div>
+          {{/each}}
+        </div>
+      </dd>
+
+      <dt id="buttons">in Buttons</dt>
+      <dd>
+        <div class="demo-list">
+          {{#each in_buttons}}
+          <button class="c-button c-button--{{this.type}}">
+            <i class="icon icon-{{this.icon}} c-button__icon--before"></i>
+            <span class="c-button__text">{{this.text}}</span>
+          </button>
+          {{/each}}
+        </div>
+      </dd>
+
+      <dt id="labels">with Labels</dt>
+      <dd>
+        <div class="demo-grid">
+          {{#each with_labels}}
+          <div class="demo-item">
+            <i class="icon {{this.icon}}" data-label="{{this.label}}"></i>
+            <code>[data-label="{{this.label}}"]</code>
+            <small class="x-truncate--one-line">{{this.usage}}</small>
+          </div>
+          {{/each}}
+        </div>
+      </dd>
+    </dl>
+  </dd>
+</dl> 

package/src/lib/_imports/components/cortal.icon/demo.css

@@ -0,0 +1,29 @@
+/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
+
+.demo-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  gap: 1em;
+}
+
+.demo-item {
+  display: grid;
+  place-items: center;
+  gap: 0.5em;
+  padding: 0.5em;
+  border: 1px solid var(--global-color-primary--light);
+  border-radius: 4px;
+}
+
+.demo-item code {
+  color: var(--global-color-primary--dark);
+  font-size: smaller;
+}
+.demo-item small {
+  width: 100%;
+  text-align: center;
+}
+
+.demo-buttons .c-button {
+  min-width: 120px;
+} 

package/src/lib/_imports/components/cortal.icon.css

@@ -1,12 +1,3 @@
-/*
-Container (Bootstrap)
-
-Provide Cortal Icon styles. See:
-
-- [Cortal Icons (Confluence)](https://confluence.tacc.utexas.edu/x/MCAFDg)
-
-Styleguide Components.Cortal.Icon
-*/
 @import url('./cortal.icon.font.css');
 
 
@@ -38,6 +29,32 @@ Styleguide Components.Cortal.Icon
 
 
 
+/* Label atop Icon */
+
+/* To create a dynamic label atop an existing icon */
+.icon[data-label] {
+    display: inline-grid;
+
+    font-size: 2.5em;
+}
+.icon[data-label]::before,
+.icon[data-label]::after {
+    grid-area: 1 / 1;
+}
+.icon[data-label]::after {
+    content: attr(data-label);
+    place-self: center;
+
+    font-size: 0.375em;
+    -webkit-text-stroke: medium white;
+    background-color: currentColor;
+    border-color: currentColor;
+    border-style: solid;
+    border-width: 0 0.25em 0.25em;
+}
+
+
+
 /* Cross-Pattern */
 
 /* To tweak action icon appearance and layout */

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

@@ -38,10 +38,12 @@
 @import url("./components/cortal.icon.css");
 @import url("./components/c-button--cms.css");
 @import url("./components/c-card.css");
+@import url("./components/c-card-list.css");
 @import url("./components/c-form--cms.css");
 @import url("./components/c-message.css");
 @import url("./components/c-message--expanded.css");
 @import url("./components/c-recognition.css");
+@import url("./components/c-show-more.css");
 @import url("./components/c-update.css");
 
 /* TODO: Move to TACC/Core-CMS-Resources:/frontera-cms

package/src/lib/_imports/trumps/s-header.css

@@ -103,9 +103,11 @@ Styleguide Trumps.Scopes.Header
 
   /* If link text uses 2 lines, header grows taller (but it must not do so) */
   white-space: nowrap;
+
+  padding-inline: 14px;
 }
 
-@define-mixin header__nav-link--tall {
+@define-mixin header--not-expanded {
   &.s-header .nav-item {
     display: flex;
   }
@@ -116,19 +118,39 @@ Styleguide Trumps.Scopes.Header
 
     /* To align the underline of a hovered link to bottom of header */
     height: calc(100% + var(--nav-padding-vert) + var(--header-major-border-width));
+
+    padding-block: 5px;
   }
 }
 @media (--x-narrow-and-above) {
-  .navbar-expand-sm { @mixin header__nav-link--tall; }
+  .navbar-expand-sm { @mixin header--not-expanded; }
 }
 @media (--narrow-and-above) {
-  .navbar-expand-md { @mixin header__nav-link--tall; }
+  .navbar-expand-md { @mixin header--not-expanded; }
 }
 @media (--medium-and-above) {
-  .navbar-expand-lg { @mixin header__nav-link--tall; }
+  .navbar-expand-lg { @mixin header--not-expanded; }
 }
 @media (--wide-and-above) {
-  .navbar-expand-xl { @mixin header__nav-link--tall; }
+  .navbar-expand-xl { @mixin header--not-expanded; }
+}
+
+@define-mixin header--is-expanded {
+  &.s-header .nav-link {
+    padding-block: 8px;
+  }
+}
+@media (--x-narrow-and-below) {
+  .navbar-expand-sm { @mixin header--is-expanded; }
+}
+@media (--narrow-and-below) {
+  .navbar-expand-md { @mixin header--is-expanded; }
+}
+@media (--medium-and-below) {
+  .navbar-expand-lg { @mixin header--is-expanded; }
+}
+@media (--wide-and-below) {
+  .navbar-expand-xl { @mixin header--is-expanded; }
 }
 
 .s-header .nav-link:hover,
@@ -144,19 +166,6 @@ Styleguide Trumps.Scopes.Header
   color: var(--header-text-color);
 }
 
-/* Navigation: Links: Responsive Design */
-
-/* Tweak Bootstrap `_nav.scss` (which selects via `navbar-expand-` class) */
-.s-header[class*="navbar-expand-"] .navbar-nav .nav-link {
-  padding-right: 14px; /* NO-R/EM: .875rem (overwrite Bootstrap) */
-  padding-left: 14px; /* NO-R/EM: .875rem (overwrite Bootstrap) */
-}
-
-@media (--medium-and-below) {
-  .s-header[class*="navbar-expand-"] .navbar-nav .nav-link {
-      padding-block: 8px;
-  }
-}
 
 /* Search */
 
@@ -170,9 +179,19 @@ Styleguide Trumps.Scopes.Header
 
 /* Dropdown */
 
-.dropdown-menu {
+/* To ensure sizes match between clients with different rem value */
+/* FAQ: Bootstrap uses rem space values but CMS and Portal rem values differ */
+.s-header .dropdown-menu {
   font-size: 16px; /* NO-R/EM: 1rem (from Bootstrap via `.dropdown-menu`) */
 }
+/* - to match portal nav size */
+.s-header .dropdown-menu {
+  padding-block: 5px;
+}
+.s-header .dropdown-item {
+  padding-block: 2.5px;
+  padding-inline: 15px;
+}
 
 /* Icons */
 
@@ -226,6 +245,6 @@ Styleguide Trumps.Scopes.Header
     ```
 */
 
-.navbar-toggler-icon  {
+.s-header .navbar-toggler-icon {
   filter: var(--menu-toggle-icon);
 }