FP-531: Move bootstrap.btn.css into c-button.css

client/src/styles/components/c-button.css

@@ -1,11 +1,20 @@
+/* WARNING: This file is copied from Portal repo */
+/* TODO: Share source code between CMS, Portal, & User Guide */
+/* SEE: https://github.com/TACC/Frontera-Portal/blob/master/client/src/styles/components/c-button.css */
+
 /* FP-545: Move these styles to `_common/Button` */
 /*
 Button
 
 A button that may have icon(s) before and/or after its text.
 
+Override Bootstrap styles. See:
+- [ReactStrap Buttons](https://reactstrap.github.io/components/buttons/)
+- [Bootstrap Buttons](https://getbootstrap.com/docs/4.4/components/buttons/)
+
 .c-button--primary - A primary (expected) user action
 .c-button--secondary - For an optional user action
+.c-button--as-link - A button that visually resembles a link
 
 Markup:
 <main>
@@ -22,32 +31,74 @@ Markup:
       <span class="c-button__text">Skip</span>
       <i class="c-button__icon--after" data-icon="→">(and move to next form)</i>
     </button>
+    <button class="c-button c-button--as-link">
+      Return to Previous Screen
+    </button>
 </main>
 
 Styleguide Components.Button
 */
-.c-button {
-  composes: btn from './bootstrap.btn.css';
-
+.c-button,
+[class*="c-button--"] {
   /* Normalize child element box sizes */
   display: flex;
   /* Align elements horizontally and vertically */
   align-items: center;
   justify-content: center;
+
+  /* OVERWRITE BOOTSTRAP `.btn` */
+  /* FAQ: Vertical padding reduced by 1px each to near button height of design * 1.2 */
+  padding: 6px 12px; /* 6px 10px design * 1.2 design-to-app ratio */
+  border-radius: 0;
+  font-weight: 700;
+  /* NOTE: Should set `font-size`, but `.icon`'s `em` adversely changes icon size */
 }
 
 /* Types */
+
+/* FP-546: Before FP-546 standardizes `_common/Button`, the color and border
+           styles are overridden and duplicated by `Workbench.scss` */
 .c-button--primary {
-  composes: c-button;
-  composes: btn-primary from './bootstrap.btn.css';
+  /* OVERWRITE BOOTSTRAP `.btn-primary` */
+  color: var(--global-color-primary--xx-light);
+  background-color: var(--global-color-accent--normal);
+  border: none;
 }
+
 .c-button--secondary {
-  composes: c-button;
-  composes: btn-secondary from './bootstrap.btn.css';
+  /* OVERWRITE BOOTSTRAP `.btn-secondary` */
+  color: var(--global-color-primary--x-dark);
+  background-color: var(--global-color-primary--normal);
+  border-color: var(--global-color-primary--x-dark);
+}
+.btn-secondary:disabled {
+  /* OVERWRITE BOOTSTRAP `.btn-secondary:disabled` */
+  color: var(--global-color-primary--x-dark);
+  background-color: var(--global-color-primary--x-light);
+  border: var(--global-border--normal);
+
+  /* FP-546: Implementation of this style (which matches design) is pending:
+     - Confirmation from designers (these styles have poor color contrast)
+     - Removal of overly-specific `Workbench.scss` styles (requires FP-546)
+  /*
+  color: var(--global-color-primary--dark);
+  background-color: var(--global-color-primary--light);
+  border: var(--global-color-primary--light);
+  */
 }
+/* WARNING: These styles are NOT defined by Design (origin: DataFiles) — 2020-07-21 */
+.btn-secondary:not(:disabled):hover {
+  /* OVERWRITE BOOTSTRAP `.btn-secondary:not(:disabled):hover` */
+  color: var(--global-color-primary--x-dark);
+  background-color: var(--global-color-primary--normal);
+  border-color: var(--global-color-primary--x-dark);
+}
+
+/* FP-546: Before FP-546 standardizes `_common/Button`, the color
+           styles are overridden and duplicated by `Workbench.scss` */
 .c-button--as-link {
-  composes: c-button;
-  composes: btn-link from './bootstrap.btn.css';
+  /* OVERWRITE BOOTSTRAP `.btn-link` */
+  color: var(--global-color-accent--normal);
 }
 
 /* Children */