@tacc/core-styles 0.10.0 → 1.0.0

package/src/lib/_imports/objects/o-table-wrap/demo.extra.css

@@ -0,0 +1,31 @@
+/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
+
+/* To force horizontal scrollbar */
+dl.demo-advanced.demo-horz dd { max-width: 400px; }
+dl.demo-advanced.demo-horz table { white-space: nowrap; }
+
+/* To force vertical scrollbar */
+dl.demo-advanced.demo-vert dd { max-height: 175px; }
+
+/* To overwrite "extra" styles */
+dl.demo-advanced.demo-vert:not(.demo-horz) table {
+  white-space: normal; /* overwrite `extra.overflow-scroll.css` */
+}
+
+/* To lay out examples */
+body:has(.demo-advanced) {
+  display: grid;
+  column-gap: 25px;
+  padding-inline: 25px;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  justify-items: center;
+}
+dl.demo-advanced {
+  display: grid;
+  grid-auto-rows: minmax(min-content, max-content);
+}
+dl.demo-advanced dd {
+  /* To overwrite _preview.hbs */
+  margin-bottom: unset !important;
+  margin-left: unset !important;
+}

package/src/lib/_imports/objects/o-table-wrap/extra.flexible-horz.css

@@ -0,0 +1,23 @@
+/* This CSS is EXAMPLE code for a client. It is NOT part of the pattern. */
+
+/* Truncate Cell Text: - Verbose i.e. Custom */
+.o-table-wrap--flexible-horz > table :is(td, th) /* plain text cell */,
+.o-table-wrap--flexible-horz > table :is(td, th) > :is(a, span) /* element in cell */ {
+  /* NOTE: If multiple lines are okay, omit rule */
+  white-space: nowrap;
+
+  /* NOTE: To clip: either use 'clip' value or omit rule */
+  text-overflow: ellipsis;
+
+  /* NOTE: If overlap is okay, omit rule */
+  overflow: hidden;
+}
+
+/* Truncate Cell Text - Mixin i.e. Standard */
+/* (only works on TACC clients using PostCSS) */
+/*
+@import url('@tacc/core-styles/src/lib/_imports/tools/x-truncate.css');
+... {
+  @extend .x-truncate--one-line;
+}
+*/

package/src/lib/_imports/objects/o-table-wrap/extra.overflow-hidden.css

@@ -0,0 +1,7 @@
+/* This CSS is EXAMPLE code for a client. It is NOT part of the pattern. */
+
+/* Prevent Text Wrap */
+/* NOTE: If multiple lines are okay, do not use ruleset */
+.o-table-wrap--overflow-hidden table {
+  white-space: nowrap;
+}

package/src/lib/_imports/objects/o-table-wrap/extra.overflow-scroll.css

@@ -0,0 +1,7 @@
+/* This CSS is EXAMPLE code for a client. It is NOT part of the pattern. */
+
+/* Prevent Text Wrap */
+/* NOTE: If multiple lines are okay, do not use ruleset */
+.o-table-wrap--overflow-scroll table {
+  white-space: nowrap;
+}

package/src/lib/_imports/objects/o-table-wrap/o-table-wrap--flexible-horz.css

@@ -0,0 +1,4 @@
+.o-table-wrap--flexible-horz > table {
+  width: 100%;
+  table-layout: fixed; /* to allow `width` to have effect */
+}

package/src/lib/_imports/objects/o-table-wrap/o-table-wrap--flexible-horz.hbs

@@ -0,0 +1,5 @@
+{{#> @o-table-wrap desc=desc }}
+<div class="o-table-wrap  o-table-wrap--flexible-horz">
+  {{> @table data=data }}
+</div>
+{{/@o-table-wrap}}

package/src/lib/_imports/objects/o-table-wrap/o-table-wrap--flexible-horz.readme.md

@@ -0,0 +1,20 @@
+Make [table]({{path './table' }}) width able to <strong>stretch</strong> <em>and</em> <strong>shrink</strong>.
+
+For extra customization, see relevant <code>extra…</code> "File" from "Assets" tab.
+
+> **?&#x20DD; Explanation**
+>
+> A `<table>` can **not** be a flex item. The trick is to [wrap it in a `<div>`][source-flex].
+
+> **ⓘ Notice**
+>
+> This class can **only** be used on a table wrapper. It has **no** affect when used on table directly.
+
+[source-flex]: https://stackoverflow.com/a/41421700/11817077 "Stack Overflow: Why does flex-box work with a div, but not a table?"
+
+<script>
+/* To open external links in new window */
+Array.from(document.links)
+  .filter(link => link.hostname != window.location.hostname)
+  .forEach(link => link.target = '_blank');
+</script>

package/src/lib/_imports/objects/o-table-wrap/o-table-wrap--flexible-vert.css

@@ -0,0 +1,3 @@
+.o-table-wrap--flexible-vert > table {
+  height: 100%;
+}

package/src/lib/_imports/objects/o-table-wrap/o-table-wrap--flexible-vert.hbs

@@ -0,0 +1,5 @@
+{{#> @o-table-wrap}}
+<div class="o-table-wrap  o-table-wrap--flexible-vert">
+  {{> @table data=data }}
+</div>
+{{/@o-table-wrap}}

package/src/lib/_imports/objects/o-table-wrap/o-table-wrap--flexible-vert.readme.md

@@ -0,0 +1,18 @@
+Make [table]({{path './table' }}) width able to <strong>stretch</strong> <em>but <strong>not</strong> shrink</em>.
+
+> **?&#x20DD; Explanation**
+>
+> A `<table>` can **not** be a flex item. The trick is to [wrap it in a `<div>`][source-flex].
+
+> **ⓘ Notice**
+>
+> This class can **only** be used on a table wrapper. It has **no** affect when used on table directly.
+
+[source-flex]: https://stackoverflow.com/a/41421700/11817077 "Stack Overflow: Why does flex-box work with a div, but not a table?"
+
+<script>
+/* To open external links in new window */
+Array.from(document.links)
+  .filter(link => link.hostname != window.location.hostname)
+  .forEach(link => link.target = '_blank');
+</script>

package/src/lib/_imports/objects/o-table-wrap/o-table-wrap--overflow-hidden.css

@@ -0,0 +1,3 @@
+.o-table-wrap--overflow-hidden {
+  overflow: hidden;
+}

package/src/lib/_imports/objects/o-table-wrap/o-table-wrap--overflow-hidden.hbs

@@ -0,0 +1,5 @@
+{{#> @o-table-wrap}}
+<div class="o-table-wrap  o-table-wrap--overflow-hidden">
+  {{> @table data=data }}
+</div>
+{{/@o-table-wrap}}

package/src/lib/_imports/objects/o-table-wrap/o-table-wrap--overflow-hidden.readme.md

@@ -0,0 +1,14 @@
+Make [table]({{path './table' }}) <strong>hidden</strong>.
+
+For extra customization, see relevant <code>extra…</code> "File" from "Assets" tab.
+
+> **ⓘ Notice**
+>
+> This class can **only** be used on a table wrapper. It has **no** affect when used on table directly.
+
+<script>
+/* To open external links in new window */
+Array.from(document.links)
+  .filter(link => link.hostname != window.location.hostname)
+  .forEach(link => link.target = '_blank');
+</script>

package/src/lib/_imports/objects/o-table-wrap/o-table-wrap--overflow-scroll-extra.css

@@ -0,0 +1,2 @@
+/* This file exists solely so UI demo loads a `.html` page for it */
+/* FAQ: Without this file, the page only works via `fractal start` */

package/src/lib/_imports/objects/o-table-wrap/o-table-wrap--overflow-scroll-extra.hbs

@@ -0,0 +1,18 @@
+<dl class="demo-advanced demo-vert">
+  <dt>Vertical</dt>
+  <dd class="o-table-wrap--overflow-scroll">
+    {{> @table data=data caption="Constrained to height smaller than its minimum content height." }}
+  </dd>
+</dl>
+<dl class="demo-advanced demo-horz">
+  <dt>Horizontal</dt>
+  <dd class="o-table-wrap--overflow-scroll">
+    {{> @table data=data caption="Constrained to width smaller than its minimum content width." }}
+  </dd>
+</dl>
+<dl class="demo-advanced demo-horz demo-vert">
+  <dt>Horizontal &amp; Vertical</dt>
+  <dd class="o-table-wrap--overflow-scroll">
+    {{> @table data=data caption="Constrained to width and height smaller than its minimum content width and height." }}
+  </dd>
+</dl>

package/src/lib/_imports/objects/o-table-wrap/o-table-wrap--overflow-scroll-extra.readme.md

@@ -0,0 +1,18 @@
+Make [table]({{path './table' }}) overflow <strong>scrollable</strong> (advanced demo).
+
+> **?&#x20DD; Explanation**
+>
+> A `<table>` can **not** scroll its content. The trick is to [wrap it in a `<div>` and scroll the `<div>`][source-scroll].
+
+> **ⓘ Notice**
+>
+> This class can **only** be used on a table wrapper. It has **no** affect when used on table directly.
+
+[source-scroll]: https://stackoverflow.com/a/19794391/11817077 "Stack Overflow: Horizontal scroll on overflow of table (answer)"
+
+<script>
+/* To open external links in new window */
+Array.from(document.links)
+  .filter(link => link.hostname != window.location.hostname)
+  .forEach(link => link.target = '_blank');
+</script>

package/src/lib/_imports/objects/o-table-wrap/o-table-wrap--overflow-scroll.css

@@ -0,0 +1,5 @@
+.o-table-wrap--overflow-scroll {
+  /* NOTE: Setting `auto` for `overflow-x` or `…-y` will invisibly set both */
+  /* SEE: https://stackoverflow.com/a/6433475/11817077 */
+  overflow: auto;
+}

package/src/lib/_imports/objects/o-table-wrap/o-table-wrap--overflow-scroll.hbs

@@ -0,0 +1,5 @@
+{{#> @o-table-wrap}}
+<div class="o-table-wrap  o-table-wrap--overflow-scroll">
+  {{> @table data=data }}
+</div>
+{{/@o-table-wrap}}

package/src/lib/_imports/objects/o-table-wrap/o-table-wrap--overflow-scroll.readme.md

@@ -0,0 +1,20 @@
+Make [table]({{path './table' }}) overflow <strong>scrollable</strong>.
+
+For extra customization, see relevant <code>extra…</code> "File" from "Assets" tab.
+
+> **?&#x20DD; Explanation**
+>
+> A `<table>` can **not** scroll its content. The trick is to [wrap it in a `<div>` and scroll the `<div>`][source-scroll].
+
+> **ⓘ Notice**
+>
+> This class can **only** be used on a table wrapper. It has **no** affect when used on table directly.
+
+[source-scroll]: https://stackoverflow.com/a/19794391/11817077 "Stack Overflow: Horizontal scroll on overflow of table (answer)"
+
+<script>
+/* To open external links in new window */
+Array.from(document.links)
+  .filter(link => link.hostname != window.location.hostname)
+  .forEach(link => link.target = '_blank');
+</script>

package/src/lib/_imports/objects/o-table-wrap/o-table-wrap.hbs

@@ -0,0 +1,11 @@
+<div>
+  <p>{{> @text-of-one-paragraph }}</p>
+</div>
+{{#> @partial-block}}
+<div>
+  <p class="c-message c-message--type-info c-message--scope-section">To render a table, choose a modifier class from the navigation panel.</p>
+</div>
+{{/@partial-block}}
+<div>
+  <p>{{> @text-of-one-paragraph }}</p>
+</div>

package/src/lib/_imports/objects/o-table-wrap/readme.md

@@ -0,0 +1,24 @@
+Make [table]({{path './table' }}) fit inside a flexible item.
+
+For client customization examples, see relevant <code>example.…-….css</code> "File" from "Assets" tab.
+
+> **?&#x20DD; Explanation**
+>
+> A `<table>` can **not** be a flex item. The trick is to [wrap it in a `<div>`][source-flex].
+>
+>
+> A `<table>` can **not** scroll its content. The trick is to [wrap it in a `<div>` and scroll the `<div>`][source-scroll].
+
+> **ⓘ Notice**
+>
+> This class can **only** be used on a table wrapper. It has **no** affect when used on table directly.
+
+[source-flex]: https://stackoverflow.com/a/41421700/11817077 "Stack Overflow: Why does flex-box work with a div, but not a table?"
+[source-scroll]: https://stackoverflow.com/a/19794391/11817077 "Stack Overflow: Horizontal scroll on overflow of table (answer)"
+
+<script>
+/* To open external links in new window */
+Array.from(document.links)
+  .filter(link => link.hostname != window.location.hostname)
+  .forEach(link => link.target = '_blank');
+</script>

package/src/lib/_imports/objects/o-table-wrap.css

@@ -0,0 +1,5 @@
+@import url('./o-table-wrap/o-table-wrap--flexible-horz.css');
+@import url('./o-table-wrap/o-table-wrap--flexible-vert.css');
+@import url('./o-table-wrap/o-table-wrap--overflow-hidden.css');
+@import url('./o-table-wrap/o-table-wrap--overflow-scroll.css');
+@import url('./o-table-wrap/o-table-wrap--overflow-scroll-extra.css');

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

@@ -20,9 +20,12 @@
     --global-color-primary--xx-light-rgb: 255, 255, 255;
   --global-color-primary--x-light: #F4F4F4;
     --global-color-primary--x-light-rgb: 244, 244, 244;
-  --global-color-primary--light: #C6C6C6;
+  --global-color-primary--light: #D7D7D7;
+    --global-color-primary--light-rgb: 198, 198, 198;
   --global-color-primary--normal: #AFAFAF;
+    --global-color-primary--normal-rgb: 175, 175, 175;
   --global-color-primary--dark: #707070;
+    --global-color-primary--dark-rgb: 112, 112, 112;
   --global-color-primary--x-dark: #484848;
     --global-color-primary--x-dark-rgb: 72, 72, 72;
   --global-color-primary--xx-dark: #222222;
@@ -39,21 +42,36 @@
   --global-color-accent--weak: #6039cc40; /* similar to #E3D7FD on #f4f4f4 */
 
   /* State */
+  --global-color-info--x-dark: var(--global-color-primary--xx-dark);
   --global-color-info--dark: var(--global-color-primary--x-dark);
   --global-color-info--normal: var(--global-color-primary--normal);
-  --global-color-info--light: var(--global-color-primary--x-light);
-  --global-color-success--dark: #237119;
+  --global-color-info--light: var(--global-color-primary--light);
+  --global-color-info--x-light: var(--global-color-primary--x-light);
+
+  --global-color-info--weak: rgba( var(--global-color-primary--normal), 0.125 );
+
+  --global-color-success--x-light: #E7F9E5;
+  --global-color-success--light: #AFECA7;
   --global-color-success--normal: #43d130;
+  --global-color-success--dark: #237119;
+  --global-color-success--x-dark: #263824;
+
   --global-color-success--weak: #43d13020;
-  --global-color-success--alt: var(--global-color-warning--normal);
-  --global-color-success--alt-weak: var(--global-color-warning--weak);
-  --global-color-warning--dark: #717411;
-  --global-color-warning--normal: #c7ce1d;
-  --global-color-warning--weak: #c7ce1d20;
-  --global-color-warning--alt: var(--global-color-accent--dark);
-  --global-color-warning--alt-weak: var(--global-color-accent--weak);
-  --global-color-danger--dark: #AF1818;
+
+  --global-color-warning--x-light: #FBF4E1;
+  --global-color-warning--light: #FAE19E;
+  --global-color-warning--normal: #DFA70C;
+  --global-color-warning--dark: #735911;
+  --global-color-warning--x-dark: #3A3320;
+
+  --global-color-warning--weak: #DFA70C20;
+
+  --global-color-danger--x-light: #FDF1F1;
+  --global-color-danger--light: #F8C9C9;
   --global-color-danger--normal: #F09393;
+  --global-color-danger--dark: #AF1818;
+  --global-color-danger--x-dark: #3C3030;
+
   --global-color-danger--weak: #F0939320;
 
   /* Generic */

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

@@ -49,9 +49,11 @@ Styleguide Settings.CustomProperties.Font
   --global-font-weight--regular: 400;
   --global-font-weight--medium: 500;
   --global-font-weight--bold: 700;
+  --global-font-weight--black: 800;
 
   /* NOTE: Short names to increase adoption (opinions welcome) */
   --regular: 400;
   --medium: 500;
   --bold: 700;
+  --black: 800;
 }

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

@@ -1,3 +1,14 @@
-<link rel="stylesheet" href="{{path '/elements/links.css'}}" />
+{{!-- FAQ: The `class` var may be set by patterns including this template --}}
 
-{{> @links }}
+<dl>
+  <dt>Standard</dt>
+  <dd><span class="x-link">default</span></dd>
+  <dd><span class="x-link x-link--hover">:hover</span></dd>
+  <dd><span class="x-link x-link--active">:active</span></dd>
+  <dd><span class="x-link x-link--hover x-link--active">:hover and :active</span></dd>
+  <dt>Irregular</dt>
+  <dd><span class="x-link--irregular">default</span></dd>
+  <dd><span class="x-link x-link--irregular--hover">:hover</span></dd>
+  <dd><span class="x-link x-link--irregular--active">:active</span></dd>
+  <dd><span class="x-link x-link--irregular--hover x-link--irregular--active">:hover and :active</span></dd>
+</dl>

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

@@ -1,6 +1,3 @@
-@import url('../settings/color.css');
-@import url('../settings/border.css');
-
 .x-link {
   color: var(--global-color-link-on-light--normal);
 
@@ -11,8 +8,28 @@
 .x-link--hover {
   text-decoration-line: underline;
   text-decoration-style: solid;
+
+  /* To overwrite Bootstrap (on Client) */
+  color: var(--global-color-link-on-light--normal);
+  text-decoration-thickness: var(--global-border-width--normal);
 }
 .x-link--active {
   text-decoration-line: underline;
   text-decoration-style: dotted;
 }
+
+.x-link--irregular {
+  @extend .x-link;
+
+  text-decoration-line: underline;
+}
+.x-link--irregular--hover {
+  @extend .x-link--hover;
+
+  text-decoration-style: dashed;
+}
+.x-link--irregular--active {
+  @extend .x-link--active;
+
+  text-decoration-style: dotted;
+}

package/src/lib/_imports/trumps/s-affixed-input-wrapper/config.yml

@@ -1,2 +1,3 @@
-# The form elements used rely on Bootstrap and CMS
-preview: '@preview.bootstrap-cms'
+context:
+  shouldLoadBootstrap: true # not yet tested without Bootstrap
+  shouldLoadCMS: true # temporary dependence, until proven to work on Portal

package/src/lib/_imports/trumps/s-affixed-input-wrapper/s-affixed-input-wrapper.hbs

@@ -1,32 +1,32 @@
-<link rel="stylesheet" href="{{path '/elements/form.cms.css'}}" />
-
 <dl>
   <dt>Prefix</dt>
-  <dd class="s-affixed-input-wrapper s-affixed-input-wrapper--prefix">
-    <label for="field-dollars">How many dollars to you have?</label>
-
-    <span class="s-affixed-input-wrapper__prefix">$</span>
-    <input
-      type="number"
-      name="dollars"
-      id="field-dollars"
-      inputmode="numeric"
-      step="0.01"
-      min="0.01"
-    />
+  <dd>
+    <div class="s-affixed-input-wrapper s-affixed-input-wrapper--prefix">
+      <label for="field-dollars">How many dollars to you have?</label>
+      <span class="s-affixed-input-wrapper__prefix">$</span>
+      <input
+        type="number"
+        name="dollars"
+        id="field-dollars"
+        inputmode="numeric"
+        step="0.01"
+        min="0.01"
+      />
+    </div>
   </dd>
   <dt>Suffix</dt>
-  <dd class="s-affixed-input-wrapper s-affixed-input-wrapper--suffix">
-    <label for="field-usd">How many US Dollars to you have?</label>
-
-    <input
-      type="number"
-      name="usd"
-      id="field-usd"
-      inputmode="numeric"
-      step="0.01"
-      min="0.01"
-    />
-    <span class="s-affixed-input-wrapper__suffix">$</span>
+  <dd>
+    <div class="s-affixed-input-wrapper s-affixed-input-wrapper--suffix">
+      <label for="field-usd">How many US Dollars to you have?</label>
+      <input
+        type="number"
+        name="usd"
+        id="field-usd"
+        inputmode="numeric"
+        step="0.01"
+        min="0.01"
+      />
+      <span class="s-affixed-input-wrapper__suffix">$</span>
+    </div>
   </dd>
 </dl>

package/src/lib/_imports/trumps/s-affixed-input-wrapper.css

@@ -1,15 +1,11 @@
-@import url("../settings/border.css");
-
-
-
 /* Layout */
 
 .s-affixed-input-wrapper:not(
-  .checkboxinput,
-  .radio,
-  .select,
-  .checkboxselectmultiple,
-  .textarea
+  .checkboxinput, .has-type-check
+  .radio, .has-type-radio
+  .select, .has-type-select
+  .checkboxselectmultiple, .has-select
+  .textarea, .has-textarea
 ) {
   display: grid;
   align-items: start;
@@ -40,8 +36,10 @@
 .s-affixed-input-wrapper input { grid-area: input; }
 .s-affixed-input-wrapper__prefix { grid-area: prefix; }
 .s-affixed-input-wrapper__suffix { grid-area: suffix; }
-.s-affixed-input-wrapper .help-text { grid-area: help; }
-.s-affixed-input-wrapper .field-errors { grid-area: error; }
+.s-affixed-input-wrapper .help-text,
+.s-affixed-input-wrapper .c-form__help { grid-area: help; }
+.s-affixed-input-wrapper .field-errors,
+.s-affixed-input-wrapper .c-form__errors { grid-area: error; }
 
 
 

package/src/lib/_imports/trumps/s-cms-nav.css

@@ -9,3 +9,14 @@ Markup: s-cms-nav.html
 
 Styleguide Trumps.Scopes.CMSNav
 */
+
+ul.s-cms-nav {
+  /* To overwrite @tacc/core-styles */
+  padding-left: 0; /* copied from Bootstrap */
+  margin-bottom: 0; /* overwrite html-elements.css */
+}
+
+.s-cms-nav a:hover {
+  /* To overwrite @tacc/core-styles */
+  text-decoration: none; /* copied from Bootstrap */
+}

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

@@ -0,0 +1,30 @@
+/*
+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
+*/
+
+.s-header .dropdown-item {
+  color: #212529;
+}
+.s-header .dropdown-item:focus,
+.s-header .dropdown-item:hover {
+  color: #16181b;
+  text-decoration: none;
+  background-color: #f8f9fa;
+}
+.s-header .dropdown-item.active,
+.s-header .dropdown-item:active {
+  color: #fff;
+  text-decoration: none;
+  background-color: #007bff
+}
+
+.s-header input {
+  font-family: inherit;
+}

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

@@ -15,6 +15,7 @@ Markup: s-header.html
 
 Styleguide Trumps.Scopes.Header
 */
+@import url("./s-header.bootstrap.css");
 
 /* WARNING: NO-R/EM: Until Frontera CMS drops Bootstrap 3.7.1 (for old design)…
             `em` nor `rem` was not allowed because results were not consistent.

package/src/lib/_imports/trumps/s-inline-dl.css

@@ -12,6 +12,7 @@ Markup:
 
 Styleguide Trumps.Scopes.InlineDescriptionList
 */
+
 dl.s-inline-dl dt {
   display: block;
   float: left;

package/src/lib/_imports/trumps/s-irregular-links/config.yml

@@ -1,8 +1,4 @@
 context:
   supportStyles:
-    - /elements/links.css
-    - /elements/links/docs.css
-    - /components/c-button.css
+    - /assets/tools/x-link/demo.css
 label: Links (Irregular)
-variants:
-  - name: default

package/src/lib/_imports/trumps/s-irregular-links.css

@@ -1,19 +1,14 @@
-.s-irregular-links a {
-  text-decoration-line: underline;
-}
-.s-irregular-links a:hover {
-  text-decoration-style: dashed;
-}
-.s-irregular-links a:active {
-  text-decoration-style: dotted;
-}
+@import url('../tools/x-link.css');
 
+.s-irregular-links a,
 .s-irregular-links .c-button--as-link {
-  text-decoration-line: underline;
+  @extend .x-link--irregular;
 }
+.s-irregular-links a:hover,
 .s-irregular-links .c-button--as-link:hover {
-  text-decoration-style: dashed;
+  @extend .x-link--irregular--hover;
 }
+.s-irregular-links a:active,
 .s-irregular-links .c-button--as-link:active {
-  text-decoration-style: dotted;
+  @extend .x-link--irregular--active;
 }

package/src/lib/_imports/trumps/s-portal-nav.css

@@ -15,6 +15,16 @@ Styleguide Trumps.Scopes.PortalNav
             UPDATE: As of PR #312, this has likely changed (untested). */
 
 .s-portal-nav {
-  /* Override `.navbar` */
+  /* To override Bootstrap `.navbar` */
   text-transform: none;
 }
+ul.s-portal-nav {
+  /* To overwrite @tacc/core-styles */
+  padding-left: 0; /* copied from Bootstrap */
+  margin-bottom: 0; /* overwrite html-elements.css */
+}
+
+.s-portal-nav a:hover {
+  /* To overwrite @tacc/core-styles */
+  text-decoration: none; /* copied from Bootstrap */
+}