From 2f37610432cc2b0199e321c706fd40103080b4df Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Thu, 21 Jul 2022 19:23:26 -0500 Subject: [PATCH 1/2] feat: delete CSS used only by Frontera CMS Core-CMS 'task/TUP-250--frontera-cms-test': - moved to Core-CMS - loaded from there by Frontera caused by https://github.com/TACC/Core-CMS/pull/518 --- .../lib/_imports/trumps/s-article-list.css | 240 ----------------- .../lib/_imports/trumps/s-article-list.html | 16 -- .../lib/_imports/trumps/s-article-preview.css | 253 ------------------ .../_imports/trumps/s-article-preview.html | 29 -- 4 files changed, 538 deletions(-) delete mode 100644 libs/core-styles/src/lib/_imports/trumps/s-article-list.css delete mode 100644 libs/core-styles/src/lib/_imports/trumps/s-article-list.html delete mode 100644 libs/core-styles/src/lib/_imports/trumps/s-article-preview.css delete mode 100644 libs/core-styles/src/lib/_imports/trumps/s-article-preview.html diff --git a/libs/core-styles/src/lib/_imports/trumps/s-article-list.css b/libs/core-styles/src/lib/_imports/trumps/s-article-list.css deleted file mode 100644 index b1237bc2e..000000000 --- a/libs/core-styles/src/lib/_imports/trumps/s-article-list.css +++ /dev/null @@ -1,240 +0,0 @@ -/* -Article List - -A list of article previews. Content __must__ use the tags defined by the example markup. - -Markup: s-article-list.html - -Styleguide Trumps.Scopes.ArticleList -*/ -@import url("_imports/tools/x-truncate.css"); -@import url("_imports/tools/x-layout.css"); -@import url("_imports/tools/x-article-link.css"); - - - - - -/* Block */ - -[class*="s-article-list--"] { - /* … */ -} - - - - - -/* Children */ - - - -/* Children: All */ - -/* Not "Title" & Not "See More" */ -.s-article-list--layout-e > :not(h2):not(p:last-child) { - /* To shrink heading */ - flex-grow: 1; -} - - - -/* Children: Title */ - -.s-article-list--layout-a > h2, -.s-article-list--layout-b > h2, -.s-article-list--layout-c > h2, -.s-article-list--layout-d > h2 { - /* To span all columns */ - grid-column-start: 1; - grid-column-end: -1; -} - -[class*="s-article-list--"] > h2 { - margin-top: 0; /* overwrite Bootstrap */ - margin-bottom: 3.0rem; /* overwrite Bootstrap */ - - color: var(--global-color-accent--normal); - - font-size: 1.6rem; - font-weight: var(--bold); - text-transform: uppercase; - - @extend .x-truncate--one-line; -} -/* Add a fake short border above title */ -[class*="s-article-list--"] > h2 { - position: relative; - padding-top: 1em; -} -[class*="s-article-list--"] > h2::before { - content: ''; - display: block; - - position: absolute; - top: 0; - height: 0.5em; - width: 2.5em; - - background-color: var(--global-color-accent--normal); -} - - - -/* Children: "See More" */ - -/* Anchor */ - -.s-article-list--layout-a > p:last-child, -.s-article-list--layout-b > p:last-child, -.s-article-list--layout-c > p:last-child, -.s-article-list--layout-d > p:last-child { - /* To span all columns */ - grid-column-start: 1; - grid-column-end: -1; -} - -[class*="s-article-list--"] > p:last-child { - border-top-width: var(--global-border-width--thick); - border-top-style: solid; - - margin-top: 3.0rem; /* GH-99: Use standard spacing value */ - margin-bottom: -1.0rem; /* to "undo" space added from `padding-bottom` */ - - font-size: 1.2rem; - font-weight: var(--bold); -} -[class*="s-article-list--"] > p:last-child a { - display: inline-block; - - padding-top: 1.0rem; - padding-bottom: 1.0rem; - padding-right: 1.0rem; - - @extend .x-truncate--one-line; - max-width: 100%; /* SEE: https://stackoverflow.com/a/44521595 */ -} -/* Dark section */ -.o-section--style-dark[class*="s-article-list--"] > p:last-child, -.o-section--style-dark [class*="s-article-list--"] > p:last-child { - border-color: var(--global-color-primary--xx-light); -} -.o-section--style-dark[class*="s-article-list--"] > p:last-child a, -.o-section--style-dark [class*="s-article-list--"] > p:last-child a { - color: var(--global-color-primary--xx-light); -} -/* Light section */ -.o-section--style-light[class*="s-article-list--"] > p:last-child, -.o-section--style-light [class*="s-article-list--"] > p:last-child { - border-color: var(--global-color-primary--xx-dark); -} -.o-section--style-light[class*="s-article-list--"] > p:last-child a, -.o-section--style-light [class*="s-article-list--"] > p:last-child a { - color: var(--global-color-primary--xx-dark); -} - -/* Icon */ - -[class*="s-article-list--"] > p:last-child a::before { - font-family: "Font Awesome 5 Free"; - content: "\f35a"; - margin-right: 10px; - - font-size: 1.4rem; - vertical-align: middle; - - /* To hide the `text-decoration: underline` of the anchor */ - /* SEE: https://stackoverflow.com/a/15688237/11817077 */ - display: inline-block; -} - - - - - -/* Modifiers */ - - - -/* Modifiers: Links */ - -.s-article-list--links { - font-size: 1.4rem; - color: var(--global-color-primary--xx-dark); -} -.s-article-list--links p:not(:last-child) { - margin: 0; /* Overwrite Bootstrap and browser */ -} -.s-article-list--links p:not(:last-child) a { - font-weight: var(--bold); - color: var(--global-color-primary--xx-dark); -} - -/* Expand link to cover its container */ -.s-article-list--links p:not(:last-child) { position: relative; } -.s-article-list--links p:not(:last-child) a::before { - content: ''; - - @extend .x-article-link-stretch; -} -.s-article-list--layout-gapless.s-article-list--links p:not(:last-child) a::before { - @extend .x-article-link-stretch--gapless; -} -/* Give link state (pseudo-class) feedback */ -.s-article-list--links p:not(:last-child) a:hover::before { - @extend .x-article-link-hover; -} -.s-article-list--layout-gapless.s-article-list--links p:not(:last-child) a:hover::before { - @extend .x-article-link-hover--gapless; -} - - -/* Modifiers: Layout */ - -.s-article-list--layout-a { @extend .x-layout--a; } -.s-article-list--layout-b { @extend .x-layout--b; } -.s-article-list--layout-c { @extend .x-layout--c; } -.s-article-list--layout-d { @extend .x-layout--d; } -.s-article-list--layout-e { @extend .x-layout--e; } - -/* Modifiers: Layout: Column-Based */ - -.s-article-list--layout-a, -.s-article-list--layout-b, -.s-article-list--layout-c, -.s-article-list--layout-d { - column-gap: 3.0rem; /* GH-99: Use standard spacing value */ -} - -/* Modifiers: Layout: Row-Based */ - -.s-article-list--layout-e { - /* … */ -} - -/* Modifiers: Layout: Options */ - -.s-article-list--layout-gapless { - gap: 0; -} - -.s-article-list--layout-compact > p:last-child { - margin-top: 0; -} - -.s-article-list--layout-divided > :not(h2):not(p:last-child) { - padding-top: 0.8rem; - - border-width: var(--global-border-width--normal) 0 0; - border-style: solid; -} -/* Dark section */ -.o-section--style-dark.s-article-list--layout-divided > :not(h2):not(p:last-child), -.o-section--style-dark .s-article-list--layout-divided > :not(h2):not(p:last-child) { - border-color: var(--global-color-primary--light); -} -/* Light section */ -.o-section--style-light.s-article-list--layout-divided > :not(h2):not(p:last-child), -.o-section--style-light .s-article-list--layout-divided > :not(h2):not(p:last-child) { - border-color: var(--global-color-primary--dark); -} diff --git a/libs/core-styles/src/lib/_imports/trumps/s-article-list.html b/libs/core-styles/src/lib/_imports/trumps/s-article-list.html deleted file mode 100644 index 94c68a869..000000000 --- a/libs/core-styles/src/lib/_imports/trumps/s-article-list.html +++ /dev/null @@ -1,16 +0,0 @@ -
-

News & Stuff

-
Article Placeholder
-
- - - diff --git a/libs/core-styles/src/lib/_imports/trumps/s-article-preview.css b/libs/core-styles/src/lib/_imports/trumps/s-article-preview.css deleted file mode 100644 index cbe36e415..000000000 --- a/libs/core-styles/src/lib/_imports/trumps/s-article-preview.css +++ /dev/null @@ -1,253 +0,0 @@ -/* -Article Preview - -A preview of an article (to be used in a `s-article-list`). Content __must__ come in the order and use the tags defined by the example markup. - -Markup: s-article-preview.html - -Styleguide Trumps.Scopes.ArticlePreview -*/ -@import url("_imports/tools/x-truncate.css"); -@import url("_imports/tools/x-article-link.css"); - - - - - -/* Block */ - -.s-article-preview { - position: relative; /* for absolutely positioned "Children: Link" */ - - display: flex; - flex-direction: column; -} - - - - - -/* Children */ - - - -/* Children: Media */ - -.s-article-preview p:first-child { - order: 1; - - overflow: hidden; - - margin-bottom: 0.8rem; /* overwrite Bootstrap */ -} -.s-article-preview p:first-child > img { - /* To center image within container */ - position: relative; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); -} -.s-article-preview p:first-child > img.img-fluid { - /* To ensure super wide or tall image do not have negative space / gaps */ - width: 100%; - object-fit: cover; - height: 100%; /* overwrite `.img-fluid` *//* NOTE: Sould this be standard? */ -} -/* (List) News */ -.s-article-list--news .s-article-preview p:first-child { - height: 180px; -} -/* (List) Allocations */ -.s-article-list--allocations .s-article-preview p:first-child { - height: 10.0rem; -} -/* (List) Events */ -.s-article-list--events .s-article-preview p:first-child { - display: none; -} - - -/* Children: Title */ - -.s-article-preview h3 { - order: 3; - - margin-top: 0; /* overwrite Bootstrap and browser */ - margin-bottom: 0.8rem; /* overwrite Bootstrap and browser */ - - font-size: 1.8rem; - font-weight: var(--bold); - line-height: 2.4rem; -} -/* (List) */ -[class*="s-article-list--"] .s-article-preview h3 { - @extend %x-truncate--one-line; -} -/* (List) Allocations */ -.s-article-list--allocations .s-article-preview h3 { - font-size: 1.6rem; - font-weight: var(--bold); - color: inherit; -} -/* (List) Events */ -.s-article-list--events .s-article-preview h3 { - font-size: 1.4rem; -} - - - -/* Children: Abstract */ - -.s-article-preview p:not(:first-child):not(:last-child) { - order: 4; - - margin-bottom: 0; /* overwrite Bootstrap and browser */ - - font-size: 1.6rem; - line-height: 2.4rem; -} -/* (List) */ -[class*="s-article-list--"] .s-article-preview p:not(:first-child):not(:last-child) { - @extend %x-truncate--many-lines; - --lines: 3; -} -/* (List) Allocations */ -.s-article-list--allocations .s-article-preview p:not(:first-child):not(:last-child) { - display: none; -} -/* (List) Events */ -.s-article-list--events .s-article-preview p:not(:first-child):not(:last-child) { - font-size: 1.4rem; - color: var(--global-color-primary--xx-dark); -} - - - -/* Children: Metadata */ - -.s-article-preview ul { - order: 2; - - display: flex; - flex-direction: column; - - list-style: none; - padding-left: 0; /* overwrite `site.css` and browser */ - - margin-bottom: 0.8rem; /* overwrite Bootstrap */ -} -/* (List) Allocations */ -.s-article-list--allocations .s-article-preview ul { - order: 5; -} - -/* Children: Metadata: Date */ - -.s-article-preview ul > li:nth-child(1) { - order: 2; - - font-weight: var(--medium); - - display: flex; - flex-direction: row; - flex-wrap: wrap; -} -/* (List) News */ -.s-article-list--news .s-article-preview ul > li:nth-child(1) { - margin-bottom: 0.8rem; /* overwrite Bootstrap */ - font-size: 1.0rem; -} -.s-article-list--news .s-article-preview ul > li:nth-child(1)::before { - content: 'Published: '; - white-space: pre; -} -/* (List) Events */ -.s-article-list--events .s-article-preview ul > li:nth-child(1) { - font-size: 1.4rem; - color: var(--global-color-accent--normal); -} -/* (List) Allocations */ -.s-article-list--allocations .s-article-preview ul > li:nth-child(1) { - font-size: 1.6rem; -} -.s-article-list--allocations .s-article-preview ul > li:nth-child(1)::before { - content: 'Submission Deadlines: '; - white-space: pre; -} - -/* Children: Metadata: Type */ - -.s-article-preview ul > li:nth-child(2) { - order: 1; - - font-size: 1.2rem; - font-weight: var(--bold); - text-transform: uppercase; -} -/* (List) Events */ -.s-article-list--events .s-article-preview ul > li:nth-child(2), -/* (List) Allocations */ -.s-article-list--allocations .s-article-preview ul > li:nth-child(2) { - display: none; -} - -/* Children: Metadata: Author */ - -.s-article-preview ul > li:nth-child(3) { - order: 3; -} -/* (List) News */ -.s-article-list--news .s-article-preview ul > li:nth-child(3), -/* (List) Events */ -.s-article-list--events .s-article-preview ul > li:nth-child(3), -/* (List) Allocations */ -.s-article-list--allocations .s-article-preview ul > li:nth-child(3) { - display: none; -} - - - -/* Children: Link */ - -.s-article-preview p:last-child { - margin-bottom: 0; /* overwite Bootstrap and browser */ -} - -/* Expand link to cover its container */ -.s-article-preview p:last-child { - z-index: 1; /* ensure Link appears over Media */ -} -.s-article-preview p:last-child > a { - color: transparent; /* ensure Link _text_ is invisible (allow decoration) */ - - @extend .x-article-link-stretch; -} -.s-article-list--layout-gapless .s-article-preview p:last-child > a { - @extend .x-article-link-stretch--gapless; -} -/* Give link state (pseudo-class) feedback */ -.s-article-preview p:last-child > a:hover { - @extend .x-article-link-hover; -} -.s-article-list--layout-gapless .s-article-preview p:last-child > a:hover { - @extend .x-article-link-hover--gapless; -} - - - - - -/* Modifiers */ - - - -/* Modifiers: (List) News, Allocations, Evetns, etc. */ -/* SEE: All "Children" styles */ - - - -/* Modifiers: (List) Layout: Options */ - -.s-article-list--layout-compact .s-article-preview > * { - margin-bottom: 0; /* overwrite `.s-article-preview > …` */ -} diff --git a/libs/core-styles/src/lib/_imports/trumps/s-article-preview.html b/libs/core-styles/src/lib/_imports/trumps/s-article-preview.html deleted file mode 100644 index 382890a38..000000000 --- a/libs/core-styles/src/lib/_imports/trumps/s-article-preview.html +++ /dev/null @@ -1,29 +0,0 @@ -
-

…

-

A Long or Short Title of Article

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. -

- -
- - - From b87f343baef91841ceb469e1b213297f5851391f Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Thu, 21 Jul 2022 19:25:48 -0500 Subject: [PATCH 2/2] feat: deprecate x-overlay, add c-overlay Optional solution for loading overlay styles without CSS build chain. Looked good enough that it is worth adding. All Frontera and UTRC servers had the class added to their markup. If not used, no foul. If used, home pages are ready. --- .../src/lib/_imports/components/c-overlay.css | 40 +++++++++++++++++++ .../src/lib/_imports/tools/x-overlay.css | 11 +++-- 2 files changed, 47 insertions(+), 4 deletions(-) create mode 100644 libs/core-styles/src/lib/_imports/components/c-overlay.css diff --git a/libs/core-styles/src/lib/_imports/components/c-overlay.css b/libs/core-styles/src/lib/_imports/components/c-overlay.css new file mode 100644 index 000000000..48df65581 --- /dev/null +++ b/libs/core-styles/src/lib/_imports/components/c-overlay.css @@ -0,0 +1,40 @@ +/* +Overlay + +Colored boxes that appear atop a large image (like a banner). + +.c-overlay--blurry - A blurry and transluscent background +.c-overlay--semi-opaque - A clear and almost opaque background + +Styleguide Components.Overlay +*/ + +.c-overlay--blurry /* f.k.a. %x-overlay--curtain */ { + --color-text: inherit; + --color-bkgd-rgb: var(--global-color-primary--normal); + + color: var(--color-text); + background-color: rgba(var(--color-bkgd-rgb), 0.65); + backdrop-filter: blur(6px); + -webkit-backdrop-filter: blur(6px); +} +.o-section--style-dark .c-overlay--curtain { + --color-bkgd-rgb: var(--global-color-primary--x-dark-rgb); +} +.o-section--style-light .c-overlay--curtain { + --color-bkgd-rgb: var(--global-color-primary--x-light-rgb); +} + +.c-overlay--semi-opaque /* f.k.a. %x-overlay--callout */ { + --color-text: inherit; + --color-bkgd-rgb: var(--global-color-primary--normal); + + color: var(--color-text); + background-color: rgba(var(--color-bkgd-rgb), 0.90); +} +.o-section--style-dark .c-overlay--callout { + --color-bkgd-rgb: var(--global-color-primary--xx-dark-rgb); +} +.o-section--style-light .c-overlay--callout { + --color-bkgd-rgb: var(--global-color-primary--xx-light-rgb); +} diff --git a/libs/core-styles/src/lib/_imports/tools/x-overlay.css b/libs/core-styles/src/lib/_imports/tools/x-overlay.css index 57209b900..be2c2bb35 100644 --- a/libs/core-styles/src/lib/_imports/tools/x-overlay.css +++ b/libs/core-styles/src/lib/_imports/tools/x-overlay.css @@ -1,15 +1,18 @@ +/* WARNING: Deprecated. Do NOT extend this in CSS! */ +/* WARNING: Will be removed once UTRC and Frontera are updated */ +/* SEE: ../../components/c-overlay.css */ /* -Overlay +(Deprecated) Overlay Colored boxes that appear atop a large image (like a banner). %x-overlay--curtain - A full size transluscent curtain over the background %x-overlay--callout - A transluscent box surrounding the content -Styleguide Tools.ExtendsAndMixins.Overlay +Styleguide Tools.Deprecated.ExtendsAndMixins.Overlay */ -%x-overlay--curtain { +%x-overlay--curtain /* DEPRECATED */ { --color-text: inherit; --color-bkgd-rgb: var(--global-color-primary--normal); @@ -19,7 +22,7 @@ Styleguide Tools.ExtendsAndMixins.Overlay -webkit-backdrop-filter: blur(6px); } -%x-overlay--callout { +%x-overlay--callout /* DEPRECATED */ { --color-text: inherit; --color-bkgd-rgb: var(--global-color-primary--normal);