From 1b9010ec9e4de4add0f3d88c9650b71a03dba9b2 Mon Sep 17 00:00:00 2001 From: Wesley B <62723358+wesleyboar@users.noreply.github.com> Date: Tue, 14 Feb 2023 14:32:06 -0600 Subject: [PATCH] feat(elements): fake table using paragraphs (#126) --- dist/core-styles.base.css | 2 +- dist/elements/c-card.selectors.css | 1 + dist/elements/table--basic.css | 2 +- dist/elements/table.css | 2 +- dist/elements/table.selectors.css | 1 + dist/trumps/s-paragraph-table.css | 1 + src/lib/_imports/elements/table--basic.css | 31 ++++++++++++++----- src/lib/_imports/elements/table.selectors.css | 3 ++ src/lib/_imports/elements/table/config.yml | 10 +++++- .../elements/table/table--via-paragraphs.hbs | 19 ++++++++++++ .../table/table--via-paragraphs.readme.md | 17 ++++++++++ ...me.md => table--with-paragraphs.readme.md} | 0 src/lib/_imports/trumps/s-paragraph-table.css | 3 ++ .../trumps/s-paragraph-table/config.yml | 7 +++++ .../trumps/s-paragraph-table/readme.md | 17 ++++++++++ .../s-paragraph-table/s-paragraph-table.hbs | 7 +++++ 16 files changed, 111 insertions(+), 12 deletions(-) create mode 100644 dist/elements/c-card.selectors.css create mode 100644 dist/elements/table.selectors.css create mode 100644 dist/trumps/s-paragraph-table.css create mode 100644 src/lib/_imports/elements/table.selectors.css create mode 100644 src/lib/_imports/elements/table/table--via-paragraphs.hbs create mode 100644 src/lib/_imports/elements/table/table--via-paragraphs.readme.md rename src/lib/_imports/elements/table/{table--paragraph.readme.md => table--with-paragraphs.readme.md} (100%) create mode 100644 src/lib/_imports/trumps/s-paragraph-table.css create mode 100644 src/lib/_imports/trumps/s-paragraph-table/config.yml create mode 100644 src/lib/_imports/trumps/s-paragraph-table/readme.md create mode 100644 src/lib/_imports/trumps/s-paragraph-table/s-paragraph-table.hbs diff --git a/dist/core-styles.base.css b/dist/core-styles.base.css index 1a311bc1e..53352145a 100644 --- a/dist/core-styles.base.css +++ b/dist/core-styles.base.css @@ -1,4 +1,4 @@ /*! @tacc/core-styles 1.0.0+ | MIT | github.com/TACC/Core-Styles */@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"); /*! core-styles.base.css */ /*! core-styles.settings.css → */:root{--global-border-width--normal:1px;--global-border--normal:var(--global-border-width--normal) solid var(--global-color-primary--normal);--global-border-width--thick:2px;--global-border--thick:var(--global-border-width--thick) solid var(--global-color-primary--normal);--global-border-width--x-thick:3px;--global-border--x-thick:var(--global-border-width--x-thick) solid var(--global-color-primary--normal)}:root{--global-color-primary--xx-light:#fff;--global-color-primary--xx-light-rgb:255,255,255;--global-color-primary--x-light:#f4f4f4;--global-color-primary--x-light-rgb:244,244,244;--global-color-primary--light:#d7d7d7;--global-color-primary--light-rgb:198,198,198;--global-color-primary--normal:#afafaf;--global-color-primary--normal-rgb:175,175,175;--global-color-primary--dark:#707070;--global-color-primary--dark-rgb:112,112,112;--global-color-primary--x-dark:#484848;--global-color-primary--x-dark-rgb:72,72,72;--global-color-primary--xx-dark:#222;--global-color-primary--xx-dark-rgb:34,34,34;--global-color-primary--xxx-dark:#000;--global-color-primary--xxx-dark-rgb:0,0,0;--global-color-accent--x-light:#e3d7fd;--global-color-accent--light:#a387ed;--global-color-accent--normal:#784fe8;--global-color-accent--dark:#6039cc;--global-color-accent--x-dark:#3d189b;--global-color-accent--xx-dark:#281066;--global-color-accent--xxx-dark:#1e0c4c;--global-color-accent--alt:#d2cce7;--global-color-accent--weak:#6039cc40;--global-color-accent--secondary:var(--global-color-secondary--normal);--global-color-accent--tertiary:var(--global-color-tertiary--normal);--global-color-secondary--normal:#877453;--global-color-secondary--xxx-dark:#332c1f;--global-color-tertiary--normal:#61a39c;--global-color-tertiary--xxx-dark:#1e3331;--global-color-info--x-dark:var(--global-color-primary--xx-dark);--global-color-info--dark:var(--global-color-primary--x-dark);--global-color-info--normal:var(--global-color-primary--normal);--global-color-info--light:var(--global-color-primary--light);--global-color-info--x-light:var(--global-color-primary--x-light);--global-color-info--weak:rgba(var(--global-color-primary--normal),0.125);--global-color-success--x-light:#e7f9e5;--global-color-success--light:#afeca7;--global-color-success--normal:#43d130;--global-color-success--dark:#237119;--global-color-success--x-dark:#263824;--global-color-success--weak:#43d13020;--global-color-warning--x-light:#fbf4e1;--global-color-warning--light:#fae19e;--global-color-warning--normal:#dfa70c;--global-color-warning--dark:#735911;--global-color-warning--x-dark:#3a3320;--global-color-warning--weak:#dfa70c20;--global-color-danger--x-light:#fdf1f1;--global-color-danger--light:#f8c9c9;--global-color-danger--normal:#f09393;--global-color-danger--dark:#af1818;--global-color-danger--x-dark:#3c3030;--global-color-danger--weak:#f0939320;--global-color-background--app:var(--global-color-primary--xx-light);--global-color-link-on-light--normal:var(--global-color-accent--normal);--global-color-link-on-dark--normal:var(--global-color-accent--light)}@font-face{font-display:swap;font-family:Benton Sans;font-style:normal;font-weight:400;src:url(fonts/BentonSans-Regular.otf) format("opentype")}@font-face{font-display:swap;font-family:Benton Sans;font-style:italic;font-weight:400;src:url(fonts/BentonSans-RegularItalic.otf) format("opentype")}@font-face{font-display:swap;font-family:Benton Sans;font-style:normal;font-weight:500;src:url(fonts/BentonSans-Medium.otf) format("opentype")}@font-face{font-display:swap;font-family:Benton Sans;font-style:italic;font-weight:500;src:url(fonts/BentonSans-MediumItalic.otf) format("opentype")}@font-face{font-display:swap;font-family:Benton Sans;font-style:normal;font-weight:700;src:url(fonts/BentonSans-Bold.otf) format("opentype")}@font-face{font-display:swap;font-family:Benton Sans;font-style:normal;font-weight:800;src:url(fonts/BentonSans-Black.otf) format("opentype")}:root{--global-font-family--sans--cms:"Benton Sans","Roboto",sans-serif;--global-font-family--sans--portal:"Roboto",sans-serif;--global-font-family--serif:Times,sans-serif;--global-font-family--mono:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace;--sans--cms:var(--global-font-family--sans--cms);--sans--portal:var(--global-font-family--sans--portal);--serif:var(--global-font-family--serif);--mono:var(--global-font-family--mono);--global-font-weight--regular:400;--global-font-weight--medium:500;--global-font-weight--bold:700;--global-font-weight--black:800;--regular:var(--global-font-weight--regular);--medium:var(--global-font-weight--medium);--bold:var(--global-font-weight--bold);--black:var(--global-font-weight--black)}:root{--global-max-width--x-narrow:540px;--global-max-width--narrow:720px;--global-max-width--medium:960px;--global-max-width--wide:1140px;--global-max-width--x-wide:1320px;--global-max-width--xx-wide:1580px;--global-max-width--xxx-wide:1800px}:root{--global-space--xx-small:2px;--global-space--x-small:4px;--global-space--small:8px;--global-space--normal:16px;--global-space--large:24px;--global-space--x-large:48px;--global-space--list-indent:40px;--global-space--section-gap:60px;--global-space--grid-gap:30px;--global-space--above-breadcrumbs:45px;--global-space--under-breadcrumbs:40px;--global-space--section-top:12px;--global-space--section-bottom:0;--global-space--section-left:24px;--global-space--section-right:36px;--global-space--section:var(--global-space--section-top) var(--global-space--section-right) var(--global-space--section-bottom) var(--global-space--section-left);--global-space--hr-buffer-above:10px;--global-space--hr-buffer-below:30px;--global-space--p-buffer-above:0;--global-space--p-buffer-below:2rem} -/*! ← core-styles.settings.css */html{font-size:62.5%}body,html{height:100%}body{color:var(--global-color-primary--x-dark);font-family:var(--global-font-family--sans);font-size:var(--global-font-size--small);line-height:1.4;margin:0;min-width:290px}:where([role=main],main) :is(button,input,optgroup,select,textarea){font-family:inherit;font-size:inherit;line-height:inherit;margin:0}:where([role=main],main) blockquote{margin-inline:unset}:where([role=main],main) blockquote>p:last-child{margin-bottom:0}:where([role=main],main) figure{margin-inline:unset}:where([role=main],main) :is(dl,ol,ul){margin-bottom:1rem;margin-top:0}:where([role=main],main) details{margin-bottom:1rem;margin-top:0}:where([role=main],main) details>summary{cursor:pointer}.c-button--as-link,.c-form>.c-form__errors .c-button--as-link,.c-form>.c-form__errors a,.c-form__field .c-form__errors li .c-button--as-link,.c-form__field .c-form__errors li a,.c-message .c-button--as-link,.c-message a,.s-irregular-links .c-button--as-link,.s-irregular-links a,.x-link,.x-link--irregular,:where([role=main],main) a:not(.c-button),[class*=message--]:not(.c-message) .c-button--as-link,[class*=message--]:not(.c-message) a{color:var(--global-color-link-on-light--normal);text-decoration:none;text-decoration-thickness:var(--global-border-width--normal);text-underline-offset:.2em}.c-button--as-link:where(:not(:disabled,:where(a[disabled]))):hover,.c-form>.c-form__errors .c-button--as-link:hover,.c-form>.c-form__errors a:hover,.c-form__field .c-form__errors li .c-button--as-link:hover,.c-form__field .c-form__errors li a:hover,.c-message .c-button--as-link:hover,.c-message a:hover,.s-irregular-links .c-button--as-link:hover,.s-irregular-links a:hover,.x-link--hover,.x-link--irregular--hover,:where([role=main],main) a:not(.c-button):hover,[class*=message--]:not(.c-message) .c-button--as-link:hover,[class*=message--]:not(.c-message) a:hover{color:var(--global-color-link-on-light--normal);text-decoration-line:underline;text-decoration-style:solid;text-decoration-thickness:var(--global-border-width--normal)}.c-button--as-link:active,.c-form>.c-form__errors .c-button--as-link:active,.c-form>.c-form__errors a:active,.c-form__field .c-form__errors li .c-button--as-link:active,.c-form__field .c-form__errors li a:active,.c-message .c-button--as-link:active,.c-message a:active,.s-irregular-links .c-button--as-link:active,.s-irregular-links a:active,.x-link--active,.x-link--irregular--active,:where([role=main],main) a:not(.c-button):active,[class*=message--]:not(.c-message) .c-button--as-link:active,[class*=message--]:not(.c-message) a:active{text-decoration-line:underline;text-decoration-style:dotted}.c-form>.c-form__errors .c-button--as-link,.c-form>.c-form__errors a,.c-form__field .c-form__errors li .c-button--as-link,.c-form__field .c-form__errors li a,.c-message .c-button--as-link,.c-message a,.s-irregular-links .c-button--as-link,.s-irregular-links a,.x-link--irregular,[class*=message--]:not(.c-message) .c-button--as-link,[class*=message--]:not(.c-message) a{text-decoration-line:underline}.c-form>.c-form__errors .c-button--as-link:hover,.c-form>.c-form__errors a:hover,.c-form__field .c-form__errors li .c-button--as-link:hover,.c-form__field .c-form__errors li a:hover,.c-message .c-button--as-link:hover,.c-message a:hover,.s-irregular-links .c-button--as-link:hover,.s-irregular-links a:hover,.x-link--irregular--hover,[class*=message--]:not(.c-message) .c-button--as-link:hover,[class*=message--]:not(.c-message) a:hover{text-decoration-style:dashed}.c-form>.c-form__errors .c-button--as-link:active,.c-form>.c-form__errors a:active,.c-form__field .c-form__errors li .c-button--as-link:active,.c-form__field .c-form__errors li a:active,.c-message .c-button--as-link:active,.c-message a:active,.s-irregular-links .c-button--as-link:active,.s-irregular-links a:active,.x-link--irregular--active,[class*=message--]:not(.c-message) .c-button--as-link:active,[class*=message--]:not(.c-message) a:active{text-decoration-style:dotted}.x-truncate--many-lines,table p{--lines:2;-webkit-box-orient:vertical;-webkit-line-clamp:var(--lines);display:-webkit-box;overflow:hidden}.x-untruncate--many-lines{-webkit-line-clamp:inherit;overflow:visible}.c-button,.c-data-list--should-truncate-values [class*=data-list__value],.c-data-list--should-truncate-values dd,.c-data-list--should-truncate-values td,.c-data-list>dt,.c-data-list>tbody>th,.c-form__button,.c-form__buttons button[type=submit],.c-see-all-link,.data-list--truncate-values [class*=data-list__value],.data-list--truncate-values dd,.data-list--truncate-values td,.data-list>dt,.data-list>tbody>th,.modal-title,.x-truncate--one-line,[class*=data-list--]>dt,[class*=data-list--]>tbody>th,[class*=data-list__key]{overflow:hidden;text-overflow:var(--text-overflow,ellipsis);white-space:nowrap}.x-untruncate--one-line{overflow:visible;white-space:normal}table{--font-size:var(--global-font-size--small,12px);--cell-pad-vert:0.6667em;--cell-pad-horz:1.3333em;--cell-line-height:1.1;border-collapse:separate;border-spacing:0;font-family:var(--global-font-family--sans--portal);font-size:var(--font-size)}thead tr :is(td,th){border-bottom:var(--global-border-width--normal) solid var(--global-color-primary--x-dark)}tr:not(:last-of-type)>:is(td,th){border-bottom:var(--global-border-width--normal) solid var(--global-color-primary--light)}tr:nth-child(odd) :is(th,td){background:var(--global-color-background--app)}tr:nth-child(2n) :is(th,td){background:var(--global-color-primary--x-light)}:is(td,th){color:var(--global-color-primary--dark);padding-block:var(--cell-pad-vert);padding-inline:var(--cell-pad-horz);vertical-align:top}:is(td,th){line-height:var(--cell-line-height)}:is(th,td):first-child{border-right:var(--global-border-width--normal) solid var(--global-color-primary--light);left:0;position:sticky}th{color:var(--global-color-primary--x-dark);text-align:inherit}thead>tr>th{font-weight:var(--bold)}tbody>tr>th{font-weight:var(--normal)}caption{caption-side:top;font-size:var(--font-size);padding-block:var(--cell-pad-vert);padding-inline:var(--cell-pad-horz);text-align:unset}td ul{-webkit-padding-start:0;list-style:none;margin-block:0;padding-inline-start:0}td li:not(:last-of-type){margin-bottom:.5em}td button{font-size:inherit}table p{margin-top:0}table p:last-child{margin-bottom:0}@supports selector(:has(table)){table:has(table) :is(td,th){white-space:nowrap}table:has(table) tr:nth-child(2n) :is(th,td){background:var(--global-color-background--app)}td:has(table) tr:nth-child(2n) :is(th,td){background:var(--global-color-primary--x-light)}td:has(table){padding:0}}@supports not selector(:has(table)){table.has-table :is(td,th){white-space:nowrap}table.has-table tr:nth-child(2n) :is(th,td){background:var(--global-color-background--app)}td.has-table tr:nth-child(2n) :is(th,td){background:var(--global-color-primary--x-light)}td.has-table{padding:0}}thead+tbody tr table{--offset-distance:calc(var(--cell-pad-vert)*2 + var(--cell-line-height)*var(--font-size) + var(--global-border-width--normal));--offset:calc(var(--offset-distance)*-1);margin-bottom:var(--offset);transform:translateY(var(--offset))}thead+tbody tr:first-of-type thead{background:var(--global-color-background--app)}thead+tbody tr:not(:first-of-type) thead{visibility:hidden}td:not(:first-child) td:first-child,td:not(:first-child) th:first-child{-webkit-padding-start:8px;padding-inline-start:8px}td:not(:last-child) td:last-child,td:not(:last-child) th:last-child{-webkit-padding-end:8px;padding-inline-end:8px}.o-fixed-header-table thead :is(td,th){position:sticky;top:0;z-index:1}.o-grid--col-auto-count{grid-template-columns:repeat(var(--count),auto)}.o-grid--col-min-width{grid-template-columns:repeat(auto-fit,minmax(var(--width),1fr))}.o-grid{grid-auto-rows:1fr}.o-grid--center-align{align-items:center;justify-items:center}.o-grid{--gap:var(--global-space--grid-gap,15px);display:grid;gap:var(--gap)}.o-grid img{max-height:100%;max-width:100%}.o-grid figure{width:unset}.o-grid>*{overflow:hidden}@media (max-width:575px){.o-grid--col-auto-count{--count:1}}@media (min-width:576px) and (max-width:767px){.o-grid--col-auto-count{--count:2}}@media (min-width:768px) and (max-width:991px){.o-grid--col-auto-count{--count:3}}@media (min-width:992px) and (max-width:1199px){.o-grid--col-auto-count{--count:4}}@media (min-width:1200px) and (max-width:1399px){.o-grid--col-auto-count{--count:5}}@media (min-width:1400px) and (max-width:1679px){.o-grid--col-auto-count{--count:6}}@media (min-width:1680px) and (max-width:1919px){.o-grid--col-auto-count{--count:7}}@media (min-width:1920px) and (max-width:2399px){.o-grid--col-auto-count{--count:8}}@media (min-width:2400px){.o-grid--col-auto-count{--count:9}}.o-grid--col-min-width{--width:250px}.o-grid--col-min-width>:not(img){max-height:100%;max-width:100%}.o-grid--image-fill>:is(a,figure):not(img){height:100%;width:100%}.o-grid--image-fill>a>img:only-child,.o-grid--image-fill>figure>img,.o-grid--image-fill>img{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.o-grid--image-fill>figure:not([class]),.o-grid--image-fill>figure[class*=cms-plugin],.o-grid--image-fill>figure[class=""]{display:flex;flex-direction:column}.o-grid--image-fill>figure:not([class])>img,.o-grid--image-fill>figure[class*=cms-plugin]>img,.o-grid--image-fill>figure[class=""]>img{flex-grow:1;min-height:0}.o-table-wrap--flexible-horz>table{table-layout:fixed;width:100%}.o-table-wrap--flexible-vert>table{height:100%}.o-table-wrap--overflow-hidden{overflow:hidden}.o-table-wrap--overflow-scroll{overflow:auto}@media (min-width:1680px){.container{max-width:var(--global-max-width--x-wide)}}@media (min-width:1920px){.container{max-width:var(--global-max-width--xx-wide)}}.figure>a>img,.figure>img{margin-bottom:20px}.figure-caption{border-top:var(--global-border-width--normal) solid var(--global-color-primary--normal);color:var(--global-color-primary--dark);font-size:var(--global-font-size--medium);padding-top:12px}.modal-body,.modal-content,.modal-footer,.modal-header{border-radius:0}.modal-body,.modal-content,.modal-header{border:none}.modal-footer{border-bottom:none;border-left:none;border-right:none}.modal-header{background-color:var(--global-color-primary--x-light);padding:1.35rem 1.75rem}.modal-title{color:var(--global-color-primary--xx-dark);font-size:1.2rem;font-weight:400}.modal-header .close{color:var(--global-color-primary--x-dark);opacity:1}.modal-header .close:not(:disabled):not(.disabled):focus,.modal-header .close:not(:disabled):not(.disabled):hover{color:var(--global-color-primary--xx-dark);opacity:1}.modal-header .close span{font-family:Cortal-Icons!important;font-size:1.5rem}.modal-header.has-MuiTabs{border-bottom:1px solid #afafaf;flex-direction:row;height:63.5px;padding:5px;position:relative}.modal-header.has-MuiTabs .close{transform:translate(-25%,25%)}.modal-header.has-MuiTabs .MuiTabs-indicator{background-color:#fff}.c-button,.c-form__button,.c-form__buttons button[type=submit]{--min-width:75px;--mid-width:110px;--max-width:130px;border-style:solid;border-width:var(--global-border-width--normal);box-sizing:border-box;display:inline-block}.c-button:not(.c-button--as-link),.c-form__button:not(.c-button--as-link),.c-form__buttons button[type=submit]:not(.c-button--as-link){font-weight:var(--medium)}a.c-button{text-align:center;text-decoration:none}a.c-button--is-busy{cursor:default}.c-button:not(:disabled,:where(a[disabled])),.c-form__button:not(:disabled,:where(a[disabled])),.c-form__buttons button[type=submit]:not(:disabled,:where(a[disabled])){cursor:pointer}.c-button:disabled:not(.c-button--is-busy),.c-button:where(a[disabled]):not(.c-button--is-busy),.c-form__button:disabled:not(.c-button--is-busy),.c-form__button:where(a[disabled]):not(.c-button--is-busy),.c-form__buttons button[type=submit]:disabled:not(.c-button--is-busy),.c-form__buttons button[type=submit]:where(a[disabled]):not(.c-button--is-busy){border-color:var(--global-color-primary--dark);color:var(--global-color-primary--dark);pointer-events:none}.c-button:disabled:not(.c-button--is-busy,.c-button--as-link),.c-button:where(a[disabled]):not(.c-button--is-busy,.c-button--as-link),.c-form__button:disabled:not(.c-button--is-busy,.c-button--as-link),.c-form__button:where(a[disabled]):not(.c-button--is-busy,.c-button--as-link),.c-form__buttons button[type=submit]:disabled:not(.c-button--is-busy,.c-button--as-link),.c-form__buttons button[type=submit]:where(a[disabled]):not(.c-button--is-busy,.c-button--as-link){background-color:var(--global-color-primary--xx-light)}.c-button--is-active,.c-button--primary,.c-button--secondary,.c-button--tertiary,.c-form__button:where(:not([type=submit],[type=reset])),.c-form__button[type=reset],.c-form__button[type=submit],.c-form__buttons button[type=submit]{max-width:var(--max-width);min-width:var(--min-width);padding:6px 18px}.c-button--primary:hover,.c-form__button[type=submit]:hover,.c-form__buttons button[type=submit]:hover{background-color:var(--global-color-accent--dark);border-color:var(--global-color-accent--dark);color:var(--global-color-primary--xx-light)}.c-button--primary:active:not(.c-button--is-busy),.c-form__button[type=submit]:active:not(.c-button--is-busy),.c-form__buttons button[type=submit]:active:not(.c-button--is-busy){background-color:var(--global-color-accent--x-dark);border-color:var(--global-color-accent--dark);border-width:var(--global-border-width--normal);color:var(--global-color-primary--xx-light);outline:var(--global-border-width--normal) solid var(--global-color-accent--dark)}.c-button--primary:focus:not(:active,.c-button--is-busy),.c-form__button[type=submit]:focus:not(:active,.c-button--is-busy),.c-form__buttons button[type=submit]:focus:not(:active,.c-button--is-busy){background-color:var(--global-color-accent--normal);border-color:var(--global-color-primary--xx-light);color:var(--global-color-primary--xx-light);outline:var(--global-border-width--normal) solid var(--global-color-accent--light)}.c-button--primary.c-button--is-busy,.c-button--primary:not(.c-button:hover,.c-button:focus,.c-button:active,.c-button:disabled,.c-button:where(a[disabled])),.c-form__button[type=submit].c-button--is-busy,.c-form__button[type=submit]:not(.c-button:hover,.c-button:focus,.c-button:active,.c-button:disabled,.c-button:where(a[disabled])),.c-form__buttons button[type=submit].c-button--is-busy,.c-form__buttons button[type=submit]:not(.c-button:hover,.c-button:focus,.c-button:active,.c-button:disabled,.c-button:where(a[disabled])){background-color:var(--global-color-accent--normal);border-color:var(--global-color-accent--normal);color:var(--global-color-primary--xx-light)}.c-button--secondary:hover,.c-form__button:where(:not([type=submit],[type=reset])):hover{background-color:var(--global-color-accent--weak);border-color:var(--global-color-accent--normal);color:var(--global-color-primary--xx-dark)}.c-button--secondary:active:not(.c-button--is-busy),.c-form__button:where(:not([type=submit],[type=reset])):active:not(.c-button--is-busy){background-color:var(--global-color-accent--x-light);border-color:var(--global-color-accent--dark);border-width:var(--global-border-width--normal);color:var(--global-color-primary--xx-dark);outline:var(--global-border-width--normal) solid var(--global-color-accent--dark)}.c-button--secondary:focus:not(:active,.c-button--is-busy),.c-form__button:where(:not([type=submit],[type=reset])):focus:not(:active,.c-button--is-busy){background-color:var(--global-color-accent--weak);border-color:var(--global-color-primary--xx-dark);color:var(--global-color-primary--xx-dark);outline:var(--global-border-width--thick) solid var(--global-color-accent--light)}.c-button--secondary.c-button--is-busy,.c-button--secondary:not(.c-button:hover,.c-button:focus,.c-button:active,.c-button:disabled,.c-button:where(a[disabled])),.c-form__button:where(:not([type=submit],[type=reset])).c-button--is-busy,.c-form__button:where(:not([type=submit],[type=reset])):not(.c-button:hover,.c-button:focus,.c-button:active,.c-button:disabled,.c-button:where(a[disabled])){background-color:var(--global-color-primary--x-light);border-color:var(--global-color-primary--xx-dark);color:var(--global-color-primary--xx-dark)}.c-button.c-button--secondary:disabled,.c-button.c-button--secondary:where(a[disabled]),/* for specificity to override */,/* for specificity to override */{background-color:var(--global-color-primary--x-light)}.c-button--tertiary:hover,.c-form__button[type=reset]:hover{background-color:var(--global-color-primary--light);border-color:var(--global-color-accent--dark);color:var(--global-color-primary--xx-dark)}.c-button--tertiary:active:not(.c-button--is-busy),.c-form__button[type=reset]:active:not(.c-button--is-busy){background-color:var(--global-color-accent--x-light);border-color:var(--global-color-accent--dark);border-width:var(--global-border-width--normal);color:var(--global-color-primary--xx-dark);outline:var(--global-border-width--normal) solid var(--global-color-accent--dark)}.c-button--tertiary:focus:not(:active,.c-button--is-busy),.c-form__button[type=reset]:focus:not(:active,.c-button--is-busy){background-color:var(--global-color-primary--light);border-color:var(--global-color-primary--xx-dark);color:var(--global-color-primary--xx-dark);outline:var(--global-border-width--thick) solid var(--global-color-accent--light)}.c-button--tertiary.c-button--is-busy,.c-button--tertiary:not(.c-button:hover,.c-button:focus,.c-button:active,.c-button:disabled,.c-button:where(a[disabled])),.c-form__button[type=reset].c-button--is-busy,.c-form__button[type=reset]:not(.c-button:hover,.c-button:focus,.c-button:active,.c-button:disabled,.c-button:where(a[disabled])){background-color:var(--global-color-primary--xx-light);border-color:var(--global-color-primary--xx-dark);color:var(--global-color-primary--xx-dark)}.c-button--is-active:hover{background-color:var(--global-color-accent--alt);border-color:var(--global-color-accent--dark);color:var(--global-color-primary--xx-dark)}.c-button--is-active:active{background-color:var(--global-color-accent--x-light);border-color:var(--global-color-accent--dark);border-width:var(--global-border-width--normal);color:var(--global-color-primary--xx-dark);outline:var(--global-border-width--normal) solid var(--global-color-accent--dark)}.c-button--is-active:focus:not(:active){background-color:var(--global-color-accent--alt);border-color:var(--global-color-primary--xx-dark);color:var(--global-color-primary--xx-dark);outline:var(--global-border-width--thick) solid var(--global-color-accent--light)}.c-button--is-active.c-button--is-busy,.c-button--is-active:not(.c-button:hover,.c-button:focus,.c-button:active,.c-button:disabled,.c-button:where(a[disabled])){background-color:var(--global-color-accent--x-light);border-color:var(--global-color-primary--xx-dark);color:var(--global-color-primary--xx-dark)}.c-button--as-link{background:unset;border:unset;font-family:inherit;font-size:inherit;padding-inline:unset}.c-button--is-busy{opacity:.5}.c-button--is-busy .c-button__text{opacity:.3}.c-button:not(.c-button--width-short,.c-button--width-medium,.c-button--width-long,.c-button--size-small,.c-button--as-link),.c-form__button:not(.c-button--width-short,.c-button--width-medium,.c-button--width-long,.c-button--size-small,.c-button--as-link),.c-form__buttons button[type=submit]:not(.c-button--width-short,.c-button--width-medium,.c-button--width-long,.c-button--size-small,.c-button--as-link){--max-width:auto;width:auto}.c-button--width-short{width:var(--min-width)}.c-button--width-medium{width:var(--mid-width)}.c-button--width-long{width:var(--max-width)}.c-button--size-small{line-height:1;min-width:0;padding:4px 9px}.c-button>*,.c-form__button>*,.c-form__buttons button[type=submit]>*{vertical-align:middle}.c-button__icon--before{margin-right:.5em}.c-button__icon--after{margin-left:.5em}.x-article-link-stretch{height:100%;left:0;overflow:hidden;position:absolute;top:0;width:100%}.x-article-link-stretch--gapless{left:-15px;width:calc(100% + 30px)}.x-article-link-hover,a.c-callout:hover{--outline-offset:1em;outline:1px solid var(--global-color-accent--normal);outline-offset:var(--outline-offset)}.x-article-link-hover--gapless{--outline-offset:0}a.c-callout:active{outline:1px dotted var(--global-color-accent--normal)}.c-callout{--figure-width--no-units:310;--figure-height--no-units:130;display:grid}.c-callout>:is(img,figure){grid-area:figure}.c-callout>:is(h1,h2,h3,h4,h5,h6){grid-area:title}.c-callout>p{grid-area:desc}.c-callout>p{margin-top:0}.c-callout>figure>img,.c-callout>img{aspect-ratio:var(--figure-width--no-units) /var(--figure-height--no-units);-o-object-fit:cover;object-fit:cover}.c-callout>figure{width:-moz-min-content;width:min-content}@media only screen and (min-width:768px){.c-callout{grid-template-areas:"figure title" "figure desc";grid-template-columns:min-content auto;grid-template-rows:auto min-content;padding:20px;text-align:left}.c-callout>figure{margin:0}.c-callout>:is(img,figure){margin-right:40px}.c-callout>figure>img,.c-callout>img{max-width:-moz-fit-content;max-width:fit-content;width:calc(var(--figure-width--no-units)*1px)}.c-callout>img{min-height:100%}}@media only screen and (max-width:767px){.c-callout{grid-template-areas:"figure" "title" "desc";padding:20px 40px;text-align:center}.c-callout>figure{margin:0}.c-callout>:is(img,figure){margin-bottom:20px}.c-callout>figure>img,.c-callout>img{height:calc(var(--figure-height--no-units)*1px);max-height:-moz-fit-content;max-height:fit-content}.c-callout>img{min-width:100%}}.c-callout>:is(img,figure){place-self:center}.c-callout>p{padding-right:1%}.c-callout{background-color:var(--global-color-link-on-light--normal)}.c-callout>:is(h1,h2,h3,h4,h5,h6){border-bottom:1px solid var(--global-color-primary--xx-light);font-size:var(--global-font-size--x-large);font-weight:var(--medium);margin-bottom:12px;margin-top:0;padding-bottom:12px}.c-callout>:is(h1,h2,h3,h4,h5,h6),[class*=o-section--style] .c-callout>:is(h1,h2,h3,h4,h5,h6){color:var(--global-color-primary--xx-light)}.c-callout>:not(h1,h2,h3,h4,h5,h6){color:var(--global-color-primary--xx-light)}.c-callout>:not(h1,h2,h3,h4,h5,h6,figure){font-size:var(--global-font-size--large);font-weight:var(--medium)}a.c-callout:hover{text-decoration:none}a.c-callout:focus{text-decoration:none}table.c-data-list,table.data-list,table[class*=data-list--]{border-left:0;border-right:0}@supports(text-overflow:":"){.c-data-list>dt,.data-list>dt,[class*=data-list--]>dt,[class*=data-list__key]{--text-overflow:":"}}.c-data-list>tbody>td,.c-data-list>tbody>th,.data-list>tbody>td,.data-list>tbody>th,[class*=data-list--]>tbody>td,[class*=data-list--]>tbody>th{padding-block:.5em}.c-data-list>dt:after,.data-list>dt:after,[class*=data-list--]>dt:after,[class*=data-list__key]:after{content:":";display:inline;padding-right:.25em}.c-data-list>tbody>th,.data-list>tbody>th,[class*=data-list--]>tbody>th{padding-right:.25em}.c-data-list--is-horz,.data-list--horz{display:flex;flex-direction:row}.c-data-list>dd,.data-list>dd,[class*=data-list--]>dd,dl.c-data-list--is-horz,dl.data-list--horz{margin-bottom:0}table.c-data-list--is-horz tbody,table.c-data-list--is-horz tr,table.data-list--horz tbody,table.data-list--horz tr{display:flex;flex-direction:row;min-width:0}.c-data-list--is-horz.c-data-list--is-narrow>[class*=data-list__key]:not(th)~[class*=data-list__key]:not(th):before,.c-data-list--is-horz.c-data-list--is-narrow>[class*=data-list__key]:not(th)~dt:before,.c-data-list--is-horz.c-data-list--is-narrow>dt~[class*=data-list__key]:not(th):before,.c-data-list--is-horz.c-data-list--is-narrow>dt~dt:before,.c-data-list--is-horz.data-list--narrow>[class*=data-list__key]:not(th)~[class*=data-list__key]:not(th):before,.c-data-list--is-horz.data-list--narrow>[class*=data-list__key]:not(th)~dt:before,.c-data-list--is-horz.data-list--narrow>dt~[class*=data-list__key]:not(th):before,.c-data-list--is-horz.data-list--narrow>dt~dt:before,.data-list--horz.c-data-list--is-narrow>[class*=data-list__key]:not(th)~[class*=data-list__key]:not(th):before,.data-list--horz.c-data-list--is-narrow>[class*=data-list__key]:not(th)~dt:before,.data-list--horz.c-data-list--is-narrow>dt~[class*=data-list__key]:not(th):before,.data-list--horz.c-data-list--is-narrow>dt~dt:before,.data-list--horz.data-list--narrow>[class*=data-list__key]:not(th)~[class*=data-list__key]:not(th):before,.data-list--horz.data-list--narrow>[class*=data-list__key]:not(th)~dt:before,.data-list--horz.data-list--narrow>dt~[class*=data-list__key]:not(th):before,.data-list--horz.data-list--narrow>dt~dt:before{padding-left:.5em;padding-right:.5em}.c-data-list--is-horz.c-data-list--is-wide>[class*=data-list__key]:not(th)~[class*=data-list__key]:not(th):before,.c-data-list--is-horz.c-data-list--is-wide>[class*=data-list__key]:not(th)~dt:before,.c-data-list--is-horz.c-data-list--is-wide>dt~[class*=data-list__key]:not(th):before,.c-data-list--is-horz.c-data-list--is-wide>dt~dt:before,.c-data-list--is-horz.data-list--wide>[class*=data-list__key]:not(th)~[class*=data-list__key]:not(th):before,.c-data-list--is-horz.data-list--wide>[class*=data-list__key]:not(th)~dt:before,.c-data-list--is-horz.data-list--wide>dt~[class*=data-list__key]:not(th):before,.c-data-list--is-horz.data-list--wide>dt~dt:before,.data-list--horz.c-data-list--is-wide>[class*=data-list__key]:not(th)~[class*=data-list__key]:not(th):before,.data-list--horz.c-data-list--is-wide>[class*=data-list__key]:not(th)~dt:before,.data-list--horz.c-data-list--is-wide>dt~[class*=data-list__key]:not(th):before,.data-list--horz.c-data-list--is-wide>dt~dt:before,.data-list--horz.data-list--wide>[class*=data-list__key]:not(th)~[class*=data-list__key]:not(th):before,.data-list--horz.data-list--wide>[class*=data-list__key]:not(th)~dt:before,.data-list--horz.data-list--wide>dt~[class*=data-list__key]:not(th):before,.data-list--horz.data-list--wide>dt~dt:before{padding-left:1em;padding-right:1em}table.c-data-list--is-horz.c-data-list--is-narrow tr:not(:first-child) th,table.c-data-list--is-horz.data-list--narrow tr:not(:first-child) th,table.data-list--horz.c-data-list--is-narrow tr:not(:first-child) th,table.data-list--horz.data-list--narrow tr:not(:first-child) th{padding-left:.5em}table.c-data-list--is-horz.c-data-list--is-narrow td,table.c-data-list--is-horz.data-list--narrow td,table.data-list--horz.c-data-list--is-narrow td,table.data-list--horz.data-list--narrow td{margin-right:.5em}table.c-data-list--is-horz.c-data-list--is-wide tr:not(:first-child) th,table.c-data-list--is-horz.data-list--wide tr:not(:first-child) th,table.data-list--horz.c-data-list--is-wide tr:not(:first-child) th,table.data-list--horz.data-list--wide tr:not(:first-child) th{padding-left:1em}table.c-data-list--is-horz.c-data-list--is-wide td,table.c-data-list--is-horz.data-list--wide td,table.data-list--horz.c-data-list--is-wide td,table.data-list--horz.data-list--wide td{margin-right:1em}table.c-data-list--is-vert,table.data-list--vert{table-layout:fixed;width:100%}.c-data-list--is-vert>[class*=data-list__value]:not(td),.c-data-list--is-vert>dd,.data-list--vert>[class*=data-list__value]:not(td),.data-list--vert>dd{margin-left:0}.c-data-list--is-vert.c-data-list--is-narrow [class*=data-list__value],.c-data-list--is-vert.c-data-list--is-narrow dd,.c-data-list--is-vert.c-data-list--is-narrow td,.c-data-list--is-vert.data-list--narrow [class*=data-list__value],.c-data-list--is-vert.data-list--narrow dd,.c-data-list--is-vert.data-list--narrow td,.data-list--vert.c-data-list--is-narrow [class*=data-list__value],.data-list--vert.c-data-list--is-narrow dd,.data-list--vert.c-data-list--is-narrow td,.data-list--vert.data-list--narrow [class*=data-list__value],.data-list--vert.data-list--narrow dd,.data-list--vert.data-list--narrow td{padding-left:0}.c-data-list--is-vert.c-data-list--is-wide [class*=data-list__value],.c-data-list--is-vert.c-data-list--is-wide dd,.c-data-list--is-vert.c-data-list--is-wide td,.c-data-list--is-vert.data-list--wide [class*=data-list__value],.c-data-list--is-vert.data-list--wide dd,.c-data-list--is-vert.data-list--wide td,.data-list--vert.c-data-list--is-wide [class*=data-list__value],.data-list--vert.c-data-list--is-wide dd,.data-list--vert.c-data-list--is-wide td,.data-list--vert.data-list--wide [class*=data-list__value],.data-list--vert.data-list--wide dd,.data-list--vert.data-list--wide td{padding-left:2.5em}.c-data-list>tbody>td,.data-list>tbody>td,[class*=data-list--]>tbody>td,table.c-data-list--is-vert th,table.data-list--vert th{border-left:0;border-right:0}table.c-data-list--is-horz td,table.c-data-list--is-horz th,table.data-list--horz td,table.data-list--horz th{border-bottom:0;border-top:0}table.c-data-list--is-horz tr:first-child th,table.data-list--horz tr:first-child th{border-left:0}table.c-data-list--is-horz th,table.data-list--horz th{border-right:0}.c-data-list--is-horz>[class*=data-list__key]:not(th)~[class*=data-list__key]:not(th):before,.c-data-list--is-horz>[class*=data-list__key]:not(th)~dt:before,.c-data-list--is-horz>dt~[class*=data-list__key]:not(th):before,.c-data-list--is-horz>dt~dt:before,.data-list--horz>[class*=data-list__key]:not(th)~[class*=data-list__key]:not(th):before,.data-list--horz>[class*=data-list__key]:not(th)~dt:before,.data-list--horz>dt~[class*=data-list__key]:not(th):before,.data-list--horz>dt~dt:before{content:"|";display:inline-block}.c-data-list--is-horz:not(table),.data-list--horz:not(table){align-items:baseline}table:--data-list--is-horz tr{align-items:baseline}table:--data-list--is-vert td,table:--data-list--is-vert th{vertical-align:baseline}.c-footer{--line-height:1.5;--min-line-count:2;background-color:var(--global-color-primary--xx-dark);box-sizing:content-box;color:var(--global-color-primary--xx-light);display:flex;flex-direction:column;font-size:12px;justify-content:center;min-height:calc(var(--line-height)*var(--min-line-count)*1em);padding-bottom:20px;padding-top:20px;text-align:center}@media only screen and (max-width:640px){.c-footer{padding-left:5%;padding-right:5%}}@media only screen and (min-width:641px) and (max-width:767px){.c-footer{padding-left:7.5%;padding-right:7.5%}}@media only screen and (min-width:768px) and (max-width:991px){.c-footer{padding-left:10%;padding-right:10%}}@media only screen and (min-width:992px) and (max-width:1199px){.c-footer{padding-left:12.5%;padding-right:12.5%}}@media only screen and (min-width:1200px){.c-footer{padding-left:15%;padding-right:15%}}.c-form>.c-form__errors>:last-child,.c-form__field .c-form__errors li>:last-child,.c-message>:last-child,[class*=message--]:not(.c-message)>:last-child{margin-bottom:0}.c-form>.c-form__errors .c-button--as-link,.c-form>.c-form__errors a,.c-form__field .c-form__errors li .c-button--as-link,.c-form__field .c-form__errors li a,.c-message .c-button--as-link,.c-message a,[class*=message--]:not(.c-message) .c-button--as-link,[class*=message--]:not(.c-message) a{color:inherit!important}.c-form>.c-form__errors,.c-form__field .c-form__errors li,.c-message--scope-inline,.c-message--scope-section,.message--inline,.message--section{font-size:var(--global-font-size--small)}.c-form>.c-form__errors,.c-message--scope-global,.c-message--scope-section,.message--global,.message--section{border:var(--global-border--thick);padding:15px 20px}.c-message--scope-global,.message--global{text-align:center}.c-message--type-info,.message--info{color:var(--global-color-info--dark)}.c-message--type-success,.message--success{color:var(--global-color-success--dark)}.c-message--type-warning,.message--warning{color:var(--global-color-warning--dark)}.c-form>.c-form__errors,.c-form__field .c-form__errors li,.c-message--type-error,.message--error{color:var(--global-color-danger--dark)}.c-message--type-info.c-message--scope-section,.message--info.c-message--scope-section,.message--info.message--section{background-color:var(--global-color-info--x-light);border-color:var(--global-color-info--normal)}.c-message--type-success.c-message--scope-section,.message--success.c-message--scope-section,.message--success.message--section{background-color:var(--global-color-success--x-light);border-color:var(--global-color-success--normal)}.c-message--type-warning.c-message--scope-section,.message--warning.c-message--scope-section,.message--warning.message--section{background-color:var(--global-color-warning--x-light);border-color:var(--global-color-warning--normal)}.c-form>.c-form__errors,.c-form>.c-form__errors.c-message--scope-section,.c-form__field .c-form__errors li.c-message--scope-section,.c-message--type-error.c-message--scope-section,.message--error.c-message--scope-section,.message--error.message--section{background-color:var(--global-color-danger--x-light);border-color:var(--global-color-danger--normal)}.c-message--scope-global,.message--global{background-color:var(--global-color-accent--secondary);border-color:var(--global-color-primary--dark);color:var(--global-color-primary--xx-light)}.c-form__desc{margin-block:25px}.c-form__help{font-size:var(--global-font-size--small);font-style:italic}:not(ul,label)+.c-form__help{margin-top:.3em}.c-form__help>:not(details,a,samp){font-style:normal}.c-form__field{margin-bottom:2rem}.c-form__field:not(.has-type-check){display:flex;flex-direction:column}.c-form__field:not(.has-type-check)>.c-form__errors{order:1}.c-form__field.has-type-check{align-items:center;-moz-column-gap:.5em;column-gap:.5em;display:inline-grid;grid-template-areas:"error _____" "input label" "notes notes";grid-template-columns:min-content auto}.c-form__field.has-type-check .c-form__errors{grid-area:error}.c-form__field.has-type-check input{grid-area:input}.c-form__field.has-type-check label{grid-area:label}.c-form__field.has-type-check .c-form__help{grid-area:notes}.c-form__field.has-type-check label{margin-bottom:0}.c-form__field>ul:where(:not(.c-form__errors)) label{align-items:center;display:flex;font-weight:revert;gap:.5em}.c-form__field>ul:where(:not(.c-form__errors)) li:last-child label{margin-bottom:0}.c-form__field .c-form__star{margin-left:.5em}.c-form__field.has-required .c-form__star{color:var(--global-color-danger--dark)}.c-form__field:not(.has-required) .c-form__star{color:var(--global-color-warning--dark)}.c-form__field .c-form__star{display:inline-block;line-height:0;visibility:hidden;width:0}.c-form__field .c-form__star:after{line-height:normal;visibility:visible}.c-form__field.has-required .c-form__star:after{content:"(required)"}.c-form__field:not(.has-required) .c-form__star:after{content:"(important)"}.c-form__field ul.c-form__errors{margin-bottom:0;margin-top:1rem}ul.c-form__errors{list-style:none;padding-inline:0}.c-form__field>ul:where(:not(.c-form__errors)){list-style:none;padding-left:0}.c-form__buttons{margin-top:35px}nav.c-nav{--link-padding:0.5em}nav.c-nav--boxed{--indent-small:calc(var(--global-space--list-indent)/4);--indent-medium:calc(var(--global-space--list-indent)/2);--indent-large:var(--global-space--list-indent);border:var(--global-border--normal);width:-moz-fit-content;width:fit-content}nav.c-nav--boxed :is(ul,ol){margin:0}nav.c-nav--boxed ul{list-style-type:none;padding-left:var(--indent-medium);padding-right:var(--indent-large)}@media (min-width:992px){nav.c-nav--boxed{padding-block:var(--indent-medium)}nav.c-nav--boxed ol{padding-left:var(--indent-large);padding-right:calc(var(--indent-large) - var(--link-padding))}}@media (max-width:991px){nav.c-nav--boxed{padding-block:var(--indent-small)}nav.c-nav--boxed ol{padding-left:calc(var(--indent-medium) - var(--link-padding));padding-right:calc(var(--indent-large) - var(--link-padding))}}nav.c-nav--boxed.c-nav--no-list{padding-left:var(--indent-medium);padding-right:var(--indent-large)}nav.c-nav{--space-between-inline-items:0.5em}nav.c-nav a{display:inline-block;padding-inline:var(--link-padding)}nav.c-nav--no-list{display:flex;flex-wrap:wrap}nav.c-nav--no-list>a{margin-right:var(--space-between-inline-items)}@media (max-width:991px){nav.c-nav a{line-height:2.5}nav.c-nav :is(ul,ol){display:flex;flex-wrap:wrap;list-style-position:inside}nav.c-nav :is(ul,ol):not(.c-nav--boxed :is(ul,ol)){padding-left:unset}nav.c-nav :is(ul,ol) li{margin-right:var(--space-between-inline-items)}nav.c-nav ul{list-style-type:none}}.c-page-list{--item-width:2em;--item-buffer:3px;--item-border:var(--global-border-width--normal)}.c-page-list{align-items:baseline;display:flex;flex-direction:row;font-size:14px;list-style:none}ul.c-page-list{list-style:none}.c-page-link--always-click{box-sizing:content-box;position:relative}.c-page-link--always-click:after,.c-page-link--always-click:before{--width:var(--item-buffer);--vert-offset:calc(var(--item-border)*-1);--horz-offset:calc(100% + var(--item-border));bottom:var(--vert-offset);content:"";position:absolute;top:var(--vert-offset);width:var(--width)}.c-page-link--always-click.c-button{overflow:visible}.c-page-link--always-click:before{right:var(--horz-offset)}.c-page-link--always-click:after{left:var(--horz-offset)}.c-page-item{margin-inline:var(--item-buffer)}.c-page-item:first-child{margin-left:0}.c-page-item:last-child{margin-right:0}.c-page-item--etcetera{cursor:default;margin-inline:2px;min-width:var(--item-width);text-align:center}.c-page-end{padding:4px 12px}.c-page-link{line-height:1.2;min-width:var(--item-width);padding:5px 0}.c-recognition{font-size:var(--global-font-size--small)}.c-recognition{overflow:auto;padding:0 2.14em}.c-recognition h3{margin-top:.7em}.c-recognition>p:last-child{margin-bottom:1.4em}.c-recognition--style-dark{background-color:var(--global-color-primary--xx-dark);color:var(--global-color-primary--xx-light)}.c-recognition--style-dark a{color:var(--global-color-link-on-dark--normal)}.c-recognition--style-dark h1,.c-recognition--style-dark h2,.c-recognition--style-dark h3,.c-recognition--style-dark h4,.c-recognition--style-dark h5,.c-recognition--style-dark h6{color:var(--global-color-accent--normal)}.c-recognition--style-light{background-color:var(--global-color-primary--xx-light);border-color:var(--global-color-primary--xx-dark);border-style:solid;border-width:var(--global-border-width--normal) 0;color:var(--global-color-primary--dark)}.c-recognition--style-light a{color:var(--global-color-link-on-light--normal)}.c-recognition--style-light h1,.c-recognition--style-light h2,.c-recognition--style-light h3,.c-recognition--style-light h4,.c-recognition--style-light h5,.c-recognition--style-light h6{color:var(--global-color-primary--xx-dark)}.c-see-all-link{display:inline-block;font-size:1.2rem;font-weight:var(--bold);margin-bottom:-1em;max-width:100%;padding-bottom:1em;padding-right:1em;padding-top:1em}.c-see-all-link__icon{display:inline-block;font-size:1.167em;margin-right:.75em;vertical-align:text-bottom}.c-see-all-link__text{font-size:1em}.s-blockquote blockquote{font-style:italic;margin:unset}.s-blockquote blockquote p{margin:0;white-space:pre-wrap}.s-blockquote blockquote p:before{content:"“"}.s-blockquote blockquote p:after{content:"”"}.s-blockquote figcaption{margin-top:.3em}.s-blockquote figcaption:before{content:"— "}.s-blockquote cite{font-style:unset}.s-breadcrumbs-via-ul,.s-breadcrumbs:is(nav){font-size:var(--global-font-size--x-small);margin-bottom:var(--global-space--under-breadcrumbs);padding-top:var(--global-space--above-breadcrumbs)}.s-breadcrumbs-via-ul ul,.s-breadcrumbs:is(nav) ol{font-weight:var(--global-font-weight--medium);list-style:none;margin-bottom:unset;padding-left:unset}.s-breadcrumbs-via-ul ul li,.s-breadcrumbs:is(nav) ol li,.s-breadcrumbs:is(ol) li{display:inline-block}.s-breadcrumbs-via-ul ul li+li:before,.s-breadcrumbs:is(nav) ol li+li:before,.s-breadcrumbs:is(ol) li+li:before{content:" > "}.s-breadcrumbs-via-ul ul li:last-child,.s-breadcrumbs:is(nav) ol li:last-child{font-weight:var(--bold)}.s-footer>p:last-of-type{margin:0}.s-footer a{color:var(--global-color-primary--light)}.u-mailto-text-replace[data-user][data-domain]{font-size:0;visibility:hidden}.u-mailto-text-replace[data-user][data-domain]:before{content:attr(data-user) "@" attr(data-domain);display:inline;font-size:medium;visibility:visible} \ No newline at end of file +/*! ← core-styles.settings.css */html{font-size:62.5%}body,html{height:100%}body{color:var(--global-color-primary--x-dark);font-family:var(--global-font-family--sans);font-size:var(--global-font-size--small);line-height:1.4;margin:0;min-width:290px}:where([role=main],main) :is(button,input,optgroup,select,textarea){font-family:inherit;font-size:inherit;line-height:inherit;margin:0}:where([role=main],main) blockquote{margin-inline:unset}:where([role=main],main) blockquote>p:last-child{margin-bottom:0}:where([role=main],main) figure{margin-inline:unset}:where([role=main],main) :is(dl,ol,ul){margin-bottom:1rem;margin-top:0}:where([role=main],main) details{margin-bottom:1rem;margin-top:0}:where([role=main],main) details>summary{cursor:pointer}.c-button--as-link,.c-form>.c-form__errors .c-button--as-link,.c-form>.c-form__errors a,.c-form__field .c-form__errors li .c-button--as-link,.c-form__field .c-form__errors li a,.c-message .c-button--as-link,.c-message a,.s-irregular-links .c-button--as-link,.s-irregular-links a,.x-link,.x-link--irregular,:where([role=main],main) a:not(.c-button),[class*=message--]:not(.c-message) .c-button--as-link,[class*=message--]:not(.c-message) a{color:var(--global-color-link-on-light--normal);text-decoration:none;text-decoration-thickness:var(--global-border-width--normal);text-underline-offset:.2em}.c-button--as-link:where(:not(:disabled,:where(a[disabled]))):hover,.c-form>.c-form__errors .c-button--as-link:hover,.c-form>.c-form__errors a:hover,.c-form__field .c-form__errors li .c-button--as-link:hover,.c-form__field .c-form__errors li a:hover,.c-message .c-button--as-link:hover,.c-message a:hover,.s-irregular-links .c-button--as-link:hover,.s-irregular-links a:hover,.x-link--hover,.x-link--irregular--hover,:where([role=main],main) a:not(.c-button):hover,[class*=message--]:not(.c-message) .c-button--as-link:hover,[class*=message--]:not(.c-message) a:hover{color:var(--global-color-link-on-light--normal);text-decoration-line:underline;text-decoration-style:solid;text-decoration-thickness:var(--global-border-width--normal)}.c-button--as-link:active,.c-form>.c-form__errors .c-button--as-link:active,.c-form>.c-form__errors a:active,.c-form__field .c-form__errors li .c-button--as-link:active,.c-form__field .c-form__errors li a:active,.c-message .c-button--as-link:active,.c-message a:active,.s-irregular-links .c-button--as-link:active,.s-irregular-links a:active,.x-link--active,.x-link--irregular--active,:where([role=main],main) a:not(.c-button):active,[class*=message--]:not(.c-message) .c-button--as-link:active,[class*=message--]:not(.c-message) a:active{text-decoration-line:underline;text-decoration-style:dotted}.c-form>.c-form__errors .c-button--as-link,.c-form>.c-form__errors a,.c-form__field .c-form__errors li .c-button--as-link,.c-form__field .c-form__errors li a,.c-message .c-button--as-link,.c-message a,.s-irregular-links .c-button--as-link,.s-irregular-links a,.x-link--irregular,[class*=message--]:not(.c-message) .c-button--as-link,[class*=message--]:not(.c-message) a{text-decoration-line:underline}.c-form>.c-form__errors .c-button--as-link:hover,.c-form>.c-form__errors a:hover,.c-form__field .c-form__errors li .c-button--as-link:hover,.c-form__field .c-form__errors li a:hover,.c-message .c-button--as-link:hover,.c-message a:hover,.s-irregular-links .c-button--as-link:hover,.s-irregular-links a:hover,.x-link--irregular--hover,[class*=message--]:not(.c-message) .c-button--as-link:hover,[class*=message--]:not(.c-message) a:hover{text-decoration-style:dashed}.c-form>.c-form__errors .c-button--as-link:active,.c-form>.c-form__errors a:active,.c-form__field .c-form__errors li .c-button--as-link:active,.c-form__field .c-form__errors li a:active,.c-message .c-button--as-link:active,.c-message a:active,.s-irregular-links .c-button--as-link:active,.s-irregular-links a:active,.x-link--irregular--active,[class*=message--]:not(.c-message) .c-button--as-link:active,[class*=message--]:not(.c-message) a:active{text-decoration-style:dotted}.x-truncate--many-lines,table p{--lines:2;-webkit-box-orient:vertical;-webkit-line-clamp:var(--lines);display:-webkit-box;overflow:hidden}.x-untruncate--many-lines{-webkit-line-clamp:inherit;overflow:visible}.c-button,.c-data-list--should-truncate-values [class*=data-list__value],.c-data-list--should-truncate-values dd,.c-data-list--should-truncate-values td,.c-data-list>dt,.c-data-list>tbody>th,.c-form__button,.c-form__buttons button[type=submit],.c-see-all-link,.data-list--truncate-values [class*=data-list__value],.data-list--truncate-values dd,.data-list--truncate-values td,.data-list>dt,.data-list>tbody>th,.modal-title,.x-truncate--one-line,[class*=data-list--]>dt,[class*=data-list--]>tbody>th,[class*=data-list__key]{overflow:hidden;text-overflow:var(--text-overflow,ellipsis);white-space:nowrap}.x-untruncate--one-line{overflow:visible;white-space:normal}.paragraph-table,.s-paragraph-table,table{--font-size:var(--global-font-size--small,12px);--cell-pad-vert:0.6667em;--cell-pad-horz:1.3333em;--cell-line-height:1.1;border-collapse:separate;border-spacing:0;font-family:var(--global-font-family--sans--portal);font-size:var(--font-size)}.paragraph-table,.s-paragraph-table{display:table}thead tr :is(td,th){border-bottom:var(--global-border-width--normal) solid var(--global-color-primary--x-dark)}.paragraph-table p:not(:last-of-type),.s-paragraph-table p:not(:last-of-type),tr:not(:last-of-type)>:is(td,th){border-bottom:var(--global-border-width--normal) solid var(--global-color-primary--light)}tr:nth-child(odd) :is(th,td){background:var(--global-color-background--app)}.paragraph-table p:nth-child(2n),.s-paragraph-table p:nth-child(2n),tr:nth-child(2n) :is(th,td){background:var(--global-color-primary--x-light)}.paragraph-table p,.s-paragraph-table p,:is(td,th){color:var(--global-color-primary--dark);padding-block:var(--cell-pad-vert);padding-inline:var(--cell-pad-horz);vertical-align:top}.paragraph-table p,.s-paragraph-table p,:is(td,th){line-height:var(--cell-line-height)}:is(th,td):first-child{border-right:var(--global-border-width--normal) solid var(--global-color-primary--light);left:0;position:sticky}th{color:var(--global-color-primary--x-dark);text-align:inherit}thead>tr>th{font-weight:var(--bold)}tbody>tr>th{font-weight:var(--normal)}caption{caption-side:top;font-size:var(--font-size);padding-block:var(--cell-pad-vert);padding-inline:var(--cell-pad-horz);text-align:unset}td ul{-webkit-padding-start:0;list-style:none;margin-block:0;padding-inline-start:0}td li:not(:last-of-type){margin-bottom:.5em}.paragraph-table p button,.s-paragraph-table p button,td button{font-size:inherit}.paragraph-table p,.s-paragraph-table p,table p{margin-top:0}.paragraph-table p,.s-paragraph-table p,table p:last-child{margin-bottom:0}@supports selector(:has(table)){table:has(table) :is(td,th){white-space:nowrap}table:has(table) tr:nth-child(2n) :is(th,td){background:var(--global-color-background--app)}td:has(table) tr:nth-child(2n) :is(th,td){background:var(--global-color-primary--x-light)}td:has(table){padding:0}}@supports not selector(:has(table)){table.has-table :is(td,th){white-space:nowrap}table.has-table tr:nth-child(2n) :is(th,td){background:var(--global-color-background--app)}td.has-table tr:nth-child(2n) :is(th,td){background:var(--global-color-primary--x-light)}td.has-table{padding:0}}thead+tbody tr table{--offset-distance:calc(var(--cell-pad-vert)*2 + var(--cell-line-height)*var(--font-size) + var(--global-border-width--normal));--offset:calc(var(--offset-distance)*-1);margin-bottom:var(--offset);transform:translateY(var(--offset))}thead+tbody tr:first-of-type thead{background:var(--global-color-background--app)}thead+tbody tr:not(:first-of-type) thead{visibility:hidden}td:not(:first-child) td:first-child,td:not(:first-child) th:first-child{-webkit-padding-start:8px;padding-inline-start:8px}td:not(:last-child) td:last-child,td:not(:last-child) th:last-child{-webkit-padding-end:8px;padding-inline-end:8px}.o-fixed-header-table thead :is(td,th){position:sticky;top:0;z-index:1}.o-grid--col-auto-count{grid-template-columns:repeat(var(--count),auto)}.o-grid--col-min-width{grid-template-columns:repeat(auto-fit,minmax(var(--width),1fr))}.o-grid{grid-auto-rows:1fr}.o-grid--center-align{align-items:center;justify-items:center}.o-grid{--gap:var(--global-space--grid-gap,15px);display:grid;gap:var(--gap)}.o-grid img{max-height:100%;max-width:100%}.o-grid figure{width:unset}.o-grid>*{overflow:hidden}@media (max-width:575px){.o-grid--col-auto-count{--count:1}}@media (min-width:576px) and (max-width:767px){.o-grid--col-auto-count{--count:2}}@media (min-width:768px) and (max-width:991px){.o-grid--col-auto-count{--count:3}}@media (min-width:992px) and (max-width:1199px){.o-grid--col-auto-count{--count:4}}@media (min-width:1200px) and (max-width:1399px){.o-grid--col-auto-count{--count:5}}@media (min-width:1400px) and (max-width:1679px){.o-grid--col-auto-count{--count:6}}@media (min-width:1680px) and (max-width:1919px){.o-grid--col-auto-count{--count:7}}@media (min-width:1920px) and (max-width:2399px){.o-grid--col-auto-count{--count:8}}@media (min-width:2400px){.o-grid--col-auto-count{--count:9}}.o-grid--col-min-width{--width:250px}.o-grid--col-min-width>:not(img){max-height:100%;max-width:100%}.o-grid--image-fill>:is(a,figure):not(img){height:100%;width:100%}.o-grid--image-fill>a>img:only-child,.o-grid--image-fill>figure>img,.o-grid--image-fill>img{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.o-grid--image-fill>figure:not([class]),.o-grid--image-fill>figure[class*=cms-plugin],.o-grid--image-fill>figure[class=""]{display:flex;flex-direction:column}.o-grid--image-fill>figure:not([class])>img,.o-grid--image-fill>figure[class*=cms-plugin]>img,.o-grid--image-fill>figure[class=""]>img{flex-grow:1;min-height:0}.o-table-wrap--flexible-horz>table{table-layout:fixed;width:100%}.o-table-wrap--flexible-vert>table{height:100%}.o-table-wrap--overflow-hidden{overflow:hidden}.o-table-wrap--overflow-scroll{overflow:auto}@media (min-width:1680px){.container{max-width:var(--global-max-width--x-wide)}}@media (min-width:1920px){.container{max-width:var(--global-max-width--xx-wide)}}.figure>a>img,.figure>img{margin-bottom:20px}.figure-caption{border-top:var(--global-border-width--normal) solid var(--global-color-primary--normal);color:var(--global-color-primary--dark);font-size:var(--global-font-size--medium);padding-top:12px}.modal-body,.modal-content,.modal-footer,.modal-header{border-radius:0}.modal-body,.modal-content,.modal-header{border:none}.modal-footer{border-bottom:none;border-left:none;border-right:none}.modal-header{background-color:var(--global-color-primary--x-light);padding:1.35rem 1.75rem}.modal-title{color:var(--global-color-primary--xx-dark);font-size:1.2rem;font-weight:400}.modal-header .close{color:var(--global-color-primary--x-dark);opacity:1}.modal-header .close:not(:disabled):not(.disabled):focus,.modal-header .close:not(:disabled):not(.disabled):hover{color:var(--global-color-primary--xx-dark);opacity:1}.modal-header .close span{font-family:Cortal-Icons!important;font-size:1.5rem}.modal-header.has-MuiTabs{border-bottom:1px solid #afafaf;flex-direction:row;height:63.5px;padding:5px;position:relative}.modal-header.has-MuiTabs .close{transform:translate(-25%,25%)}.modal-header.has-MuiTabs .MuiTabs-indicator{background-color:#fff}.c-button,.c-form__button,.c-form__buttons button[type=submit]{--min-width:75px;--mid-width:110px;--max-width:130px;border-style:solid;border-width:var(--global-border-width--normal);box-sizing:border-box;display:inline-block}.c-button:not(.c-button--as-link),.c-form__button:not(.c-button--as-link),.c-form__buttons button[type=submit]:not(.c-button--as-link){font-weight:var(--medium)}a.c-button{text-align:center;text-decoration:none}a.c-button--is-busy{cursor:default}.c-button:not(:disabled,:where(a[disabled])),.c-form__button:not(:disabled,:where(a[disabled])),.c-form__buttons button[type=submit]:not(:disabled,:where(a[disabled])){cursor:pointer}.c-button:disabled:not(.c-button--is-busy),.c-button:where(a[disabled]):not(.c-button--is-busy),.c-form__button:disabled:not(.c-button--is-busy),.c-form__button:where(a[disabled]):not(.c-button--is-busy),.c-form__buttons button[type=submit]:disabled:not(.c-button--is-busy),.c-form__buttons button[type=submit]:where(a[disabled]):not(.c-button--is-busy){border-color:var(--global-color-primary--dark);color:var(--global-color-primary--dark);pointer-events:none}.c-button:disabled:not(.c-button--is-busy,.c-button--as-link),.c-button:where(a[disabled]):not(.c-button--is-busy,.c-button--as-link),.c-form__button:disabled:not(.c-button--is-busy,.c-button--as-link),.c-form__button:where(a[disabled]):not(.c-button--is-busy,.c-button--as-link),.c-form__buttons button[type=submit]:disabled:not(.c-button--is-busy,.c-button--as-link),.c-form__buttons button[type=submit]:where(a[disabled]):not(.c-button--is-busy,.c-button--as-link){background-color:var(--global-color-primary--xx-light)}.c-button--is-active,.c-button--primary,.c-button--secondary,.c-button--tertiary,.c-form__button:where(:not([type=submit],[type=reset])),.c-form__button[type=reset],.c-form__button[type=submit],.c-form__buttons button[type=submit]{max-width:var(--max-width);min-width:var(--min-width);padding:6px 18px}.c-button--primary:hover,.c-form__button[type=submit]:hover,.c-form__buttons button[type=submit]:hover{background-color:var(--global-color-accent--dark);border-color:var(--global-color-accent--dark);color:var(--global-color-primary--xx-light)}.c-button--primary:active:not(.c-button--is-busy),.c-form__button[type=submit]:active:not(.c-button--is-busy),.c-form__buttons button[type=submit]:active:not(.c-button--is-busy){background-color:var(--global-color-accent--x-dark);border-color:var(--global-color-accent--dark);border-width:var(--global-border-width--normal);color:var(--global-color-primary--xx-light);outline:var(--global-border-width--normal) solid var(--global-color-accent--dark)}.c-button--primary:focus:not(:active,.c-button--is-busy),.c-form__button[type=submit]:focus:not(:active,.c-button--is-busy),.c-form__buttons button[type=submit]:focus:not(:active,.c-button--is-busy){background-color:var(--global-color-accent--normal);border-color:var(--global-color-primary--xx-light);color:var(--global-color-primary--xx-light);outline:var(--global-border-width--normal) solid var(--global-color-accent--light)}.c-button--primary.c-button--is-busy,.c-button--primary:not(.c-button:hover,.c-button:focus,.c-button:active,.c-button:disabled,.c-button:where(a[disabled])),.c-form__button[type=submit].c-button--is-busy,.c-form__button[type=submit]:not(.c-button:hover,.c-button:focus,.c-button:active,.c-button:disabled,.c-button:where(a[disabled])),.c-form__buttons button[type=submit].c-button--is-busy,.c-form__buttons button[type=submit]:not(.c-button:hover,.c-button:focus,.c-button:active,.c-button:disabled,.c-button:where(a[disabled])){background-color:var(--global-color-accent--normal);border-color:var(--global-color-accent--normal);color:var(--global-color-primary--xx-light)}.c-button--secondary:hover,.c-form__button:where(:not([type=submit],[type=reset])):hover{background-color:var(--global-color-accent--weak);border-color:var(--global-color-accent--normal);color:var(--global-color-primary--xx-dark)}.c-button--secondary:active:not(.c-button--is-busy),.c-form__button:where(:not([type=submit],[type=reset])):active:not(.c-button--is-busy){background-color:var(--global-color-accent--x-light);border-color:var(--global-color-accent--dark);border-width:var(--global-border-width--normal);color:var(--global-color-primary--xx-dark);outline:var(--global-border-width--normal) solid var(--global-color-accent--dark)}.c-button--secondary:focus:not(:active,.c-button--is-busy),.c-form__button:where(:not([type=submit],[type=reset])):focus:not(:active,.c-button--is-busy){background-color:var(--global-color-accent--weak);border-color:var(--global-color-primary--xx-dark);color:var(--global-color-primary--xx-dark);outline:var(--global-border-width--thick) solid var(--global-color-accent--light)}.c-button--secondary.c-button--is-busy,.c-button--secondary:not(.c-button:hover,.c-button:focus,.c-button:active,.c-button:disabled,.c-button:where(a[disabled])),.c-form__button:where(:not([type=submit],[type=reset])).c-button--is-busy,.c-form__button:where(:not([type=submit],[type=reset])):not(.c-button:hover,.c-button:focus,.c-button:active,.c-button:disabled,.c-button:where(a[disabled])){background-color:var(--global-color-primary--x-light);border-color:var(--global-color-primary--xx-dark);color:var(--global-color-primary--xx-dark)}.c-button.c-button--secondary:disabled,.c-button.c-button--secondary:where(a[disabled]),/* for specificity to override */,/* for specificity to override */{background-color:var(--global-color-primary--x-light)}.c-button--tertiary:hover,.c-form__button[type=reset]:hover{background-color:var(--global-color-primary--light);border-color:var(--global-color-accent--dark);color:var(--global-color-primary--xx-dark)}.c-button--tertiary:active:not(.c-button--is-busy),.c-form__button[type=reset]:active:not(.c-button--is-busy){background-color:var(--global-color-accent--x-light);border-color:var(--global-color-accent--dark);border-width:var(--global-border-width--normal);color:var(--global-color-primary--xx-dark);outline:var(--global-border-width--normal) solid var(--global-color-accent--dark)}.c-button--tertiary:focus:not(:active,.c-button--is-busy),.c-form__button[type=reset]:focus:not(:active,.c-button--is-busy){background-color:var(--global-color-primary--light);border-color:var(--global-color-primary--xx-dark);color:var(--global-color-primary--xx-dark);outline:var(--global-border-width--thick) solid var(--global-color-accent--light)}.c-button--tertiary.c-button--is-busy,.c-button--tertiary:not(.c-button:hover,.c-button:focus,.c-button:active,.c-button:disabled,.c-button:where(a[disabled])),.c-form__button[type=reset].c-button--is-busy,.c-form__button[type=reset]:not(.c-button:hover,.c-button:focus,.c-button:active,.c-button:disabled,.c-button:where(a[disabled])){background-color:var(--global-color-primary--xx-light);border-color:var(--global-color-primary--xx-dark);color:var(--global-color-primary--xx-dark)}.c-button--is-active:hover{background-color:var(--global-color-accent--alt);border-color:var(--global-color-accent--dark);color:var(--global-color-primary--xx-dark)}.c-button--is-active:active{background-color:var(--global-color-accent--x-light);border-color:var(--global-color-accent--dark);border-width:var(--global-border-width--normal);color:var(--global-color-primary--xx-dark);outline:var(--global-border-width--normal) solid var(--global-color-accent--dark)}.c-button--is-active:focus:not(:active){background-color:var(--global-color-accent--alt);border-color:var(--global-color-primary--xx-dark);color:var(--global-color-primary--xx-dark);outline:var(--global-border-width--thick) solid var(--global-color-accent--light)}.c-button--is-active.c-button--is-busy,.c-button--is-active:not(.c-button:hover,.c-button:focus,.c-button:active,.c-button:disabled,.c-button:where(a[disabled])){background-color:var(--global-color-accent--x-light);border-color:var(--global-color-primary--xx-dark);color:var(--global-color-primary--xx-dark)}.c-button--as-link{background:unset;border:unset;font-family:inherit;font-size:inherit;padding-inline:unset}.c-button--is-busy{opacity:.5}.c-button--is-busy .c-button__text{opacity:.3}.c-button:not(.c-button--width-short,.c-button--width-medium,.c-button--width-long,.c-button--size-small,.c-button--as-link),.c-form__button:not(.c-button--width-short,.c-button--width-medium,.c-button--width-long,.c-button--size-small,.c-button--as-link),.c-form__buttons button[type=submit]:not(.c-button--width-short,.c-button--width-medium,.c-button--width-long,.c-button--size-small,.c-button--as-link){--max-width:auto;width:auto}.c-button--width-short{width:var(--min-width)}.c-button--width-medium{width:var(--mid-width)}.c-button--width-long{width:var(--max-width)}.c-button--size-small{line-height:1;min-width:0;padding:4px 9px}.c-button>*,.c-form__button>*,.c-form__buttons button[type=submit]>*{vertical-align:middle}.c-button__icon--before{margin-right:.5em}.c-button__icon--after{margin-left:.5em}.x-article-link-stretch{height:100%;left:0;overflow:hidden;position:absolute;top:0;width:100%}.x-article-link-stretch--gapless{left:-15px;width:calc(100% + 30px)}.x-article-link-hover,a.c-callout:hover{--outline-offset:1em;outline:1px solid var(--global-color-accent--normal);outline-offset:var(--outline-offset)}.x-article-link-hover--gapless{--outline-offset:0}a.c-callout:active{outline:1px dotted var(--global-color-accent--normal)}.c-callout{--figure-width--no-units:310;--figure-height--no-units:130;display:grid}.c-callout>:is(img,figure){grid-area:figure}.c-callout>:is(h1,h2,h3,h4,h5,h6){grid-area:title}.c-callout>p{grid-area:desc}.c-callout>p{margin-top:0}.c-callout>figure>img,.c-callout>img{aspect-ratio:var(--figure-width--no-units) /var(--figure-height--no-units);-o-object-fit:cover;object-fit:cover}.c-callout>figure{width:-moz-min-content;width:min-content}@media only screen and (min-width:768px){.c-callout{grid-template-areas:"figure title" "figure desc";grid-template-columns:min-content auto;grid-template-rows:auto min-content;padding:20px;text-align:left}.c-callout>figure{margin:0}.c-callout>:is(img,figure){margin-right:40px}.c-callout>figure>img,.c-callout>img{max-width:-moz-fit-content;max-width:fit-content;width:calc(var(--figure-width--no-units)*1px)}.c-callout>img{min-height:100%}}@media only screen and (max-width:767px){.c-callout{grid-template-areas:"figure" "title" "desc";padding:20px 40px;text-align:center}.c-callout>figure{margin:0}.c-callout>:is(img,figure){margin-bottom:20px}.c-callout>figure>img,.c-callout>img{height:calc(var(--figure-height--no-units)*1px);max-height:-moz-fit-content;max-height:fit-content}.c-callout>img{min-width:100%}}.c-callout>:is(img,figure){place-self:center}.c-callout>p{padding-right:1%}.c-callout{background-color:var(--global-color-link-on-light--normal)}.c-callout>:is(h1,h2,h3,h4,h5,h6){border-bottom:1px solid var(--global-color-primary--xx-light);font-size:var(--global-font-size--x-large);font-weight:var(--medium);margin-bottom:12px;margin-top:0;padding-bottom:12px}.c-callout>:is(h1,h2,h3,h4,h5,h6),[class*=o-section--style] .c-callout>:is(h1,h2,h3,h4,h5,h6){color:var(--global-color-primary--xx-light)}.c-callout>:not(h1,h2,h3,h4,h5,h6){color:var(--global-color-primary--xx-light)}.c-callout>:not(h1,h2,h3,h4,h5,h6,figure){font-size:var(--global-font-size--large);font-weight:var(--medium)}a.c-callout:hover{text-decoration:none}a.c-callout:focus{text-decoration:none}table.c-data-list,table.data-list,table[class*=data-list--]{border-left:0;border-right:0}@supports(text-overflow:":"){.c-data-list>dt,.data-list>dt,[class*=data-list--]>dt,[class*=data-list__key]{--text-overflow:":"}}.c-data-list>tbody>td,.c-data-list>tbody>th,.data-list>tbody>td,.data-list>tbody>th,[class*=data-list--]>tbody>td,[class*=data-list--]>tbody>th{padding-block:.5em}.c-data-list>dt:after,.data-list>dt:after,[class*=data-list--]>dt:after,[class*=data-list__key]:after{content:":";display:inline;padding-right:.25em}.c-data-list>tbody>th,.data-list>tbody>th,[class*=data-list--]>tbody>th{padding-right:.25em}.c-data-list--is-horz,.data-list--horz{display:flex;flex-direction:row}.c-data-list>dd,.data-list>dd,[class*=data-list--]>dd,dl.c-data-list--is-horz,dl.data-list--horz{margin-bottom:0}table.c-data-list--is-horz tbody,table.c-data-list--is-horz tr,table.data-list--horz tbody,table.data-list--horz tr{display:flex;flex-direction:row;min-width:0}.c-data-list--is-horz.c-data-list--is-narrow>[class*=data-list__key]:not(th)~[class*=data-list__key]:not(th):before,.c-data-list--is-horz.c-data-list--is-narrow>[class*=data-list__key]:not(th)~dt:before,.c-data-list--is-horz.c-data-list--is-narrow>dt~[class*=data-list__key]:not(th):before,.c-data-list--is-horz.c-data-list--is-narrow>dt~dt:before,.c-data-list--is-horz.data-list--narrow>[class*=data-list__key]:not(th)~[class*=data-list__key]:not(th):before,.c-data-list--is-horz.data-list--narrow>[class*=data-list__key]:not(th)~dt:before,.c-data-list--is-horz.data-list--narrow>dt~[class*=data-list__key]:not(th):before,.c-data-list--is-horz.data-list--narrow>dt~dt:before,.data-list--horz.c-data-list--is-narrow>[class*=data-list__key]:not(th)~[class*=data-list__key]:not(th):before,.data-list--horz.c-data-list--is-narrow>[class*=data-list__key]:not(th)~dt:before,.data-list--horz.c-data-list--is-narrow>dt~[class*=data-list__key]:not(th):before,.data-list--horz.c-data-list--is-narrow>dt~dt:before,.data-list--horz.data-list--narrow>[class*=data-list__key]:not(th)~[class*=data-list__key]:not(th):before,.data-list--horz.data-list--narrow>[class*=data-list__key]:not(th)~dt:before,.data-list--horz.data-list--narrow>dt~[class*=data-list__key]:not(th):before,.data-list--horz.data-list--narrow>dt~dt:before{padding-left:.5em;padding-right:.5em}.c-data-list--is-horz.c-data-list--is-wide>[class*=data-list__key]:not(th)~[class*=data-list__key]:not(th):before,.c-data-list--is-horz.c-data-list--is-wide>[class*=data-list__key]:not(th)~dt:before,.c-data-list--is-horz.c-data-list--is-wide>dt~[class*=data-list__key]:not(th):before,.c-data-list--is-horz.c-data-list--is-wide>dt~dt:before,.c-data-list--is-horz.data-list--wide>[class*=data-list__key]:not(th)~[class*=data-list__key]:not(th):before,.c-data-list--is-horz.data-list--wide>[class*=data-list__key]:not(th)~dt:before,.c-data-list--is-horz.data-list--wide>dt~[class*=data-list__key]:not(th):before,.c-data-list--is-horz.data-list--wide>dt~dt:before,.data-list--horz.c-data-list--is-wide>[class*=data-list__key]:not(th)~[class*=data-list__key]:not(th):before,.data-list--horz.c-data-list--is-wide>[class*=data-list__key]:not(th)~dt:before,.data-list--horz.c-data-list--is-wide>dt~[class*=data-list__key]:not(th):before,.data-list--horz.c-data-list--is-wide>dt~dt:before,.data-list--horz.data-list--wide>[class*=data-list__key]:not(th)~[class*=data-list__key]:not(th):before,.data-list--horz.data-list--wide>[class*=data-list__key]:not(th)~dt:before,.data-list--horz.data-list--wide>dt~[class*=data-list__key]:not(th):before,.data-list--horz.data-list--wide>dt~dt:before{padding-left:1em;padding-right:1em}table.c-data-list--is-horz.c-data-list--is-narrow tr:not(:first-child) th,table.c-data-list--is-horz.data-list--narrow tr:not(:first-child) th,table.data-list--horz.c-data-list--is-narrow tr:not(:first-child) th,table.data-list--horz.data-list--narrow tr:not(:first-child) th{padding-left:.5em}table.c-data-list--is-horz.c-data-list--is-narrow td,table.c-data-list--is-horz.data-list--narrow td,table.data-list--horz.c-data-list--is-narrow td,table.data-list--horz.data-list--narrow td{margin-right:.5em}table.c-data-list--is-horz.c-data-list--is-wide tr:not(:first-child) th,table.c-data-list--is-horz.data-list--wide tr:not(:first-child) th,table.data-list--horz.c-data-list--is-wide tr:not(:first-child) th,table.data-list--horz.data-list--wide tr:not(:first-child) th{padding-left:1em}table.c-data-list--is-horz.c-data-list--is-wide td,table.c-data-list--is-horz.data-list--wide td,table.data-list--horz.c-data-list--is-wide td,table.data-list--horz.data-list--wide td{margin-right:1em}table.c-data-list--is-vert,table.data-list--vert{table-layout:fixed;width:100%}.c-data-list--is-vert>[class*=data-list__value]:not(td),.c-data-list--is-vert>dd,.data-list--vert>[class*=data-list__value]:not(td),.data-list--vert>dd{margin-left:0}.c-data-list--is-vert.c-data-list--is-narrow [class*=data-list__value],.c-data-list--is-vert.c-data-list--is-narrow dd,.c-data-list--is-vert.c-data-list--is-narrow td,.c-data-list--is-vert.data-list--narrow [class*=data-list__value],.c-data-list--is-vert.data-list--narrow dd,.c-data-list--is-vert.data-list--narrow td,.data-list--vert.c-data-list--is-narrow [class*=data-list__value],.data-list--vert.c-data-list--is-narrow dd,.data-list--vert.c-data-list--is-narrow td,.data-list--vert.data-list--narrow [class*=data-list__value],.data-list--vert.data-list--narrow dd,.data-list--vert.data-list--narrow td{padding-left:0}.c-data-list--is-vert.c-data-list--is-wide [class*=data-list__value],.c-data-list--is-vert.c-data-list--is-wide dd,.c-data-list--is-vert.c-data-list--is-wide td,.c-data-list--is-vert.data-list--wide [class*=data-list__value],.c-data-list--is-vert.data-list--wide dd,.c-data-list--is-vert.data-list--wide td,.data-list--vert.c-data-list--is-wide [class*=data-list__value],.data-list--vert.c-data-list--is-wide dd,.data-list--vert.c-data-list--is-wide td,.data-list--vert.data-list--wide [class*=data-list__value],.data-list--vert.data-list--wide dd,.data-list--vert.data-list--wide td{padding-left:2.5em}.c-data-list>tbody>td,.data-list>tbody>td,[class*=data-list--]>tbody>td,table.c-data-list--is-vert th,table.data-list--vert th{border-left:0;border-right:0}table.c-data-list--is-horz td,table.c-data-list--is-horz th,table.data-list--horz td,table.data-list--horz th{border-bottom:0;border-top:0}table.c-data-list--is-horz tr:first-child th,table.data-list--horz tr:first-child th{border-left:0}table.c-data-list--is-horz th,table.data-list--horz th{border-right:0}.c-data-list--is-horz>[class*=data-list__key]:not(th)~[class*=data-list__key]:not(th):before,.c-data-list--is-horz>[class*=data-list__key]:not(th)~dt:before,.c-data-list--is-horz>dt~[class*=data-list__key]:not(th):before,.c-data-list--is-horz>dt~dt:before,.data-list--horz>[class*=data-list__key]:not(th)~[class*=data-list__key]:not(th):before,.data-list--horz>[class*=data-list__key]:not(th)~dt:before,.data-list--horz>dt~[class*=data-list__key]:not(th):before,.data-list--horz>dt~dt:before{content:"|";display:inline-block}.c-data-list--is-horz:not(table),.data-list--horz:not(table){align-items:baseline}table:--data-list--is-horz tr{align-items:baseline}table:--data-list--is-vert td,table:--data-list--is-vert th{vertical-align:baseline}.c-footer{--line-height:1.5;--min-line-count:2;background-color:var(--global-color-primary--xx-dark);box-sizing:content-box;color:var(--global-color-primary--xx-light);display:flex;flex-direction:column;font-size:12px;justify-content:center;min-height:calc(var(--line-height)*var(--min-line-count)*1em);padding-bottom:20px;padding-top:20px;text-align:center}@media only screen and (max-width:640px){.c-footer{padding-left:5%;padding-right:5%}}@media only screen and (min-width:641px) and (max-width:767px){.c-footer{padding-left:7.5%;padding-right:7.5%}}@media only screen and (min-width:768px) and (max-width:991px){.c-footer{padding-left:10%;padding-right:10%}}@media only screen and (min-width:992px) and (max-width:1199px){.c-footer{padding-left:12.5%;padding-right:12.5%}}@media only screen and (min-width:1200px){.c-footer{padding-left:15%;padding-right:15%}}.c-form>.c-form__errors>:last-child,.c-form__field .c-form__errors li>:last-child,.c-message>:last-child,[class*=message--]:not(.c-message)>:last-child{margin-bottom:0}.c-form>.c-form__errors .c-button--as-link,.c-form>.c-form__errors a,.c-form__field .c-form__errors li .c-button--as-link,.c-form__field .c-form__errors li a,.c-message .c-button--as-link,.c-message a,[class*=message--]:not(.c-message) .c-button--as-link,[class*=message--]:not(.c-message) a{color:inherit!important}.c-form>.c-form__errors,.c-form__field .c-form__errors li,.c-message--scope-inline,.c-message--scope-section,.message--inline,.message--section{font-size:var(--global-font-size--small)}.c-form>.c-form__errors,.c-message--scope-global,.c-message--scope-section,.message--global,.message--section{border:var(--global-border--thick);padding:15px 20px}.c-message--scope-global,.message--global{text-align:center}.c-message--type-info,.message--info{color:var(--global-color-info--dark)}.c-message--type-success,.message--success{color:var(--global-color-success--dark)}.c-message--type-warning,.message--warning{color:var(--global-color-warning--dark)}.c-form>.c-form__errors,.c-form__field .c-form__errors li,.c-message--type-error,.message--error{color:var(--global-color-danger--dark)}.c-message--type-info.c-message--scope-section,.message--info.c-message--scope-section,.message--info.message--section{background-color:var(--global-color-info--x-light);border-color:var(--global-color-info--normal)}.c-message--type-success.c-message--scope-section,.message--success.c-message--scope-section,.message--success.message--section{background-color:var(--global-color-success--x-light);border-color:var(--global-color-success--normal)}.c-message--type-warning.c-message--scope-section,.message--warning.c-message--scope-section,.message--warning.message--section{background-color:var(--global-color-warning--x-light);border-color:var(--global-color-warning--normal)}.c-form>.c-form__errors,.c-form>.c-form__errors.c-message--scope-section,.c-form__field .c-form__errors li.c-message--scope-section,.c-message--type-error.c-message--scope-section,.message--error.c-message--scope-section,.message--error.message--section{background-color:var(--global-color-danger--x-light);border-color:var(--global-color-danger--normal)}.c-message--scope-global,.message--global{background-color:var(--global-color-accent--secondary);border-color:var(--global-color-primary--dark);color:var(--global-color-primary--xx-light)}.c-form__desc{margin-block:25px}.c-form__help{font-size:var(--global-font-size--small);font-style:italic}:not(ul,label)+.c-form__help{margin-top:.3em}.c-form__help>:not(details,a,samp){font-style:normal}.c-form__field{margin-bottom:2rem}.c-form__field:not(.has-type-check){display:flex;flex-direction:column}.c-form__field:not(.has-type-check)>.c-form__errors{order:1}.c-form__field.has-type-check{align-items:center;-moz-column-gap:.5em;column-gap:.5em;display:inline-grid;grid-template-areas:"error _____" "input label" "notes notes";grid-template-columns:min-content auto}.c-form__field.has-type-check .c-form__errors{grid-area:error}.c-form__field.has-type-check input{grid-area:input}.c-form__field.has-type-check label{grid-area:label}.c-form__field.has-type-check .c-form__help{grid-area:notes}.c-form__field.has-type-check label{margin-bottom:0}.c-form__field>ul:where(:not(.c-form__errors)) label{align-items:center;display:flex;font-weight:revert;gap:.5em}.c-form__field>ul:where(:not(.c-form__errors)) li:last-child label{margin-bottom:0}.c-form__field .c-form__star{margin-left:.5em}.c-form__field.has-required .c-form__star{color:var(--global-color-danger--dark)}.c-form__field:not(.has-required) .c-form__star{color:var(--global-color-warning--dark)}.c-form__field .c-form__star{display:inline-block;line-height:0;visibility:hidden;width:0}.c-form__field .c-form__star:after{line-height:normal;visibility:visible}.c-form__field.has-required .c-form__star:after{content:"(required)"}.c-form__field:not(.has-required) .c-form__star:after{content:"(important)"}.c-form__field ul.c-form__errors{margin-bottom:0;margin-top:1rem}ul.c-form__errors{list-style:none;padding-inline:0}.c-form__field>ul:where(:not(.c-form__errors)){list-style:none;padding-left:0}.c-form__buttons{margin-top:35px}nav.c-nav{--link-padding:0.5em}nav.c-nav--boxed{--indent-small:calc(var(--global-space--list-indent)/4);--indent-medium:calc(var(--global-space--list-indent)/2);--indent-large:var(--global-space--list-indent);border:var(--global-border--normal);width:-moz-fit-content;width:fit-content}nav.c-nav--boxed :is(ul,ol){margin:0}nav.c-nav--boxed ul{list-style-type:none;padding-left:var(--indent-medium);padding-right:var(--indent-large)}@media (min-width:992px){nav.c-nav--boxed{padding-block:var(--indent-medium)}nav.c-nav--boxed ol{padding-left:var(--indent-large);padding-right:calc(var(--indent-large) - var(--link-padding))}}@media (max-width:991px){nav.c-nav--boxed{padding-block:var(--indent-small)}nav.c-nav--boxed ol{padding-left:calc(var(--indent-medium) - var(--link-padding));padding-right:calc(var(--indent-large) - var(--link-padding))}}nav.c-nav--boxed.c-nav--no-list{padding-left:var(--indent-medium);padding-right:var(--indent-large)}nav.c-nav{--space-between-inline-items:0.5em}nav.c-nav a{display:inline-block;padding-inline:var(--link-padding)}nav.c-nav--no-list{display:flex;flex-wrap:wrap}nav.c-nav--no-list>a{margin-right:var(--space-between-inline-items)}@media (max-width:991px){nav.c-nav a{line-height:2.5}nav.c-nav :is(ul,ol){display:flex;flex-wrap:wrap;list-style-position:inside}nav.c-nav :is(ul,ol):not(.c-nav--boxed :is(ul,ol)){padding-left:unset}nav.c-nav :is(ul,ol) li{margin-right:var(--space-between-inline-items)}nav.c-nav ul{list-style-type:none}}.c-page-list{--item-width:2em;--item-buffer:3px;--item-border:var(--global-border-width--normal)}.c-page-list{align-items:baseline;display:flex;flex-direction:row;font-size:14px;list-style:none}ul.c-page-list{list-style:none}.c-page-link--always-click{box-sizing:content-box;position:relative}.c-page-link--always-click:after,.c-page-link--always-click:before{--width:var(--item-buffer);--vert-offset:calc(var(--item-border)*-1);--horz-offset:calc(100% + var(--item-border));bottom:var(--vert-offset);content:"";position:absolute;top:var(--vert-offset);width:var(--width)}.c-page-link--always-click.c-button{overflow:visible}.c-page-link--always-click:before{right:var(--horz-offset)}.c-page-link--always-click:after{left:var(--horz-offset)}.c-page-item{margin-inline:var(--item-buffer)}.c-page-item:first-child{margin-left:0}.c-page-item:last-child{margin-right:0}.c-page-item--etcetera{cursor:default;margin-inline:2px;min-width:var(--item-width);text-align:center}.c-page-end{padding:4px 12px}.c-page-link{line-height:1.2;min-width:var(--item-width);padding:5px 0}.c-recognition{font-size:var(--global-font-size--small)}.c-recognition{overflow:auto;padding:0 2.14em}.c-recognition h3{margin-top:.7em}.c-recognition>p:last-child{margin-bottom:1.4em}.c-recognition--style-dark{background-color:var(--global-color-primary--xx-dark);color:var(--global-color-primary--xx-light)}.c-recognition--style-dark a{color:var(--global-color-link-on-dark--normal)}.c-recognition--style-dark h1,.c-recognition--style-dark h2,.c-recognition--style-dark h3,.c-recognition--style-dark h4,.c-recognition--style-dark h5,.c-recognition--style-dark h6{color:var(--global-color-accent--normal)}.c-recognition--style-light{background-color:var(--global-color-primary--xx-light);border-color:var(--global-color-primary--xx-dark);border-style:solid;border-width:var(--global-border-width--normal) 0;color:var(--global-color-primary--dark)}.c-recognition--style-light a{color:var(--global-color-link-on-light--normal)}.c-recognition--style-light h1,.c-recognition--style-light h2,.c-recognition--style-light h3,.c-recognition--style-light h4,.c-recognition--style-light h5,.c-recognition--style-light h6{color:var(--global-color-primary--xx-dark)}.c-see-all-link{display:inline-block;font-size:1.2rem;font-weight:var(--bold);margin-bottom:-1em;max-width:100%;padding-bottom:1em;padding-right:1em;padding-top:1em}.c-see-all-link__icon{display:inline-block;font-size:1.167em;margin-right:.75em;vertical-align:text-bottom}.c-see-all-link__text{font-size:1em}.s-blockquote blockquote{font-style:italic;margin:unset}.s-blockquote blockquote p{margin:0;white-space:pre-wrap}.s-blockquote blockquote p:before{content:"“"}.s-blockquote blockquote p:after{content:"”"}.s-blockquote figcaption{margin-top:.3em}.s-blockquote figcaption:before{content:"— "}.s-blockquote cite{font-style:unset}.s-breadcrumbs-via-ul,.s-breadcrumbs:is(nav){font-size:var(--global-font-size--x-small);margin-bottom:var(--global-space--under-breadcrumbs);padding-top:var(--global-space--above-breadcrumbs)}.s-breadcrumbs-via-ul ul,.s-breadcrumbs:is(nav) ol{font-weight:var(--global-font-weight--medium);list-style:none;margin-bottom:unset;padding-left:unset}.s-breadcrumbs-via-ul ul li,.s-breadcrumbs:is(nav) ol li,.s-breadcrumbs:is(ol) li{display:inline-block}.s-breadcrumbs-via-ul ul li+li:before,.s-breadcrumbs:is(nav) ol li+li:before,.s-breadcrumbs:is(ol) li+li:before{content:" > "}.s-breadcrumbs-via-ul ul li:last-child,.s-breadcrumbs:is(nav) ol li:last-child{font-weight:var(--bold)}.s-footer>p:last-of-type{margin:0}.s-footer a{color:var(--global-color-primary--light)}.u-mailto-text-replace[data-user][data-domain]{font-size:0;visibility:hidden}.u-mailto-text-replace[data-user][data-domain]:before{content:attr(data-user) "@" attr(data-domain);display:inline;font-size:medium;visibility:visible} \ No newline at end of file diff --git a/dist/elements/c-card.selectors.css b/dist/elements/c-card.selectors.css new file mode 100644 index 000000000..0ce636a8c --- /dev/null +++ b/dist/elements/c-card.selectors.css @@ -0,0 +1 @@ +/*! @tacc/core-styles 1.0.0+ | MIT | github.com/TACC/Core-Styles */ \ No newline at end of file diff --git a/dist/elements/table--basic.css b/dist/elements/table--basic.css index d3aafdf64..790547289 100644 --- a/dist/elements/table--basic.css +++ b/dist/elements/table--basic.css @@ -1 +1 @@ -/*! @tacc/core-styles 1.0.0+ | MIT | github.com/TACC/Core-Styles */.x-truncate--many-lines,table p{--lines:2;-webkit-box-orient:vertical;-webkit-line-clamp:var(--lines);display:-webkit-box;overflow:hidden}.x-untruncate--many-lines{-webkit-line-clamp:inherit;overflow:visible}.x-truncate--one-line{overflow:hidden;text-overflow:var(--text-overflow,ellipsis);white-space:nowrap}.x-untruncate--one-line{overflow:visible;white-space:normal}table{--font-size:var(--global-font-size--small,12px);--cell-pad-vert:0.6667em;--cell-pad-horz:1.3333em;--cell-line-height:1.1;border-collapse:separate;border-spacing:0;font-family:var(--global-font-family--sans--portal);font-size:var(--font-size)}thead tr :is(td,th){border-bottom:var(--global-border-width--normal) solid var(--global-color-primary--x-dark)}tr:not(:last-of-type)>:is(td,th){border-bottom:var(--global-border-width--normal) solid var(--global-color-primary--light)}tr:nth-child(odd) :is(th,td){background:var(--global-color-background--app)}tr:nth-child(2n) :is(th,td){background:var(--global-color-primary--x-light)}:is(td,th){color:var(--global-color-primary--dark);padding-block:var(--cell-pad-vert);padding-inline:var(--cell-pad-horz);vertical-align:top}:is(td,th){line-height:var(--cell-line-height)}:is(th,td):first-child{border-right:var(--global-border-width--normal) solid var(--global-color-primary--light);left:0;position:sticky}th{color:var(--global-color-primary--x-dark);text-align:inherit}thead>tr>th{font-weight:var(--bold)}tbody>tr>th{font-weight:var(--normal)}caption{caption-side:top;font-size:var(--font-size);padding-block:var(--cell-pad-vert);padding-inline:var(--cell-pad-horz);text-align:unset}td ul{-webkit-padding-start:0;list-style:none;margin-block:0;padding-inline-start:0}td li:not(:last-of-type){margin-bottom:.5em}td button{font-size:inherit}table p{margin-top:0}table p:last-child{margin-bottom:0} \ No newline at end of file +/*! @tacc/core-styles 1.0.0+ | MIT | github.com/TACC/Core-Styles */.x-truncate--many-lines,table p{--lines:2;-webkit-box-orient:vertical;-webkit-line-clamp:var(--lines);display:-webkit-box;overflow:hidden}.x-untruncate--many-lines{-webkit-line-clamp:inherit;overflow:visible}.x-truncate--one-line{overflow:hidden;text-overflow:var(--text-overflow,ellipsis);white-space:nowrap}.x-untruncate--one-line{overflow:visible;white-space:normal}.paragraph-table,.s-paragraph-table,table{--font-size:var(--global-font-size--small,12px);--cell-pad-vert:0.6667em;--cell-pad-horz:1.3333em;--cell-line-height:1.1;border-collapse:separate;border-spacing:0;font-family:var(--global-font-family--sans--portal);font-size:var(--font-size)}.paragraph-table,.s-paragraph-table{display:table}thead tr :is(td,th){border-bottom:var(--global-border-width--normal) solid var(--global-color-primary--x-dark)}.paragraph-table p:not(:last-of-type),.s-paragraph-table p:not(:last-of-type),tr:not(:last-of-type)>:is(td,th){border-bottom:var(--global-border-width--normal) solid var(--global-color-primary--light)}tr:nth-child(odd) :is(th,td){background:var(--global-color-background--app)}.paragraph-table p:nth-child(2n),.s-paragraph-table p:nth-child(2n),tr:nth-child(2n) :is(th,td){background:var(--global-color-primary--x-light)}.paragraph-table p,.s-paragraph-table p,:is(td,th){color:var(--global-color-primary--dark);padding-block:var(--cell-pad-vert);padding-inline:var(--cell-pad-horz);vertical-align:top}.paragraph-table p,.s-paragraph-table p,:is(td,th){line-height:var(--cell-line-height)}:is(th,td):first-child{border-right:var(--global-border-width--normal) solid var(--global-color-primary--light);left:0;position:sticky}th{color:var(--global-color-primary--x-dark);text-align:inherit}thead>tr>th{font-weight:var(--bold)}tbody>tr>th{font-weight:var(--normal)}caption{caption-side:top;font-size:var(--font-size);padding-block:var(--cell-pad-vert);padding-inline:var(--cell-pad-horz);text-align:unset}td ul{-webkit-padding-start:0;list-style:none;margin-block:0;padding-inline-start:0}td li:not(:last-of-type){margin-bottom:.5em}.paragraph-table p button,.s-paragraph-table p button,td button{font-size:inherit}.paragraph-table p,.s-paragraph-table p,table p{margin-top:0}.paragraph-table p,.s-paragraph-table p,table p:last-child{margin-bottom:0} \ No newline at end of file diff --git a/dist/elements/table.css b/dist/elements/table.css index 7d010a346..ff60d2a83 100644 --- a/dist/elements/table.css +++ b/dist/elements/table.css @@ -1 +1 @@ -/*! @tacc/core-styles 1.0.0+ | MIT | github.com/TACC/Core-Styles */.x-truncate--many-lines,table p{--lines:2;-webkit-box-orient:vertical;-webkit-line-clamp:var(--lines);display:-webkit-box;overflow:hidden}.x-untruncate--many-lines{-webkit-line-clamp:inherit;overflow:visible}.x-truncate--one-line{overflow:hidden;text-overflow:var(--text-overflow,ellipsis);white-space:nowrap}.x-untruncate--one-line{overflow:visible;white-space:normal}table{--font-size:var(--global-font-size--small,12px);--cell-pad-vert:0.6667em;--cell-pad-horz:1.3333em;--cell-line-height:1.1;border-collapse:separate;border-spacing:0;font-family:var(--global-font-family--sans--portal);font-size:var(--font-size)}thead tr :is(td,th){border-bottom:var(--global-border-width--normal) solid var(--global-color-primary--x-dark)}tr:not(:last-of-type)>:is(td,th){border-bottom:var(--global-border-width--normal) solid var(--global-color-primary--light)}tr:nth-child(odd) :is(th,td){background:var(--global-color-background--app)}tr:nth-child(2n) :is(th,td){background:var(--global-color-primary--x-light)}:is(td,th){color:var(--global-color-primary--dark);padding-block:var(--cell-pad-vert);padding-inline:var(--cell-pad-horz);vertical-align:top}:is(td,th){line-height:var(--cell-line-height)}:is(th,td):first-child{border-right:var(--global-border-width--normal) solid var(--global-color-primary--light);left:0;position:sticky}th{color:var(--global-color-primary--x-dark);text-align:inherit}thead>tr>th{font-weight:var(--bold)}tbody>tr>th{font-weight:var(--normal)}caption{caption-side:top;font-size:var(--font-size);padding-block:var(--cell-pad-vert);padding-inline:var(--cell-pad-horz);text-align:unset}td ul{-webkit-padding-start:0;list-style:none;margin-block:0;padding-inline-start:0}td li:not(:last-of-type){margin-bottom:.5em}td button{font-size:inherit}table p{margin-top:0}table p:last-child{margin-bottom:0}@supports selector(:has(table)){table:has(table) :is(td,th){white-space:nowrap}table:has(table) tr:nth-child(2n) :is(th,td){background:var(--global-color-background--app)}td:has(table) tr:nth-child(2n) :is(th,td){background:var(--global-color-primary--x-light)}td:has(table){padding:0}}@supports not selector(:has(table)){table.has-table :is(td,th){white-space:nowrap}table.has-table tr:nth-child(2n) :is(th,td){background:var(--global-color-background--app)}td.has-table tr:nth-child(2n) :is(th,td){background:var(--global-color-primary--x-light)}td.has-table{padding:0}}thead+tbody tr table{--offset-distance:calc(var(--cell-pad-vert)*2 + var(--cell-line-height)*var(--font-size) + var(--global-border-width--normal));--offset:calc(var(--offset-distance)*-1);margin-bottom:var(--offset);transform:translateY(var(--offset))}thead+tbody tr:first-of-type thead{background:var(--global-color-background--app)}thead+tbody tr:not(:first-of-type) thead{visibility:hidden}td:not(:first-child) td:first-child,td:not(:first-child) th:first-child{-webkit-padding-start:8px;padding-inline-start:8px}td:not(:last-child) td:last-child,td:not(:last-child) th:last-child{-webkit-padding-end:8px;padding-inline-end:8px} \ No newline at end of file +/*! @tacc/core-styles 1.0.0+ | MIT | github.com/TACC/Core-Styles */.x-truncate--many-lines,table p{--lines:2;-webkit-box-orient:vertical;-webkit-line-clamp:var(--lines);display:-webkit-box;overflow:hidden}.x-untruncate--many-lines{-webkit-line-clamp:inherit;overflow:visible}.x-truncate--one-line{overflow:hidden;text-overflow:var(--text-overflow,ellipsis);white-space:nowrap}.x-untruncate--one-line{overflow:visible;white-space:normal}.paragraph-table,.s-paragraph-table,table{--font-size:var(--global-font-size--small,12px);--cell-pad-vert:0.6667em;--cell-pad-horz:1.3333em;--cell-line-height:1.1;border-collapse:separate;border-spacing:0;font-family:var(--global-font-family--sans--portal);font-size:var(--font-size)}.paragraph-table,.s-paragraph-table{display:table}thead tr :is(td,th){border-bottom:var(--global-border-width--normal) solid var(--global-color-primary--x-dark)}.paragraph-table p:not(:last-of-type),.s-paragraph-table p:not(:last-of-type),tr:not(:last-of-type)>:is(td,th){border-bottom:var(--global-border-width--normal) solid var(--global-color-primary--light)}tr:nth-child(odd) :is(th,td){background:var(--global-color-background--app)}.paragraph-table p:nth-child(2n),.s-paragraph-table p:nth-child(2n),tr:nth-child(2n) :is(th,td){background:var(--global-color-primary--x-light)}.paragraph-table p,.s-paragraph-table p,:is(td,th){color:var(--global-color-primary--dark);padding-block:var(--cell-pad-vert);padding-inline:var(--cell-pad-horz);vertical-align:top}.paragraph-table p,.s-paragraph-table p,:is(td,th){line-height:var(--cell-line-height)}:is(th,td):first-child{border-right:var(--global-border-width--normal) solid var(--global-color-primary--light);left:0;position:sticky}th{color:var(--global-color-primary--x-dark);text-align:inherit}thead>tr>th{font-weight:var(--bold)}tbody>tr>th{font-weight:var(--normal)}caption{caption-side:top;font-size:var(--font-size);padding-block:var(--cell-pad-vert);padding-inline:var(--cell-pad-horz);text-align:unset}td ul{-webkit-padding-start:0;list-style:none;margin-block:0;padding-inline-start:0}td li:not(:last-of-type){margin-bottom:.5em}.paragraph-table p button,.s-paragraph-table p button,td button{font-size:inherit}.paragraph-table p,.s-paragraph-table p,table p{margin-top:0}.paragraph-table p,.s-paragraph-table p,table p:last-child{margin-bottom:0}@supports selector(:has(table)){table:has(table) :is(td,th){white-space:nowrap}table:has(table) tr:nth-child(2n) :is(th,td){background:var(--global-color-background--app)}td:has(table) tr:nth-child(2n) :is(th,td){background:var(--global-color-primary--x-light)}td:has(table){padding:0}}@supports not selector(:has(table)){table.has-table :is(td,th){white-space:nowrap}table.has-table tr:nth-child(2n) :is(th,td){background:var(--global-color-background--app)}td.has-table tr:nth-child(2n) :is(th,td){background:var(--global-color-primary--x-light)}td.has-table{padding:0}}thead+tbody tr table{--offset-distance:calc(var(--cell-pad-vert)*2 + var(--cell-line-height)*var(--font-size) + var(--global-border-width--normal));--offset:calc(var(--offset-distance)*-1);margin-bottom:var(--offset);transform:translateY(var(--offset))}thead+tbody tr:first-of-type thead{background:var(--global-color-background--app)}thead+tbody tr:not(:first-of-type) thead{visibility:hidden}td:not(:first-child) td:first-child,td:not(:first-child) th:first-child{-webkit-padding-start:8px;padding-inline-start:8px}td:not(:last-child) td:last-child,td:not(:last-child) th:last-child{-webkit-padding-end:8px;padding-inline-end:8px} \ No newline at end of file diff --git a/dist/elements/table.selectors.css b/dist/elements/table.selectors.css new file mode 100644 index 000000000..0ce636a8c --- /dev/null +++ b/dist/elements/table.selectors.css @@ -0,0 +1 @@ +/*! @tacc/core-styles 1.0.0+ | MIT | github.com/TACC/Core-Styles */ \ No newline at end of file diff --git a/dist/trumps/s-paragraph-table.css b/dist/trumps/s-paragraph-table.css new file mode 100644 index 000000000..0ce636a8c --- /dev/null +++ b/dist/trumps/s-paragraph-table.css @@ -0,0 +1 @@ +/*! @tacc/core-styles 1.0.0+ | MIT | github.com/TACC/Core-Styles */ \ No newline at end of file diff --git a/src/lib/_imports/elements/table--basic.css b/src/lib/_imports/elements/table--basic.css index 118c8a1cc..8c819f322 100644 --- a/src/lib/_imports/elements/table--basic.css +++ b/src/lib/_imports/elements/table--basic.css @@ -1,6 +1,9 @@ @import url("../tools/x-truncate.css"); -table { +@import url("./table.selectors.css"); + +table, +:--s-paragraph-table { --font-size: var(--global-font-size--small, 12px); --cell-pad-vert: 0.6667em; /* 8px if font-size is 12px */ --cell-pad-horz: 1.3333em; /* 16px if font-size is 12px */ @@ -14,6 +17,9 @@ table { font-family: var(--global-font-family--sans--portal); font-size: var(--font-size); } +:--s-paragraph-table { + display: table; /* to mimic shrink-wrap width of real table */ +} /* To add border to bottom of all rows */ /* FAQ: Added to cell, not row, because `border-collapse: separate` */ @@ -22,7 +28,8 @@ thead tr :is(td, th) { border-bottom-style: solid; border-bottom-color: var(--global-color-primary--x-dark); } -tr:not(:last-of-type) > :is(td, th) { +tr:not(:last-of-type) > :is(td, th), +:--s-paragraph-table p:not(:last-of-type) { border-bottom-width: var(--global-border-width--normal); border-bottom-style: solid; border-bottom-color: var(--global-color-primary--light); @@ -34,11 +41,13 @@ tr:not(:last-of-type) > :is(td, th) { tr:nth-child(odd) :is(th, td) { background: var(--global-color-background--app); } -tr:nth-child(even) :is(th, td) { +tr:nth-child(even) :is(th, td), +:--s-paragraph-table p:nth-child(even) { background: var(--global-color-primary--x-light); } -:is(td, th) { +:is(td, th), +:--s-paragraph-table p { vertical-align: top; padding-block: var(--cell-pad-vert); padding-inline: var(--cell-pad-horz); @@ -47,7 +56,8 @@ tr:nth-child(even) :is(th, td) { } /* To ensure height matches between browsers */ /* IMPORTANT: More than for consistency; `table--nested.css` requires this */ -:is(td, th) { +:is(td, th), +:--s-paragraph-table p { line-height: var(--cell-line-height); } /* To pin first column to left of table even during scroll */ @@ -97,19 +107,24 @@ td li:not(:last-of-type) { } /* To override browser */ -td button { +td button, +:--s-paragraph-table p button { /* To match font-size of table cell text and links */ font-size: inherit; } /* To override `site.css` or browser */ -table p { +table p, +:--s-paragraph-table p { margin-top: 0; } -table p:last-child { +table p:last-child, +:--s-paragraph-table p { margin-bottom: 0; } +/* To truncate paragraphs */ +/* FAQ: Except for :--s-paragraph-table's whose

tags we permit to wrap */ table p { @extend %x-truncate--many-lines; } diff --git a/src/lib/_imports/elements/table.selectors.css b/src/lib/_imports/elements/table.selectors.css new file mode 100644 index 000000000..79491d164 --- /dev/null +++ b/src/lib/_imports/elements/table.selectors.css @@ -0,0 +1,3 @@ +@custom-selector :--s-paragraph-table + .s-paragraph-table, + .paragraph-table; diff --git a/src/lib/_imports/elements/table/config.yml b/src/lib/_imports/elements/table/config.yml index 7305ed22b..8c1fbcb4e 100644 --- a/src/lib/_imports/elements/table/config.yml +++ b/src/lib/_imports/elements/table/config.yml @@ -37,7 +37,7 @@ variants: text: View Details - is-button: true text: Delete - - name: paragraph + - name: with-paragraphs context: data: cols: @@ -66,6 +66,14 @@ variants: text: View Details - is-button: true text: Delete + - name: via-paragraphs + context: + data: + rows: + - paragraph: true + - paragraph: true + - paragraph: true + - paragraph: true - name: nested context: data: diff --git a/src/lib/_imports/elements/table/table--via-paragraphs.hbs b/src/lib/_imports/elements/table/table--via-paragraphs.hbs new file mode 100644 index 000000000..d3ab7fb68 --- /dev/null +++ b/src/lib/_imports/elements/table/table--via-paragraphs.hbs @@ -0,0 +1,19 @@ +

Fake Table

+ +{{> @s-paragraph-table class="s-paragraph-table" data=data }} + +

Real Table

+ + + + {{#each data.rows}} + + {{#if paragraph}} + + {{/if}} + + {{/each}} + +
+

{{> @text-of-one-paragraph-short }}

+
diff --git a/src/lib/_imports/elements/table/table--via-paragraphs.readme.md b/src/lib/_imports/elements/table/table--via-paragraphs.readme.md new file mode 100644 index 000000000..dbbfb5fd6 --- /dev/null +++ b/src/lib/_imports/elements/table/table--via-paragraphs.readme.md @@ -0,0 +1,17 @@ +A [table]({{path './table' }}) that uses [paragraphs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p) instead of cells. + +> **ⓘ Notice** +> +> - Text will not truncate. It will wrap. +> - Only a single column is supported. + +> **⁉ Help** +> +> Should text truncate? Ask designers. + + diff --git a/src/lib/_imports/elements/table/table--paragraph.readme.md b/src/lib/_imports/elements/table/table--with-paragraphs.readme.md similarity index 100% rename from src/lib/_imports/elements/table/table--paragraph.readme.md rename to src/lib/_imports/elements/table/table--with-paragraphs.readme.md diff --git a/src/lib/_imports/trumps/s-paragraph-table.css b/src/lib/_imports/trumps/s-paragraph-table.css new file mode 100644 index 000000000..c7c48545e --- /dev/null +++ b/src/lib/_imports/trumps/s-paragraph-table.css @@ -0,0 +1,3 @@ +/* FAQ: Using @custom-selector within elements/table */ +/* SEE: src/lib/_imports/elements/table--basic.css */ +/* SEE: src/lib/_imports/elements/table.selectors.css */ diff --git a/src/lib/_imports/trumps/s-paragraph-table/config.yml b/src/lib/_imports/trumps/s-paragraph-table/config.yml new file mode 100644 index 000000000..bf639a78b --- /dev/null +++ b/src/lib/_imports/trumps/s-paragraph-table/config.yml @@ -0,0 +1,7 @@ +context: + data: + rows: + - paragraph: true + - paragraph: true + - paragraph: true + - paragraph: true diff --git a/src/lib/_imports/trumps/s-paragraph-table/readme.md b/src/lib/_imports/trumps/s-paragraph-table/readme.md new file mode 100644 index 000000000..dbbfb5fd6 --- /dev/null +++ b/src/lib/_imports/trumps/s-paragraph-table/readme.md @@ -0,0 +1,17 @@ +A [table]({{path './table' }}) that uses [paragraphs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p) instead of cells. + +> **ⓘ Notice** +> +> - Text will not truncate. It will wrap. +> - Only a single column is supported. + +> **⁉ Help** +> +> Should text truncate? Ask designers. + + diff --git a/src/lib/_imports/trumps/s-paragraph-table/s-paragraph-table.hbs b/src/lib/_imports/trumps/s-paragraph-table/s-paragraph-table.hbs new file mode 100644 index 000000000..a68861e2a --- /dev/null +++ b/src/lib/_imports/trumps/s-paragraph-table/s-paragraph-table.hbs @@ -0,0 +1,7 @@ +
+{{#each data.rows}} + {{#if paragraph}} +

{{> @text-of-one-paragraph-short }}

+ {{/if}} +{{/each}} +