diff --git a/conf/css/.postcssrc.yml b/conf/css/.postcssrc.yml index 39b75802a..7938a3ed5 100644 --- a/conf/css/.postcssrc.yml +++ b/conf/css/.postcssrc.yml @@ -17,6 +17,11 @@ plugins: features: custom-media-queries: true media-query-ranges: true + not-pseudo-class: true + nesting-rules: true + # RFE: Fix bug on the Internet so we can use these reliably + # SEE: https://github.com/postcss/postcss-custom-selectors/issues/40 + custom-selectors: true cssnano: preset: - 'default' @@ -27,3 +32,7 @@ plugins: exclude: true mergeRules: exclude: true + # This breaks values like `clamp(0px, 15%, 48px)` by stripping 0's unit + # SEE: https://github.com/cssnano/cssnano/issues/286 + convertValues: + exclude: true diff --git a/conf/css/freeze_variables/.postcssrc.yml b/conf/css/freeze_variables/.postcssrc.yml deleted file mode 100644 index 7ad61f018..000000000 --- a/conf/css/freeze_variables/.postcssrc.yml +++ /dev/null @@ -1,8 +0,0 @@ -plugins: - postcss-import: - path: - - './taccsite_cms/static/site_cms/css/src' - postcss-css-variables: - preserve: 'computed' - preserveAtRulesOrder: true - cssnano: {} diff --git a/package-lock.json b/package-lock.json index 463ff5341..baf9c1c4f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "async": "^3.2.0", "cssnano": "^4.1.10", "dotenv": "^8.2.0", + "merge-lite": "^1.0.2", "npm-watch": "^0.7.0", "postcss-cli": "^7.1.2", "postcss-css-variables": "^0.17.0", @@ -1976,6 +1977,12 @@ "integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==", "dev": true }, + "node_modules/merge-lite": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/merge-lite/-/merge-lite-1.0.2.tgz", + "integrity": "sha512-28Q9aFRLzLCSp/2MLV49sbilBcCw7pIxq9YfOuX8+g/cMbPgYcAZgI0BLHnsb7ZRgvYOuaEGQPYJk8OWcGHk4A==", + "dev": true + }, "node_modules/merge2": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", @@ -5941,6 +5948,12 @@ "integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==", "dev": true }, + "merge-lite": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/merge-lite/-/merge-lite-1.0.2.tgz", + "integrity": "sha512-28Q9aFRLzLCSp/2MLV49sbilBcCw7pIxq9YfOuX8+g/cMbPgYcAZgI0BLHnsb7ZRgvYOuaEGQPYJk8OWcGHk4A==", + "dev": true + }, "merge2": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", diff --git a/package.json b/package.json index d3d02dac4..3439077e8 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "async": "^3.2.0", "cssnano": "^4.1.10", "dotenv": "^8.2.0", + "merge-lite": "^1.0.2", "npm-watch": "^0.7.0", "postcss-cli": "^7.1.2", "postcss-css-variables": "^0.17.0", diff --git a/postcss.js b/postcss.js index a47f81ff5..e5890d1ee 100644 --- a/postcss.js +++ b/postcss.js @@ -35,20 +35,12 @@ function parallelCallback(err, results) { // SEE: https://www.npmjs.com/package/postcss#js-api /** * Build styles for the Core CMS - * @param {boolean} [shouldFreezeVariables=false] - Whether to freeze values of custom properties */ -function buildStylesCore({shouldFreezeVariables = false} = {}) { +function buildStylesCore() { let command; - let sourceDir; - let configDir; - if (shouldFreezeVariables === true) { - sourceDir = 'freeze_variables/'; - configDir = 'conf/css/freeze_variables/'; - } else { - sourceDir = ''; - configDir = standardConfigDir; - } + const sourceDir = ''; + const configDir = standardConfigDir; // Quote globbed paths to prevent OS from parsing them // SEE: https://github.com/postcss/postcss-cli/issues/142#issuecomment-310681302 @@ -69,20 +61,12 @@ function buildStylesCustom() { exec(command, execCallback); } -// The confusing is worth explaining (and fixing if we know how) -console.warn('The commands are run in parallel so the output may be out of order.' + "\n"); +// To explain why output is not sequiential +console.warn('The output may be out of order because the commands are run in parallel.' + "\n"); // Build process for styles may be run in parallel because they are independent // SEE: https://stackoverflow.com/a/10776939/11817077 parallel([ - // Always build Core assets buildStylesCore, - - // Build custom assets, except for Core - () => { if (env.CUSTOM_ASSET_DIR !== 'core-cms') buildStylesCustom() }, - - // Temporarily build "frozen variables" from Core - // FAQ: This is an advanced solution to a problem that should not exist - () => { buildStylesCore({shouldFreezeVariables: true}) }, - // NOTE: Do NOT support freezing variables for custom projects + buildStylesCustom ], parallelCallback); diff --git a/taccsite_cms/static/site_cms/css/src/_imports/_tests/postcss-extend.css b/taccsite_cms/static/site_cms/css/src/_imports/_tests/postcss-extend.css index 129caa323..18f68d831 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/_tests/postcss-extend.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/_tests/postcss-extend.css @@ -54,7 +54,7 @@ Styleguide _Test.Extend /*! Class & Placeholder Selector, Use Placeholder Selector */ /*! Goal: */ -._test_4{color:blue} +._test_4,._test_mixin_4{color:blue} /*! Test: */ %_test_mixin_4, @@ -78,3 +78,21 @@ Styleguide _Test.Extend ._test_5 { @extend _test_mixin_5; } + + +/*! Nested Extends */ + +/*! Goal: */ +._test_6{color:#000}._test_6{background-color:#fff} + +/*! Test: */ +%_test_mixin_6a { + color: black; +} +%_test_mixin_6b { + @extend %_test_mixin_6a; + background-color: white; +} +._test_6 { + @extend %_test_mixin_6b; +} diff --git a/taccsite_cms/static/site_cms/css/src/_imports/_tests/postcss-preset-env.css b/taccsite_cms/static/site_cms/css/src/_imports/_tests/postcss-preset-env.css index 3e269189d..b4cce7ab6 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/_tests/postcss-preset-env.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/_tests/postcss-preset-env.css @@ -73,3 +73,82 @@ Styleguide _Test.PresetEnv @media (--wide-window) { ._test{ background-color:red; } } + +/*! Custom Selectors */ +/* SEE: https://preset-env.cssdb.org/features#custom-selectors */ + +/*! Goal: */ +article h1+p,article h2+p,article h3+p{color: #000;} + +/*! Test: */ +@custom-selector :--heading h1, h2, h3; + +article :--heading + p { + color: #000; +} + +/*! Goal: */ +.nav-link:hover,.nav-link:focus,.nav-link:active{color:red;} + +/*! See: https://github.com/postcss/postcss-custom-selectors/issues/40 */ + +/*! Test: */ +@custom-selector :--nav-link-hover .nav-link:hover; +@custom-selector :--nav-link-focus .nav-link:focus; +@custom-selector :--nav-link-active .nav-link:active; + +:--nav-link-hover, +:--nav-link-focus, +:--nav-link-active { + color: red; +} + +/*! Goal: */ +h4,h5,h6{color: lime;}h4,h5,h6{color: magenta;} + +/*! Test: */ +@custom-selector :--test h1, h2, h3; + +:--test { + color: lime; +} + +@custom-selector :--test h4, h5, h6; + +:--test { + color: magenta; +} + +/*! `:not` Pseudo Class */ +/* SEE: https://preset-env.cssdb.org/features#not-pseudo-class */ + +/*! Goal: */ +._test>:not(._test--x):not(._test--y){align-items:center} + +/*! Test: */ +._test > *:not(._test--x, ._test--y) { + align-items: center; +} + +/*! Nesting Rules */ +/* SEE: https://preset-env.cssdb.org/features#nesting-rules */ + +/*! Goal: */ +.foo { display: grid; } + +@media (orientation: landscape) { + .foo { + grid-auto-flow: column; + } +} + +/*! Test: */ +.foo { + display: grid; + + @media (orientation: landscape) { + & { + grid-auto-flow: column; + } + } +} diff --git a/taccsite_cms/static/site_cms/css/src/_imports/branding_logos.css b/taccsite_cms/static/site_cms/css/src/_imports/branding_logos.css deleted file mode 100644 index e1d157770..000000000 --- a/taccsite_cms/static/site_cms/css/src/_imports/branding_logos.css +++ /dev/null @@ -1,71 +0,0 @@ -/* BRANDING & LOGO CLASS SELECTORS */ -/* TODO: Convert to a component */ - -/* WARNING: NO-R/EM: Until Frontera CMS drops Bootstrap 3.7.1 (for old design)… - `em` nor `rem` was not allowed because results were not consistent. - UPDATE: As of PR #312, this has likely changed (untested). */ - -/* Shared by All Templates */ - -/* Branding Selectors */ - -.branding-header { - --branding-logo-height: 24px; - - display: flex; - align-items: center; - justify-content: center; - - /* This prevents header bar resize when branding is dynamically added */ - /* CAVEAT: This is only for Portal and Docs which dynamically load content */ - /* FAQ: Do not use `48.78px`, because Safari only accepts whole numbers */ - height: 49px; - - background-color: var(--global-color-primary--xx-dark); - color: var(--global-color-primary--xx-light); - border-bottom: 1px solid var(--global-color-primary--normal); -} - -.branding-seperator { - width: 1px; - height: 100%; - max-height: var(--branding-logo-height); - border-left: solid 1px var(--global-color-primary--xx-light); - margin: 0 15px; - vertical-align: middle; -} - -.branding-logo { - height: 30px; - margin: 0; - padding: 0; - border: none; -} - -.branding-logo--tall { - height: 35px; -} - -/* Specific Brand Logo Selectors */ - -.branding-nsf { - height: 35px; -} - -.branding-tacc { - height: var(--branding-logo-height); -} - -.branding-utaustin { - height: var(--branding-logo-height); -} - -/* Logo Selectors */ - -.portal-logo { - float: left; - height: 40px; - margin: 0; - padding: 0; - border: none; -} diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/c-branding.css b/taccsite_cms/static/site_cms/css/src/_imports/components/c-branding.css new file mode 100644 index 000000000..3a24ef2be --- /dev/null +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/c-branding.css @@ -0,0 +1,88 @@ +/* +Branding + +A list of linked images for funders and affiliates. Project customization should be minimal. + +Markup: c-branding.twig.html + +Styleguide Components.Branding +*/ +@import url("_imports/tools/selectors.css"); +@import url("_imports/tools/media-queries.css"); + +/* IDEA: Use multi-column (`column-*`) to simplify border, margin, separator */ + + + +/* Base */ + +.c-branding { + --column-gap--side: 25px; + --column-gap--center: 35px; + + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; +} + + +/* A responsive column gap */ +.c-branding__link:first-child .c-branding__image { + margin-right: var(--column-gap--side); +} +.c-branding__link:not(:first-child, :last-child) .c-branding__image { + margin-left: var(--column-gap--center); + margin-right: var(--column-gap--center); +} +.c-branding__link:last-child .c-branding__image { + margin-left: var(--column-gap--side); +} +@media (--nav-compressed) { + .c-branding { + --column-gap--side: 10px; + --column-gap--center: 10px; + } +} + + + +/* Elements */ + +.c-branding__link { + /* To center image (in case other styles shrink the image) */ + display: flex; + align-items: center; + justify-content: center; + + /* FAQ: Percentage-based math adapts to container height */ + height: var(--height, 90%); +} +.c-branding__separator { + /* To add border */ + /* FAQ: Percentage-based math adapts to container height */ + height: calc(100% - 35%); + border-left: env(--border-width--normal) solid var(--global-color-primary--xx-light); + + /* To hide text */ + width: 0; + overflow: hidden; +} + +/* Specific brands */ +/* FAQ: Percentage-based math adapts to container height */ + +.c-branding__nsf-link +.c-branding__tall-link, { --height: 87.5%; } +.c-branding__tacc-link { --height: 75%; } +.c-branding__utexas-link { --height: 65%; } + + + +/* Modifiers */ + +/* Compact */ +.c-branding--compact { + --column-gap--side: 10px; + --column-gap--center: 10px; +} diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/c-branding.twig.html b/taccsite_cms/static/site_cms/css/src/_imports/components/c-branding.twig.html new file mode 100644 index 000000000..32731f22b --- /dev/null +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/c-branding.twig.html @@ -0,0 +1,22 @@ +
+ + + … + + + | + + + … + + + | + + + … + + +
diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/c-logo.css b/taccsite_cms/static/site_cms/css/src/_imports/components/c-logo.css new file mode 100644 index 000000000..902ca73d6 --- /dev/null +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/c-logo.css @@ -0,0 +1,29 @@ +/* +Logo + +The main website logo. Project customization should be minimal. + +Markup: c-logo.twig.html + +Styleguide Components.Logo +*/ +/* NOTE: All styles here are currently handled by Bootstrap `.navbar-brand` */ +/* TODO: Abandon Bootstrap `.navbar-brand`. Implement minimum styles instead. */ + + + +/* Base */ + +.c-logo { + /* … */ +} + + + +/* Elements */ + +.c-logo__image { + /* Of base i.e. container */ + max-height: 100%; + max-width: 100%; +} diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/c-logo.twig.html b/taccsite_cms/static/site_cms/css/src/_imports/components/c-logo.twig.html new file mode 100644 index 000000000..710c26a39 --- /dev/null +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/c-logo.twig.html @@ -0,0 +1,4 @@ + diff --git a/taccsite_cms/static/site_cms/css/src/_imports/elements/html-elements.css b/taccsite_cms/static/site_cms/css/src/_imports/elements/html-elements.css index 29516ae10..e3a087888 100755 --- a/taccsite_cms/static/site_cms/css/src/_imports/elements/html-elements.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/elements/html-elements.css @@ -29,7 +29,7 @@ body { body { /* To avoid negative whitespace at right on horz scroll on tiny screen */ - min-width: 290px; /* developer-decided value */ + min-width: env(--body-min-width); /* To overwrite Bootstrap */ color: var(--global-color-primary--x-dark); diff --git a/taccsite_cms/static/site_cms/css/src/_imports/elements/tacc-search-bar.css b/taccsite_cms/static/site_cms/css/src/_imports/elements/tacc-search-bar.css index 9b67162e5..9d4fbb97d 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/elements/tacc-search-bar.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/elements/tacc-search-bar.css @@ -1,64 +1,21 @@ /* Search Bar -Styles for search bar cloned from Portal codebase, but also relying on Bootstrap ([whose version usage is complicated][bootstrap-versions]): -- Bootstrap 4.0.0 (loaded as external file in CMS via `` in template) -- relevant delta (manually built) from Bootstrap 4.0.0 (CMS) to 4.3.1 (Portal) +A custom search bar originally designed for the header. -[bootstrap-versions]: https://confluence.tacc.utexas.edu/x/OAACBw - -Markup: s-search-bar.html +Markup: tacc-search-bar.html Styleguide Elements.TACC.SearchBar */ - - -/* FAQ: The `.s-search-bar` is added to trump Bootstrap class specificity */ - -/* tacc-search-bar.s-search-bar::part(form) { */ [part="form"] { - /* FAQ: Ensure search field font matches Portal */ - /* SEE: https://confluence.tacc.utexas.edu/x/cYAZCg */ - font-family: "Roboto"; - - /* Copied from `.container` from Portal */ - /* SEE: https://github.com/TACC/Frontera-Portal/blob/master/client/src/components/DataFiles/DataFilesSearchbar/DataFilesSearchbar.module.css */ - display: flex; - flex-direction: row; - align-items: center; -} - -/* FAQ: Added `#s-header` to trump `.workbench-content .btn-secondary` specificity because it should match (thus override); could have used merely `.s-header`, but CMS use of `@apply` brings in CSS pseudo-class styles, while Portal use of `composes` does not, so `:hover` styles have effect in CMS while they do not have effect in Portal, hence using `#s-header` to create a more specific selector */ -/* !!!: This causes the same bug it does in Portal; no `:hover` state */ -/* #s-header tacc-search-bar.s-search-bar::part(button) { */ -[part="button"] { - @extend .c-button--secondary; - - /* Copied from `.workbench-content .btn-secondary` from Portal `Workbench.scss` */ - background-color: #F4F4F4; - color: #484848; - border: 1px solid #AFAFAF; -} - -.input-group { - /* If link text uses 2 lines, header grows taller (but it must not do so) */ - flex-wrap: nowrap; -} - -/* tacc-search-bar.s-search-bar::part(button__icon) { */ -[part="button__icon"] { - @extend .c-button__icon--before; -} - -/* tacc-search-bar.s-search-bar::part(input) { */ -[part="input"] { - @extend .form-control; - @extend input.form-control; + /* To fill available space of `:host` */ + width: 100%; + height: 100%; } /* Show search bar after all relevant styles have loaded */ /* FAQ: Manage visibility of search bar to avoid FOUC */ -/* HACK: This should be done via a dynamically-added `-is-loaded` class */ -/* tacc-search-bar.s-search-bar::part(form) { */ +/* HACK: This should be done via dynamic `[data-status="loaded"]` */ +/* SEE: /.../templates/nav_search.raw.html */ :host { visibility: visible; height: auto; } diff --git a/taccsite_cms/static/site_cms/css/src/_imports/objects/o-site.css b/taccsite_cms/static/site_cms/css/src/_imports/objects/o-site.css index 85a85c178..96472dceb 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/objects/o-site.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/objects/o-site.css @@ -24,7 +24,8 @@ Styleguide Objects.Site .o-site__foot { flex-shrink: 0; - /* Hides any overflow from `o-site__body` (e.g. `o-section__banner-image`) */ - position: relative; - z-index: 1; + position: relative; /* required for `z-index` */ } +/* To hide overflow from `o-site__body` (ex: `o-section__banner-image`) */ +.o-site__head { z-index: 2; } +.o-site__foot { z-index: 1; } diff --git a/taccsite_cms/static/site_cms/css/src/_imports/settings/border.css b/taccsite_cms/static/site_cms/css/src/_imports/settings/border.css index c11cd836a..07bf41593 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/settings/border.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/settings/border.css @@ -7,13 +7,17 @@ /* Usage: `var(--global-border-width--normal)` */ /* SEE: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties */ +/* TODO: Replace use of `var(--global-border…)` with `env(--border…)` */ :root { - --global-border-width--normal: 1px; + --global-border-width--normal: env(--border-width--normal); --global-border--normal: var(--global-border-width--normal) solid var(--global-color-primary--normal); - --global-border-width--thick: 2px; + --global-border-width--thick: env(--border-width--thick); --global-border--thick: var(--global-border-width--thick) solid var(--global-color-primary--normal); - --global-border-width--x-thick: 3px; + --global-border-width--x-thick: env(--border-width--x-thick); --global-border--x-thick: var(--global-border-width--x-thick) solid var(--global-color-primary--normal); + + --global-border-width--xx-thick: env(--border-width--xx-thick); + --global-border--xx-thick: var(--global-border-width--xx-thick) solid var(--global-color-primary--normal); } diff --git a/taccsite_cms/static/site_cms/css/src/_imports/settings/font.css b/taccsite_cms/static/site_cms/css/src/_imports/settings/font.css index e45477bc2..9113f227e 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/settings/font.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/settings/font.css @@ -54,14 +54,8 @@ Styleguide Settings.CustomProperties.Font /* Weight */ - /* SEE: https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */ - - /* NOTE: Long names to be consistent (opinions welcome) */ - --global-font-weight--regular: 400; - --global-font-weight--medium: 500; - --global-font-weight--bold: 700; - - /* NOTE: Short names to increase adoption (opinions welcome) */ + /* TODO: Replace use of `var(--…)` with `env(--…)` for font weights */ + /* WARNING: Deprecated! Do NOT use. Use `env(--…)` instead for font weights */ --regular: 400; --medium: 500; --bold: 700; diff --git a/taccsite_cms/static/site_cms/css/src/_imports/tools/media-queries.css b/taccsite_cms/static/site_cms/css/src/_imports/tools/media-queries.css index 1671ae32d..1e4bae2c4 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/tools/media-queries.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/tools/media-queries.css @@ -15,6 +15,15 @@ Reference: Styleguide Tools.CustomMediaQueries.Breakpoints */ + + + +/* Standard Breakpoints (based on Bootstrap) */ + +@custom-media --xx-narrow-and-below (width < 320px); +@custom-media --xx-narrow-and-above (width >= 320px); +@custom-media --xx-narrow-to-narrow (320px <= width < 576px); + @custom-media --x-narrow-and-below (width < 576px); @custom-media --x-narrow-and-above (width >= 576px); @custom-media --x-narrow-to-narrow (576px <= width < 768px); @@ -46,3 +55,22 @@ Styleguide Tools.CustomMediaQueries.Breakpoints @custom-media --max-wide-and-below (width < 2400px); @custom-media --max-wide-and-above (width >= 2400px); /* @custom-media --max-wide-to-god-wide (... <= width < ...); */ + + + +/* Header Navbar State (Compressed/Expanded) */ + +/* Map `s-header.html`'s `navbar-expand-*` to `--*-and-below|above`: + - `...-xl` → `--wide-and-...` + - `...-lg` → `--medium-and-...` + - `...-md` → `--narrow-and-...` + - `...-sm` → `--x-narrow-and-...` */ +@custom-media --nav-compressed (width < 1200px); +@custom-media --nav-expanded (width >= 1200px); + +/* Arbitrary widths above `--nav-expanded` */ +/* TODO: Rename these to `--nav-expanded-*` */ +@custom-media --nav-wide-and-below (width < 1400px); +@custom-media --nav-wide-and-above (width >= 1400px); +@custom-media --nav-x-wide-and-below (width < 1680px); +@custom-media --nav-x-wide-and-above (width >= 1680px); diff --git a/taccsite_cms/static/site_cms/css/src/_imports/tools/selectors.css b/taccsite_cms/static/site_cms/css/src/_imports/tools/selectors.css new file mode 100644 index 000000000..de05919e0 --- /dev/null +++ b/taccsite_cms/static/site_cms/css/src/_imports/tools/selectors.css @@ -0,0 +1,19 @@ +/* DO NOT ADD STYLES HERE; ADD CUSTOM SELECTORS TO USE IN OTHER STYLESHEETS */ + +/* +For Other Sites + +These are global selectors to target known subsites. + +Usage: `:--for-subsite .some-class { … }` + +Notice: These must be Tools (imported as needed) until native browser support, at which time they can become Settings (imported globally). + +Reference: +- https://drafts.csswg.org/css-extensions/#custom-selectors + +Styleguide Tools.CustomSelectors.ForOtherSites +*/ +@custom-selector :--for-cms body > .o-site__head; +@custom-selector :--for-portal body > .content; +@custom-selector :--for-docs .wy-body-for-nav; diff --git a/taccsite_cms/static/site_cms/css/src/_imports/tools/x-arrow.css b/taccsite_cms/static/site_cms/css/src/_imports/tools/x-arrow.css new file mode 100644 index 000000000..c7f1d74ea --- /dev/null +++ b/taccsite_cms/static/site_cms/css/src/_imports/tools/x-arrow.css @@ -0,0 +1,35 @@ +/* +Arrow + +An arrow generator. Set variables for specific use cases. + +.x-arrow--right - Rightward (>) +.x-arrow--left - Leftward (<) +.x-arrow--up - Upward (^) +.x-arrow--down - Downward (v) + +Styleguide Components.Branding +*/ + +/* SEE: https://www.w3schools.com/howto/howto_css_arrows.asp */ +%x-arrow { + --size: 5px; + --line: 2px; + --color: black; + + display: inline-block; + vertical-align: middle; + + /* arrow size */ + padding: var(--size); + + /* line width */ + border-width: 0 var(--line) var(--line) 0; + border-style: solid; + border-color: var(--color); +} + +%x-arrow--right { transform: rotate(-45deg); } +%x-arrow--left { transform: rotate(135deg); } +%x-arrow--up { transform: rotate(-135deg); } +%x-arrow--down { transform: rotate(45deg); } diff --git a/taccsite_cms/static/site_cms/css/src/_imports/tools/x-hide.css b/taccsite_cms/static/site_cms/css/src/_imports/tools/x-hide.css new file mode 100644 index 000000000..615d4bc6a --- /dev/null +++ b/taccsite_cms/static/site_cms/css/src/_imports/tools/x-hide.css @@ -0,0 +1,50 @@ +/* +Hide + +Methods to hide text. + +.x-hide--for-all - Hide for all media and remove layout +.x-hide--for-all-but-has-layout - Hide for all media but retain layout +.x-hide--text-image-replacement - Hide text to replace with image +.x-hide--visually - Hide only for visual UI + +Resources: +- https://kittygiraudel.com/2021/02/17/hiding-content-responsibly/ +- https://codepen.io/vincent-valentin/full/JjGmxzV + +Styleguide Tools.ExtendsAndMixins.Hide +*/ + +/* To hide content from all interfaces, even screen readers */ +%x-hide--for-all { + display: none; +} +%x-hide--for-all-but-has-layout { + visibility: hidden; +} + +/* To replace text with image (meets WCAG 2.0 success criteria) */ +/* SEE: https://www.w3.org/TR/WCAG20-TECHS/C30.html */ +%x-hide--text-image-replacement { + /* background-image: url('…'); *//* for user to define */ +} +%x-hide--text-image-replacement__text { + position: absolute; + left: -9999em; +} + +/* To hide content only from visual interfaces (not screen readers) */ +/* SEE: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/ */ +%x-hide--visually { + clip: rect(0 0 0 0); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; + + /* Added by TACC based on other examples */ + border: none; + padding: 0; +} diff --git a/taccsite_cms/static/site_cms/css/src/_imports/tools/x-mobile-button.css b/taccsite_cms/static/site_cms/css/src/_imports/tools/x-mobile-button.css new file mode 100644 index 000000000..39a4c256f --- /dev/null +++ b/taccsite_cms/static/site_cms/css/src/_imports/tools/x-mobile-button.css @@ -0,0 +1,126 @@ +/* +Mobile Button (or Link) + +Styles to lay out button icon, text, and toggle in a compressed area. + +`x-mobile-button--has-toggle` +``` +┌────────────┬───┐ +│ │ │ +│ │ │ +│ Icon │ │ +├────────────┤ ▼ │ +│ Text │ │ +│ │ │ +└────────────┴───┘ +``` + +`x-mobile-button--no-toggle` +``` +┌────────────────┐ +│ │ +│ │ +│ Icon │ +├────────────────┤ +│ Text │ +│ │ +└────────────────┘ +``` + +`x-mobile-button--only-icon` +``` +┌────────────────┐ +│ │ +│ │ +│ │ +│ Icon │ +│ │ +│ │ +└────────────────┘ +``` + +%x-mobile-button--has-toggle - Position toggle (assumed) on side of button +%x-mobile-button--no-toggle - Do not position toggle (would fall to bottom) +%x-mobile-button--only-icon - Position icon (no other el's) in center of button + +Styleguide Tools.ExtendsAndMixins.MobileButton +*/ + +/* WARNING: A button must have `display: (inline-)grid` set externally */ +/* FAQ: Why not set `display: grid` here? + - It may break a button conditionally dependent on `display: none`. + - It would be overridden if button needs `display: inline-grid`. + - It makes user aware of the complexity of `display` and `grid`. +*/ + + + +/* Base */ + +%x-mobile-button { + /* FAQ: The flex properties require `display` of `grid` or `inline-grid` */ + /* display: grid; *//* set this externally */ + + grid-auto-flow: column; + grid-template-rows: auto; + justify-items: center; +} + + + +/* Elements */ + +%x-mobile-button__icon { + grid-area: icon; +} + +%x-mobile-button__text { + grid-area: text; + + align-self: start; + + font-family: var(--global-font-family--sans); + font-size: 10px; /* WARNING: Do not use `rem` until `html { 62.5%; }` */ + text-align: center; + text-transform: uppercase; + font-weight: env(--medium); +} + +%x-mobile-button__toggle { + grid-area: toggle; + + align-self: center; +} + + +/* Modifiers */ + +%x-mobile-button--has-toggle, +%x-mobile-button--no-toggle { + /* To make icon and text appear vertically centered as a group */ + grid-template-rows: auto 16px; /* a tad taller than text line height */ + + align-items: end; +} + +%x-mobile-button--has-toggle { + @extend %x-mobile-button; + + grid-template-areas: + "icon toggle" + "text toggle"; +} +%x-mobile-button--no-toggle { + @extend %x-mobile-button; + + grid-template-areas: + "icon" + "text"; +} +%x-mobile-button--only-icon { + @extend %x-mobile-button; + + align-items: center; /* To vertically center icon */ + grid-template-areas: + "icon"; +} diff --git a/taccsite_cms/static/site_cms/css/src/_imports/tools/x-overlay.css b/taccsite_cms/static/site_cms/css/src/_imports/tools/x-overlay.css index 57209b900..c6cbf601f 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/tools/x-overlay.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/tools/x-overlay.css @@ -14,9 +14,24 @@ Styleguide Tools.ExtendsAndMixins.Overlay --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); + + @supports (-webkit-backdrop-filter: none) { + & { + background-color: rgba(var(--color-bkgd-rgb), 0.65); + -webkit-backdrop-filter: blur(6px); + } + } + @supports (backdrop-filter: none) { + & { + background-color: rgba(var(--color-bkgd-rgb), 0.65); + backdrop-filter: blur(6px); + } + } + @supports not (backdrop-filter: none) and not (backdrop-filter: none) { + & { + background-color: rgba(var(--color-bkgd-rgb), 0.95); + } + } } %x-overlay--callout { diff --git a/taccsite_cms/static/site_cms/css/src/_imports/trumps/README.css b/taccsite_cms/static/site_cms/css/src/_imports/trumps/README.css index 1068295b7..2f990b30c 100755 --- a/taccsite_cms/static/site_cms/css/src/_imports/trumps/README.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/trumps/README.css @@ -54,6 +54,47 @@ Rules: Styleguide Trumps.Scopes */ +/* +For (Other Sites) + +For (Other Sites) styles are functional overrides and styles that are scoped to a specific subsite that shares elements with sibling subsites. These are meant to be used sparingly. The for-other-site styles are specifically intended for needs specific to Docs, CMS, or Portal. + +Guidelines: + +- For (Other Site) styles are especially rare, evaluate before creating. +- For reliable results, use a consistent selector for each subsite. + +Rules: + +- The `!important` may be used. +- All styles **must** have a comment. + +Styleguide Trumps.ForOtherSites +*/ + +/* +Scopes + +Scope styles are functional overrides and styles that are scoped to a specific area. These are meant to be used sparingly. Examples of scopes are functional styles for third-party markup, WYSIWIG editor tags, form elements, components with a forced relationship. + +Reference: + +- [BEM with Namespaces: Scope Namespaces](https://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/#scope-namespaces-s-) + +Guidelines: + +- Scopes are pretty rare, evaluate before creating. +- A consistent way to author these in nested inside `.s-* {}`. + +Rules: + +- The `!important` may be used. +- All overrides **must** have a comment. +- Scope styles should have a comment. + +Styleguide Trumps.Scopes +*/ + /* Utility diff --git a/taccsite_cms/static/site_cms/css/src/_imports/trumps/for-docs.header.css b/taccsite_cms/static/site_cms/css/src/_imports/trumps/for-docs.header.css new file mode 100644 index 000000000..3d8c623d0 --- /dev/null +++ b/taccsite_cms/static/site_cms/css/src/_imports/trumps/for-docs.header.css @@ -0,0 +1,127 @@ +/* +Docs + +The [Core Docs](https://github.com/TACC/Core-Docs). + +Styleguide Trumps.ForOtherSites.Docs +*/ +@import url("_imports/tools/selectors.css"); +@import url("_imports/tools/x-hide.css"); + + + +/* Update & Unset Outdated Styles */ + +:--for-docs #frontera-top-nav { + min-height: calc( + var(--header-brandbar-height) + var(--header-navbar-height) + ); + background-color: unset; +} + + + +/* Ammend `s-header.css` (for Header because of Body) */ + +@media (--xx-narrow-and-below) { + + /* To position navbar+button based on screen width instead of parent width */ + /* FAQ: Portal body min-width places a static button outside narrow screen */ + :--for-docs .s-header :--navbar-toggle { + flex-grow: 1; + + /* To overwrite `s-header.css` */ + margin-right: 0; + } + :--for-docs .s-header .navbar-collapse { + /* To overwrite `s-header.css` */ + right: 0; + } + +} + + + +/* Initialize Sidebar Position (for Dependency on Header Height) */ + +/* To position Docs' sidebar nav at expected initial vertical location ASAP */ +:--for-docs nav.stickynav { + /* To override `top: 0` (in `theme.css`) */ + /* FAQ: This is an initial value that is re-calculated by a Docs script */ + /* SEE: https://bitbucket.org/taccaci/frontera-tech-docs/src/429f05f/frontera_theme/base.html#lines-69 */ + top: calc( + var(--header-brandbar-height) + var(--header-navbar-height) + ); +} + + + +/* Supplement Bootstrap (for Search Form in Header) */ +/* AFTER GH-101: Docs: Remove these blocks */ +/* SEE: https://bitbucket.org/taccaci/frontera-tech-docs/src/ed6a61a/docs/css/cms.bootstrap.4.3.1.css#lines-18:25 */ +/* SEE: https://bitbucket.org/taccaci/frontera-tech-docs/src/ed6a61aeb8bc7776a0b1be0f93ade47bcd05e3ba/docs/css/cms.bootstrap.4.3.1.css#lines-606:624 */ + +/* To compensate for Docs not having `.form-inline` in _its_ Bootstrap 4.3.1 */ +:--for-docs .form-inline { + /* The search bar expects these styles to be available */ + /* SEE: CMS //maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap… */ + /* SEE: Portal //stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap… */ + /* SEE: Docs /src/5b223a5/docs/css/cms.bootstrap.4.3.1.css */ + display: flex; + /* NOTE: These are perceptibly ineffectual but consistent with Portal & CMS */ + flex-flow: row wrap; + align-items: center; +} + +/* To compensate for Docs not having `.sr-only` in _its_ Bootstrap 4.3.1 */ +:--for-docs .sr-only { + @extend %x-hide--visually; +} + + + +/* Overwrite ReadTheDocs (for Images in Header) */ + +:--for-docs .s-header img, +:--for-docs .c-branding img { + width: unset; + vertical-align: unset; +} + + + +/* Overwrite ReadTheDocs (so Header Mobile Nav covers Body Side Nav) */ + +.wy-nav-side { + z-index: unset; +} + + + +/* Overwrite TACC (for TACC Icons in Header, for FontAwesome Icons in Body) */ + +/* To override an override that exists in a - + - - - -{# NOTE: Copied from Portal DataFiles search bar (rendered markup, not raw) #} -{# SEE: https://github.com/TACC/Frontera-Portal/blob/master/client/src/components/DataFiles/DataFilesSearchbar/DataFilesSearchbar.js #}
-
-
- -
- - -
+ + + + + +
diff --git a/taccsite_custom b/taccsite_custom index 4e51b1a7f..9a7ea578e 160000 --- a/taccsite_custom +++ b/taccsite_custom @@ -1 +1 @@ -Subproject commit 4e51b1a7f4c26d9bc67589df22037789e42e6c5d +Subproject commit 9a7ea578ea7d52a9df5b6300d4456fa2f99df362 diff --git a/yarn.lock b/yarn.lock index 85332abc7..dc026c254 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1277,6 +1277,11 @@ mdn-data@2.0.4: resolved "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz" integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA== +merge-lite@^1.0.2: + version "1.0.2" + resolved "https://registry.npmjs.org/merge-lite/-/merge-lite-1.0.2.tgz" + integrity sha512-28Q9aFRLzLCSp/2MLV49sbilBcCw7pIxq9YfOuX8+g/cMbPgYcAZgI0BLHnsb7ZRgvYOuaEGQPYJk8OWcGHk4A== + merge2@^1.3.0: version "1.4.1" resolved "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz"