-
-
-
-
-
\ No newline at end of file
diff --git a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-tup-cms/components/banner/readme.md b/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-tup-cms/components/banner/readme.md
deleted file mode 100644
index 92e7e10b0..000000000
--- a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-tup-cms/components/banner/readme.md
+++ /dev/null
@@ -1,3 +0,0 @@
-A list of article previews.
-
-> **⚠️ Warning**: Styles are heavily dependent on the tags in the sample markup.
diff --git a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-tup-cms/components/c-data-list.css b/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-tup-cms/components/c-data-list.css
deleted file mode 100644
index d5926536d..000000000
--- a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-tup-cms/components/c-data-list.css
+++ /dev/null
@@ -1,15 +0,0 @@
-/* SEE: https://dev.tup.tacc.utexas.edu/systems/frontera/ */
-
-table[class*="data-list--"] {
- /* TODO: Consider this for all tables */
- margin-bottom: 40px;
-}
-table[class*="data-list--"] :is(th, td) {
- background: unset;
-}
-table[class*="data-list--"] th {
- font-weight: var(--black); /* undo core-styles.base table */
-}
-table[class*="data-list--"] td {
- color: unset; /* undo core-styles.base table */
-}
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
deleted file mode 100644
index 9fc3fd84d..000000000
--- a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-tup-cms/components/c-footer.css
+++ /dev/null
@@ -1,244 +0,0 @@
-/* BUTTONS */
-
-/* To style buttons differently than in body */
-.c-footer .c-button,
-.c-footer [class*="button--"] {
- & small {
- font-size: var(--global-font-size--x-small);
- }
-}
-
-
-
-
-
-/* LOGOS */
-
-/* To set baseline styles for footer logos */
-/* TODO: Evaluate for tup-ui or core-cms CSS */
-.c-footer svg {
- fill: var(--global-color-primary--xx-light);
-}
-.c-footer [class*="logos--"] {
- display: grid;
- gap: var(--gap, 0);
- grid-auto-flow: column;
- justify-content: center;
-}
-.c-footer .logos--branding {
- --gap: 2rem;
-
- /* NOTE: Test any changes on all browsers and screen sizes */
- grid-template-columns: repeat( 3, minmax(0, 1fr) );
-}
-.c-footer .logos--branding a {
- min-height: 60px;
- max-height: 120px;
-}
-
-.c-footer [class*="logos--"] a {
- display: inline-flex;
- align-items: center;
- justify-content: center; /* horz align when image narrower than grid cell */
-}
-
-/* For independent logo sizes */
-.c-footer .logos--branding svg {
- height: 55%;
-}
-.c-footer .logos__tacc svg {
- /* To vertically align center as if small text was not present */
- transform: translateY(5%);
-}
-.c-footer .logos__ut svg {
- /* To vertically align center as if small text was not present */
- transform: translateY(5%);
-}
-
-/* To create fake border between logos */
-.c-footer [class*="logos--"] a { position: relative }
-.c-footer .logos--branding a:not(:first-child)::before {
- height: 75%;
-
- position: absolute;
- left: calc( -1 * var(--gap)/2 );
-
- content: '';
- display: block;
- background-color: var(--global-color-primary--xx-light);
- background-clip: content-box;
- width: var(--global-border-width--normal);
- box-sizing: content-box;
-
- cursor: default;
-}
-
-/* To skin logo links */
-.c-footer [class*="logos--"] a {
- &:hover {
- color: inherit;
- }
- &:hover svg {
- color: currentColor;
- outline: var(--global-border-width--normal) solid currentColor;
- outline-offset: 5px;
- border-radius: var(--global-border-width--normal);
- }
- &:active svg {
- outline-style: dotted;
- }
-}
-.c-footer .logos--social a {
- padding: 0.5em;
-}
-.c-footer .logos--social svg {
- font-size: 2.5rem;
-}
-
-
-/* HACK: To undo tricky Instagram hover color */
-.c-footer .logos--social a.logos__instagram:hover {
- mask: unset;
- background: unset;
-}
-.c-footer .logos--social a.logos__instagram:hover svg {
- visibility: visible;
-}
-
-
-
-
-
-/* LAYOUT */
-
-
-
-/* LAYOUT - All Screens */
-
-.c-footer {
- --pad-vert: 36px;
- --pad-horz: 36px;
-}
-
-
-/* LAYOUT - Narrow Screen */
-
-/* Move all panes to one column */
-@media (width < 380px) {
- #cms-footer .col {
- /* FAQ: I copied Bootstrap .col-6 styles and changed 50% to 100% */
- -webkit-box-flex: 0;
- -ms-flex: 0 0 100%;
- flex: 0 0 100%;
- max-width: 100%;
- }
-}
-
-
-
-
-/* LAYOUT - Wide Screen */
-
-/* To draw a line between "Quick Links" and regular links */
-@media (width > 380px) {
- #cms-footer .c-pane--aside {
- border-left: var(--global-border-width--normal) solid var(--global-color-primary--xx-light);
- }
-}
-
-/* To draw a box behind common footer content */
-/* FAQ: The box stretches to cover the height and right side of the footer */
-@media (width >= 992px) {
- #cms-footer .c-pane--common {
- /* To move c-footer vertical padding into this pane */
- margin-block: calc( -1 * var(--pad-vert) );
- padding-block: var(--pad-vert);
-
- background-color: var(--global-color-primary--x-dark);
- }
- html:not(#page-portal) .c-footer {
- padding-right: revert; /* undo core-styles.cms.css */
- }
- #cms-footer .c-pane--common {
- padding-inline: var(--pad-horz);
- }
- #cms-footer.row:not(.no-gutters) {
- margin-right: 0;
- }
-}
-
-
-
-
-
-/* PER CLIENT */
-
-
-/* PER CLIENT - HIDE/SHOW */
-
-/* To hide/show CMS/Portal footer */
-html#page-portal #cms-footer, /* new id */
-html:not(#page-portal) #portal-footer /* trans id */ {
- display: none;
-}
-
-/* PER CLIENT - PORTAL */
-
-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 */
-html#page-portal .c-footer {
- --pad-vert: 0;
- --pad-horz: 15px; /* WARNING: any less causes unexplained scrollbar */
-}
-html#page-portal .c-footer p {
- margin-bottom: revert; /* undo Bootstrap */
-}
-
-/* To vertically center text */
-#portal-footer p {
- margin-block: revert; /* undo Bootstrap */
-}
-
-
-
-/* PER CLIENT - CMS */
-
-/* To move footer padding into CMS footer */
-#cms-footer {
- padding-block: var(--pad-vert);
-}
-
-/* To tweak minor styles */
-#cms-footer {
- color: var(--global-color-primary--light);
-}
-
-/* Add vertical space between panes, except for aside when it is below others */
-/* FAQ: Bootstrap 4 grid does not have a way to do so */
-#cms-footer .col.c-pane--nav {
- margin-bottom: 2rem;
-}
-
-/* To make text color match on regular text and hyperlinks */
-#cms-footer .c-pane--common,
-#cms-footer .c-pane--common a {
- color: var(--global-color-primary--xx-light);
-}
-#cms-footer .c-pane--common a {
- text-decoration-line: underline;
- text-decoration-color: var(--global-color-primary--dark);
-
- &:hover {
- text-decoration-color: inherit;
- }
-}
diff --git a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-tup-cms/components/c-news.css b/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-tup-cms/components/c-news.css
deleted file mode 100644
index 7a3a3cb3d..000000000
--- a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-tup-cms/components/c-news.css
+++ /dev/null
@@ -1,14 +0,0 @@
-/* To adjust display of metadata (given what .c-update shows) */
-.c-news--read article.has-update .c-news__data {
- display: none;
-}
-.c-news--read article.has-update .c-news__title {
- /* Overwrites c-news--read.css */
- border-bottom: unset;
- margin-bottom: 6.5rem;
-}
-
-/* To hide byline on User Updates */
-.c-news__byline:not(.app-blog *) {
- display: none;
-}
diff --git a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-tup-cms/components/c-tag.css b/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-tup-cms/components/c-tag.css
deleted file mode 100644
index 70a2b3e45..000000000
--- a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-tup-cms/components/c-tag.css
+++ /dev/null
@@ -1,63 +0,0 @@
-.c-tag,
-[class*="tag--"] {
- display: block;
- margin-bottom: 2.0rem;
-
- color: var(--global-color-primary--xx-light);
-
- font-size: var(--global-font-size--small);
-}
-
-/* Press Release */
-[class*="tag--pr"],
-/* To overwrite core-cms django.cms.blog.app.css */
-.app-blog .categories a:is(
- .blog-category-press-release
-) {
- background: #723B0C;
-}
-
-/* Q&A, Human Interest */
-[class*="tag--qa"],
-/* To overwrite core-cms django.cms.blog.app.css */
-.app-blog .categories a:is(
- .blog-category-qa,
- .blog-category-welcome-profile,
- .blog-category-staff-highlight
-) {
- background: var(--global-color-accent--light);
-}
-
-/* Has Video, Audio, or other media beyond statc image */
-[class*="tag--media"],
-/* To overwrite core-cms django.cms.blog.app.css */
-.app-blog .categories a:is(
- .blog-category-podcast,
- .blog-category-multimedia
-) {
- background: var(--global-color-primary--dark);
-}
-
-/* System Status Update */
-[class*="tag--system"] {
- background: var(--global-color-tertiary--normal);
-}
-
-/* Feature Story (different than a "featured" article) */
-[class*="tag--feature"],
-/* To overwrite core-cms django.cms.blog.app.css */
-.app-blog .categories a:is(
- .blog-category-feature-story
-) {
- background: var(--global-color-accent--normal);
-}
-
-/* External Article */
-[class*="tag--external"] {
- background: var(--global-color-secondary--normal);
-}
-
-/* Event */
-[class*="tag--event"] {
- background: var(--global-color-tertiary--dark);
-}
diff --git a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-tup-cms/components/c-update.css b/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-tup-cms/components/c-update.css
deleted file mode 100644
index 1bded9437..000000000
--- a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-tup-cms/components/c-update.css
+++ /dev/null
@@ -1,21 +0,0 @@
-/* To style "Update" pill in title */
-.c-update__title .c-pill {
- vertical-align: middle;
- transform: translateY(-0.125em);
-}
-.c-update__title .c-pill:not([class*="c-pill--"]) {
- background-color: var(--global-color-primary--light);
-}
-
-/* To reduce space between "Original Update" and its content */
-.c-update__header + .c-news__content {
- margin-top: unset; /* ovewrite c-news--read.css */
-}
-
-/* To tweak hr appearance and layout */
-.c-update + hr {
- border-top-color: var(--global-color-priamry--dark);
-
- /* To make line between updates darker and have equal space above and below */
- margin-top: var(--global-space--hr-buffer-below);
-}
diff --git a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-tup-cms/components/c-widget.css b/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-tup-cms/components/c-widget.css
deleted file mode 100644
index 5016037fb..000000000
--- a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-tup-cms/components/c-widget.css
+++ /dev/null
@@ -1,20 +0,0 @@
-/* FAQ: Used on homepage to mimic `c-feed` style (User Updates) heading */
-/* SEE: https://dev.tup.tacc.utexas.edu/ */
-
-/* TODO: Consider 1 pattern for styles shared between c-feed-list & c-widget */
-
-/* !!!: Clones corresponding .c-feed-list syle */
-.c-widget > :is(h1, h2, h3, h4, h5, h6) {
- margin-top: 0;
- margin-bottom: 10px;
-
- /* TODO: When migrated to core-styles, use @extend instead */
- /* @extend .x-truncate--one-line; */
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
-}
-
-.c-widget > div {
- border-top: var(--global-border-width--normal) solid var(--global-color-primary--dark);
-}
diff --git a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-tup-cms/components/content-block.css b/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-tup-cms/components/content-block.css
deleted file mode 100644
index 2e0ace370..000000000
--- a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-tup-cms/components/content-block.css
+++ /dev/null
@@ -1,9 +0,0 @@
-/* SEE https://dev.tup.tacc.utexas.edu/use-tacc/stem-evaluation-services/ */
-/* FAQ: This is specific to TACC, not for Core */
-
-/* To remove some space between content blocks */
-/* FAQ: Short-term solution to excess space */
-/* FAQ: Long-term solution is redo spacing for Rows, Cols, Blocks, and Cards */
-:is(.c-content-block, .content-block) + :is(.c-content-block, .content-block) {
- margin-top: calc( -1 * var(--global-space--bootstrap-gap) ); /* usurp `:is(.c-content-block, .content-block)` */
-}
diff --git a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-tup-cms/components/django-cms-forms.css b/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-tup-cms/components/django-cms-forms.css
deleted file mode 100644
index 1a3b1856b..000000000
--- a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-tup-cms/components/django-cms-forms.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/* Used on a TACC CMS form that is in a card */
-/* SEE: https://dev.tup.tacc.utexas.edu/about/security-and-compliance/protected-data-service/ */
-
-/* Add extra space to bottom of a form in a card */
-/* NOTE: We need this only cuz/if padding is removed from card bottom… */
-/* TODO: Review selector (does a form in ANY card need this?) */
-/* TODO: Review whether to support this edge case for `.c-form` also */
-/* TODO: After review of the selector, add to core-styles.cms.css */
-:is(.card, .c-card, [class*="card--"]) .forms {
- margin-bottom: 20px;
-}
diff --git a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-tup-cms/components/django.cms.blog.app.page.css b/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-tup-cms/components/django.cms.blog.app.page.css
deleted file mode 100644
index 90475b5ba..000000000
--- a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-tup-cms/components/django.cms.blog.app.page.css
+++ /dev/null
@@ -1,28 +0,0 @@
-/* To add space beneath image whose 
- trapped inside it the text beneath */ -/* NOTE: W.B. does NOT know how the text gets trapped with image in one
*/ -/* HELP: Do not integrate into Core unless the use case is real and clarified */ -article.post-detail .blog-content > p:first-child > img:not(:only-child) { - margin-bottom: 2rem; /* mimic core-styles.cms
margin-bottom */
-}
-
-/* On article page, to hide automatic main image */
-/* TODO: Consider CMS setting to hide `.blog-visual` */
-article.post-detail .blog-visual {
- display: none;
-}
-@media (width < 576px) {
- /* To continue hiding news article image on mobile */
- /* TODO: Determine how best to hide on TUP, but not every site */
- /* FAQ: Core-CMS (in dev/tup-cms) sets .blog-visual to `display: grid` */
- /* SEE: https://github.com/TACC/Core-CMS/blob/v3.12.0-alpha.9/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css#L86-L93 */
- /* SEE: https://github.com/TACC/tup-ui/pull/218#issuecomment-1669960294 */
- article.post-detail .blog-visual {
- display: none !important; /* HACK: heavy-handed override of core-cms */
- }
-}
-
-/* On article page, to hide "RELATED POSTS:" */
-/* TODO: Style "RELATED POSTS:" output */
-article.post-detail .post-detail-list {
- display: none;
-}
diff --git a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-tup-cms/components/layered-image--fix-raw-image-size.css b/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-tup-cms/components/layered-image--fix-raw-image-size.css
deleted file mode 100644
index 480cbee6d..000000000
--- a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-tup-cms/components/layered-image--fix-raw-image-size.css
+++ /dev/null
@@ -1,27 +0,0 @@
-/* FIX RAW IMAGE SIZE */
-/* FAQ: This is specific to TACC, not for Core */
-
-/* All images are uploaded at @2x */
-/* HELP: How can we use @2x and @4x to support retina displays */
-:is(.layered-image, [class*="layered-image--"])
-> :is(.align-left, .align-left--oversized, .align-right, .align-center) {
- /* transform: scale(50%); *//* To fix image size */
- transform: scale(40%); /* To fix then tweak image size */
-}
-/* FAQ: Some images are off by a different size than the others... */
-:is(.layered-image, [class*="layered-image--"]) > img[src*="/paperclip"],
-:is(.layered-image, [class*="layered-image--"]) > img[src*="/spiral"] {
- transform: scale(75%);
-}
-@media (min-width: 768px) and (max-width: 991px) {
- :is(.layered-image, [class*="layered-image--"])
- > :is(.align-left, .align-left--oversized, .align-right, .align-center) {
- transform: scale(31.25%);
- }
-}
-@media (min-width: 992px) and (max-width: 1199px) {
- :is(.layered-image, [class*="layered-image--"])
- > :is(.align-left, .align-left--oversized, .align-right, .align-center) {
- transform: scale(37.5%);
- }
-}
diff --git a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-tup-cms/components/layered-image--header-and-section-tweaks.css b/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-tup-cms/components/layered-image--header-and-section-tweaks.css
deleted file mode 100644
index 0e094a587..000000000
--- a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-tup-cms/components/layered-image--header-and-section-tweaks.css
+++ /dev/null
@@ -1,23 +0,0 @@
-/* HEADER & SECTION TWEAKS */
-
-/* TODO: Integrate into Core-CMS */
-
-/* So */
-/* FAQ: To limit style to specific context, consider: `.col`, `:only-child` */
-.layered-image, [class*="layered-image--"] {
- --h1-offset: 0;
-
- margin-top: var(--h1-offset);
-}
-
-/* So child images can be positioned */
-.layered-image, [class*="layered-image--"] {
- /* So children can `position: absolute` */
- position: relative;
-
- /* So background image is centered without `transform: translate(…)` */
- /* FAQ: The `transform` prop is already used to scale images (see @media) */
- /* FAQ: To combine conditional `transform` values with `var()` is complex */
- /* FAQ: To use `scale` prop would work... except on Samsung Internet */
- display: grid;
- justify-items: center;
-}
-
-
-
-/* ELEMENTS */
-
-/* So images can be positioned */
-:is(.layered-image, [class*="layered-image--"])
-> :is(.align-left, .align-left--oversized, .align-right, .align-center) {
- position: absolute;
-}
-:is(.layered-image, [class*="layered-image--"])
-> :is(.align-left, .align-right) {
- float: unset; /* undo core-cms.css */
- max-width: unset; /* undo core-cms.css */
-}
-
-/* To position images at standard anchor points */
-:is(.layered-image, [class*="layered-image--"]) > .align-left,
-:is(.layered-image, [class*="layered-image--"]) > .align-left--oversized {
- left: calc(var(--global-space--grid-gap) / 2);
-}
-:is(.layered-image, [class*="layered-image--"]) > .align-right {
- right: calc(var(--global-space--grid-gap) / 2);
-}
-:is(.layered-image, [class*="layered-image--"]) > .align-left--oversized {
- top: -12%;
- left: -7%;
-}
-:is(.layered-image, [class*="layered-image--"]) > .align-center {
- /* User must set top inline, because designs are few and inconsistent */
- /* https://xd.adobe.com/view/dabaec5a-cc31-4c5c-876e-56d6d8cc359e-8fe9/screen/032918ef-38c1-4cd2-bd3b-c38a5af710da/specs/ */
- /* https://xd.adobe.com/view/dabaec5a-cc31-4c5c-876e-56d6d8cc359e-8fe9/screen/3f3faa5d-3bca-41ed-9c13-0f94a4caae93/specs/ */
- top: 0;
-}
-@media (max-width: 575px) /* ✅ 2023-01-27 16:00 */ {
- /* To position images at standard anchor points */
- :is(.layered-image, [class*="layered-image--"]) > .align-left,
- :is(.layered-image, [class*="layered-image--"]) > .align-left--oversized {
- top: -8.8%;
- left: calc(var(--global-space--grid-gap) / 2);
- }
- :is(.layered-image, [class*="layered-image--"]) > .align-right {
- bottom: -9.25%;
- right: calc(var(--global-space--grid-gap) / 2);
- }
-}
-@media (min-width: 576px) and (max-width: 991px) /* ✅ 2023-01-27 16:00 */ {
- :is(.layered-image, [class*="layered-image--"]) > .align-left {
- top: -8.8%;
- left: -3.4%;
- }
- :is(.layered-image, [class*="layered-image--"]) > .align-right {
- bottom: -9.25%;
- right: -5%;
- }
-}
-@media (min-width: 992px) and (max-width: 1199px) /* ✅ 2023-01-27 16:00 */ {
- :is(.layered-image, [class*="layered-image--"]) > .align-left {
- top: -7.5%;
- left: -3%;
- }
- :is(.layered-image, [class*="layered-image--"]) > .align-right {
- bottom: -7.75%;
- right: -4.35%;
- }
-}
-@media (min-width: 1200px) and (max-width: 1679px) /* ✅ 2023-01-27 16:00 */ {
- :is(.layered-image, [class*="layered-image--"]) > .align-left {
- top: -8.8%;
- left: -3.4%;
- }
- :is(.layered-image, [class*="layered-image--"]) > .align-right {
- bottom: -9.25%;
- right: -5%;
- }
-}
-@media (min-width: 1680px) and (max-width: 1919px) /* ✅ 2023-01-27 16:00 */ {
- :is(.layered-image, [class*="layered-image--"]) > .align-left {
- top: -7.5%;
- left: -3%;
- }
- :is(.layered-image, [class*="layered-image--"]) > .align-right {
- bottom: -7.75%;
- right: -4.35%;
- }
-}
-@media (min-width: 1920px) /* ✅ 2023-01-27 16:00 */ {
- :is(.layered-image, [class*="layered-image--"]) > .align-left {
- top: -6.5%;
- left: -3.6%;
- }
- :is(.layered-image, [class*="layered-image--"]) > .align-right {
- bottom: -6.5%;
- right: -4.9%;
- }
-}
-
-/* To reverse z-index of stacked images (so CMS user can layer intuitively) */
-/* CAVEAT: This works by accident, but designer loves it, so maintain this */
-:is(.layered-image, [class*="layered-image--"])
-> :not([class*="align-"], :only-child) {
- position: relative;
-}
-:is(.layered-image, [class*="layered-image--"])
-> :is(.align-left, .align-left--oversized, .align-right, :not([class*="align-"], :only-child)) {
- z-index: 1;
-}
-:is(.layered-image, [class*="layered-image--"])
-> :is(.align-left--oversized, .align-center) {
- z-index: 0;
-}
-
-/* Undo specific `core-styles.cms.css` .align-… margin */
-:is(.layered-image, [class*="layered-image--"]) > .align-left {
- margin-right: unset;
- margin-bottom: unset;
-}
-:is(.layered-image, [class*="layered-image--"]) > .align-right {
- margin-left: unset;
- margin-bottom: unset;
-}
-:is(.layered-image, [class*="layered-image--"]) > .align-center {
- margin-inline: unset;
-}
-
-/* To set origin for scaling decal and background images */
-:is(.layered-image, [class*="layered-image--"]) > .align-left {
- transform-origin: top left;
-}
-:is(.layered-image, [class*="layered-image--"]) > .align-left--oversized {
- transform-origin: top left;
-}
-:is(.layered-image, [class*="layered-image--"]) > .align-right {
- transform-origin: bottom right;
-}
-:is(.layered-image, [class*="layered-image--"]) > .align-center {
- transform-origin: top;
-}
-
-/* TODO: Once in Core-CMS, use existing @custom-media */
-/* https://xd.adobe.com/view/dabaec5a-cc31-4c5c-876e-56d6d8cc359e-8fe9/screen/4906fef4-4665-473a-8ad3-459a4fab23c8/specs/ */
-@media (max-width: 575px) {
- /* To pull pattern to edge of container when container has no max-width */
- :has(> .layered-image), .has-layered-image {
- overflow-x: clip;
- }
- .layered-image, [class*="layered-image--"] {
- margin-inline: calc( -1 * var(--global-space--bootstrap-gap) );
- }
-}
-@media (max-width: 767px) {
- /* To hide background images when pattern flows vertical with content */
- :is(.layered-image, [class*="layered-image--"]) > .align-center {
- display: none;
- }
-}
-
-
-
-/* EDGE CASES */
-
-/* For a no-modifier, layered image with a single, un-aligned image */
-.layered-image :not([class*="align-"]):only-child {
- /* To negate .layered-image`'s alignment with