diff --git a/apps/tup-cms/Dockerfile b/apps/tup-cms/Dockerfile index bdf4c89ab..41c01f778 100644 --- a/apps/tup-cms/Dockerfile +++ b/apps/tup-cms/Dockerfile @@ -1,5 +1,5 @@ -# TACC/Core-CMS#735 (cms-forms export hotfix) -FROM taccwma/core-cms:5ceecdd +# TACC/Core-CMS#v4.2.0 +FROM taccwma/core-cms:5d26e2b WORKDIR /code diff --git a/apps/tup-cms/src/taccsite_cms/templates/snippets/css-banner-tacc.html b/apps/tup-cms/src/taccsite_cms/templates/snippets/css-banner-tacc.html index 7680f2d82..6ef15a6d0 100644 --- a/apps/tup-cms/src/taccsite_cms/templates/snippets/css-banner-tacc.html +++ b/apps/tup-cms/src/taccsite_cms/templates/snippets/css-banner-tacc.html @@ -23,7 +23,7 @@ left: 0; top: 0; bottom: 0; right: 0; background-color: var(--global-color-primary--x-light); } -.banner-cell--major a:hover .highlight { +.banner-cell--major a:hover .u-highlight { background-color: var(--global-color-accent--normal); } diff --git a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-cms/components/c-footer.css b/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-cms/components/c-footer.css deleted file mode 100644 index 3460761c0..000000000 --- a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-cms/components/c-footer.css +++ /dev/null @@ -1,9 +0,0 @@ -/* !!!: Some or all of this may be moot since TACC/Core-Styles/pull/215 */ -.c-footer { - /* TODO: Remove padding-top from core-styles.cms.css (then remove this) */ - padding-top: 0; - - /* TODO: Add comment+style below to core-styles.cms.css (then remove this) */ - /* To prevent margin-collapse of children (

) with minimal side effects */ - display: flow-root; -} diff --git a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-cms/components/django.cms.blog.app.item.css b/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-cms/components/django.cms.blog.app.item.css deleted file mode 100644 index a395214e8..000000000 --- a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-cms/components/django.cms.blog.app.item.css +++ /dev/null @@ -1,6 +0,0 @@ -/* TODO: Share styles between c-news and c-feed-list (`time:not(…)`) */ -.blog-list article time:not(:is(h1, h2, h3, h4, h5, h6) *) { - color: var(--global-color-accent--secondary); - font-weight: var(--medium); - text-transform: uppercase; -} diff --git a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-cms/components/django.cms.blog.app.page.css b/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-cms/components/django.cms.blog.app.page.css index 972b7a854..50cf43e32 100644 --- a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-cms/components/django.cms.blog.app.page.css +++ b/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-cms/components/django.cms.blog.app.page.css @@ -1,4 +1,5 @@ /* Media & Content - Alignment */ +/* TODO: Share relevant styles with c-news and c-feed-list */ diff --git a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-cms/components/django.cms.picture.css b/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-cms/components/django.cms.picture.css deleted file mode 100644 index 4fb6ee0c5..000000000 --- a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-cms/components/django.cms.picture.css +++ /dev/null @@ -1,8 +0,0 @@ -/* HELP: Why/How do I need to add these styles? */ -/* NOTE: There are Core Styles and Core CMS styles for image alignment. */ -/* SEE: https://www.tacc.utexas.edu/news/latest-news/2025/11/11/basic-news-template/?edit (styles below are not needed for figures) */ -/* SEE: https://www.tacc.utexas.edu/education/k-12-students/high-school-camps/gencyber-level-up/ (styles below are needed for images) */ -/* SEE: https://matcssi.tacc.utexas.edu/ (v3.11.1) (styles below not needed for image) */ -img.align-center { - display: block; -} diff --git a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-cms/components/lightgallery.css b/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-cms/components/lightgallery.css deleted file mode 100644 index 3a4330b0c..000000000 --- a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-cms/components/lightgallery.css +++ /dev/null @@ -1,5 +0,0 @@ - -.lg-sub-html a { - /* FAQ: The `!important` overrides styles from plugin, in layer */ - color: var(--global-color-link-on-dark--normal) !important; -} diff --git a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-cms/generics/pseudo-elements.css b/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-cms/generics/pseudo-elements.css deleted file mode 100644 index d2a5d9118..000000000 --- a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-cms/generics/pseudo-elements.css +++ /dev/null @@ -1,11 +0,0 @@ -/* To highlight targeted content */ -:target { - outline: var(--global-border-width--x-thick) solid transparent; - outline-offset: var(--global-border-width--xx-thick); - animation: focus 2s; -} -@keyframes focus { - from { - outline-color: var(--global-color-accent--tertiary); - } -} diff --git a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-cms/trumps/search-elements.css b/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-cms/trumps/search-elements.css index c8e47c248..8e0da5782 100644 --- a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-cms/trumps/search-elements.css +++ b/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,7 +22,8 @@ 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; @@ -35,7 +31,7 @@ } & .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; } -} \ No newline at end of file +} diff --git a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/components/c-button.css b/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/components/c-button.css deleted file mode 100644 index 5b7a119b5..000000000 --- a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/components/c-button.css +++ /dev/null @@ -1,19 +0,0 @@ -/* TODO: When migrated to Core, remove `main > .container` (i.e. "in CMS") */ -main > .container .c-button--primary, -main > .container .c-button--secondary, -main > .container .c-button--tertiary, -main > .container .c-button--is-active { - /* FAQ: Design looks like 10px 20px, but M.S. requests more */ - padding: 10px 30px; - - /* FAQ: Design shows 10px font */ - font-size: var(--global-font-size--x-small); -} - -/* TODO: Remove from c-button (once it becomes redundant there) */ -/* FAQ: This is now added in generics/attributes.css */ -/* -[disabled] { - pointer-events: none; -} -*/ diff --git a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/components/c-card.css b/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/components/c-card.css deleted file mode 100644 index 5f8ccb54c..000000000 --- a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/components/c-card.css +++ /dev/null @@ -1,158 +0,0 @@ -/* FIX CARD */ - -/* !!!: When migrated: - 1. Remove `:where(:not(…` (e.g. "not in portal"). - 2. Prevent these styles in apps/tup-ui TicketHistory CSS */ -:is(.card, .c-card, [class*="card--"]) p:last-child:where(:not(#page-portal *)) { - margin-bottom: 2rem; /* restore

`margin-bottom `*/ -} - -/* To more specifically control c-card link font weight */ -/* !!!: When migrated: - 1. Remove `:where(:not(…` (e.g. "not in portal"). - 2. Prevent these styles in apps/tup-ui TicketHistory CSS */ -:is(.card, .c-card, [class*="card--"]) a.c-button:where(:not(#page-portal *)) { - font-weight: var(--bold); -} - -/* FAQ: Used on image cards for staff like on /education/k-12-students/ */ -:is(.card, .c-card, [class*="card--"]) h4 { - margin-bottom: 0.375em; -} - - - - - -/* SUPPORT LIST IN CARD */ - -/* FAQ: The Portal uses Bootstrap ".card" for ticket modal */ -:is(.card, .c-card, [class*="card--"]) ul { - /* list-style: none; *//* H.P. restored bullets, M.S. does not know */ - padding-left: 1em; /* overwrite core-styles.cms */ -} -/* To add space between line items */ -/* FAQ: Using margin and li:not(:first-of-type) because of multi-line items */ -:is(.card, .c-card, [class*="card--"]) li:not(:first-of-type) { - margin-top: 0.5em; -} -/* TODO: Consider changing this site wide; SEE: -:where([role=main],main) li:not(td li) { line-height: 1.6; } */ -:is(.card, .c-card, [class*="card--"]) ul:last-child:where(:not(#page-portal *)) { - margin-bottom: 2rem; -} - - - - - -/* ADD CARD--IMAGE */ - -/* Image */ - -[class*="card--image-"] { - display: grid; -} - -.card--image-top { - padding-top: 0; -} -.card--image-left { - padding-left: 0; - padding-bottom: var(--global-space--pattern-pad); -} -.card--image-right { - padding-right: 0; - padding-bottom: var(--global-space--pattern-pad); -} -.card--image-bottom { - padding-bottom: 0; -} - - - -/* Image: Left & Right */ - -.card--image-left, -.card--image-right { - --image-width: 50%; - - grid-column-gap: var(--global-space--pattern-pad); - - /* Repeat many times, because element count is unknown */ - grid-template-rows: repeat(10, min-content); -} -.card--image-left > img, -.card--image-right > img { - grid-row-start: 1; - grid-row-end: -1; - - /* To remove card padding */ - margin-block: calc( -1 * var(--global-space--pattern-pad) ); -} - -.card--image-left { - grid-template-columns: var(--image-width) 1fr; /* to overwrite `.c-card` */ -} -.card--image-left > img { - grid-column-start: 1; - grid-column-end: span 1; -} - -.card--image-right { - grid-template-columns: 1fr var(--image-width); /* to overwrite `.c-card` */ -} -.card--image-right > img { - grid-column-start: 2; - grid-column-end: span 1; -} - - - -/* Image: Top & Bottom */ - -.card--image-top, -.card--image-bottom { - --image-height: auto; - --global-space--pattern-pad: 15px; - - /* Use extra columns to add horizontal padding */ - grid-template-columns: var(--global-space--pattern-pad) 1fr var(--global-space--pattern-pad); - padding-inline: unset; -} -.card--image-top > :not(img), -.card--image-bottom > :not(img) { - /* Span only columns for content */ - grid-column-start: 2; - grid-column-end: -2; -} -.card--image-top > img, -.card--image-bottom > img { - /* Span all columns, padding and content */ - grid-column-start: 1; - grid-column-end: -1; -} - -.card--image-top { - /* Repeat many times, because element count is unknown */ - grid-template-rows: repeat(10, min-content) var(--image-height); -} -.card--image-top > img { - grid-row-start: 1; - margin-bottom: var(--global-space--pattern-pad); -} -.card--image-bottom > :is(h1, h2, h3, h4, h5):first-of-type { - margin-top: unset; /* to avoid combining margin with image */ -} - -.card--image-bottom { - /* Repeat many times, because element count is unknown */ - grid-template-rows: var(--image-height) repeat(10, min-content); -} -.card--image-bottom > img { - grid-row-end: -1; - margin-top: var(--global-space--pattern-pad); -} -.card--image-bottom > p:last-of-type { - margin-bottom: unset; /* to avoid combining margin with image */ -} diff --git a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/components/c-content-block.css b/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/components/c-content-block.css deleted file mode 100644 index d8d720c6c..000000000 --- a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/components/c-content-block.css +++ /dev/null @@ -1,12 +0,0 @@ -/* FAQ: Used on TACC as `content-block` */ -/* SEE: https://dev.tup.tacc.utexas.edu/use-tacc/stem-evaluation-services/ */ - -:is(.c-content-block, .content-block) { - margin-bottom: var(--global-space--bootstrap-gap); - padding: var(--global-space--pattern-pad); -} - -:is(.c-content-block, .content-block) :is(h1, h2, h3, h4, h5, h6) { - border-left: var(--global-border-width--xx-thick) solid var(--global-color-accent--tertiary); - padding-left: 10px; -} diff --git a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/components/c-pill.css b/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/components/c-pill.css deleted file mode 100644 index b04d75ca4..000000000 --- a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/components/c-pill.css +++ /dev/null @@ -1,64 +0,0 @@ -/* TODO: When integrated into Core-Styles, uncomment this */ -/* @import url('../settings/color.css'); */ - -/* Base */ - -.c-pill { - font-weight: var(--medium); - font-size: var(--global-font-size--x-small); - - display: inline-block; /* FAQ: Supports `min/max-width` */ - padding-inline: 0.75em; - min-width: 6.5em; - - line-height: 1.4; - text-align: center; - text-transform: none; /* avoid inheritance form context e.g.

*/ - border-radius: 0.5em; - color: var(--global-color-primary--xx-dark); -} - - - -/* Modifiers */ - -/* Modifiers - Structure */ - -/* CAVEAT: This alone may not trigger truncation */ -/* SEE: https://confluence.tacc.utexas.edu/x/sAoFDg */ -.c-pill--should-truncate { - max-width: 100%; - - overflow: hidden; - text-overflow: ellipsis; - /* white-space: nowrap; */ /* FAQ: Let client decide */ - - /* Keep alignment that is changed by `overflow: hidden;` */ - /* SEE: https://stackoverflow.com/q/25818199 */ - vertical-align: bottom; -} - - - -/* Modifiers */ - -/* Modifiers - Skin */ - -.c-pill--is-danger { - background-color: var(--global-color-danger--light); -} -.c-pill--is-success { - background-color: var(--global-color-success--normal); -} -.c-pill--is-warning { - background-color: var(--global-color-warning--normal); -} -.c-pill--is-normal { - background-color: var(--global-color-extra--light); -} -.c-pill--is-fixed { - background-color: var(--global-color-primary--light); -} -.c-pill--is-updated { - background-color: #FFF500; -} diff --git a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/components/c-update.css b/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/components/c-update.css deleted file mode 100644 index ed8c17e63..000000000 --- a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/components/c-update.css +++ /dev/null @@ -1,10 +0,0 @@ -.c-update__header { - display: flex; - align-items: baseline; -} - -.c-update__title { - margin-right: 0.5em; - - text-transform: uppercase; -} diff --git a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/generics/attributes.css b/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/generics/attributes.css deleted file mode 100644 index 5fc9012e1..000000000 --- a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/generics/attributes.css +++ /dev/null @@ -1,13 +0,0 @@ -/* To render data-prefix value as prefixed text */ -[data-prefix]::before { - display: inline-block; - content: attr(data-prefix); - margin-right: 0.25ch; - - text-transform: none; -} - -/* TODO: Remove from c-button in Core-Styles */ -[disabled] { - pointer-events: none; -} diff --git a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/objects/o-heading-steps.css b/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/objects/o-heading-steps.css deleted file mode 100644 index 7eaa35853..000000000 --- a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/objects/o-heading-steps.css +++ /dev/null @@ -1,15 +0,0 @@ -/* To add numbers to steps */ -.heading-steps, -[class*="heading-steps--"] { - counter-reset: step; -} -.heading-steps :is(h1, h2, h3, h4, h5, h6), -[class*="heading-steps--"] :is(h1, h2, h3, h4, h5, h6) { - counter-increment: step; -} -.heading-steps--root :is(h1, h2, h3, h4, h5, h6)::before, -.heading-steps__item :is(h1, h2, h3, h4, h5, h6)::before { - content: counter(step) '. '; - color: var(--global-color-accent--secondary); - font-weight: var(--medium); -} diff --git a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/objects/o-section.css b/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/objects/o-section.css deleted file mode 100644 index 0b6317fca..000000000 --- a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/objects/o-section.css +++ /dev/null @@ -1,14 +0,0 @@ -/* Remove double space */ -/* TODO: Integrate this into Core-Styles using less verbose solution */ -.section--light + .section--light, -.section--muted + .section--muted, -.section--dark + .section--dark, -.o-section--style-light + .o-section--style-light, -.o-section--style-muted + .o-section--style-muted, -.o-section--style-dark + .o-section--style-dark { - padding-top: unset; -} -.section:not([class*="section-"]) + .section:not([class*="section-"]), -.o-section:not([class*="section--"]) + .o-section:not([class*="section--"]) { - margin-top: unset; -} diff --git a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/trumps/s-header.css b/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/trumps/s-header.css deleted file mode 100644 index 821245264..000000000 --- a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/trumps/s-header.css +++ /dev/null @@ -1,49 +0,0 @@ -/* NOTE: Minimal tweaks from Designer (in lieu of TACC/Core-CMS#222) */ -/* WARNING: Might conflict with TACC/Core-CMS#222 */ -.s-header { - font-size: var(--global-font-size--medium); - font-weight: var(--bold); - letter-spacing: 0.025px; /* 14px * 0.025em equals design-requested 0.35px */ -} - -/* To enlarge height for all screen widths */ -/* TODO: Change in Core-Styles */ -@media only screen and (min-width: 992px) { - .s-header { - height: 60px; - } -} - -/* To stretch nav items to header height (while retaining vertical centering) */ -/* TODO: Change in Core-Styles */ -.s-header, -.s-header .navbar-collapse { - align-items: stretch; -} -@media only screen and (min-width: 992px) { - .s-header .nav-item { - display: flex; - } -} -.s-header .nav-link { - display: flex; - align-items: center; -} -@media only screen and (min-width: 992px) { - .s-header[class*="navbar-expand-"] .navbar-nav .nav-link { - padding-block: 0; /* overwrite core-styles.header.css */ - } -} -.s-header .navbar-brand { - display: grid; - align-content: center; -} - -.s-header .dropdown-item:focus, -.s-header .dropdown-item:hover { - background-color: rgba(var(--global-color-primary--light-rgb), 0.3); -} -.s-header .dropdown-item.active, -.s-header .dropdown-item:active { - background-color: var(--global-color-accent--normal); -} diff --git a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/trumps/u-highlight.css b/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/trumps/u-highlight.css deleted file mode 100644 index b45c67bb7..000000000 --- a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/trumps/u-highlight.css +++ /dev/null @@ -1,13 +0,0 @@ -/* Highlight */ -/* TODO: Create an .x-highlight used to extend a and a .u-highlight */ - -mark, -.x-highlight, -:is(.u-highlight, .highlight) { - /* So wrapped inline text has consistent padding */ - -webkit-box-decoration-break: clone; - box-decoration-break: clone; -} -:is(h1, h2, h3, h4):is(.u-highlight, .highlight) { - display: inline; -} diff --git a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-tup-cms/components/banner.css b/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-tup-cms/components/banner.css index 747f85ef9..31f1cb6ef 100644 --- a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-tup-cms/components/banner.css +++ b/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-tup-cms/components/banner.css @@ -73,7 +73,7 @@ margin-bottom: 2.0rem; } -[class*="banner-cell--"] .highlight { +[class*="banner-cell--"] .u-highlight { padding-inline: var(--tag-padding); color: var(--global-color-primary--xx-light); diff --git a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-tup-cms/components/c-footer.css b/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-tup-cms/components/c-footer.css index 729aa84bc..74e18b09c 100644 --- a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-tup-cms/components/c-footer.css +++ b/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 */ + + /* TODO: (1) Remove from footer buttons (2) Remove this font-size */ + & small { + font-size: inherit; /* gracefully deprecate use of */ + } +} + + + + + /* LOGOS */ /* To set baseline styles for footer logos */ @@ -169,12 +187,15 @@ html:not(#page-portal) #portal-footer /* trans id */ { /* PER CLIENT - PORTAL */ -/* To add a full-width border above CMS footer */ -/* TODO: Evaluate for tup-ui or Core-CMS CSS */ html:not(#page-portal) .c-footer { + /* To add a full-width border above CMS footer */ + /* TODO: Evaluate for tup-ui or Core-CMS CSS */ border-width: var(--global-border-width--thick) 0 0 0; border-style: solid; border-color: var(--global-color-secondary--light); + + /* To remove padding-block on CMS footer */ + padding-block: unset; } /* To reduce size of Portal footer */ diff --git a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/tup-cms.for-core-cms.css b/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/tup-cms.for-core-cms.css index 7a813aaeb..e90d5a16c 100644 --- a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/tup-cms.for-core-cms.css +++ b/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/tup-cms.for-core-cms.css @@ -5,7 +5,6 @@ /* ... */ /* GENERICS */ -@import url("./for-core-cms/generics/pseudo-elements.css") layer(project); /* ELEMENTS */ /* … */ @@ -14,11 +13,7 @@ /* … */ /* COMPONENTS */ -@import url("./for-core-cms/components/c-footer.css") layer(project); -@import url("./for-core-cms/components/django.cms.blog.app.item.css") layer(project); @import url("./for-core-cms/components/django.cms.blog.app.page.css") layer(project); -@import url("./for-core-cms/components/django.cms.picture.css") layer(project); -@import url("./for-core-cms/components/lightgallery.css") layer(project); /* TRUMPS */ /* … */ diff --git a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/tup-cms.for-core-styles.css b/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/tup-cms.for-core-styles.css index c0e63518f..661def38b 100644 --- a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/tup-cms.for-core-styles.css +++ b/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/tup-cms.for-core-styles.css @@ -5,24 +5,17 @@ /* … */ /* GENERICS */ -@import url("./for-core-styles/generics/attributes.css") layer(base); +/* … */ /* ELEMENTS */ /* … */ /* OBJECTS */ -@import url("./for-core-styles/objects/o-section.css") layer(base); -@import url("./for-core-styles/objects/o-heading-steps.css") layer(base); +/* … */ /* COMPONENTS */ -@import url("./for-core-styles/components/c-button.css") layer(base); -@import url("./for-core-styles/components/c-card.css") layer(base); -@import url("./for-core-styles/components/c-content-block.css") layer(base); @import url("./for-core-styles/components/c-feed-list.css") layer(base); @import url("./for-core-styles/components/c-news.css") layer(base); -@import url("./for-core-styles/components/c-pill.css") layer(base); -@import url("./for-core-styles/components/c-update.css") layer(base); /* TRUMPS */ -@import url("./for-core-styles/trumps/u-highlight.css") layer(base); -@import url("./for-core-styles/trumps/s-header.css") layer(base); +/* … */ diff --git a/apps/tup-ui/src/main.global.css b/apps/tup-ui/src/main.global.css index fa739a14f..b0b2fa68a 100644 --- a/apps/tup-ui/src/main.global.css +++ b/apps/tup-ui/src/main.global.css @@ -1,16 +1,5 @@ -/* To use new c-nav component not yet in TACC/Core-CMS core-styles.base.css */ -/* TODO: Remove when TACC/Core-CMS loads TACC/Core-Styles v2.13+ */ -/* CAVEAT: Duplicates older, unchanged, global c-nav styles */ -@import url("@tacc/core-styles/dist/components/c-nav.css"); - -/* To use s-affixed-input-wrapper which had been unused outside TACC/Core-CMS */ -/* TODO: Remove when TACC/Core-CMS loads TACC/Core-Styles v2.14+ */ -@import url("@tacc/core-styles/dist/trumps/s-affixed-input-wrapper.css"); - -/* To use new form styles in core-styles.base.css */ -/* TODO: Remove when TACC/Core-CMS loads TACC/Core-Styles v2.15+ */ -@import url("@tacc/core-styles/dist/elements/form.css"); -@import url("@tacc/core-styles/dist/trumps/s-form.css"); +/* To use login form styles */ +@import url('@tacc/core-styles/dist/components/c-form--login.css') layer(base); /* To overwrite @tacc/core-styles CEPv2 spacing */ #page-portal main /* i.e. global-safe :root */ { @@ -55,20 +44,25 @@ body > main { } /* Headings */ -h1, h2, h3, h4, h5, h6 { - margin-block: 0; /* overwrite Bootstrap

through

*/ -} -h1 { - font-size: var(--global-font-size--x-large); - font-weight: var(--regular); -} -h2 { - font-size: var(--global-font-size--large); - font-weight: var(--bold); -} -h3 { - font-size: var(--global-font-size--medium); - font-weight: var(--bold); +/* TODO: Consider creating Core-Styles `…/elements/headings--portal.css` */ +/* FAQ: Put in base layer (like Core-Styles), + so Core-Styles classes take precedence */ +@layer base { + h1, h2, h3, h4, h5, h6 { + margin-block: 0; /* overwrite Bootstrap

through

*/ + } + h1 { + font-size: var(--global-font-size--x-large); + font-weight: var(--regular); + } + h2 { + font-size: var(--global-font-size--large); + font-weight: var(--bold); + } + h3 { + font-size: var(--global-font-size--medium); + font-weight: var(--bold); + } } /* Tables */ diff --git a/apps/tup-ui/src/main.global.for-core-styles.css b/apps/tup-ui/src/main.global.for-core-styles.css index f54d0de31..f173dc2e2 100644 --- a/apps/tup-ui/src/main.global.for-core-styles.css +++ b/apps/tup-ui/src/main.global.for-core-styles.css @@ -44,16 +44,6 @@ hr { height: 16px; } -/* TODO: Remove this after: - 0. attributes.css is migrated to Core-Styles - 1. attributes.css is loaded by Portal */ -[data-prefix]::before { - display: inline-block; - content: attr(data-prefix); - margin-right: 0.25ch; - text-transform: none; -} - /* TODO: Remove this after: 0. CEP v2 colors are removed from Core-Styles settings/color--portal */ #page-portal main /* i.e. global-safe :root */ { diff --git a/apps/tup-ui/src/pages/Login/Login.module.css b/apps/tup-ui/src/pages/Login/Login.module.css deleted file mode 100644 index 821d9a5a0..000000000 --- a/apps/tup-ui/src/pages/Login/Login.module.css +++ /dev/null @@ -1,50 +0,0 @@ -@import url('@tacc/core-styles/src/lib/_imports/tools/media-queries.css'); - -.root { - padding-block: var(--global-space--section-gap); -} - -.footer__link { - font-weight: var(--bold); -} - -.body, -.footer { - width: 100%; - max-width: 630px; - - margin-inline: auto; -} - -.body { - padding: 50px; - - border: var(--global-border--normal); - border-color: var(--global-color-primary--dark); - background-color: var(--global-color-primary--xx-light); - - /* To remove left+right borders when form hits page edge */ - @media (width <= 630px) { - border-inline: 0; - } -} - -.footer { - display: flex; - gap: 1.5em; - margin-top: var(--global-space--normal); - - font-family: var(--global-font-family--sans--cms); - font-size: var(--global-font-size--small); - font-weight: var(--bold); - - @media (--narrow-and-below) { - justify-content: center; - } - @media (--narrow-and-above) { - justify-content: flex-end; - } -} -.footer a { - color: var(--global-color-primary--x-dark); -} diff --git a/apps/tup-ui/src/pages/Login/Login.tsx b/apps/tup-ui/src/pages/Login/Login.tsx index b0d278a48..c0803d3fb 100644 --- a/apps/tup-ui/src/pages/Login/Login.tsx +++ b/apps/tup-ui/src/pages/Login/Login.tsx @@ -1,23 +1,14 @@ import React from 'react'; import { LoginComponent } from '@tacc/tup-components'; -import styles from './Login.module.css'; - const Layout: React.FC = () => { return ( -
- - +
+ +
); }; diff --git a/libs/core-components/src/lib/Icon/Icon.css b/libs/core-components/src/lib/Icon/Icon.css deleted file mode 100644 index ef5ade112..000000000 --- a/libs/core-components/src/lib/Icon/Icon.css +++ /dev/null @@ -1 +0,0 @@ -@import url('@tacc/core-styles/dist/components/cortal.icon.css'); diff --git a/libs/core-components/src/lib/Icon/Icon.tsx b/libs/core-components/src/lib/Icon/Icon.tsx index a7190a00c..0e117878b 100644 --- a/libs/core-components/src/lib/Icon/Icon.tsx +++ b/libs/core-components/src/lib/Icon/Icon.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import './Icon.css'; type sizes = 'xs' | 'sm' | 'md' | 'lg'; diff --git a/libs/core-components/src/lib/TextCopyField/TextCopyField.module.css b/libs/core-components/src/lib/TextCopyField/TextCopyField.module.css index 87667f65d..92dc36b70 100644 --- a/libs/core-components/src/lib/TextCopyField/TextCopyField.module.css +++ b/libs/core-components/src/lib/TextCopyField/TextCopyField.module.css @@ -7,7 +7,7 @@ transition: color var(--transition-duration), background-color var(--transition-duration); - composes: c-button--secondary from '@tacc/core-styles/dist/components/c-button.css'; + composes: c-button--secondary from '@tacc/core-styles/src/lib/_imports/components/c-button.css'; } .copy-button.is-copied, diff --git a/libs/tup-components/src/auth/LoginComponent/LoginComponent.module.css b/libs/tup-components/src/auth/LoginComponent/LoginComponent.module.css index 2a28a6916..1d1bbe130 100644 --- a/libs/tup-components/src/auth/LoginComponent/LoginComponent.module.css +++ b/libs/tup-components/src/auth/LoginComponent/LoginComponent.module.css @@ -1,97 +1,11 @@ -/* CONTAINER */ - -.root { - font-size: 1.6rem; - font-family: var(--global-font-family--sans--cms); -} - - - -/* LINKS */ - -.link { - font-weight: var(--medium); -} - - - -/* TITLE */ - -.title, -.subtitle { - text-align: center; - color: var(--global-color-primary--xx-dark); -} -.title { - font-size: 2.4rem; - font-weight: var(--black); -} -.subtitle { - font-size: 1.6rem; -} - -.logo { - display: block; /* to collapse margins with heading */ - margin-inline: auto; /* to re-center image */ - height: 75px; - margin-bottom: 45px; -} - -.subtitle { - font-weight: var(--medium); /* mimics value (not appearance) from design */ - margin-block: 25px; /* mimics django-cms-forms.css `.description` */ -} - - - -/* FORM */ - /* To hide "(required)" (which is an obvious attribute on a login form) */ +/* FAQ: Core-Styles does this for `c-form--star` but not Bootstrap's `badge` */ .root label :global(.badge) { display: none; } -.field { - /* To use larger field inputs, always (not just coarse pointer devices) */ - padding: 12px 12px; /* mimic Core Styles forms.css @media (pointer: coarse) */ -} - - - -.submit { - padding-block: 10px; /* overrides core-styles.base.css button styles */ -} - -.submit-container { - display: flex; - justify-content: space-between; - align-items: center; -} - - - -/* FOOTER */ - -.footer { - display: flex; - flex-direction: column; - align-items: flex-end; - gap: 12px; - - margin-top: 35px; /* mimics django-cms-forms.css `.button-wrapper` */ -} -.footer > p { - margin-block: 0; /* overwrite browser */ -} - - -/* ERRORS */ - -.error { - margin-bottom: 2rem; /* TODO: move to @tacc/core-styles */ -} /* When (the only known) error would wrap, move all lines to one line */ @media screen and (max-width: 435px) { - .error br { content: ""; } /* to remove new line */ - .error br::after { content: " "; } /* to add space */ + .root :global(.c-form-errors) br { content: ""; } /* to remove new line */ + .root :global(.c-form-errors) br::after { content: " "; } /* to add space */ } diff --git a/libs/tup-components/src/auth/LoginComponent/LoginComponent.tsx b/libs/tup-components/src/auth/LoginComponent/LoginComponent.tsx index 5520649b4..753694b5e 100644 --- a/libs/tup-components/src/auth/LoginComponent/LoginComponent.tsx +++ b/libs/tup-components/src/auth/LoginComponent/LoginComponent.tsx @@ -26,7 +26,7 @@ const LoginError: React.FC<{ status?: number; isError: boolean }> = ({ } if (status === 403) { return ( -
+
Sorry, we can't find an account matching those credentials.
Please try again or create a new account. @@ -34,7 +34,7 @@ const LoginError: React.FC<{ status?: number; isError: boolean }> = ({ ); } return ( -
+
Sorry. Something went wrong while trying to log in. Please try again later.
@@ -46,19 +46,13 @@ const CreateAccountLink = () => ( href="https://accounts.tacc.utexas.edu/register" target="_blank" rel="noreferrer" - className={styles.link} > Create Account ); const AccountHelpLink = () => ( - + Account Help ); @@ -68,7 +62,6 @@ const ResetPasswordLink = () => ( href="https://accounts.tacc.utexas.edu/forgot_password" target="_blank" rel="noreferrer" - className={styles.link} > Reset Password @@ -114,22 +107,19 @@ const LoginComponent: React.FC = ({ className }) => { const status = (error as AxiosError)?.response?.status; return ( -
-

- TACC Logo +
+

+ TACC Logo Log In

-

- to continue to the TACC User Portal -

+

to continue to the TACC User Portal

-
+ @@ -137,17 +127,15 @@ const LoginComponent: React.FC = ({ className }) => { name="password" label="Password" type="password" - className={styles.field} autoComplete="current-password" required /> -
+
-
+

Having trouble logging in?

diff --git a/package-lock.json b/package-lock.json index 760fe2841..1622f806e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -40,7 +40,7 @@ "@nx/vite": "16.5.3", "@nx/web": "16.5.3", "@nx/workspace": "16.5.3", - "@tacc/core-styles": "^2.16.3", + "@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", @@ -5502,9 +5502,9 @@ } }, "node_modules/@tacc/core-styles": { - "version": "2.16.3", - "resolved": "https://registry.npmjs.org/@tacc/core-styles/-/core-styles-2.16.3.tgz", - "integrity": "sha512-xudj4QACQ2qsNdEPiLsa5CpdKKHOeuRW6bQd94WmYl3/1cSbPrZCHWloDfDqGMvxjKgNjUeCMjPG5yK3G4Jeyg==", + "version": "2.22.2", + "resolved": "https://registry.npmjs.org/@tacc/core-styles/-/core-styles-2.22.2.tgz", + "integrity": "sha512-r2QTrZOcUZIjSIcOLktluGhPzGxvYNTEOKF7h6gYmQn8tgiFcesw4xzoIDCVynA5WpaPMZ2jkV3wM+M7SoBd9Q==", "dev": true, "bin": { "core-styles": "src/cli.js" @@ -5515,7 +5515,7 @@ }, "peerDependencies": { "commander": "^9.4.1", - "cssnano": "^5.1.14", + "cssnano": "^5.1.15", "js-yaml": "^4.1.0", "merge-lite": "^1.0.2", "node-cmd": "^5.0.0", @@ -5525,7 +5525,7 @@ "postcss-extend": "^1.0.5", "postcss-import": "^15.0.0", "postcss-preset-env": "^7.8.3", - "postcss-replace": "^2.0.0" + "postcss-replace": "^2.0.1" } }, "node_modules/@tanstack/query-core": { @@ -25541,9 +25541,9 @@ } }, "@tacc/core-styles": { - "version": "2.16.3", - "resolved": "https://registry.npmjs.org/@tacc/core-styles/-/core-styles-2.16.3.tgz", - "integrity": "sha512-xudj4QACQ2qsNdEPiLsa5CpdKKHOeuRW6bQd94WmYl3/1cSbPrZCHWloDfDqGMvxjKgNjUeCMjPG5yK3G4Jeyg==", + "version": "2.22.2", + "resolved": "https://registry.npmjs.org/@tacc/core-styles/-/core-styles-2.22.2.tgz", + "integrity": "sha512-r2QTrZOcUZIjSIcOLktluGhPzGxvYNTEOKF7h6gYmQn8tgiFcesw4xzoIDCVynA5WpaPMZ2jkV3wM+M7SoBd9Q==", "dev": true, "requires": {} }, diff --git a/package.json b/package.json index 0a1f39194..cebb32d2f 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ "@nx/vite": "16.5.3", "@nx/web": "16.5.3", "@nx/workspace": "16.5.3", - "@tacc/core-styles": "^2.16.3", + "@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",