@tacc/core-styles 2.44.0 → 2.46.0

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

@@ -16,7 +16,6 @@ Markup: s-header.html
 Styleguide Trumps.Scopes.Header
 */
 @import url("../tools/media-queries.css");
-@import url("./s-header.bootstrap.css");
 
 /* WARNING: NO-R/EM: CMS uses 1rem = 10px, but Portal uses 1rem = 16px */
 
@@ -181,14 +180,6 @@ Styleguide Trumps.Scopes.Header
 .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 */
 

package/src/lib/_imports/trumps/s-references/config.yml

@@ -0,0 +1,3 @@
+status: prototype
+context:
+  shouldSkipPattern: false

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

@@ -0,0 +1,8 @@
+A section for displaying academic references and publications.
+
+**Use Cases:**
+- Bibliography lists
+- Academic citations
+- Publication listings
+
+Includes spacing adjustments for ordered lists within reference sections.

package/src/lib/_imports/trumps/s-references/s-references.hbs

@@ -0,0 +1,15 @@
+<div class="s-references">
+  <p>A truncated list of the publications related to the projects on <a href="https://digitalporousmedia.org/related-publication-list/" target="_blank" aria-label="Opens in new window.">Digital Rocks Portal</a> (as of 2025-05).</p>
+
+  <ol>
+    <li>A.M. Alhammadi, A. AlRatrout, K. Singh, B. Bijeljic, M.J. Blunt, In situ characterization of mixed-wettability in a reservoir rock at subsurface conditions, Sci Rep. 7 (2017) 1-9. <a href="https://doi.org/10.1038/s41598-017-10992-w" target="_blank" aria-label="Opens in new window.">https://doi.org/10.1038/s41598-017-10992-w</a>.</li>
+
+    <li>F.O. Alpak, S. Berg, I. Zacharoudiou, Prediction of fluid topology and relative permeability in imbibition in sandstone rock by direct numerical simulation, Advances in Water Resources. 122 (2018) 49-59. <a href="https://doi.org/10.1016/j.advwatres.2018.09.001" target="_blank" aria-label="Opens in new window.">https://doi.org/10.1016/j.advwatres.2018.09.001</a>.</li>
+
+    <li>M. Andrew, Comparing organic-hosted and intergranular pore networks: topography and topology in grains, gaps and bubbles, Geological Society, London, Special Publications. 484 (2018) SP484.4. <a href="https://doi.org/10.1144/SP484.4" target="_blank" aria-label="Opens in new window.">https://doi.org/10.1144/SP484.4</a>.</li>
+
+    <li>M. Andrew, A quantified study of segmentation techniques on synthetic geological XRM and FIB-SEM images, Comput Geosci. 22 (2018) 1503-1512. <a href="https://doi.org/10.1007/s10596-018-9768-y" target="_blank" aria-label="Opens in new window.">https://doi.org/10.1007/s10596-018-9768-y</a>.</li>
+
+    <li>M. Andrew, B. Bijeljic, M.J. Blunt, Pore-scale imaging of geological carbon dioxide storage under in situ conditions, Geophysical Research Letters. 40 (2013) 3915-3918. <a href="https://doi.org/10.1002/grl.50771" target="_blank" aria-label="Opens in new window.">https://doi.org/10.1002/grl.50771</a>.</li>
+  </ol>
+</div>

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

@@ -0,0 +1,6 @@
+.s-references p + ol {
+    margin-top: unset; /* to undo negative margin from html-elements.cms.css */
+}
+.s-references ol li {
+    margin-block: 1em;
+}

package/src/lib/_imports/trumps/u-image-zoom/config.yml

@@ -0,0 +1,3 @@
+context:
+  shouldSkipPattern: false
+  📝 shouldSkipPattern: because core-styles.….css does not import this

package/src/lib/_imports/trumps/u-image-zoom/readme.md

@@ -0,0 +1 @@
+An image that "zooms in" when user hovers over image, and "zooms out" when user stops hovering.

package/src/lib/_imports/trumps/u-image-zoom/u-image-zoom.demo.css

@@ -0,0 +1,3 @@
+.u-image-zoom--on-hover {
+  max-width: fit-content;
+}

package/src/lib/_imports/trumps/u-image-zoom/u-image-zoom.hbs

@@ -0,0 +1,8 @@
+<dl>
+  <dt><code>u-image-zoom--on-hover</code></dt>
+  <dd>
+    <a href="#" class="u-image-zoom--on-hover">
+      <img src="{{> @img-url }}" />
+    </a>
+  </dd>
+</dl>

package/src/lib/_imports/trumps/u-image-zoom.css

@@ -0,0 +1,16 @@
+@import url("./u-image-zoom.selectors.css");
+
+:--u-image-zoom {
+  display: block;
+  overflow: hidden;
+}
+:--u-image-zoom > :--u-image-zoom__media {
+  transition: transform .5s ease;
+}
+
+/* NOTE: Testing suggests this only works on anchors,
+         so explitely limit this utility to anchors */
+a:--u-image-zoom:hover :--u-image-zoom__media,
+a:hover :--u-image-zoom :--u-image-zoom__media {
+  transform: scale(1.5);
+}

package/src/lib/_imports/trumps/u-image-zoom.selectors.css

@@ -0,0 +1,8 @@
+@custom-selector :--u-image-zoom
+  .u-image-zoom,
+  [class*="image-zoom--"];
+
+@custom-selector :--u-image-zoom__media
+  img,
+  svg;
+  /* FAQ: Embedded media not permitted cuz its internal UI would move */

package/src/lib/_imports/trumps/u-summary/config.yml

@@ -0,0 +1,9 @@
+status: prototype
+variants:
+  - name: default
+    hidden: true
+  - name: plain
+  - name: custom-example
+    label: Example Customization
+    context:
+      shouldLoadCMS: true

package/src/lib/_imports/trumps/u-summary/readme.md

@@ -0,0 +1,8 @@
+Utility classes for styling HTML `<summary>` elements.
+
+| Class                     | Description
+| - | - |
+| `.u-summary-with-a-link`  | For summary element with a link inside
+| `.u-summary-fake-marker`  | For summary element with custom pseudo-element markers (▸/▾)
+
+Used on [Digital Porous Media "Browse Datasets"](https://pprd.digitalrocks.tacc.utexas.edu/datasets/317/#project-files) circa 2025-06.

package/src/lib/_imports/trumps/u-summary/u-summary--custom-example.hbs

@@ -0,0 +1 @@
+{{> @u-summary wrapper-class="data-tree" example-class="data-tree__item" }}

package/src/lib/_imports/trumps/u-summary/u-summary--plain.hbs

@@ -0,0 +1 @@
+{{> @u-summary }}

package/src/lib/_imports/trumps/u-summary/u-summary.demo.css

@@ -0,0 +1,15 @@
+/* https://github.com/TACC/Core-Styles/issues/458 */
+.data-tree {
+    --indent: 1.5rem;
+}
+.data-tree__item details {
+    margin-left: var(--indent);
+}
+.data-tree__item summary {
+    margin-left: calc( -1 * var(--indent) );
+}
+.data-tree__item summary.u-summary-with-a-link::before,
+.data-tree__item summary.u-summary-fake-marker::before {
+    width: var(--indent);
+    display: inline-block;
+}

package/src/lib/_imports/trumps/u-summary/u-summary.hbs

@@ -0,0 +1,47 @@
+<dl {{#if wrapper-class}}class="{{ wrapper-class }}"{{/if}}>
+  <dt><code>.u-summary-with-a-link</code></dt>
+  <dd {{#if example-class}}class="{{ example-class }}"{{/if}}>
+    <p>Summary element containing a link:</p>
+
+    <details>
+      <summary class="u-summary-with-a-link">
+        <a href="https://example.com" target="_blank">
+          a link with a functional <code>href</code>
+        </a>
+        <small>(to toggle details, click the triangle or this small text)</small>
+      </summary>
+      <p>This is content that shows when the summary is expanded. The summary contains a navigation link to leave this page.</p>
+    </details>
+
+    <details>
+      <summary class="u-summary-with-a-link">
+        <a>
+          a link with <strong>no</strong> <code>href</code>
+        </a>
+        <small>(to toggle details, click the triangle, the link, or this small text)</small>
+      </summary>
+      <p>This demonstrates that links without href attributes are properly restored to appear as links within a summary.</p>
+    </details>
+  </dd>
+
+  <dt><code>.u-summary-fake-marker</code></dt>
+  <dd {{#if example-class}}class="{{ example-class }}"{{/if}}>
+    <p>Summary element with custom pseudo-element markers:</p>
+
+    <details>
+      <summary class="u-summary-fake-marker">
+        closed by default
+        <small>(to toggle details, click the triangle or text)</small>
+      </summary>
+      <p>This content uses custom marker styling with pseudo-elements instead of the default list markers. Notice the ▸ marker when closed and ▾ when open.</p>
+    </details>
+
+    <details open>
+      <summary class="u-summary-fake-marker">
+        open by default
+        <small>(to toggle details, click the triangle or text)</small>
+      </summary>
+      <p>This content uses custom marker styling with pseudo-elements instead of the default list markers. Notice the ▸ marker when closed and ▾ when open.</p>
+    </details>
+  </dd>
+</dl>

package/src/lib/_imports/trumps/u-summary.css

@@ -0,0 +1,19 @@
+/* To undo core-styles, which assumes href-less <a> is disabled */
+summary.u-summary-with-a-link > a:not([href]) {
+    pointer-events: auto;
+    opacity: 1;
+}
+
+/* To use text content instead of a ::marker */
+summary.u-summary-with-a-link,
+summary.u-summary-fake-marker {
+   list-style: none;
+}
+summary.u-summary-with-a-link::before,
+summary.u-summary-fake-marker::before {
+    content: '▸';
+}
+details[open] > summary.u-summary-with-a-link::before,
+details[open] > summary.u-summary-fake-marker::before {
+    content: '▾';
+}

package/dist/trumps/s-header.bootstrap.css

@@ -1 +0,0 @@
-/*! @tacc/core-styles 2.44.0+ | MIT | github.com/TACC/Core-Styles */.s-header .dropdown-item{color:#212529}.s-header .dropdown-item:focus,.s-header .dropdown-item:hover{background-color:hsla(0,0%,84%,.3);color:#16181b;text-decoration:none}.s-header .dropdown-item.active,.s-header .dropdown-item:active{background-color:var(--global-color-accent--normal);color:#fff;text-decoration:none}.s-header input{font-family:inherit}

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

@@ -1,31 +0,0 @@
-/*
-Header
-
-Bootstrap styles that `s-header.css` expects exist in the same layer
-(i.e. desinger may expect to not change until a new header design):
-
-Markup: s-header.html
-
-Styleguide Trumps.Scopes.Header.Bootstrap
-*/
-@design-tokens url('../../tokens/v2.json') format('style-dictionary3');
-
-.s-header .dropdown-item {
-  color: #212529;
-}
-.s-header .dropdown-item:focus,
-.s-header .dropdown-item:hover {
-  color: #16181b;
-  text-decoration: none;
-  background-color: rgb( from design-token('color.gray.light') r g b / 0.3 );
-}
-.s-header .dropdown-item.active,
-.s-header .dropdown-item:active {
-  color: #fff;
-  text-decoration: none;
-  background-color: var(--global-color-accent--normal);
-}
-
-.s-header input {
-  font-family: inherit;
-}