feat: tup-463 migrate css to core - misc bugs (#384)

* chore: search dropdown should use var for white

* fix: footer buttons should not have width limit

* refactor: deprecate `<small>` in footer buttons

* fix!: do not let search styles bleed beyond search

Requires an `id="tacc-google-search` wrapper.

* fix: remove unnecessary style

The only `<h1>` on the page is "Search" text provided by CMS not Google.

* docs: explain strange, complex search css selector

* fix: core-styles v2.22.0 to v2.22.1

* chore: core-styles v2.22.1 to v2.22.2

apps/tup-cms/Dockerfile

@@ -1,5 +1,5 @@
-# TACC/Core-CMS#678 (core-styles v2.11 to v2.22; migrate css to core-cms|styles)
-FROM taccwma/core-cms:d7b7407
+# TACC/Core-CMS#753 (core-styles v2.11 to v2.22; migrate css to core-cms|styles)
+FROM taccwma/core-cms:fcb82f2
 
 WORKDIR /code
 

apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-cms/trumps/search-elements.css

@@ -1,15 +1,10 @@
-#cms-content {
+#tacc-google-search {
     /* Whole Search Container */
     /* removes padding from search container */
     & .gsc-control-cse {
         padding: unset;
     }
 
-    /* make header same as news */
-    & h1 {
-        color: var(--global-color-primary--x-dark);
-    }
-
 
 
 
@@ -27,15 +22,16 @@
         border-bottom: unset;
     }
 
-    & tbody>tr:first-child>:is(td, th) {
+    /* To override Core-Styles tables */
+    & tbody > tr:first-child > :is(td, th) {
         border: unset;
         padding-inline: unset;
         background: unset;
         vertical-align: middle;
     }
 
     & .gsc-selected-option-container {
-        background: #fff;
+        background: var(--global-color-primary--xx-light);
         border: var(--global-border--normal);
     }
 
@@ -134,4 +130,4 @@
         vertical-align: unset;
         top: 1px;
     }
-}
+}

apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-tup-cms/components/c-footer.css

@@ -11,6 +11,24 @@ svg {
 
 
 
+/* BUTTONS */
+
+/* To style buttons differently than in body */
+.c-footer .c-button,
+.c-footer [class*="button--"] {
+    --max-width: auto; /* override core-styles.base.css */
+    font-size: 80%; /* mimic Botstrap .small and <small> */
+
+    /* TODO: (1) Remove <small> from footer buttons (2) Remove this font-size */
+    & small {
+        font-size: inherit; /* gracefully deprecate use of <small> */
+    }
+}
+
+
+
+
+
 /* LOGOS */
 
 /* To set baseline styles for footer logos */

package.json

@@ -40,7 +40,7 @@
     "@nx/vite": "16.5.3",
     "@nx/web": "16.5.3",
     "@nx/workspace": "16.5.3",
-    "@tacc/core-styles": "github:TACC/Core-Styles#a06f5af",
+    "@tacc/core-styles": "^2.22.2",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",