@tacc/core-styles 0.5.1

package/source/_imports/trumps/s-header.css

@@ -0,0 +1,181 @@
+/*
+Header
+
+Styles for elements within a header that has third-party code:
+
+- FontAwesome icons
+  (for Portal navigation)
+- Bootstrap
+  (for CMS navigation)
+  (for Portal navigation)
+- a subset of Bootstrap 3.3.7
+  (for CMS body content, can affect navigation)
+
+Markup: s-header.html
+
+Styleguide Trumps.Scopes.Header
+*/
+
+/* 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.
+            UPDATE: As of PR #312, this has likely changed (untested). */
+
+.s-header {
+  font-size: 16px; /* NO-R/EM: Overwrite `bootstrap.3.3.7.css` */
+  line-height: 1.4; /* `body` line-height differs between CMS, Portal, Docs */
+
+  /* FAQ: Asssigning this font is only necessary for the User Guide,
+          because it has a different `body` font. Otherwise, this style
+          repeats the CMS and Portal `body` font. But, with this style,
+          the header may be moved to a future page/site without losing font */
+  /* TODO: Find a way to be safe, but not redundant */
+  font-family: var(--global-font-family);
+  /* Copied from Portal (via `body`) */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  /* To hide border, set this in theme to match `--header-bkgd-color` value */
+  border-bottom: 1px solid env(--header-major-border-color);
+}
+
+/* Affiliation */
+
+/* SEE: taccsite_cms/static/site_cms/css/src/_imports/branding_logos.css */
+
+/* Logo */
+
+.s-header .navbar-brand {
+  /* If branding is short enough, then align position of first CMS nav link with Portal "Dashboard" header */
+  /* WARNING: This is a manual value; if Portal interface changes, then this may need to change */
+  min-width: 176px;
+  margin-right: 16px; /* NO-R/EM: 1rem (from Bootstrap via `.navbar-brand`) */
+  padding: 0;
+
+  color: env(--header-text-color);
+  /* text-decoration: none; */ /* already provided by Bootstrap */
+}
+
+/* Navigation */
+
+/* On wide viewport, prevent header resize from dynamic content */
+/* CAVEAT: This is only for Portal and Docs which dynamically load content */
+@media only screen and (min-width: 1201px) {
+  .s-header.navbar {
+    height: 50px;
+  }
+}
+
+.s-header.navbar {
+  /* Make horizontal padding match the horizontal content buffer in Portal */
+  /* FAQ: The `calc()` keeps track of disparate source of space values */
+  /* `16px` = `1rem` from Portal (via `#sidebar .nav-content`) */
+  /* `20px` from Portal (via `.nav-link`) */
+  --nav-padding-vert: 5px;
+  --nav-padding-horz: calc(16px + 20px);
+
+  background-color: env(--header-bkgd-color);
+  padding: var(--nav-padding-vert) var(--nav-padding-horz);
+}
+
+/* Navigation: Links */
+
+.s-header .nav-link {
+  --line-height: 24px;
+  --border-width: 4px;
+  --border-offset: calc(var(--nav-padding-vert) - var(--border-width));
+  --border-color: rgb(213, 181, 124);
+
+  /* The nav vertical padding does not match the link border, so the alignment
+     of the link border with the bottom of the header is off by small amount */
+  position: relative;
+  top: var(--border-offset);
+
+  line-height: var(--line-height);
+
+  /* If link text uses 2 lines, header grows taller (but it must not do so) */
+  white-space: nowrap;
+}
+.s-header .nav-link:hover,
+.s-header .nav-link:focus,
+.s-header .nav-link:active,
+.s-header .nav-item.active .nav-link {
+  border-width: 0 0 var(--border-width);
+  border-style: solid;
+  border-color: var(--border-color);
+  margin-bottom: calc(var(--border-width) * -1);
+}
+/* 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 {
+  color: env(--header-text-color);
+  /* text-decoration: none; */ /* already provided by Bootstrap */
+}
+
+/* Navigation: Links: Responsive Design */
+
+/* Tweak Bootstrap `_nav.scss` (which selects via `navbar-expand-` class) */
+.s-header[class*="navbar-expand-"] .navbar-nav .nav-link {
+  padding-top: 8px; /* NO-R/EM: 0.5rem (from Bootstrap) */
+  padding-bottom: 8px; /* NO-R/EM: 0.5rem (from Bootstrap) */
+
+  padding-right: 14px; /* NO-R/EM: .875rem (overwrite Bootstrap) */
+  padding-left: 14px; /* NO-R/EM: .875rem (overwrite Bootstrap) */
+}
+
+/* Search */
+
+/* Create a line between search bar and login */
+/* FAQ: The line should only exist if both elements are present */
+.s-header .s-search-bar ~ .s-portal-nav {
+  border-left: 1px solid env(--header-minor-border-color);
+
+  margin-left: 12px;
+}
+
+/* Dropdown */
+
+.dropdown-menu {
+  font-size: 16px; /* NO-R/EM: 1rem (from Bootstrap via `.dropdown-menu`) */
+}
+
+/* Icons */
+
+/* HACK: Using FontAwesome as placeholder */
+.s-header [class*="fa-"] {
+  width: 27px; /* NO-R/EM: 1.25em (from Portal `.fa`—FP-228 will deprecate it) */
+  text-align: center;
+}
+
+/* Theme-based Icon Colors */
+
+/* Sets theme-based colors for selectors in themes that use third party images for icons or need color overrides. */
+/* This will eventually be superceded by GH-101. */
+
+/* For black icons:
+  - create a selector definition in s-header.css:
+    .selector-target {
+      filter: env(--targeted-selector);
+    };
+  - set the environment_variables value in theme.*.json to inverted value:
+    "environment-variables": {
+      ...
+      "--targeted-selector": "invert(100%)"
+    }
+*/
+
+/* For themed icons using a color:
+  - create a selector definition in s-header.css:
+    .selector-target {
+      mix-blend-mode: "overlay";
+      filter: env(--selector-theme-color);
+    };
+  - set the environment_variables value in theme.*.json to the desired color value:
+    "environment-variables": {
+      ...
+      "--selector-theme-color": "#ABCDEF"
+    } */
+
+.navbar-toggler-icon  {
+  filter: env(--menu-toggle-icon);
+}

package/source/_imports/trumps/s-header.html

@@ -0,0 +1,46 @@
+<!-- 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
+  (also via `./s-portal-nav.html`)
+  (also via `./s-cms-nav.html`)
+- Bootstrap attributes
+  (also via `./s-portal-nav.html`)
+- multiple internal scope (`s-`) classes
+  (only via `./s-portal-nav.html`)
+  (only via `./s-cms-nav.html`)
+- FontAwesome class names
+  (only via `./s-portal-nav.html`)
+- illegally-nested markup (`ul > div > li`)
+  (only via `./s-portal-nav.html`)
+-->
+<nav id="s-header" class="s-header  navbar navbar-expand-lg navbar-dark">
+
+  <a class="navbar-brand" href="/">
+    <img
+      src="/static/site_cms/img/org_logos/portal.png"
+      alt="Portal Logo"
+      class="nav-logo-double nav-logo-frontera-double"
+    />
+  </a>
+
+  <button
+    class="navbar-toggler"
+    type="button"
+    data-toggle="collapse"
+    data-target="#navbarsExpandTarget"
+    aria-controls="navbarsExpandTarget"
+    aria-expanded="false"
+    aria-label="Toggle navigation"
+  >
+    <span class="navbar-toggler-icon"></span>
+  </button>
+
+  <div class="collapse navbar-collapse" id="navbarsExpandTarget">
+    {% include "./s-cms-nav.html" %}
+
+    {% include "./s-portal-nav.html" %}
+  </div>
+</nav>

package/source/_imports/trumps/s-inline-dl.css

@@ -0,0 +1,35 @@
+/*
+"Inline" Description List
+
+Of `<dl>` (description lists), make terms in-line with descritpions.
+
+Markup:
+<dl class="s-inline-dl">
+  <dt>Apple</dt><dd>Red round fruit.</dd>
+  <dt>Dog</dt><dd>Loud loyal mammal.</dd>
+  <dt>Star</dt><dd>Giant fire ball.</dd>
+</dl>
+
+Styleguide Trumps.Scopes.InlineDescriptionList
+*/
+dl.s-inline-dl dt {
+  display: block;
+  float: left;
+
+  /* Remove space between <dt> and <dd> (from our styles) */
+  /* SEE: ../elments/html-elements.html */
+  margin-bottom: 0;
+
+  font-weight: var(--bold);
+}
+dl.s-inline-dl dd {
+  clear: right;
+
+  /* Remove space between <dd>'s (from Bootstrap) */
+  margin-bottom: 0;
+}
+dl.s-inline-dl dt::after {
+  content: ':';
+
+  margin-inline-end: 0.25em;
+}

package/source/_imports/trumps/s-portal-nav.css

@@ -0,0 +1,20 @@
+/*
+Portal Navigation
+
+Styles for elements within Portal navigation that has third-party code:
+
+- Bootstrap 4.3.1
+
+Markup: s-portal-nav.html
+
+Styleguide Trumps.Scopes.PortalNav
+*/
+
+/* 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.
+            UPDATE: As of PR #312, this has likely changed (untested). */
+
+.s-portal-nav {
+  /* Override `.navbar` */
+  text-transform: none;
+}

package/source/_imports/trumps/s-portal-nav.html

@@ -0,0 +1,37 @@
+<!-- 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
+-->
+<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"
+    >
+      <i class="icon icon-user"></i>
+      <span>username</span>
+      <span class="sr-only">Toggle Dropdown</span>
+    </a>
+    <nav class="dropdown-menu dropdown-menu-right show">
+      <a class="dropdown-item" href="/workbench/dashboard">
+        <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>
+      <a class="dropdown-item" href="/accounts/profile/">
+        <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>
+    </nav>
+  </li>
+</ul>

package/source/_imports/trumps/s-style-guide.css

@@ -0,0 +1,52 @@
+/*
+Style Guide
+
+A style guide. This is intended for:
+- a design system
+- a writing style guide
+- a developer style guide
+
+Styleguide Trumps.Scopes.StyleGuide
+*/
+
+
+
+
+
+/* ELEMENTS */
+
+
+
+/* ELEMENTS: Content Sectioning */
+
+/* NOTE: Similar to `s-document` "ELEMENTS: Content Sectioning" */
+
+/* To give little margin above isolated headings for sections */
+/* FAQ: Headings with no prior sibling need spacing before the heading */
+/* FAQ: Headings that begin `o-section` already have spacing from `o-section` */
+.s-style-guide section:not(.o-section) > h1:first-child,
+.s-style-guide section:not(.o-section) > h2:first-child,
+.s-style-guide section:not(.o-section) > h3:first-child,
+.s-style-guide section:not(.o-section) > h4:first-child,
+.s-style-guide section:not(.o-section) > h5:first-child,
+.s-style-guide section:not(.o-section) > h6:first-child,
+/* FAQ: Headings after non-headings need spacing before the heading */
+/* FAQ: Headings after headings already have spacing from prior heading */
+.s-style-guide section > :not(h1, h2, h3, h4, h5, h6) + h1,
+.s-style-guide section > :not(h1, h2, h3, h4, h5, h6) + h2,
+.s-style-guide section > :not(h1, h2, h3, h4, h5, h6) + h3,
+.s-style-guide section > :not(h1, h2, h3, h4, h5, h6) + h4,
+.s-style-guide section > :not(h1, h2, h3, h4, h5, h6) + h5,
+.s-style-guide section > :not(h1, h2, h3, h4, h5, h6) + h6 {
+  margin-top: var(--global-space--x-large);
+}
+
+/* To give much margin below all headings for sections */
+.s-style-guide section > h1,
+.s-style-guide section > h2,
+.s-style-guide section > h3,
+.s-style-guide section > h4,
+.s-style-guide section > h5,
+.s-style-guide section > h6 {
+  margin-bottom: var(--global-space--normal);
+}

package/source/_imports/trumps/s-system-specs.css

@@ -0,0 +1,123 @@
+/*
+System Specifications
+
+Styles for System Specifications content which assumes external code:
+
+- `c-data-list`
+  (for "Data List")
+
+Styleguide Trumps.Scopes.SystemSpecs
+*/
+@import url("_imports/tools/media-queries.css");
+
+
+
+/* Cascade */
+
+.s-system-specs {
+  font-size: var(--global-font-size--small);
+  font-weight: var(--global-font-weight--medium);
+}
+
+
+
+/* Layout */
+
+@media only screen and (--narrow-and-above) {
+  .s-system-specs {
+    display: flow-root;
+  }
+  .s-system-specs > * {
+    display: inline-block;
+  }
+  .s-system-specs > figure {
+    float: left;
+  }
+}
+
+
+
+/* Spacing */
+
+.s-system-specs {
+  --row-height: 32px;
+}
+
+.s-system-specs > aside {
+  margin-top: var(--row-height);
+}
+
+@media only screen and (--medium-and-below) {
+  .s-system-specs > figure {
+    margin-bottom: var(--row-height);
+  }
+}
+
+
+
+/* Sizes */
+
+@media only screen and (--medium-and-above) {
+  .s-system-specs {
+    --col-width--thin: 42%;
+    --col-width--wide: 48%;
+    --col-gutter: 10%;
+    --col-padding: 40px;
+
+    padding-inline: var(--col-padding);
+  }
+  .s-system-specs > div,
+  .s-system-specs > aside {
+    padding-inline: var(--col-padding);
+  }
+  .s-system-specs > div {
+    width: var(--col-width--thin);
+  }
+  .s-system-specs > figure {
+    width: var(--col-width--wide);
+    margin-right: var(--col-gutter);
+  }
+}
+
+@media only screen and (--wide-and-above) {
+    .s-system-specs > aside {
+        width: var(--col-width--thin);
+    }
+}
+
+/* Position */
+
+.s-system-specs > figure > img {
+  width: 100%;
+  display: block; /* to support margin */
+}
+.s-system-specs > figure > figcaption {
+  /* To nudge upward on top of image */
+  position: relative; /* to prevent image from appearing on top */
+  margin-top: -40px;
+}
+
+@media only screen and (--medium-and-below) {
+  .s-system-specs > figure > img {
+    /* To center horizontally */
+    width: 60%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+@media only screen and (--medium-and-above) {
+  .s-system-specs > figure > figcaption {
+    /* To center horizontally */
+    width: 80%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+
+
+/* Components */
+
+.s-system-specs .c-data-list__key a {
+  font-weight: var(--medium);
+}

package/source/_imports/trumps/tacc-search-bar.css

@@ -0,0 +1,108 @@
+/* SEE: _imports/elements/tacc-search-bar.css */
+/*
+Search Bar
+
+Styles for TACC's global search bar.
+
+Styleguide Scopes.SearchBar
+*/
+/* TODO: Import within `site.header.css`, not `site.tacc-search-bar.css`.
+
+  1. Use `[data-status="loaded"]` (to learn more, search other references).
+  2. Replace `:host` with `.s-search-bar`.
+  2. Replace `[part="…"]` with `::part(…)`.
+  3. Rename file to `s-search-bar`.
+  4. Load file alongside `s-header.css`.
+
+  This is how it works in GH-101.
+*/
+
+
+
+/* Variables */
+
+:host {
+  /* GH-101: Values for any width */
+  --button-horz-pad: 10px;
+  --input-horz-pad: 0.125em;
+
+  /* GH-101: Values for expanded (desktop) width */
+  --input-height: 26px;
+  --button-font-size: 18px;
+  --input-font-size: 14px;
+}
+
+
+
+/* Container */
+
+:host {
+  /* To remove all whitespace */
+  /* NOTE: A `font-size: 0` is not necessary if tag whitespace is removed */
+  font-size: 0;
+}
+:host [part="form"] {
+  /* To ensure search field font matches Portal */
+  /* GH-101: Set and rely on header font */
+  /* SEE: https://confluence.tacc.utexas.edu/x/nB4FDg */
+  font-family: "Roboto";
+
+  display: flex;
+  align-items: center;
+
+  position: relative;
+}
+
+/* Content */
+
+:host [part="button"] {
+  font-size: 16px; /* WARNING: Do not use `rem` until `html { 62.5%; }` */
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+
+  box-sizing: content-box;
+  height: var(--input-height, 38px); /* GH-101: Desktop value */
+  align-items: center; /* works if has flex layout (does if class is `.icon`) */
+
+  margin: 0;
+  padding: 0 var(--button-horz-pad);
+
+  background-color: transparent;
+  border: none;
+
+  color: env(--header-text-color);
+  font-size: var(--button-font-size);
+}
+
+:host [part="input"] {
+  display: block;
+  width: 100%;
+  height: var(--input-height);
+
+  margin: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  /* To indent text by the width of embedded button plus actual padding */
+  /* FAQ: Using `text-indent` has text overflow as user enters beyond width */
+  /* HELP: Using `text-indent` is prefered (simpler)... how to do sans bug? */
+  padding-left: calc(
+    var(--button-horz-pad) +
+    var(--button-font-size) +
+    var(--button-horz-pad) +
+    var(--input-horz-pad)
+  );
+  padding-right: var(--input-horz-pad);
+
+  background-color: env(--header-search-bkgd-color);
+  border: var(--global-border-width--normal) solid env(--header-search-brdr-color);
+  border-radius: 5px;
+
+  color: env(--header-text-color);
+  font-size: var(--input-font-size);
+}
+:host [part="input"]::placeholder {
+  color: env(--header-text-color);
+  opacity: 0.5;
+}

package/source/_imports/trumps/tacc-search-bar.html

@@ -0,0 +1,11 @@
+<form part="form">
+  <label for="tacc-search-bar" class="u-hide--visually" part="label">
+    Search
+  </label>
+
+  <input id="tacc-search-bar" part="input" type="search" />
+
+  <button part="button" type="submit" class="icon icon-search">
+    <span class="u-hide--visually">Search</span>
+  </button>
+</form>

package/source/_imports/trumps/u-empty.css

@@ -0,0 +1,18 @@
+/*
+Empty
+
+Any element that must be treated as `:empty` (even if it is not).
+
+Examples:
+- `o-section.css`:
+  ```
+  .o-section--intro > :empty:not(img),
+  .o-section--intro > .u-empty { display: none; }
+  ```
+
+Styleguide Trumps.Utilities.Empty
+*/
+
+.u-empty {
+  /* FAQ: This class should NOT have any styles on its own. It is a unique class that allows non-empty content to appear empty to TACC stylesheets that recognize it. Any TACC stylesheet selector that recognizes `:empty` elements should also recognize `u-empty` elements. */
+}

package/source/_imports/trumps/u-hide.css

@@ -0,0 +1,27 @@
+/*
+Hide
+
+Different ways and reasons to hide elements. (More coming in GH-101.)
+
+.u-hide--visually               - Hide only for visual UI
+
+Styleguide Core.Trumps.Utilities.Hide
+*/
+/* TODO: (GH-101) Create n' import `x-hide` and provide more `u-hide` options */
+/* SEE: https://github.com/TACC/Core-CMS/pull/222 */
+
+/* To hide content only from visual interfaces */
+/* SEE: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/ */
+.u-hide--visually:not(:focus, :active) {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+
+  /* Added by TACC based on other examples */
+  border: none;
+  padding: 0;
+}

package/source/_imports/trumps/u-nested-text-content.css

@@ -0,0 +1,14 @@
+/*
+Nested Text Content
+
+Any content that should be nested like a list (`<ol>`, `<ul>`) would be.
+
+Examples:
+- A definition list among paragraphs
+
+Styleguide Trumps.Utilities.NestedTextContent
+*/
+
+.u-nested-text-content {
+  padding-left: var(--global-space--list-indent);
+}