@tacc/core-styles 2.38.0 → 2.39.0

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