@tacc/core-styles 2.53.1 → 2.53.3

package/src/lib/_imports/bootstrap5/utilities/link/config.yml

@@ -0,0 +1,15 @@
+label: Link
+context:
+  shouldLoadBootstrap5: true
+  groups:
+    - title: Colored links
+      types:
+      - type: primary
+      - type: secondary
+      - type: success
+      - type: danger
+      - type: warning
+      - type: info
+      - type: light
+      - type: dark
+      - type: body-emphasis

package/src/lib/_imports/bootstrap5/utilities/link/link.hbs

@@ -0,0 +1,17 @@
+{{#groups}}
+<dl>
+    <dt>{{title}}</dt>
+    {{#types}}
+    <dd><a href="#" class="link-{{type}}">{{type}}</a></dd>
+    {{/types}}
+</dl>
+{{/groups}}
+<dl>
+  <dt>Summary</dt>
+  <dd>
+    <details>
+      <summary class="link-primary">Toggle</summary>
+      <p>Content</p>
+    </details>
+  </dd>
+</dl>

package/src/lib/_imports/bootstrap5/utilities/link/readme.md

@@ -0,0 +1,3 @@
+To skin [Bootstrap 5 colored links](https://getbootstrap.com/docs/5.3/helpers/colored-links/).
+
+<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

package/src/lib/_imports/bootstrap5/utilities/link.css

@@ -0,0 +1,61 @@
+@import url("../../tools/x-link.css");
+
+@import url("./link.selectors.css");
+
+:not(a):is(
+  .link-primary,
+  .link-secondary
+) {
+  @mixin link;
+
+  &:--link-disabled {
+    @mixin link--disabled;
+  }
+  &:hover {
+    @mixin link--hover;
+  }
+  &:active {
+    @mixin link--active;
+  }
+}
+
+.link-primary {
+  &,
+  &:hover,
+  &:active,
+  &:focus,
+  &:focus-visible,
+  &:--link-disabled {
+    color: var(--global-color-accent--normal) !important;
+    text-decoration-color: currentColor !important;
+  }
+}
+
+.link-secondary {
+  &,
+  &:hover,
+  &:active,
+  &:focus,
+  &:focus-visible,
+  &:--link-disabled {
+    color: var(--global-color-secondary--normal) !important;
+    text-decoration-color: currentColor !important;
+  }
+}
+
+.link-success,
+.link-danger,
+.link-warning,
+.link-info,
+.link-light,
+.link-dark,
+.link-body-emphasis {
+  &,
+  &:hover,
+  &:active,
+  &:focus,
+  &:focus-visible {
+    color: inherit !important;
+    text-decoration-color: currentColor !important;
+  }
+}

package/src/lib/_imports/bootstrap5/utilities/link.selectors.css

@@ -0,0 +1,5 @@
+@custom-selector :--link-disabled
+    a:not([href]),
+    :disabled,
+    [aria-disabled="true"],
+    .disabled;

package/src/lib/_imports/components/bootstrap.nav-tabs.css

@@ -7,6 +7,7 @@
 
 .nav-tabs {
   @extend .x-tabs;
+  border-bottom: none;
 }
 ul.nav-tabs {
   padding-left: unset; /* overwrite core-styles.cms.css */

package/src/lib/_imports/components/c-button.css

@@ -23,7 +23,7 @@
   align-items: center;
   justify-content: center;
 
-  line-height: 1; /* to make consistent vertical alignment of icons */
+  line-height: 1.5; /* to make consistent vertical alignment of icons */
   gap: 0.5ch; /* to add space between icons and text */
 
   /* To ensure identical <button> and <a> instances have same width */

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

@@ -3,4 +3,4 @@
 
 @import url("./bootstrap4/components/btn.css");
 @import url("./bootstrap4/components/card.css");
-@import url("./bootstrap4/utilities/color.css");
+@import url("./bootstrap4/utilities/color-text.css");

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

@@ -0,0 +1,4 @@
+/*! core-styles.bootstrap5.css */
+/* DO NOT ADD STYLES HERE; ONLY IMPORT OTHER STYLESHEETS */
+
+@import url("./bootstrap5/utilities/link.css");

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

@@ -1,2 +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` */
+/* FAQ: Without this file, the page only works via `fractality start` */

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

@@ -3,9 +3,10 @@
 @define-mixin link {
   color: var(--global-color-accent--normal);
 
-  text-decoration: none;
   text-underline-offset: 0.2em;
+  text-decoration-line: none;
   text-decoration-thickness: var(--global-border-width--normal);
+  text-decoration-color: currentColor;
 }
 /* DEPRECATED */
 .x-link {
@@ -27,7 +28,6 @@
 
   /* To overwrite Bootstrap (on Client) */
   color: var(--global-color-accent--normal);
-  text-decoration-thickness: var(--global-border-width--normal);
 }
 /* DEPRECATED */
 .x-link--hover {

package/src/lib/_imports/tools/x-tabs.skin.css

@@ -18,6 +18,9 @@
   font-size: var(--global-font-size--medium);
   font-weight: var(--medium);
 }
+.x-tabs__tab:is(label) {
+  margin-bottom: 0; /* to undo `elements/form.css` */
+}
 .x-tabs__tab:is(a) {
   text-decoration: none;
 }

package/src/lib/_imports/trumps/_s-cms-nav/_s-cms-nav.hbs

@@ -1,25 +1,103 @@
-<!-- FAQ:
-
-This is the markup of the #s-header, as of 2020-03-11,
-from https://frontera-portal.tacc.utexas.edu/. It has:
-
-- Bootstrap class names
-- extra markup (`a > span`)
--->
-<ul class="s-cms-nav navbar-nav mr-auto">
-  <li class="nav-item">
-    <a class="nav-link" href="/user-guide/"><span>User Guide</span></a>
+<!-- WARNING: Has Bootstrap class names (don't mimic unless using Bootstrap) -->
+<ul class="s-cms-nav  navbar-nav  mr-auto">
+  <li class="nav-item dropdown">
+    <button
+      class="nav-link dropdown-toggle"
+      data-toggle="dropdown"
+      aria-haspopup="true"
+      aria-expanded="false"
+      aria-controls="nav-menu-{{default id 0}}-1"
+      id="nav-link-{{default id 0}}-1"
+    >
+      Guides
+      <span class="sr-only">Toggle Dropdown</span>
+    </button>
+    <nav
+      class="dropdown-menu"
+      role="menu"
+      id="nav-menu-{{default id 0}}-1"
+      aria-labelledby="nav-link-{{default id 0}}-1"
+    >
+      <a
+        class="dropdown-item"
+        href="#"
+        role="menuitem"
+        aria-label="Opens in new window.">
+          Getting Started
+      </a>
+      <a
+        class="dropdown-item"
+        href="#"
+        role="menuitem"
+        aria-label="Opens in new window."
+      >
+        Portal Access
+      </a>
+      <a
+        class="dropdown-item"
+        href="#"
+        role="menuitem"
+        aria-label="Opens in new window.">
+        User Guide
+      </a>
+    </nav>
   </li>
 
-  <li class="nav-item">
-    <a class="nav-link" href="/news/"><span>News</span></a>
+  <li class="nav-item dropdown">
+    <button
+      class="nav-link"
+      id="nav-link-{{default id 0}}-2"
+    >
+      About
+    </button>
+    <button
+      type="button"
+      class="nav-link dropdown-toggle dropdown-toggle-split"
+      data-toggle="dropdown"
+      aria-haspopup="true"
+      aria-expanded="false"
+      aria-controls="nav-menu-{{default id 0}}-2"
+    >
+      <span class="sr-only">Toggle Dropdown</span>
+    </button>
+    <nav
+      class="dropdown-menu"
+      role="menu"
+      id="nav-menu-{{default id 0}}-2"
+      aria-labelledby="nav-link-{{default id 0}}-2"
+    >
+      <a
+        class="dropdown-item"
+        href="#"
+        role="menuitem"
+      >
+        Portal Technology Stack
+      </a>
+      <a
+        class="dropdown-item"
+        href="#"
+        role="menuitem"
+      >
+        Portals List
+      </a>
+    </nav>
   </li>
 
   <li class="nav-item">
-    <a class="nav-link" href="/about/"><span>About</span></a>
+    <a
+      class="nav-link"
+      href="#"
+    >
+      ML Workbench
+    </a>
   </li>
 
   <li class="nav-item">
-    <a class="nav-link" href="/help/"><span>Help</span></a>
+    <a
+      class="nav-link"
+      href="#"
+    >
+      AI Sandbox
+    </a>
   </li>
 </ul>

package/src/lib/_imports/trumps/_s-portal-nav/_s-portal-nav.hbs

@@ -1,31 +1,51 @@
-<!-- FAQ:
-
-This is the markup of the #s-header, as of 2021-06,
-from https://frontera-portal.tacc.utexas.edu/. It has:
-
-- Bootstrap class names
-- Bootstrap attributes
--->
+<!-- WARNING: Has Bootstrap class names (don't mimic unless using Bootstrap) -->
 <ul class="s-portal-nav navbar-nav">
   <!-- When user is not logged in, there are zero dropdown(-*) classes -->
   <li class="nav-item dropdown">
-    <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <button
+      class="nav-link dropdown-toggle"
+      data-toggle="dropdown"
+      aria-haspopup="true"
+      aria-expanded="false"
+      aria-controls="nav-menu-{{default id 0}}-portal-1"
+      id="nav-link-{{default id 0}}-portal-1"
+    >
       <i class="icon icon-user"></i>
-      <span>username</span>
+      username
       <span class="sr-only">Toggle Dropdown</span>
-    </a>
-    <nav class="dropdown-menu dropdown-menu-right">
-      <a class="dropdown-item" href="/workbench/dashboard">
-        <i class="icon icon-dashboard"></i> My Dashboard
+    </button>
+    <nav
+      class="dropdown-menu dropdown-menu-right"
+      id="nav-menu-{{default id 0}}-portal-1"
+      aria-labelledby="nav-link-{{default id 0}}-portal-1"
+    >
+      <a
+        class="dropdown-item"
+        href="#"
+      >
+        <i class="icon icon-dashboard"></i>
+        My Dashboard
       </a>
-      <a class="dropdown-item" href="/workbench/onboarding/admin">
-        <i class="icon icon-approved-boxed"></i> Onboarding Admin
+      <a
+        class="dropdown-item"
+        href="#"
+      >
+        <i class="icon icon-approved-boxed"></i>
+        Onboarding Admin
       </a>
-      <a class="dropdown-item" href="/accounts/profile/">
-        <i class="icon icon-gear"></i> My Account
+      <a
+        class="dropdown-item"
+        href="#"
+      >
+        <i class="icon icon-gear"></i>
+        My Account
       </a>
-      <a class="dropdown-item" href="/accounts/logout">
-        <i class="icon icon-user"></i> Log Out
+      <a
+        class="dropdown-item"
+        href="#"
+      >
+        <i class="icon icon-user"></i>
+        Log Out
       </a>
     </nav>
   </li>

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

@@ -5,7 +5,7 @@
         src="https://cdn.jsdelivr.net/gh/TACC/Core-CMS-Custom@21da26d/digitalrocks_assets/NSF-DigitalRocks-Logo-White.svg"
         alt="Vector Logo"
       {{else}}
-        src="http://cep.tacc.utexas.edu/static/site_cms/img/org_logos/portal.png"
+        src="https://cdn.jsdelivr.net/gh/TACC/Core-CMS-Custom@79b8ac4/apcd_cms/src/taccsite_custom/apcd_cms/static/apcd_cms/img/org_logos/apcd-white.png"
         alt="Raster Logo"
       {{/if}}
       class="portal-logo"
@@ -17,6 +17,6 @@
   </button>
 
   <div class="collapse navbar-collapse" id="navbarExpandTarget-{{default id 0}}">
-    {{> @s-cms-nav}} {{> @s-portal-nav}}
+    {{> @s-cms-nav id=id }} {{> @s-portal-nav id=id }}
   </div>
 </nav>

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

@@ -136,9 +136,17 @@ Styleguide Trumps.Scopes.Header
 }
 
 @define-mixin header--is-expanded {
+  &.s-header .nav-item {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
   &.s-header .nav-link {
     padding-block: 8px;
   }
+  &.s-header .dropdown-menu {
+    flex-basis: 100%;
+  }
 }
 @media (--x-narrow-and-below) {
   .navbar-expand-sm { @mixin header--is-expanded; }
@@ -159,12 +167,18 @@ Styleguide Trumps.Scopes.Header
 .s-header .nav-item.active .nav-link {
   border-color: var(--global-color-secondary--light);
 }
-/* HACK: Using an ID selector, because Bootstrap has overspecific selectors */
-#s-header .nav-link,
-/* HACK: Support `span.nav-link` having children `a` and `a.dropdown-toggle-split` */
-#s-header .nav-link > a {
+.s-header .nav-link {
   color: var(--header-text-color);
 }
+.s-header button.nav-link {
+  font-weight: inherit;
+  background-color: inherit;
+}
+/* To support Bootstrap "Split button" */
+/* https://getbootstrap.com/docs/4.6/components/dropdowns/#split-button */
+.s-header .nav-link:has(+ .dropdown-toggle-split) {
+  padding-right: 0;
+}
 
 
 /* Search */

package/dist/bootstrap4/utilities/color.css

@@ -1 +0,0 @@
-/*! @tacc/core-styles 2.53.1+ | MIT | github.com/TACC/Core-Styles */.text-primary:not(a){color:inherit!important}.text-secondary:not(a){color:var(--global-color-accent--secondary)!important}.text-muted{color:inherit!important;opacity:.5}.text-black:not(a),.text-dark:not(a){color:var(--global-color-primary--xx-dark)!important}.text-light:not(a),.text-white:not(a){color:var(--global-color-primary--xx-light)!important}[class*=text-]:not(a):not(.text-primary,.text-secondary,.text-muted,.text-dark,.text-light,.text-black,.text-white,.text-black-50,.text-white-50){color:inherit!important}a.text-primary:is(:link,:visited,:hover,:focus){color:var(--global-color-accent--normal)!important}a.text-secondary:is(:link,:visited,:hover,:focus){color:var(--global-color-accent--secondary)!important}a[class*=text-]:not(.text-primary,.text-secondary):is(:link,:visited,:hover,:focus){color:var(--global-color-accent--normal)!important}

package/dist/fractal.server.refresh.css

@@ -1 +0,0 @@
-/*! @tacc/core-styles 2.53.1+ | MIT | github.com/TACC/Core-Styles */

package/src/lib/_imports/bootstrap4/utilities/color/color.hbs

@@ -1 +0,0 @@
-{{> @color--text }}

package/src/lib/_imports/bootstrap4/utilities/color.css

@@ -1 +0,0 @@
-@import url("./color-text.css");