@tacc/core-styles 2.43.2 → 2.45.0

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

@@ -2,7 +2,7 @@
 /* DO NOT ADD STYLES HERE; ONLY IMPORT OTHER STYLESHEETS */
 
 /* Organize via ITCSS */
-/* https://confluence.tacc.utexas.edu/x/IAA9Cw */
+/* https://tacc-main.atlassian.net/wiki/x/QQhv */
 
 /* SETTINGS */
 /* To get most settings, client should load `./base.css` first */

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

@@ -2,14 +2,14 @@
 /* DO NOT ADD STYLES HERE; ONLY IMPORT OTHER STYLESHEETS */
 
 /* Organize via ITCSS */
-/* https://confluence.tacc.utexas.edu/x/IAA9Cw */
+/* https://tacc-main.atlassian.net/wiki/x/QQhv */
 
 /* SETTINGS */
 /* To get these, client should load `./base.css` first */
 
 /* GENERICS */
 /* Mostly from Bootstrap */
-/* https://confluence.tacc.utexas.edu/x/b53tDg */
+/* https://tacc-main.atlassian.net/wiki/x/khJv */
 
 /* ELEMENTS */
 /* To override Bootstrap */
@@ -19,7 +19,7 @@
 /* (none) */
 
 /* COMPONENTS */
-/* (none) */
+@import url("./components/bootstrap.dropdown.css");
 
 /* TRUMPS */
 /* FAQ: Because of third-party code and a rush to style the Frontera header

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

@@ -2,7 +2,7 @@
 /* DO NOT ADD STYLES HERE; ONLY IMPORT OTHER STYLESHEETS */
 
 /* Organize via ITCSS */
-/* https://confluence.tacc.utexas.edu/x/IAA9Cw */
+/* https://tacc-main.atlassian.net/wiki/x/QQhv */
 
 /* SETTINGS */
 /* To get most settings, client should load `./base.css` first */
@@ -11,7 +11,7 @@
 
 /* GENERICS */
 /* Mostly from Bootstrap */
-/* https://confluence.tacc.utexas.edu/x/b53tDg */
+/* https://tacc-main.atlassian.net/wiki/x/khJv */
 
 /* ELEMENTS */
 @import url("./elements/root--portal.css");
@@ -26,6 +26,7 @@
 @import url("./components/bootstrap.form.css");
 @import url("./components/cortal.icon.css");
 @import url("./components/mui.tabs.css");
+@import url("./components/c-feed-list.css");
 @import url("./components/c-form--portal.css");
 @import url("./components/c-message.css");
 @import url("./components/c-message--compact.css");

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

@@ -2,7 +2,7 @@
 /* DO NOT ADD STYLES HERE; ONLY IMPORT OTHER STYLESHEETS */
 
 /* Organize via ITCSS */
-/* https://confluence.tacc.utexas.edu/x/IAA9Cw */
+/* https://tacc-main.atlassian.net/wiki/x/QQhv */
 
 /* SETTINGS */
 @import url("./core-styles.settings.css");

package/src/lib/_imports/elements/demo.css

@@ -14,25 +14,25 @@ body {
 
 /* Organize Content */
 
-main > dl:not(.no-demo-styles) {
+main > dl {
 
-  &:is(dt, dd) {
+  & :is(dt, dd):not(.no-demo-styles > *) {
     font-family: var(--global-font-family--sans);
     color: #484848;
     line-height: normal;
   }
-  & dt {
+  & dt:not(.no-demo-styles > *) {
     font-size: 1.6rem;
     margin-bottom: 10px;
   }
-  & dt { font-weight: var(--bold); }
-  & dl dt { font-weight: var(--medium); }
-  & dl dl dt { font-weight: var(--regular); }
+  & dt:not(.no-demo-styles > *) { font-weight: var(--bold); }
+  & dl dt:not(.no-demo-styles > *) { font-weight: var(--medium); }
+  & dl dl dt:not(.no-demo-styles > *) { font-weight: var(--regular); }
 
-  & dt:not(:first-of-type) {
+  & dt:not(:first-of-type):not(.no-demo-styles > *) {
     margin-top: 20px;
   }
-  & dd {
+  & dd:not(.no-demo-styles > *) {
     margin-bottom: 10px;
     margin-left: 25px;
   }

package/src/lib/_imports/elements/dl/dl.hbs

@@ -1,6 +1,14 @@
 <dl {{#if class }}class="{{ class }}"{{/if}}>
   {{#each data.key-value-pairs}}
-    {{#if key}}<dt class="c-data-list__key">{{ key }}</dt>{{/if}}
-    {{#if value}}<dd class="c-data-list__value">{{ value }}</dd>{{/if}}
+    {{#if key}}
+    <dt {{#if key-class}}class="{{ key-class }}"{{/if}}>
+      {{ key }}
+    </dt>
+    {{/if}}
+    {{#if value}}
+    <dd {{#if value-class}}class="{{ value-class }}"{{/if}}>
+      {{ value }}
+    </dd>
+    {{/if}}
   {{/each}}
 </dl>

package/src/lib/_imports/elements/html-elements/html-elements.hbs

@@ -39,6 +39,26 @@
         <p>{{> @text-of-one-paragraph-with-tags }}</p>
       </dd>
 
+      <dt>Paragraph then List <small>(reduced spacing)</small></dt>
+      <dd>
+        <p>This paragraph is immediately followed by a list with reduced spacing:</p>
+        <ul>
+          <li>First item in the list</li>
+          <li>Second item in the list</li>
+          <li>Third item in the list</li>
+        </ul>
+        <p>Another paragraph followed by an ordered list:</p>
+        <ol>
+          <li>First ordered item</li>
+          <li>Second ordered item</li>
+        </ol>
+        <p>And a paragraph followed by a definition list:</p>
+        <dl class="no-demo-styles">
+          <dt>Term</dt>
+          <dd>Definition of the term</dd>
+        </dl>
+      </dd>
+
       <dt>Lists</dt>
       <dd>
         <dl>
@@ -79,5 +99,25 @@
       <dt>Blockquote</dt>
       <dd>{{> @blockquote }}</dd>
     </dl>
+
+    <dl>
+      <dt>Demarcating Edits</dt>
+      <dd>
+        <dl>
+          <dt>Inline Inserted Text</dt>
+          <dd>
+            <p>This paragraph contains <ins>some inserted text</ins> to demonstrate the styling.</p>
+          </dd>
+          <dt>Block Inserted Content</dt>
+          <dd>
+            <div class="ins-block">
+              <p>This is a block of inserted content that demonstrates the .ins-block class styling.</p>
+              <p>It can contain multiple paragraphs and other content.</p>
+              <p>The final paragraph should not have extra bottom margin.</p>
+            </div>
+          </dd>
+        </dl>
+      </dd>
+    </dl>
   </dd>
 </dl>

package/src/lib/_imports/elements/html-elements.cms.css

@@ -51,6 +51,9 @@ Styleguide Elements.TextContent
 & p {
   margin-bottom: 2rem; /* overwrite Bootstrap */
 }
+p + :is(ul, ol, dl) {
+    margin-top: -1rem;
+}
 
 /* Lists */
 
@@ -160,7 +163,32 @@ Reference:
 Styleguide Elements.DemarcatingEdits
 */
 
-/* … */
+/* To improve default underline style for inserted text */
+ins {
+    text-underline-position: under;
+    text-decoration-style: dotted;
+}
+
+/* To highlight blocks of inserted content */
+.ins-block {
+    /* To keep outline within a .container */
+    --offset: calc( var(--global-space--bootstrap-gap) * 0.375 );
+
+    border: 0.125em dotted currentcolor;
+    padding: var(--offset);
+
+    /* To keep outline within a .container */
+    margin-inline: calc( -1 * var(--offset));
+    /* To prevent outline from touching sibling content */
+    margin-block: 1em;
+
+    /* To create color that is between `x-light` and `xx-light` */
+    background: rgb( from var(--global-color-primary--x-light) r g b / 50% );
+}
+/* To remove likely extra space from final p */
+.ins-block > p:last-child {
+    margin-bottom: unset;
+}
 
 
 

package/src/lib/_imports/elements/table/config.yml

@@ -379,3 +379,5 @@ variants:
                   custom-1: 1 TB
                   custom-2: <span class="c-pill c-pill--is-success">932 GB</span>
                   time: 12/01/2019 11:04:19
+  - name: content-after
+    hidden: true

package/src/lib/_imports/elements/table/table--content-after.hbs

@@ -0,0 +1 @@
+<div>Content (not a paragraph) after a table.</div>

package/src/lib/_imports/elements/table/table--via-paragraphs.hbs

@@ -2,6 +2,8 @@
 
 {{> @s-paragraph-table class="s-paragraph-table" data=data }}
 
+{{> @table--content-after }}
+
 <br />
 <br />
 
@@ -20,3 +22,5 @@
   {{/each}}
   </tbody>
 </table>
+
+{{> @table--content-after }}

package/src/lib/_imports/elements/table/table.hbs

@@ -12,8 +12,16 @@
   <tbody>
   {{#each data.key-value-pairs}}
     <tr>
-      {{#if key}}<th class="c-data-list__key">{{ key }}</th>{{/if}}
-      {{#if value}}<td class="c-data-list__value">{{ value }}</td>{{/if}}
+      {{#if key}}
+      <th {{#if key-class}}class="{{ key-class }}"{{/if}}>
+        {{ key }}
+      </th>
+      {{/if}}
+      {{#if value}}
+      <td {{#if value-class}}class="{{ value-class }}"{{/if}}>
+        {{ value }}
+      </td>
+      {{/if}}
     </tr>
   {{/each}}
   {{#each data.rows}}
@@ -51,10 +59,12 @@
       {{/if}}
       {{#if table}}
       <td class="has-table">
-        {{> @table data=table }}
+        {{> @table data=table has-content-after=false }}
       </td>
       {{/if}}
     </tr>
   {{/each}}
   </tbody>
 </table>
+
+{{#unless (eq has-content-after false)}}{{> @table--content-after }}{{/unless}}

package/src/lib/_imports/elements/table.cms.css

@@ -7,6 +7,8 @@ table,
   --cell-line-height: 1.4; /* to match body */
 
   border-bottom: var(--global-border-width--thick) solid var(--global-color-primary--dark);
+
+  margin-bottom: 2rem; /* overwrites Bootstrap */
 }
 
 /* TABLE WITH NO <thead> */

package/src/lib/_imports/elements/table.docs.css

@@ -3,4 +3,6 @@
 table,
 :--s-paragraph-table {
   --font-size: var(--global-font-size--medium);
+
+  margin-bottom: 2rem; /* overwrites Bootstrap */
 }

package/src/lib/_imports/generics/README.md

@@ -6,4 +6,4 @@ This directory is here to show and document all [ITCSS] directories.
 
 [^1]: Bootstrap also provides its own objects, components, elements, and trumps.
 
-[itcss]: https://confluence.tacc.utexas.edu/x/IAA9Cw
+[itcss]: https://tacc-main.atlassian.net/wiki/x/QQhv

package/src/lib/_imports/generics/fonts.css

@@ -16,7 +16,7 @@ Usage:
 Reference:
 - [Keep Font CSS Simple](https://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/)
 - [font-weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)
-- [Shared UI - Constants - Font](https://confluence.tacc.utexas.edu/x/cYAZCg)
+- [Shared UI - Constants - Font](https://tacc-main.atlassian.net/wiki/x/XRtv)
 
 Styleguide Generics.Fonts
 */

package/src/lib/_imports/settings/font--cms.css

@@ -4,7 +4,7 @@
   --sans: var(--global-font-family--sans);
 
   /* Size */
-  /* https://confluence.tacc.utexas.edu/x/nh4FDg */
+  /* https://tacc-main.atlassian.net/wiki/x/8Bdv */
   /* CAVEAT: These font sizes assume root font is 10px or an equivalent value */
   /* Known Clients: TACC/Core-CMS@3.10, TACC/tup-ui:/apps/tup-cms */
   --global-font-size--x-small: 1.0rem;

package/src/lib/_imports/settings/font--docs.css

@@ -4,7 +4,7 @@
   --sans: var(--global-font-family--sans);
 
   /* Size */
-  /* https://confluence.tacc.utexas.edu/x/nh4FDg */
+  /* https://tacc-main.atlassian.net/wiki/x/8Bdv */
   /* CAVEAT: These font sizes assume root font is 10px or an equivalent value */
   /* Known Clients: TACC/TACC-Docs */
   --global-font-size--x-small: 1.2rem;

package/src/lib/_imports/settings/font--portal.css

@@ -4,7 +4,7 @@
   --sans: var(--global-font-family--sans);
 
   /* Size */
-  /* https://confluence.tacc.utexas.edu/x/nh4FDg */
+  /* https://tacc-main.atlassian.net/wiki/x/8Bdv */
   /* CAVEAT: These font sizes assume root font is 10px or an equivalent value */
   /* Known Clients: TACC/tup-ui:/apps/tup-ui */
   --global-font-size--x-small: 1.0rem;

package/src/lib/_imports/settings/font.css

@@ -14,7 +14,7 @@ Usage:
 
 Reference:
 - https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
-- [Shared UI - Constants - Font](https://confluence.tacc.utexas.edu/x/cYAZCg)
+- [Shared UI - Constants - Font](https://tacc-main.atlassian.net/wiki/x/XRtv)
 
 Styleguide Settings.CustomProperties.Font
 */

package/src/lib/_imports/settings/space.css

@@ -10,7 +10,7 @@ _Notice_: We will use Bootstrap values until Design defines values.
 Usage: `var(--global-space--normal)`
 
 Reference:
-- https://confluence.tacc.utexas.edu/x/dYAZCg
+- https://tacc-main.atlassian.net/wiki/x/zgJv
 - https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
 - https://getbootstrap.com/docs/4.0/utilities/spacing/
 - https://getbootstrap.com/docs/4.0/getting-started/theming/#sass-options
@@ -41,6 +41,8 @@ Styleguide Settings.CustomProperties.Space
   --global-space--grid-gap: var(--global-space--bootstrap-gap);
   --global-space--above-breadcrumbs: 45px;
   --global-space--under-breadcrumbs: 40px;
+  --global-space--pattern-pad: 30px;
+  --global-space--unnamed: 50px;
 
   /* Applications */
   --global-space--section-top: 12px;

package/src/lib/_imports/tools/media-queries.css

@@ -11,7 +11,7 @@ Notice: These must be Tools (imported as needed) until native browser support, a
 
 Reference:
 - https://drafts.csswg.org/mediaqueries-5/#at-ruledef-custom-media
-- https://confluence.tacc.utexas.edu/x/b4AZCg
+- https://tacc-main.atlassian.net/wiki/x/ahNv
 
 Styleguide Tools.CustomMediaQueries.Breakpoints
 */

package/src/lib/_imports/tools/x-action/config.yml

@@ -0,0 +1,5 @@
+status: prototype
+context:
+  shouldSkipPattern: false
+  supportStyles:
+    - ../../assets/components/cortal-icon.css

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

@@ -0,0 +1,4 @@
+For use at the end of an incomplete list as a link to see more e.g.
+
+- "See All Training"
+- "See All News"

package/src/lib/_imports/tools/x-action/x-action.hbs

@@ -0,0 +1,40 @@
+<dl>
+    <dt>Links</dt>
+    <dd>
+        <a href="#" class="x-action--with-icon">
+            <i class="
+                x-action__icon-at-start
+                icon icon-push-right
+            ">&gt;</i>
+            Link with Icon
+        </a>
+    </dd>
+    <dd>
+        <button type="button" class="x-action--with-icon c-button c-button--as-link">
+            <i class="
+                x-action__icon-at-start
+                icon icon-push-right
+            ">&gt;</i>
+            Button as Link with Icon
+        </button>
+    </dd>
+    <dt>Buttons</dt>
+    <dd>
+        <button type="button" class="x-action--with-icon c-button c-button--primary">
+            <i class="
+                x-action__icon-at-start
+                icon icon-push-right
+            ">&gt;</i>
+            Button with Icon
+        </button>
+    </dd>
+    <dd>
+        <a href="#" class="x-action--with-icon c-button c-button--primary" target="_blank">
+            <i class="
+                x-action__icon-at-start
+                icon icon-push-right
+            ">&gt;</i>
+            Link as Button with Icon
+        </a>
+    </dd>
+</dl>

package/src/lib/_imports/tools/x-action.css

@@ -0,0 +1,15 @@
+@define-mixin action--with-icon {
+    display: inline-flex; /* for simple alignment code */
+    align-items: center;
+    gap: 0.5em;
+}
+@define-mixin action__icon {
+    font-size: 1.2em;
+}
+/* DEMO-USE ONLY */
+.x-action--with-icon {
+    @mixin action--with-icon;
+}
+.x-action__icon {
+    @mixin action__icon;
+}

package/src/lib/_imports/tools/x-feed-list/config.yml

@@ -0,0 +1,5 @@
+status: ready
+context:
+  shouldSkipPattern: false
+  supportStyles:
+    - ../../assets/components/cortal-icon.css

package/src/lib/_imports/tools/x-feed-list/readme.md

@@ -0,0 +1 @@
+A list of preview content for articles, documents, or pages.

package/src/lib/_imports/tools/x-feed-list/x-feed-list.hbs

@@ -0,0 +1,72 @@
+<h2>Table of Contents</h2>
+<nav class="c-nav">
+    <ul>
+        <li><a href="#minimal">Minimal Example</a></li>
+        <li><a href="#complex">Complex Example</a></li>
+    </ul>
+</nav>
+
+<div class="demo-grid demo-grid--plain">
+    <section>
+        <h2 id="minimal">Minimal Example</h2>
+        <div class="x-feed-list">
+            <h3 class="x-feed-list__title">Upcoming Events</h3>
+            
+            <article class="x-feed-list__item">
+                <time class="x-feed-list__item-time">May 15, 2024</time>
+                <h4 class="x-feed-list__item-name">
+                    <a href="#">Workshop: Advanced Data Analysis</a>
+                </h4>
+                <p class="x-feed-list__item-desc">Join us for an in-depth workshop on advanced data analysis techniques and best practices.</p>
+            </article>
+
+            <article class="x-feed-list__item">
+                <time class="x-feed-list__item-time">May 20–22, 2024</time>
+                <h4 class="x-feed-list__item-name">
+                    <a href="#">Annual Conference</a>
+                </h4>
+                <p class="x-feed-list__item-desc">Our flagship event featuring keynote speakers, technical sessions, and networking opportunities.</p>
+            </article>
+
+            <p class="x-feed-list__more">
+                <a href="#" class="x-feed-list__more-link">
+                    <i class="x-feed-list__more-icon icon icon-push-right">&gt;</i>
+                    See All Events
+                </a>
+            </p>
+        </div>
+    </section>
+
+    <section>
+        <h2 id="complex">Complex Example</h2>
+        <div class="x-feed-list">
+            <h3 class="x-feed-list__title">User Updates</h3>
+            
+            <article class="x-feed-list__item">
+                <time class="x-feed-list__item-time" data-prefix="Published:" datetime="2024-04-29">
+                    <span>April 29, 2024</span>
+                </time>
+                <h4 class="x-feed-list__item-name"><a href="#" target="_blank">New Feature Release</a></h4>
+                <p class="x-feed-list__item-desc">We're excited to announce the release of new features to enhance your experience. These updates include improved performance and additional customization options.</p>
+                <p class="x-feed-list__item-link"><a href="#" class="c-button c-button--primary" target="_blank">Learn More</a></p>
+            </article>
+
+            <article class="x-feed-list__item has-update">
+                <time class="x-feed-list__item-time" data-prefix="Published:" datetime="2024-04-28">
+                    <span>April 28, 2024</span>
+                    <span class="c-pill c-pill--is-updated">Update</span>
+                </time>
+                <h4 class="x-feed-list__item-name"><a href="#" target="_blank">System Maintenance</a></h4>
+                <p class="x-feed-list__item-desc">Planned maintenance will occur this weekend. The system will be unavailable from 10 PM to 2 AM.</p>
+                <p class="x-feed-list__item-link"><a href="#" class="c-button c-button--primary" target="_blank">View Details</a></p>
+            </article>
+
+            <p class="x-feed-list__more">
+                <a href="#" class="x-feed-list__more-link">
+                    <i class="x-feed-list__more-icon  icon icon-push-right">&gt;</i>
+                    See All Updates
+                </a>
+            </p>
+        </div>
+    </section>
+</div>