Merge branch 'task/fp-1499-cms-pattern-library' into task/fp-1499-cms…

…-pattern-library--general-fix-for-import-paths

src/lib/_imports/components/bootstrap.form.css

@@ -0,0 +1,21 @@
+/*
+Form (Bootstrap)
+Override Bootstrap styles. See:
+- [ReactStrap Forms](https://reactstrap.github.io/components/form/)
+- [Bootstrap Forms](https://getbootstrap.com/docs/4.4/components/forms/)
+Styleguide Components.Bootstrap.Form
+*/
+@import url('../settings/border.css');
+
+.form-control {
+  border: var(--global-border--normal);
+  border-radius: 0;
+}
+input.form-control,
+textarea.form-control {
+  /* FAQ: Vertical padding reduced by 1px each to near input height of design * 1.2 */
+  padding: 6px 12px; /* 6px 10px design * 1.2 design-to-app ratio */
+}
+.input-group-prepend {
+  z-index: 1; /* so child button border is above sibling input border */
+}

src/lib/_imports/components/bootstrap.modal.css

@@ -0,0 +1,74 @@
+/* TODO: Migrate any other should-be-global Portal modal styles to here */
+/* FP-344: Consider a Modal component and a CSS module */
+/*
+Modal (Bootstrap)
+
+Override Bootstrap styles. See:
+
+- [ReactStrap Forms](https://reactstrap.github.io/components/modals/)
+- [Bootstrap Forms](https://getbootstrap.com/docs/4.4/components/modal/)
+
+Styleguide Components.Bootstrap.Modal
+*/
+@import url('../tools/x-truncate.css');
+
+.modal-content,
+.modal-header,
+.modal-body,
+.modal-footer {
+  border-radius: 0;
+}
+.modal-content,
+.modal-header,
+.modal-body {
+  border: none;
+}
+.modal-footer {
+  border-left: none;
+  border-right: none;
+  border-bottom: none;
+}
+
+.modal-header {
+  background-color: var(--global-color-primary--x-light);
+  padding: 1.35rem 1.75rem; /* (18px 23.5px design * 1.2 design-to-app ratio) */
+}
+.modal-title {
+  color: var(--global-color-primary--xx-dark);
+  font-weight: normal;
+  font-size: 1.2rem; /* 16px design * 1.2 design-to-app ratio */
+
+  @extend .x-truncate--one-line;
+}
+
+/* To darken close button */
+.modal-header .close {
+  color: var(--global-color-primary--x-dark);
+  opacity: 1;
+}
+/* FAQ: The specificity matches Bootstrap */
+.modal-header .close:not(:disabled):not(.disabled):focus,
+.modal-header .close:not(:disabled):not(.disabled):hover {
+  color: var(--global-color-primary--xx-dark);
+  opacity: 1;
+}
+
+/* To render modal close button icon as a Cortal icon */
+/* CAVEAT: Pass `charCode="&#xe912;"` to `<ModalHeader>` */
+.modal-header .close span {
+  /* To mimic `.icon` styles without `@extend` or `composes` (unavailable) */
+  /* HACK: Copied (and reduced and edited) from `src/styles/trumps/icon...` */
+  font-size: 1.5rem; /* bigger to match header text font height (like design) */
+  font-family: Cortal-Icons !important;
+}
+
+.modal-header.has-MuiTabs {
+  flex-direction: row;
+  position: relative;
+  height: 63.5px;
+  border-bottom: 1px solid #afafaf;
+  padding: 5px;
+}
+.modal-header.has-MuiTabs .close {
+  transform: translate(-25%, 25%);
+}

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

@@ -235,6 +235,13 @@
 
 /* Modifiers: Sizes */
 
+.c-button:not(
+  .c-button--width-short,
+  .c-button--width-medium,
+  .c-button--width-long,
+  .c-button--size-small,
+  .c-button--as-link
+),
 .c-button--width-short {
   width: var(--min-width);
 }
@@ -256,6 +263,10 @@
 
 /* Elements */
 
+.c-button > * {
+  vertical-align: middle;
+}
+
 .c-button__icon--before {
   margin-right: 0.5em;
 }

src/lib/_imports/components/c-button/c-button.hbs

@@ -41,12 +41,14 @@
   <dt>Icons</dt>
   <dd>
     <button class="c-button c-button--{{this._self.name}}
+      {{#if supports.width}}c-button--width-long{{/if}}
       {{#if type}}{{type}}{{/if}}"
       {{#if disabled}}disabled{{/if}}>
       <i class="c-button__icon--before" aria-description="validate input">…</i>
       <span class="c-button__text">__icon--before</span>
     </button>
     <button class="c-button c-button--{{this._self.name}}
+      {{#if supports.width}}c-button--width-long{{/if}}
       {{#if type}}{{type}}{{/if}}"
       {{#if disabled}}disabled{{/if}}>
       <span class="c-button__text">__icon--after</span>
@@ -58,7 +60,7 @@
   {{#if supports.width}}
   <dt>Width</dt>
   <dd>
-    <button class="c-button c-button--{{this._self.name}} c-button--width-short
+    <button class="c-button c-button--{{this._self.name}}
       {{#if type}}{{type}}{{/if}}"
       {{#if disabled}}disabled{{/if}}>
       <span class="c-button__text">--width-short</span>
@@ -67,9 +69,9 @@
       {{#if disabled}}disabled{{/if}}>
       <span class="c-button__text">--width-medium</span>
     </button>
-    <button class="c-button c-button--{{this._self.name}} c-button--width-large {{#if type}}{{type}}{{/if}}"
+    <button class="c-button c-button--{{this._self.name}} c-button--width-long {{#if type}}{{type}}{{/if}}"
       {{#if disabled}}disabled{{/if}}>
-      <span class="c-button__text">--width-large</span>
+      <span class="c-button__text">--width-long</span>
     </button>
   </dd>
   {{/if}}

src/lib/_imports/components/cortal.icon.css

@@ -0,0 +1,79 @@
+/*
+Container (Bootstrap)
+
+Provide Cortal Icon styles. See:
+
+- [Cortal Icons (Confluence)](https://confluence.tacc.utexas.edu/x/MCAFDg)
+
+Styleguide Components.Cortal.Icon
+*/
+@import url('./cortal.icon.font.css');
+
+
+
+/* IMPORTANT: Do not add support for icons that neglect `.icon` class */
+/* FAQ: Users should build their icons to spec */
+
+
+
+/* Aliases */
+/* SEE: https://github.com/TACC/Core-Portal/blob/22405ca/client/src/styles/trumps/icon.css#L57 */
+
+/* CAVEAT: Urgent use only; always prefer official icon names */
+
+
+
+/* Overrides */
+
+/* To overwrite `cortal.icon.fonts.css` icon sizes */
+/* SEE: https://confluence.tacc.utexas.edu/x/dgB_CQ */
+/* CAVEAT: Assumes 1rem = 10px */
+/* relative units */
+.icon-sm {
+  font-size: 1.8rem;
+}
+.icon-md {
+  font-size: 2.4rem;
+}
+.icon-lg {
+  font-size: 6.4rem;
+}
+/* absolute units */
+.icon-18 {
+  font-size: 18px;
+}
+.icon-24 {
+  font-size: 24px;
+}
+.icon-64 {
+  font-size: 64px;
+}
+.icon-16,
+.icon-32 { font-size: unset /* to disallow unsupported font sizes */ }
+
+
+
+/* Placeholders */
+/* FAQ: Some icons do not exist, but can be faked (with caveats) */
+
+/* To create a small "chevron" */
+/* CAVEAT: Use `--color` to set color */
+[class*='icon-nav-'] {
+  border: solid var(--color, var(--global-color-primary--xx-dark));
+  border-width: 0 0.25em 0.25em 0;
+  font-size: 8px;
+  /* display: inline-block; */ /* let `.icon`'s `display: inline-flex;` do it */
+  /* padding: var(--size); */ /* let `.icon`'s equal `width` & `height` do it */
+}
+.icon-nav-up {
+  transform: rotate(-135deg);
+}
+.icon-nav-left {
+  transform: rotate(135deg);
+}
+.icon-nav-down {
+  transform: rotate(45deg);
+}
+.icon-nav-right {
+  transform: rotate(-45deg);
+}

src/lib/_imports/components/cortal.icon.font.md

@@ -0,0 +1,3 @@
+# Cortal Icon Font
+
+The file `cortal.icon.font.css` comes from raw CSS provided by latest version of [TACC's "Cortal" icon font](https://confluence.tacc.utexas.edu/x/MCAFDg).

src/lib/_imports/objects/o-fixed-header-table.css

@@ -0,0 +1,33 @@
+/*
+Fixed Header Table
+
+A table with a header that does not move, and a body that scrolls.
+
+Markup:
+<table class="o-fixed-header-table">
+    <thead>
+      <tr>
+        <th>A</th>
+        <th>B</th>
+        <th>C</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>A</td>
+        <td>B</td>
+        <td>C</td>
+      </tr>
+    </thead>
+</table>
+
+Styleguide Objects.FixedHeaderTable
+*/
+/* SEE: https://css-tricks.com/position-sticky-and-table-headers/ */
+.o-fixed-header-table th {
+  position: sticky;
+  top: 0;
+
+  z-index: 1; /* so table content (e.g. button)¹ does not scroll over <th> */
+  /* ¹ table content with a `position` value other than static */
+}

src/lib/_imports/settings/font.css

@@ -20,6 +20,13 @@ Styleguide Settings.CustomProperties.Font
 */
 
 :root {
+  /* Family */
+  /* NOTE: Clients are expected to overwrite these values via their CSS */
+  --global-font-family--sans: sans-serif;
+  --global-font-family--serif: serif;
+  --global-font-family--mono: monospace;
+
+
   /* Size */
   /* SEE: https://confluence.tacc.utexas.edu/x/nh4FDg */
   /* CAVEAT: These font sizes assume root font is 10px or an equivalent value */