feat: updates from tup-ui (except paths)

TACC/tup-ui@a30002a
TACC/tup-ui@24db51b
TACC/tup-ui@141464f

P.S. a30002a originates from TACC/tup-ui#38

Author: wesleyboar

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

@@ -7,7 +7,7 @@ Add to Bootstrap styles. See:
 
 Styleguide Components.Bootstrap.Grid
 */
-@import url("_imports/tools/media-queries.css");
+@import url("../tools/media-queries.css");
 
 @media (--x-wide-and-above) {
   .container { max-width: var(--global-max-width--x-wide); }

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/bootstrap.pagination.css

@@ -7,7 +7,7 @@ Style Bootstrap pagination. See:
 
 Styleguide Components.Bootstrap.Pagination
 */
-@import url("_imports/components/c-page.css");
+@import url("../components/c-page.css");
 
 
 

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

@@ -1,4 +1,4 @@
-@import url("_imports/tools/x-truncate.css");
+@import url("../tools/x-truncate.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/c-callout.css

@@ -7,8 +7,8 @@ Markup: c-callout.html
 
 Styleguide Components.Callout
 */
-@import url("_imports/tools/media-queries.css");
-@import url("_imports/tools/x-article-link.css");
+@import url("../tools/media-queries.css");
+@import url("../tools/x-article-link.css");
 
 
 

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

@@ -11,7 +11,7 @@ Markup: c-card.html
 
 Styleguide Components.Card
 */
-@import url("_imports/tools/x-article-link.css");
+@import url("../tools/x-article-link.css");
 
 /* Modifiers */
 

src/lib/_imports/components/c-data-list.css

@@ -29,7 +29,7 @@ Markup: c-data-list.html
 
 Styleguide Components.DataList
 */
-@import url("_imports/tools/x-truncate.css");
+@import url("../tools/x-truncate.css");
 
 
 

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

@@ -17,7 +17,7 @@ Markup: c-nav.html
 
 Styleguide Components.Nav
 */
-@import url("_imports/tools/media-queries.css");
+@import url("../tools/media-queries.css");