From 31e62d59636d7d67b8ed0239ab9c7aa50aeb4a63 Mon Sep 17 00:00:00 2001 From: Wesley B <62723358+wesleyboar@users.noreply.github.com> Date: Mon, 1 Jun 2026 10:53:32 -0500 Subject: [PATCH 1/8] feat(bootstrap4): add alert bridge and sortable table object Ship Bootstrap alert + c-message bridge and o-sortable-table for manual Research/Software CMS listing pages. Dist built for jsDelivr gh tags. Co-authored-by: Cursor --- dist/bootstrap4/components/alert.css | 1 + dist/bootstrap4/components/alert/demo.css | 1 + dist/core-styles.bootstrap4.css | 2 +- dist/objects/o-sortable-table.css | 1 + .../_imports/bootstrap4/components/alert.css | 30 +++++++++++++ .../bootstrap4/components/alert/alert.hbs | 23 ++++++++++ .../bootstrap4/components/alert/config.yml | 34 +++++++++++++++ .../bootstrap4/components/alert/demo.css | 5 +++ .../bootstrap4/components/alert/readme.md | 3 ++ src/lib/_imports/core-styles.bootstrap4.css | 1 + src/lib/_imports/objects/o-sortable-table.css | 42 +++++++++++++++++++ 11 files changed, 142 insertions(+), 1 deletion(-) create mode 100644 dist/bootstrap4/components/alert.css create mode 100644 dist/bootstrap4/components/alert/demo.css create mode 100644 dist/objects/o-sortable-table.css create mode 100644 src/lib/_imports/bootstrap4/components/alert.css create mode 100644 src/lib/_imports/bootstrap4/components/alert/alert.hbs create mode 100644 src/lib/_imports/bootstrap4/components/alert/config.yml create mode 100644 src/lib/_imports/bootstrap4/components/alert/demo.css create mode 100644 src/lib/_imports/bootstrap4/components/alert/readme.md create mode 100644 src/lib/_imports/objects/o-sortable-table.css diff --git a/dist/bootstrap4/components/alert.css b/dist/bootstrap4/components/alert.css new file mode 100644 index 000000000..489b0d834 --- /dev/null +++ b/dist/bootstrap4/components/alert.css @@ -0,0 +1 @@ +/*! @tacc/core-styles 2.57.0-rc1+ | MIT | github.com/TACC/Core-Styles */.x-link{color:var(--global-color-accent--light);text-decoration-color:currentColor;text-decoration-line:none;text-decoration-thickness:var(--global-border-width--normal);text-underline-offset:.2em}.x-link--disabled{opacity:.75;pointer-events:none}.x-link--hover{color:var(--global-color-accent--light);text-decoration-line:underline;text-decoration-style:solid}.x-link--active{text-decoration-line:underline;text-decoration-style:dotted}.x-link--irregular{color:var(--global-color-accent--light);text-decoration-color:currentColor;text-decoration-line:none;text-decoration-line:underline;text-decoration-thickness:var(--global-border-width--normal);text-underline-offset:.2em}.x-link--irregular--disabled{opacity:.75;pointer-events:none}.x-link--irregular--hover{color:var(--global-color-accent--light);text-decoration-line:underline;text-decoration-style:solid;text-decoration-style:dashed}.x-link--irregular--active{text-decoration-line:underline;text-decoration-style:dotted;text-decoration-style:dotted}:is(.c-message,[class*=message--])>:first-child{margin-top:0}:is(.c-message,[class*=message--])>:last-child{margin-bottom:0}:is(.c-message--scope-inline,.message--scope-inline)>*{display:inline}:is(.c-message--scope-inline,.message--scope-inline):before{font-family:var(--icon)}:is(.c-message--scope-inline,.message--scope-inline):before{color:var(--icon-color);margin-right:.5ch}:is(.c-message--type-success,.message--type-success):is(.c-message--scope-inline,.message--scope-inline){--icon-color:var(--global-color-success--x-dark)}:is(.c-message--type-success,.message--type-success):is(.c-message--scope-inline,.message--scope-inline):before{content:"✓"}:is(.c-message--type-success,.message--type-success):is(.c-message--scope-inline,.message--scope-inline):before{font-family:var(--icon)}:is(.c-message--type-warning,.message--type-warning):is(.c-message--scope-inline,.message--scope-inline){--icon-color:var(--global-color-warning--dark)}:is(.c-message--type-warning,.message--type-warning):is(.c-message--scope-inline,.message--scope-inline):before{content:"⚠"}:is(.c-message--type-warning,.message--type-warning):is(.c-message--scope-inline,.message--scope-inline):before{font-family:var(--icon)}:is(.c-message--type-error,.message--type-error):is(.c-message--scope-inline,.message--scope-inline){--icon-color:var(--global-color-danger--dark);color:var(--global-color-danger--dark)}:is(.c-message--type-error,.message--type-error):is(.c-message--scope-inline,.message--scope-inline):before{content:"⚠"}:is(.c-message--type-error,.message--type-error):is(.c-message--scope-inline,.message--scope-inline):before{font-family:var(--icon)}:is(.c-message--scope-section,.message--scope-section){border-style:solid;border-width:var(--global-border-width--normal);padding-block:8px;padding-inline:12px}:is(.c-message--type-info,.message--type-info):is(.c-message--scope-section,.message--scope-section){background-color:var(--global-color-info--x-light);border-color:var(--global-color-info--normal)}:is(.c-message--type-success,.message--type-success):is(.c-message--scope-section,.message--scope-section){background-color:var(--global-color-success--x-light);border-color:var(--global-color-success--x-dark)}:is(.c-message--type-warning,.message--type-warning):is(.c-message--scope-section,.message--scope-section){background-color:var(--global-color-warning--x-light);border-color:var(--global-color-warning--dark)}:is(.c-message--type-error,.message--type-error):is(.c-message--scope-section,.message--scope-section){background-color:var(--global-color-danger--x-light);border-color:var(--global-color-danger--dark)}:is(.c-message--type-extra,.message--type-extra):is(.c-message--scope-section,.message--scope-section){background-color:var(--global-color-extra--x-light);border-color:var(--global-color-extra--normal)}:is(.c-message--scope-global,.message--scope-global){background-color:var(--global-color-accent--secondary);border-color:var(--global-color-primary--dark);border-width:0;color:var(--global-color-primary--xx-light);padding-block:8px;padding-inline:12px;text-align:center}:is(:is(.c-message--scope-global,.message--scope-global) :is(a,:is([class*=button--as-link],.btn-link))){color:var(--global-color-accent--light);text-decoration-color:currentColor;text-decoration-line:none;text-decoration-line:underline;text-decoration-thickness:var(--global-border-width--normal);text-underline-offset:.2em}:is(:is(.c-message--scope-global,.message--scope-global) :is(a,:is([class*=button--as-link],.btn-link))):hover{color:var(--global-color-accent--light);text-decoration-line:underline;text-decoration-style:solid;text-decoration-style:dashed}:is(:is(.c-message--scope-global,.message--scope-global) :is(a,:is([class*=button--as-link],.btn-link))):active{text-decoration-line:underline;text-decoration-style:dotted;text-decoration-style:dotted}:is(:is(.c-message--scope-global,.message--scope-global) :is(a,:is([class*=button--as-link],.btn-link))):is(*,:hover,:active){color:inherit}.alert.c-message{background-color:unset;border:unset;border-radius:unset;color:unset}.alert.c-message hr{border-top-color:unset}.alert.c-message .alert-link{color:unset;font-weight:unset}.alert.c-message.alert-dismissible{padding-right:unset}.alert.c-message.alert-dismissible .close{color:inherit;padding:.75rem 1.25rem;position:absolute;right:0;top:0} \ No newline at end of file diff --git a/dist/bootstrap4/components/alert/demo.css b/dist/bootstrap4/components/alert/demo.css new file mode 100644 index 000000000..51ca9f09b --- /dev/null +++ b/dist/bootstrap4/components/alert/demo.css @@ -0,0 +1 @@ +/*! @tacc/core-styles 2.57.0-rc1+ | MIT | github.com/TACC/Core-Styles */.alert{margin-block:1em} \ No newline at end of file diff --git a/dist/core-styles.bootstrap4.css b/dist/core-styles.bootstrap4.css index 3af21b478..fe92b142c 100644 --- a/dist/core-styles.bootstrap4.css +++ b/dist/core-styles.bootstrap4.css @@ -1,2 +1,2 @@ /*! @tacc/core-styles 2.57.0-rc1+ | MIT | github.com/TACC/Core-Styles */ -/*! core-styles.bootstrap4.css */.x-truncate--many-lines{--lines:2;-webkit-box-orient:vertical;-webkit-line-clamp:var(--lines);display:-webkit-box;max-height:calc(var(--lines) * 1lh);overflow:hidden}.x-untruncate--many-lines{-webkit-line-clamp:inherit;overflow:visible}.x-untruncate--many-lines{-webkit-line-clamp:inherit;overflow:visible}.x-truncate--one-line{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.x-untruncate--one-line{overflow:visible;white-space:normal}.x-link{color:var(--global-color-accent--light);text-decoration-color:currentColor;text-decoration-line:none;text-decoration-thickness:var(--global-border-width--normal);text-underline-offset:.2em}.x-link--disabled{opacity:.75;pointer-events:none}.x-link--hover{color:var(--global-color-accent--light);text-decoration-line:underline;text-decoration-style:solid}.x-link--active{text-decoration-line:underline;text-decoration-style:dotted}.x-link--irregular{color:var(--global-color-accent--light);text-decoration-color:currentColor;text-decoration-line:none;text-decoration-line:underline;text-decoration-thickness:var(--global-border-width--normal);text-underline-offset:.2em}.x-link--irregular--disabled{opacity:.75;pointer-events:none}.x-link--irregular--hover{color:var(--global-color-accent--light);text-decoration-line:underline;text-decoration-style:solid;text-decoration-style:dashed}.x-link--irregular--active{text-decoration-line:underline;text-decoration-style:dotted;text-decoration-style:dotted}:is(.c-button,[class*=button--],.btn){--min-width:75px;--mid-width:110px;--max-width:130px;align-items:center;border-style:solid;border-width:var(--global-border-width--normal);box-sizing:border-box;display:inline-flex;gap:.5ch;justify-content:center;line-height:1.5}:is(.c-button,[class*=button--],.btn):where(:not(:is(:disabled,:where(a[disabled])))){cursor:pointer}:is(.c-button,[class*=button--],.btn){vertical-align:middle}a:is(.c-button,[class*=button--],.btn){text-align:center;text-decoration:none}a:is([class*=button--is-busy],[data-state=busy]){cursor:default}:is(.c-button,[class*=button--],.btn):is(:disabled,:where(a[disabled])){-webkit-user-select:none;-moz-user-select:none;user-select:none}:is(.c-button,[class*=button--],.btn):is(:disabled,:where(a[disabled])):not(:is([class*=button--is-busy],[data-state=busy])){border-color:var(--global-color-primary--dark);color:var(--global-color-primary--dark)}:is(.c-button,[class*=button--],.btn):is(:disabled,:where(a[disabled])):not(:is([class*=button--is-busy],[data-state=busy]),:is([class*=button--as-link],.btn-link)){background-color:var(--global-color-primary--xx-light)}:is(.c-button--primary,.button--1,.btn-primary,.btn-dark),:is(.c-button--secondary,.button--2,.btn-secondary,.btn-light),:is(.c-button--tertiary,.button--3,.btn-info,.btn-success,.btn-warning,.btn-danger),:is([class*=button--is-active],.btn.active){max-width:var(--max-width);min-width:var(--min-width);padding:6px 18px}:is(.c-button--primary,.button--1,.btn-primary,.btn-dark):hover{background-color:var(--global-color-accent--dark);border-color:var(--global-color-accent--dark);color:var(--global-color-primary--xx-light)}:is(.c-button--primary,.button--1,.btn-primary,.btn-dark):active:not(:is([class*=button--is-busy],[data-state=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)}:is(.c-button--primary,.button--1,.btn-primary,.btn-dark):focus:not(:active,:is([class*=button--is-busy],[data-state=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)}:is(.c-button--primary,.button--1,.btn-primary,.btn-dark):is([class*=button--is-busy],[data-state=busy]),:is(.c-button--primary,.button--1,.btn-primary,.btn-dark):not(:hover,:focus,:active,:is(:disabled,:where(a[disabled]))){background-color:var(--global-color-accent--normal);border-color:var(--global-color-accent--normal);color:var(--global-color-primary--xx-light)}:is(.c-button--secondary,.button--2,.btn-secondary,.btn-light):hover{background-color:var(--global-color-accent--x-light);border-color:var(--global-color-accent--normal);color:var(--global-color-primary--xx-dark)}:is(.c-button--secondary,.button--2,.btn-secondary,.btn-light):active:not(:is([class*=button--is-busy],[data-state=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)}:is(.c-button--secondary,.button--2,.btn-secondary,.btn-light):focus:not(:active,:is([class*=button--is-busy],[data-state=busy])){background-color:var(--global-color-accent--x-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)}:is(.c-button--secondary,.button--2,.btn-secondary,.btn-light):is([class*=button--is-busy],[data-state=busy]),:is(.c-button--secondary,.button--2,.btn-secondary,.btn-light):not(:hover,:focus,:active,:is(:disabled,: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)}:is(.c-button,[class*=button--],.btn):is(.c-button--secondary,.button--2,.btn-secondary,.btn-light):is(:disabled,:where(a[disabled])){background-color:var(--global-color-primary--x-light)}:is(.c-button--tertiary,.button--3,.btn-info,.btn-success,.btn-warning,.btn-danger):hover{background-color:var(--global-color-primary--light);border-color:var(--global-color-accent--dark);color:var(--global-color-primary--xx-dark)}:is(.c-button--tertiary,.button--3,.btn-info,.btn-success,.btn-warning,.btn-danger):active:not(:is([class*=button--is-busy],[data-state=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)}:is(.c-button--tertiary,.button--3,.btn-info,.btn-success,.btn-warning,.btn-danger):focus:not(:active,:is([class*=button--is-busy],[data-state=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)}:is(.c-button--tertiary,.button--3,.btn-info,.btn-success,.btn-warning,.btn-danger):is([class*=button--is-busy],[data-state=busy]),:is(.c-button--tertiary,.button--3,.btn-info,.btn-success,.btn-warning,.btn-danger):not(:hover,:focus,:active,:is(:disabled,: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)}:is(.c-button--can-truncate,.button--truncate){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:is([class*=button--is-active],.btn.active):hover{background-color:var(--global-color-accent--xx-light);border-color:var(--global-color-accent--dark);color:var(--global-color-primary--xx-dark)}:is([class*=button--is-active],.btn.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)}:is([class*=button--is-active],.btn.active):focus:not(:active){background-color:var(--global-color-accent--xx-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)}:is([class*=button--is-active],.btn.active):is([class*=button--is-busy],[data-state=busy]),:is([class*=button--is-active],.btn.active):not(:hover,:focus,:active,:is(:disabled,: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)}:is([class*=button--as-link],.btn-link){background:unset;border:unset;color:var(--global-color-accent--light);font-family:inherit;font-size:inherit;font-weight:inherit;padding-inline:unset;text-decoration-color:currentColor;text-decoration-line:none;text-decoration-thickness:var(--global-border-width--normal);text-underline-offset:.2em}:is([class*=button--as-link],.btn-link):where(:not(:is(:disabled,:where(a[disabled])))):hover{color:var(--global-color-accent--light);text-decoration-line:underline;text-decoration-style:solid}:is([class*=button--as-link],.btn-link):where(:not(:is(:disabled,:where(a[disabled])))):active{text-decoration-line:underline;text-decoration-style:dotted}:is([class*=button--is-busy],[data-state=busy]){opacity:.5;pointer-events:none}:is([class*=button--is-busy],[data-state=busy]) *{opacity:.5}:is(.c-button,[class*=button--],.btn):where(:not(:is([class*=button--width-short]),:is([class*=button--width-medium]),:is([class*=button--width-long]),:is([class*=button--size-small],.btn-sm),:is([class*=button--as-link],.btn-link))){--max-width:auto;width:auto}:is([class*=button--width-short]){width:var(--min-width)}:is([class*=button--width-medium]){width:var(--mid-width)}:is([class*=button--width-long]){width:var(--max-width)}:is([class*=button--size-small],.btn-sm){line-height:1;min-width:0;padding:4px 9px}:is(.c-button,[class*=button--],.btn) .spinner-border{align-self:center}.btn{border-radius:unset}.btn-lg,.btn-sm{font-size:inherit}.btn.focus,.btn:focus{box-shadow:unset}.card[class*=card--]{border:unset;border-radius:unset}.media-link{gap:1rem}.media-link>:not(.media-body){margin-top:.5rem}.text-primary:not(a){color:inherit!important}.text-secondary:not(a){color:var(--global-color-accent--secondary)!important}.text-muted{color:inherit!important;opacity:.5}.text-black:not(a),.text-dark:not(a){color:var(--global-color-primary--xx-dark)!important}.text-light:not(a),.text-white:not(a){color:var(--global-color-primary--xx-light)!important}[class*=text-]:not(a):not(.text-primary,.text-secondary,.text-muted,.text-dark,.text-light,.text-black,.text-white,.text-black-50,.text-white-50){color:inherit!important}a.text-primary:is(:link,:visited,:hover,:focus){color:var(--global-color-accent--light)!important}a.text-secondary:is(:link,:visited,:hover,:focus){color:var(--global-color-accent--secondary)!important}a[class*=text-]:not(.text-primary,.text-secondary):is(:link,:visited,:hover,:focus){color:var(--global-color-accent--light)!important} \ No newline at end of file +/*! core-styles.bootstrap4.css */.x-link{color:var(--global-color-accent--light);text-decoration-color:currentColor;text-decoration-line:none;text-decoration-thickness:var(--global-border-width--normal);text-underline-offset:.2em}.x-link--disabled{opacity:.75;pointer-events:none}.x-link--hover{color:var(--global-color-accent--light);text-decoration-line:underline;text-decoration-style:solid}.x-link--active{text-decoration-line:underline;text-decoration-style:dotted}.x-link--irregular{color:var(--global-color-accent--light);text-decoration-color:currentColor;text-decoration-line:none;text-decoration-line:underline;text-decoration-thickness:var(--global-border-width--normal);text-underline-offset:.2em}.x-link--irregular--disabled{opacity:.75;pointer-events:none}.x-link--irregular--hover{color:var(--global-color-accent--light);text-decoration-line:underline;text-decoration-style:solid;text-decoration-style:dashed}.x-link--irregular--active{text-decoration-line:underline;text-decoration-style:dotted;text-decoration-style:dotted}:is(.c-message,[class*=message--])>:first-child{margin-top:0}:is(.c-message,[class*=message--])>:last-child{margin-bottom:0}:is(.c-message--scope-inline,.message--scope-inline)>*{display:inline}:is(.c-message--scope-inline,.message--scope-inline):before{font-family:var(--icon)}:is(.c-message--scope-inline,.message--scope-inline):before{color:var(--icon-color);margin-right:.5ch}:is(.c-message--type-success,.message--type-success):is(.c-message--scope-inline,.message--scope-inline){--icon-color:var(--global-color-success--x-dark)}:is(.c-message--type-success,.message--type-success):is(.c-message--scope-inline,.message--scope-inline):before{content:"✓"}:is(.c-message--type-success,.message--type-success):is(.c-message--scope-inline,.message--scope-inline):before{font-family:var(--icon)}:is(.c-message--type-warning,.message--type-warning):is(.c-message--scope-inline,.message--scope-inline){--icon-color:var(--global-color-warning--dark)}:is(.c-message--type-warning,.message--type-warning):is(.c-message--scope-inline,.message--scope-inline):before{content:"⚠"}:is(.c-message--type-warning,.message--type-warning):is(.c-message--scope-inline,.message--scope-inline):before{font-family:var(--icon)}:is(.c-message--type-error,.message--type-error):is(.c-message--scope-inline,.message--scope-inline){--icon-color:var(--global-color-danger--dark);color:var(--global-color-danger--dark)}:is(.c-message--type-error,.message--type-error):is(.c-message--scope-inline,.message--scope-inline):before{content:"⚠"}:is(.c-message--type-error,.message--type-error):is(.c-message--scope-inline,.message--scope-inline):before{font-family:var(--icon)}:is(.c-message--scope-section,.message--scope-section){border-style:solid;border-width:var(--global-border-width--normal);padding-block:8px;padding-inline:12px}:is(.c-message--type-info,.message--type-info):is(.c-message--scope-section,.message--scope-section){background-color:var(--global-color-info--x-light);border-color:var(--global-color-info--normal)}:is(.c-message--type-success,.message--type-success):is(.c-message--scope-section,.message--scope-section){background-color:var(--global-color-success--x-light);border-color:var(--global-color-success--x-dark)}:is(.c-message--type-warning,.message--type-warning):is(.c-message--scope-section,.message--scope-section){background-color:var(--global-color-warning--x-light);border-color:var(--global-color-warning--dark)}:is(.c-message--type-error,.message--type-error):is(.c-message--scope-section,.message--scope-section){background-color:var(--global-color-danger--x-light);border-color:var(--global-color-danger--dark)}:is(.c-message--type-extra,.message--type-extra):is(.c-message--scope-section,.message--scope-section){background-color:var(--global-color-extra--x-light);border-color:var(--global-color-extra--normal)}:is(.c-message--scope-global,.message--scope-global){background-color:var(--global-color-accent--secondary);border-color:var(--global-color-primary--dark);border-width:0;color:var(--global-color-primary--xx-light);padding-block:8px;padding-inline:12px;text-align:center}:is(:is(.c-message--scope-global,.message--scope-global) :is(a,:is([class*=button--as-link],.btn-link))){color:var(--global-color-accent--light);text-decoration-color:currentColor;text-decoration-line:none;text-decoration-line:underline;text-decoration-thickness:var(--global-border-width--normal);text-underline-offset:.2em}:is(:is(.c-message--scope-global,.message--scope-global) :is(a,:is([class*=button--as-link],.btn-link))):hover{color:var(--global-color-accent--light);text-decoration-line:underline;text-decoration-style:solid;text-decoration-style:dashed}:is(:is(.c-message--scope-global,.message--scope-global) :is(a,:is([class*=button--as-link],.btn-link))):active{text-decoration-line:underline;text-decoration-style:dotted;text-decoration-style:dotted}:is(:is(.c-message--scope-global,.message--scope-global) :is(a,:is([class*=button--as-link],.btn-link))):is(*,:hover,:active){color:inherit}.alert.c-message{background-color:unset;border:unset;border-radius:unset;color:unset}.alert.c-message hr{border-top-color:unset}.alert.c-message .alert-link{color:unset;font-weight:unset}.alert.c-message.alert-dismissible{padding-right:unset}.alert.c-message.alert-dismissible .close{color:inherit;padding:.75rem 1.25rem;position:absolute;right:0;top:0}.x-truncate--many-lines{--lines:2;-webkit-box-orient:vertical;-webkit-line-clamp:var(--lines);display:-webkit-box;max-height:calc(var(--lines) * 1lh);overflow:hidden}.x-untruncate--many-lines{-webkit-line-clamp:inherit;overflow:visible}.x-untruncate--many-lines{-webkit-line-clamp:inherit;overflow:visible}.x-truncate--one-line{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.x-untruncate--one-line{overflow:visible;white-space:normal}:is(.c-button,[class*=button--],.btn){--min-width:75px;--mid-width:110px;--max-width:130px;align-items:center;border-style:solid;border-width:var(--global-border-width--normal);box-sizing:border-box;display:inline-flex;gap:.5ch;justify-content:center;line-height:1.5}:is(.c-button,[class*=button--],.btn):where(:not(:is(:disabled,:where(a[disabled])))){cursor:pointer}:is(.c-button,[class*=button--],.btn){vertical-align:middle}a:is(.c-button,[class*=button--],.btn){text-align:center;text-decoration:none}a:is([class*=button--is-busy],[data-state=busy]){cursor:default}:is(.c-button,[class*=button--],.btn):is(:disabled,:where(a[disabled])){-webkit-user-select:none;-moz-user-select:none;user-select:none}:is(.c-button,[class*=button--],.btn):is(:disabled,:where(a[disabled])):not(:is([class*=button--is-busy],[data-state=busy])){border-color:var(--global-color-primary--dark);color:var(--global-color-primary--dark)}:is(.c-button,[class*=button--],.btn):is(:disabled,:where(a[disabled])):not(:is([class*=button--is-busy],[data-state=busy]),:is([class*=button--as-link],.btn-link)){background-color:var(--global-color-primary--xx-light)}:is(.c-button--primary,.button--1,.btn-primary,.btn-dark),:is(.c-button--secondary,.button--2,.btn-secondary,.btn-light),:is(.c-button--tertiary,.button--3,.btn-info,.btn-success,.btn-warning,.btn-danger),:is([class*=button--is-active],.btn.active){max-width:var(--max-width);min-width:var(--min-width);padding:6px 18px}:is(.c-button--primary,.button--1,.btn-primary,.btn-dark):hover{background-color:var(--global-color-accent--dark);border-color:var(--global-color-accent--dark);color:var(--global-color-primary--xx-light)}:is(.c-button--primary,.button--1,.btn-primary,.btn-dark):active:not(:is([class*=button--is-busy],[data-state=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)}:is(.c-button--primary,.button--1,.btn-primary,.btn-dark):focus:not(:active,:is([class*=button--is-busy],[data-state=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)}:is(.c-button--primary,.button--1,.btn-primary,.btn-dark):is([class*=button--is-busy],[data-state=busy]),:is(.c-button--primary,.button--1,.btn-primary,.btn-dark):not(:hover,:focus,:active,:is(:disabled,:where(a[disabled]))){background-color:var(--global-color-accent--normal);border-color:var(--global-color-accent--normal);color:var(--global-color-primary--xx-light)}:is(.c-button--secondary,.button--2,.btn-secondary,.btn-light):hover{background-color:var(--global-color-accent--x-light);border-color:var(--global-color-accent--normal);color:var(--global-color-primary--xx-dark)}:is(.c-button--secondary,.button--2,.btn-secondary,.btn-light):active:not(:is([class*=button--is-busy],[data-state=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)}:is(.c-button--secondary,.button--2,.btn-secondary,.btn-light):focus:not(:active,:is([class*=button--is-busy],[data-state=busy])){background-color:var(--global-color-accent--x-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)}:is(.c-button--secondary,.button--2,.btn-secondary,.btn-light):is([class*=button--is-busy],[data-state=busy]),:is(.c-button--secondary,.button--2,.btn-secondary,.btn-light):not(:hover,:focus,:active,:is(:disabled,: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)}:is(.c-button,[class*=button--],.btn):is(.c-button--secondary,.button--2,.btn-secondary,.btn-light):is(:disabled,:where(a[disabled])){background-color:var(--global-color-primary--x-light)}:is(.c-button--tertiary,.button--3,.btn-info,.btn-success,.btn-warning,.btn-danger):hover{background-color:var(--global-color-primary--light);border-color:var(--global-color-accent--dark);color:var(--global-color-primary--xx-dark)}:is(.c-button--tertiary,.button--3,.btn-info,.btn-success,.btn-warning,.btn-danger):active:not(:is([class*=button--is-busy],[data-state=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)}:is(.c-button--tertiary,.button--3,.btn-info,.btn-success,.btn-warning,.btn-danger):focus:not(:active,:is([class*=button--is-busy],[data-state=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)}:is(.c-button--tertiary,.button--3,.btn-info,.btn-success,.btn-warning,.btn-danger):is([class*=button--is-busy],[data-state=busy]),:is(.c-button--tertiary,.button--3,.btn-info,.btn-success,.btn-warning,.btn-danger):not(:hover,:focus,:active,:is(:disabled,: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)}:is(.c-button--can-truncate,.button--truncate){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:is([class*=button--is-active],.btn.active):hover{background-color:var(--global-color-accent--xx-light);border-color:var(--global-color-accent--dark);color:var(--global-color-primary--xx-dark)}:is([class*=button--is-active],.btn.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)}:is([class*=button--is-active],.btn.active):focus:not(:active){background-color:var(--global-color-accent--xx-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)}:is([class*=button--is-active],.btn.active):is([class*=button--is-busy],[data-state=busy]),:is([class*=button--is-active],.btn.active):not(:hover,:focus,:active,:is(:disabled,: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)}:is([class*=button--as-link],.btn-link){background:unset;border:unset;color:var(--global-color-accent--light);font-family:inherit;font-size:inherit;font-weight:inherit;padding-inline:unset;text-decoration-color:currentColor;text-decoration-line:none;text-decoration-thickness:var(--global-border-width--normal);text-underline-offset:.2em}:is([class*=button--as-link],.btn-link):where(:not(:is(:disabled,:where(a[disabled])))):hover{color:var(--global-color-accent--light);text-decoration-line:underline;text-decoration-style:solid}:is([class*=button--as-link],.btn-link):where(:not(:is(:disabled,:where(a[disabled])))):active{text-decoration-line:underline;text-decoration-style:dotted}:is([class*=button--is-busy],[data-state=busy]){opacity:.5;pointer-events:none}:is([class*=button--is-busy],[data-state=busy]) *{opacity:.5}:is(.c-button,[class*=button--],.btn):where(:not(:is([class*=button--width-short]),:is([class*=button--width-medium]),:is([class*=button--width-long]),:is([class*=button--size-small],.btn-sm),:is([class*=button--as-link],.btn-link))){--max-width:auto;width:auto}:is([class*=button--width-short]){width:var(--min-width)}:is([class*=button--width-medium]){width:var(--mid-width)}:is([class*=button--width-long]){width:var(--max-width)}:is([class*=button--size-small],.btn-sm){line-height:1;min-width:0;padding:4px 9px}:is(.c-button,[class*=button--],.btn) .spinner-border{align-self:center}.btn{border-radius:unset}.btn-lg,.btn-sm{font-size:inherit}.btn.focus,.btn:focus{box-shadow:unset}.card[class*=card--]{border:unset;border-radius:unset}.media-link{gap:1rem}.media-link>:not(.media-body){margin-top:.5rem}.text-primary:not(a){color:inherit!important}.text-secondary:not(a){color:var(--global-color-accent--secondary)!important}.text-muted{color:inherit!important;opacity:.5}.text-black:not(a),.text-dark:not(a){color:var(--global-color-primary--xx-dark)!important}.text-light:not(a),.text-white:not(a){color:var(--global-color-primary--xx-light)!important}[class*=text-]:not(a):not(.text-primary,.text-secondary,.text-muted,.text-dark,.text-light,.text-black,.text-white,.text-black-50,.text-white-50){color:inherit!important}a.text-primary:is(:link,:visited,:hover,:focus){color:var(--global-color-accent--light)!important}a.text-secondary:is(:link,:visited,:hover,:focus){color:var(--global-color-accent--secondary)!important}a[class*=text-]:not(.text-primary,.text-secondary):is(:link,:visited,:hover,:focus){color:var(--global-color-accent--light)!important} \ No newline at end of file diff --git a/dist/objects/o-sortable-table.css b/dist/objects/o-sortable-table.css new file mode 100644 index 000000000..e80c8fc72 --- /dev/null +++ b/dist/objects/o-sortable-table.css @@ -0,0 +1 @@ +/*! @tacc/core-styles 2.57.0-rc1+ | MIT | github.com/TACC/Core-Styles */table.o-sortable-table th:not(.is-not-sortable){padding:0}table.o-sortable-table .o-sortable-table__sort{background:transparent;border:0;border-radius:0;color:inherit;cursor:pointer;display:block;font:inherit;margin:0;padding:inherit;text-align:inherit;width:100%}table.o-sortable-table .o-sortable-table__sort:hover{text-decoration:underline}table.o-sortable-table .o-sortable-table__sort:focus-visible{outline:2px solid currentColor;outline-offset:-2px}table.o-sortable-table th[aria-sort=ascending] .o-sortable-table__sort:after,table.o-sortable-table th[aria-sort=descending] .o-sortable-table__sort:after{font-size:.85em;margin-inline-start:.35em}table.o-sortable-table th[aria-sort=ascending] .o-sortable-table__sort:after{content:"▲"}table.o-sortable-table th[aria-sort=descending] .o-sortable-table__sort:after{content:"▼"} \ No newline at end of file diff --git a/src/lib/_imports/bootstrap4/components/alert.css b/src/lib/_imports/bootstrap4/components/alert.css new file mode 100644 index 000000000..2ae00f62f --- /dev/null +++ b/src/lib/_imports/bootstrap4/components/alert.css @@ -0,0 +1,30 @@ +/* FAQ: c-message.css also styles Bootstrap alert when `.c-message` is present */ +@import url("../../components/c-message.css"); + +.alert.c-message { + border-radius: unset; /* to undo bootstrap */ + border: unset; + background-color: unset; + color: unset; +} + +.alert.c-message hr { + border-top-color: unset; +} + +.alert.c-message .alert-link { + font-weight: unset; + color: unset; +} + +.alert.c-message.alert-dismissible { + padding-right: unset; +} + +.alert.c-message.alert-dismissible .close { + position: absolute; + top: 0; + right: 0; + padding: 0.75rem 1.25rem; + color: inherit; +} diff --git a/src/lib/_imports/bootstrap4/components/alert/alert.hbs b/src/lib/_imports/bootstrap4/components/alert/alert.hbs new file mode 100644 index 000000000..6dfebe8ad --- /dev/null +++ b/src/lib/_imports/bootstrap4/components/alert/alert.hbs @@ -0,0 +1,23 @@ +{{#groups}} +
+

{{title}}

+ {{#types}} + + {{/types}} +
+{{/groups}} diff --git a/src/lib/_imports/bootstrap4/components/alert/config.yml b/src/lib/_imports/bootstrap4/components/alert/config.yml new file mode 100644 index 000000000..5b0f2788b --- /dev/null +++ b/src/lib/_imports/bootstrap4/components/alert/config.yml @@ -0,0 +1,34 @@ +label: Alerts +context: + shouldLoadBootstrap: true + shouldLoadCMS: true + groups: + - title: Bootstrap (default) + types: + - type: primary + content: A simple primary alert. + - type: secondary + content: A simple secondary alert. + - type: success + content: A simple success alert. + - type: danger + content: A simple danger alert. + - type: warning + content: A simple warning alert. + - type: info + content: A simple info alert. + - type: light + content: A simple light alert. + - type: dark + content: A simple dark alert. + - title: Dismissible + types: + - type: warning + dismissible: true + content: Holy guacamole! You should check in on some of those fields below. + - title: CMS Alert plugin + c-message (archive banner) + types: + - type: warning + dismissible: true + cMessageClasses: c-message c-message--scope-section c-message--type-warning + content:

This project is archived.

diff --git a/src/lib/_imports/bootstrap4/components/alert/demo.css b/src/lib/_imports/bootstrap4/components/alert/demo.css new file mode 100644 index 000000000..295f1655f --- /dev/null +++ b/src/lib/_imports/bootstrap4/components/alert/demo.css @@ -0,0 +1,5 @@ +/* Pattern library only */ + +.alert { + margin-block: 1em; +} diff --git a/src/lib/_imports/bootstrap4/components/alert/readme.md b/src/lib/_imports/bootstrap4/components/alert/readme.md new file mode 100644 index 000000000..4286e2756 --- /dev/null +++ b/src/lib/_imports/bootstrap4/components/alert/readme.md @@ -0,0 +1,3 @@ +To skin [Bootstrap v4 Alerts](https://getbootstrap.com/docs/4.6/components/alerts/) for Django CMS Bootstrap 4 Alert plugin output. + +Editors add Core-Styles message classes on the plugin (e.g. `c-message c-message--scope-section c-message--type-warning`). This file undoes Bootstrap alert chrome so `c-message` styles apply. diff --git a/src/lib/_imports/core-styles.bootstrap4.css b/src/lib/_imports/core-styles.bootstrap4.css index c2f9e9ddc..0a68a71ad 100644 --- a/src/lib/_imports/core-styles.bootstrap4.css +++ b/src/lib/_imports/core-styles.bootstrap4.css @@ -1,6 +1,7 @@ /*! core-styles.bootstrap4.css */ /* DO NOT ADD STYLES HERE; ONLY IMPORT OTHER STYLESHEETS */ +@import url("./bootstrap4/components/alert.css"); @import url("./bootstrap4/components/btn.css"); @import url("./bootstrap4/components/card.css"); @import url("./bootstrap4/components/media.css"); diff --git a/src/lib/_imports/objects/o-sortable-table.css b/src/lib/_imports/objects/o-sortable-table.css new file mode 100644 index 000000000..3f26b7d72 --- /dev/null +++ b/src/lib/_imports/objects/o-sortable-table.css @@ -0,0 +1,42 @@ +/* Sortable CMS project tables. Not bundled in core-styles.* aggregates; load via dist/objects/o-sortable-table.css when needed. */ + +table.o-sortable-table th:not(.is-not-sortable) { + padding: 0; +} + +table.o-sortable-table .o-sortable-table__sort { + display: block; + width: 100%; + margin: 0; + padding: inherit; + border: 0; + border-radius: 0; + background: transparent; + color: inherit; + font: inherit; + text-align: inherit; + cursor: pointer; +} + +table.o-sortable-table .o-sortable-table__sort:hover { + text-decoration: underline; +} + +table.o-sortable-table .o-sortable-table__sort:focus-visible { + outline: 2px solid currentColor; + outline-offset: -2px; +} + +table.o-sortable-table th[aria-sort='ascending'] .o-sortable-table__sort::after, +table.o-sortable-table th[aria-sort='descending'] .o-sortable-table__sort::after { + margin-inline-start: 0.35em; + font-size: 0.85em; +} + +table.o-sortable-table th[aria-sort='ascending'] .o-sortable-table__sort::after { + content: '▲'; +} + +table.o-sortable-table th[aria-sort='descending'] .o-sortable-table__sort::after { + content: '▼'; +} From 6af51362fe574d080db60b18aee60c92ffa634e7 Mon Sep 17 00:00:00 2001 From: Wesley B <62723358+wesleyboar@users.noreply.github.com> Date: Mon, 1 Jun 2026 17:37:39 -0500 Subject: [PATCH 2/8] chore: drop o-sortable-table object (styles live in Core-CMS) Sort UI is coupled to sortableTable.js via table.is-sortable. Co-authored-by: Cursor --- dist/objects/o-sortable-table.css | 1 - src/lib/_imports/objects/o-sortable-table.css | 42 ------------------- 2 files changed, 43 deletions(-) delete mode 100644 dist/objects/o-sortable-table.css delete mode 100644 src/lib/_imports/objects/o-sortable-table.css diff --git a/dist/objects/o-sortable-table.css b/dist/objects/o-sortable-table.css deleted file mode 100644 index e80c8fc72..000000000 --- a/dist/objects/o-sortable-table.css +++ /dev/null @@ -1 +0,0 @@ -/*! @tacc/core-styles 2.57.0-rc1+ | MIT | github.com/TACC/Core-Styles */table.o-sortable-table th:not(.is-not-sortable){padding:0}table.o-sortable-table .o-sortable-table__sort{background:transparent;border:0;border-radius:0;color:inherit;cursor:pointer;display:block;font:inherit;margin:0;padding:inherit;text-align:inherit;width:100%}table.o-sortable-table .o-sortable-table__sort:hover{text-decoration:underline}table.o-sortable-table .o-sortable-table__sort:focus-visible{outline:2px solid currentColor;outline-offset:-2px}table.o-sortable-table th[aria-sort=ascending] .o-sortable-table__sort:after,table.o-sortable-table th[aria-sort=descending] .o-sortable-table__sort:after{font-size:.85em;margin-inline-start:.35em}table.o-sortable-table th[aria-sort=ascending] .o-sortable-table__sort:after{content:"▲"}table.o-sortable-table th[aria-sort=descending] .o-sortable-table__sort:after{content:"▼"} \ No newline at end of file diff --git a/src/lib/_imports/objects/o-sortable-table.css b/src/lib/_imports/objects/o-sortable-table.css deleted file mode 100644 index 3f26b7d72..000000000 --- a/src/lib/_imports/objects/o-sortable-table.css +++ /dev/null @@ -1,42 +0,0 @@ -/* Sortable CMS project tables. Not bundled in core-styles.* aggregates; load via dist/objects/o-sortable-table.css when needed. */ - -table.o-sortable-table th:not(.is-not-sortable) { - padding: 0; -} - -table.o-sortable-table .o-sortable-table__sort { - display: block; - width: 100%; - margin: 0; - padding: inherit; - border: 0; - border-radius: 0; - background: transparent; - color: inherit; - font: inherit; - text-align: inherit; - cursor: pointer; -} - -table.o-sortable-table .o-sortable-table__sort:hover { - text-decoration: underline; -} - -table.o-sortable-table .o-sortable-table__sort:focus-visible { - outline: 2px solid currentColor; - outline-offset: -2px; -} - -table.o-sortable-table th[aria-sort='ascending'] .o-sortable-table__sort::after, -table.o-sortable-table th[aria-sort='descending'] .o-sortable-table__sort::after { - margin-inline-start: 0.35em; - font-size: 0.85em; -} - -table.o-sortable-table th[aria-sort='ascending'] .o-sortable-table__sort::after { - content: '▲'; -} - -table.o-sortable-table th[aria-sort='descending'] .o-sortable-table__sort::after { - content: '▼'; -} From 62a3e0a57469670a418d855b88775103f5747c24 Mon Sep 17 00:00:00 2001 From: Wesley B <62723358+wesleyboar@users.noreply.github.com> Date: Mon, 1 Jun 2026 18:32:20 -0500 Subject: [PATCH 3/8] feat(bootstrap4): skin alerts with x-message mixins Map Bootstrap alert variants to section message styles without c-message classes. Undo Bootstrap chrome with selectors aligned to BS4 where practical. Co-authored-by: Cursor --- dist/bootstrap4/components/alert.css | 2 +- dist/core-styles.bootstrap4.css | 2 +- .../_imports/bootstrap4/components/alert.css | 76 ++++++++++++++----- .../bootstrap4/components/alert/alert.hbs | 6 +- .../bootstrap4/components/alert/config.yml | 6 -- .../bootstrap4/components/alert/readme.md | 2 - 6 files changed, 62 insertions(+), 32 deletions(-) diff --git a/dist/bootstrap4/components/alert.css b/dist/bootstrap4/components/alert.css index 489b0d834..9c6e37fa5 100644 --- a/dist/bootstrap4/components/alert.css +++ b/dist/bootstrap4/components/alert.css @@ -1 +1 @@ -/*! @tacc/core-styles 2.57.0-rc1+ | MIT | github.com/TACC/Core-Styles */.x-link{color:var(--global-color-accent--light);text-decoration-color:currentColor;text-decoration-line:none;text-decoration-thickness:var(--global-border-width--normal);text-underline-offset:.2em}.x-link--disabled{opacity:.75;pointer-events:none}.x-link--hover{color:var(--global-color-accent--light);text-decoration-line:underline;text-decoration-style:solid}.x-link--active{text-decoration-line:underline;text-decoration-style:dotted}.x-link--irregular{color:var(--global-color-accent--light);text-decoration-color:currentColor;text-decoration-line:none;text-decoration-line:underline;text-decoration-thickness:var(--global-border-width--normal);text-underline-offset:.2em}.x-link--irregular--disabled{opacity:.75;pointer-events:none}.x-link--irregular--hover{color:var(--global-color-accent--light);text-decoration-line:underline;text-decoration-style:solid;text-decoration-style:dashed}.x-link--irregular--active{text-decoration-line:underline;text-decoration-style:dotted;text-decoration-style:dotted}:is(.c-message,[class*=message--])>:first-child{margin-top:0}:is(.c-message,[class*=message--])>:last-child{margin-bottom:0}:is(.c-message--scope-inline,.message--scope-inline)>*{display:inline}:is(.c-message--scope-inline,.message--scope-inline):before{font-family:var(--icon)}:is(.c-message--scope-inline,.message--scope-inline):before{color:var(--icon-color);margin-right:.5ch}:is(.c-message--type-success,.message--type-success):is(.c-message--scope-inline,.message--scope-inline){--icon-color:var(--global-color-success--x-dark)}:is(.c-message--type-success,.message--type-success):is(.c-message--scope-inline,.message--scope-inline):before{content:"✓"}:is(.c-message--type-success,.message--type-success):is(.c-message--scope-inline,.message--scope-inline):before{font-family:var(--icon)}:is(.c-message--type-warning,.message--type-warning):is(.c-message--scope-inline,.message--scope-inline){--icon-color:var(--global-color-warning--dark)}:is(.c-message--type-warning,.message--type-warning):is(.c-message--scope-inline,.message--scope-inline):before{content:"⚠"}:is(.c-message--type-warning,.message--type-warning):is(.c-message--scope-inline,.message--scope-inline):before{font-family:var(--icon)}:is(.c-message--type-error,.message--type-error):is(.c-message--scope-inline,.message--scope-inline){--icon-color:var(--global-color-danger--dark);color:var(--global-color-danger--dark)}:is(.c-message--type-error,.message--type-error):is(.c-message--scope-inline,.message--scope-inline):before{content:"⚠"}:is(.c-message--type-error,.message--type-error):is(.c-message--scope-inline,.message--scope-inline):before{font-family:var(--icon)}:is(.c-message--scope-section,.message--scope-section){border-style:solid;border-width:var(--global-border-width--normal);padding-block:8px;padding-inline:12px}:is(.c-message--type-info,.message--type-info):is(.c-message--scope-section,.message--scope-section){background-color:var(--global-color-info--x-light);border-color:var(--global-color-info--normal)}:is(.c-message--type-success,.message--type-success):is(.c-message--scope-section,.message--scope-section){background-color:var(--global-color-success--x-light);border-color:var(--global-color-success--x-dark)}:is(.c-message--type-warning,.message--type-warning):is(.c-message--scope-section,.message--scope-section){background-color:var(--global-color-warning--x-light);border-color:var(--global-color-warning--dark)}:is(.c-message--type-error,.message--type-error):is(.c-message--scope-section,.message--scope-section){background-color:var(--global-color-danger--x-light);border-color:var(--global-color-danger--dark)}:is(.c-message--type-extra,.message--type-extra):is(.c-message--scope-section,.message--scope-section){background-color:var(--global-color-extra--x-light);border-color:var(--global-color-extra--normal)}:is(.c-message--scope-global,.message--scope-global){background-color:var(--global-color-accent--secondary);border-color:var(--global-color-primary--dark);border-width:0;color:var(--global-color-primary--xx-light);padding-block:8px;padding-inline:12px;text-align:center}:is(:is(.c-message--scope-global,.message--scope-global) :is(a,:is([class*=button--as-link],.btn-link))){color:var(--global-color-accent--light);text-decoration-color:currentColor;text-decoration-line:none;text-decoration-line:underline;text-decoration-thickness:var(--global-border-width--normal);text-underline-offset:.2em}:is(:is(.c-message--scope-global,.message--scope-global) :is(a,:is([class*=button--as-link],.btn-link))):hover{color:var(--global-color-accent--light);text-decoration-line:underline;text-decoration-style:solid;text-decoration-style:dashed}:is(:is(.c-message--scope-global,.message--scope-global) :is(a,:is([class*=button--as-link],.btn-link))):active{text-decoration-line:underline;text-decoration-style:dotted;text-decoration-style:dotted}:is(:is(.c-message--scope-global,.message--scope-global) :is(a,:is([class*=button--as-link],.btn-link))):is(*,:hover,:active){color:inherit}.alert.c-message{background-color:unset;border:unset;border-radius:unset;color:unset}.alert.c-message hr{border-top-color:unset}.alert.c-message .alert-link{color:unset;font-weight:unset}.alert.c-message.alert-dismissible{padding-right:unset}.alert.c-message.alert-dismissible .close{color:inherit;padding:.75rem 1.25rem;position:absolute;right:0;top:0} \ No newline at end of file +/*! @tacc/core-styles 2.57.0-rc1+ | MIT | github.com/TACC/Core-Styles */.x-link{color:var(--global-color-accent--light);text-decoration-color:currentColor;text-decoration-line:none;text-decoration-thickness:var(--global-border-width--normal);text-underline-offset:.2em}.x-link--disabled{opacity:.75;pointer-events:none}.x-link--hover{color:var(--global-color-accent--light);text-decoration-line:underline;text-decoration-style:solid}.x-link--active{text-decoration-line:underline;text-decoration-style:dotted}.x-link--irregular{color:var(--global-color-accent--light);text-decoration-color:currentColor;text-decoration-line:none;text-decoration-line:underline;text-decoration-thickness:var(--global-border-width--normal);text-underline-offset:.2em}.x-link--irregular--disabled{opacity:.75;pointer-events:none}.x-link--irregular--hover{color:var(--global-color-accent--light);text-decoration-line:underline;text-decoration-style:solid;text-decoration-style:dashed}.x-link--irregular--active{text-decoration-line:underline;text-decoration-style:dotted;text-decoration-style:dotted}.alert{border-radius:unset}.alert>:first-child{margin-top:0}.alert>:last-child{margin-bottom:0}.alert{border-style:solid;border-width:var(--global-border-width--normal);padding-block:8px;padding-inline:12px}.alert-danger,.alert-dark,.alert-info,.alert-light,.alert-primary,.alert-secondary,.alert-success,.alert-warning{color:unset}.alert-primary{background-color:var(--global-color-info--x-light);border-color:var(--global-color-info--normal)}.alert-secondary{background-color:var(--global-color-extra--x-light);border-color:var(--global-color-extra--normal)}.alert-success{background-color:var(--global-color-success--x-light);border-color:var(--global-color-success--x-dark)}.alert-danger{background-color:var(--global-color-danger--x-light);border-color:var(--global-color-danger--dark)}.alert-warning{background-color:var(--global-color-warning--x-light);border-color:var(--global-color-warning--dark)}.alert-info{background-color:var(--global-color-info--x-light);border-color:var(--global-color-info--normal)}.alert-light{background-color:var(--global-color-info--x-light);border-color:var(--global-color-info--normal)}.alert-dark{background-color:var(--global-color-info--x-light);border-color:var(--global-color-info--normal)}.alert hr{border-top-color:unset}.alert-link{font-weight:unset}.alert-link{color:unset}.alert-dismissible{padding-right:calc(12px + 1ch)}.alert-dismissible .close{box-sizing:content-box;color:inherit;padding:8px 12px;position:absolute;right:0;top:0;width:1ch} \ No newline at end of file diff --git a/dist/core-styles.bootstrap4.css b/dist/core-styles.bootstrap4.css index fe92b142c..e08962500 100644 --- a/dist/core-styles.bootstrap4.css +++ b/dist/core-styles.bootstrap4.css @@ -1,2 +1,2 @@ /*! @tacc/core-styles 2.57.0-rc1+ | MIT | github.com/TACC/Core-Styles */ -/*! core-styles.bootstrap4.css */.x-link{color:var(--global-color-accent--light);text-decoration-color:currentColor;text-decoration-line:none;text-decoration-thickness:var(--global-border-width--normal);text-underline-offset:.2em}.x-link--disabled{opacity:.75;pointer-events:none}.x-link--hover{color:var(--global-color-accent--light);text-decoration-line:underline;text-decoration-style:solid}.x-link--active{text-decoration-line:underline;text-decoration-style:dotted}.x-link--irregular{color:var(--global-color-accent--light);text-decoration-color:currentColor;text-decoration-line:none;text-decoration-line:underline;text-decoration-thickness:var(--global-border-width--normal);text-underline-offset:.2em}.x-link--irregular--disabled{opacity:.75;pointer-events:none}.x-link--irregular--hover{color:var(--global-color-accent--light);text-decoration-line:underline;text-decoration-style:solid;text-decoration-style:dashed}.x-link--irregular--active{text-decoration-line:underline;text-decoration-style:dotted;text-decoration-style:dotted}:is(.c-message,[class*=message--])>:first-child{margin-top:0}:is(.c-message,[class*=message--])>:last-child{margin-bottom:0}:is(.c-message--scope-inline,.message--scope-inline)>*{display:inline}:is(.c-message--scope-inline,.message--scope-inline):before{font-family:var(--icon)}:is(.c-message--scope-inline,.message--scope-inline):before{color:var(--icon-color);margin-right:.5ch}:is(.c-message--type-success,.message--type-success):is(.c-message--scope-inline,.message--scope-inline){--icon-color:var(--global-color-success--x-dark)}:is(.c-message--type-success,.message--type-success):is(.c-message--scope-inline,.message--scope-inline):before{content:"✓"}:is(.c-message--type-success,.message--type-success):is(.c-message--scope-inline,.message--scope-inline):before{font-family:var(--icon)}:is(.c-message--type-warning,.message--type-warning):is(.c-message--scope-inline,.message--scope-inline){--icon-color:var(--global-color-warning--dark)}:is(.c-message--type-warning,.message--type-warning):is(.c-message--scope-inline,.message--scope-inline):before{content:"⚠"}:is(.c-message--type-warning,.message--type-warning):is(.c-message--scope-inline,.message--scope-inline):before{font-family:var(--icon)}:is(.c-message--type-error,.message--type-error):is(.c-message--scope-inline,.message--scope-inline){--icon-color:var(--global-color-danger--dark);color:var(--global-color-danger--dark)}:is(.c-message--type-error,.message--type-error):is(.c-message--scope-inline,.message--scope-inline):before{content:"⚠"}:is(.c-message--type-error,.message--type-error):is(.c-message--scope-inline,.message--scope-inline):before{font-family:var(--icon)}:is(.c-message--scope-section,.message--scope-section){border-style:solid;border-width:var(--global-border-width--normal);padding-block:8px;padding-inline:12px}:is(.c-message--type-info,.message--type-info):is(.c-message--scope-section,.message--scope-section){background-color:var(--global-color-info--x-light);border-color:var(--global-color-info--normal)}:is(.c-message--type-success,.message--type-success):is(.c-message--scope-section,.message--scope-section){background-color:var(--global-color-success--x-light);border-color:var(--global-color-success--x-dark)}:is(.c-message--type-warning,.message--type-warning):is(.c-message--scope-section,.message--scope-section){background-color:var(--global-color-warning--x-light);border-color:var(--global-color-warning--dark)}:is(.c-message--type-error,.message--type-error):is(.c-message--scope-section,.message--scope-section){background-color:var(--global-color-danger--x-light);border-color:var(--global-color-danger--dark)}:is(.c-message--type-extra,.message--type-extra):is(.c-message--scope-section,.message--scope-section){background-color:var(--global-color-extra--x-light);border-color:var(--global-color-extra--normal)}:is(.c-message--scope-global,.message--scope-global){background-color:var(--global-color-accent--secondary);border-color:var(--global-color-primary--dark);border-width:0;color:var(--global-color-primary--xx-light);padding-block:8px;padding-inline:12px;text-align:center}:is(:is(.c-message--scope-global,.message--scope-global) :is(a,:is([class*=button--as-link],.btn-link))){color:var(--global-color-accent--light);text-decoration-color:currentColor;text-decoration-line:none;text-decoration-line:underline;text-decoration-thickness:var(--global-border-width--normal);text-underline-offset:.2em}:is(:is(.c-message--scope-global,.message--scope-global) :is(a,:is([class*=button--as-link],.btn-link))):hover{color:var(--global-color-accent--light);text-decoration-line:underline;text-decoration-style:solid;text-decoration-style:dashed}:is(:is(.c-message--scope-global,.message--scope-global) :is(a,:is([class*=button--as-link],.btn-link))):active{text-decoration-line:underline;text-decoration-style:dotted;text-decoration-style:dotted}:is(:is(.c-message--scope-global,.message--scope-global) :is(a,:is([class*=button--as-link],.btn-link))):is(*,:hover,:active){color:inherit}.alert.c-message{background-color:unset;border:unset;border-radius:unset;color:unset}.alert.c-message hr{border-top-color:unset}.alert.c-message .alert-link{color:unset;font-weight:unset}.alert.c-message.alert-dismissible{padding-right:unset}.alert.c-message.alert-dismissible .close{color:inherit;padding:.75rem 1.25rem;position:absolute;right:0;top:0}.x-truncate--many-lines{--lines:2;-webkit-box-orient:vertical;-webkit-line-clamp:var(--lines);display:-webkit-box;max-height:calc(var(--lines) * 1lh);overflow:hidden}.x-untruncate--many-lines{-webkit-line-clamp:inherit;overflow:visible}.x-untruncate--many-lines{-webkit-line-clamp:inherit;overflow:visible}.x-truncate--one-line{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.x-untruncate--one-line{overflow:visible;white-space:normal}:is(.c-button,[class*=button--],.btn){--min-width:75px;--mid-width:110px;--max-width:130px;align-items:center;border-style:solid;border-width:var(--global-border-width--normal);box-sizing:border-box;display:inline-flex;gap:.5ch;justify-content:center;line-height:1.5}:is(.c-button,[class*=button--],.btn):where(:not(:is(:disabled,:where(a[disabled])))){cursor:pointer}:is(.c-button,[class*=button--],.btn){vertical-align:middle}a:is(.c-button,[class*=button--],.btn){text-align:center;text-decoration:none}a:is([class*=button--is-busy],[data-state=busy]){cursor:default}:is(.c-button,[class*=button--],.btn):is(:disabled,:where(a[disabled])){-webkit-user-select:none;-moz-user-select:none;user-select:none}:is(.c-button,[class*=button--],.btn):is(:disabled,:where(a[disabled])):not(:is([class*=button--is-busy],[data-state=busy])){border-color:var(--global-color-primary--dark);color:var(--global-color-primary--dark)}:is(.c-button,[class*=button--],.btn):is(:disabled,:where(a[disabled])):not(:is([class*=button--is-busy],[data-state=busy]),:is([class*=button--as-link],.btn-link)){background-color:var(--global-color-primary--xx-light)}:is(.c-button--primary,.button--1,.btn-primary,.btn-dark),:is(.c-button--secondary,.button--2,.btn-secondary,.btn-light),:is(.c-button--tertiary,.button--3,.btn-info,.btn-success,.btn-warning,.btn-danger),:is([class*=button--is-active],.btn.active){max-width:var(--max-width);min-width:var(--min-width);padding:6px 18px}:is(.c-button--primary,.button--1,.btn-primary,.btn-dark):hover{background-color:var(--global-color-accent--dark);border-color:var(--global-color-accent--dark);color:var(--global-color-primary--xx-light)}:is(.c-button--primary,.button--1,.btn-primary,.btn-dark):active:not(:is([class*=button--is-busy],[data-state=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)}:is(.c-button--primary,.button--1,.btn-primary,.btn-dark):focus:not(:active,:is([class*=button--is-busy],[data-state=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)}:is(.c-button--primary,.button--1,.btn-primary,.btn-dark):is([class*=button--is-busy],[data-state=busy]),:is(.c-button--primary,.button--1,.btn-primary,.btn-dark):not(:hover,:focus,:active,:is(:disabled,:where(a[disabled]))){background-color:var(--global-color-accent--normal);border-color:var(--global-color-accent--normal);color:var(--global-color-primary--xx-light)}:is(.c-button--secondary,.button--2,.btn-secondary,.btn-light):hover{background-color:var(--global-color-accent--x-light);border-color:var(--global-color-accent--normal);color:var(--global-color-primary--xx-dark)}:is(.c-button--secondary,.button--2,.btn-secondary,.btn-light):active:not(:is([class*=button--is-busy],[data-state=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)}:is(.c-button--secondary,.button--2,.btn-secondary,.btn-light):focus:not(:active,:is([class*=button--is-busy],[data-state=busy])){background-color:var(--global-color-accent--x-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)}:is(.c-button--secondary,.button--2,.btn-secondary,.btn-light):is([class*=button--is-busy],[data-state=busy]),:is(.c-button--secondary,.button--2,.btn-secondary,.btn-light):not(:hover,:focus,:active,:is(:disabled,: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)}:is(.c-button,[class*=button--],.btn):is(.c-button--secondary,.button--2,.btn-secondary,.btn-light):is(:disabled,:where(a[disabled])){background-color:var(--global-color-primary--x-light)}:is(.c-button--tertiary,.button--3,.btn-info,.btn-success,.btn-warning,.btn-danger):hover{background-color:var(--global-color-primary--light);border-color:var(--global-color-accent--dark);color:var(--global-color-primary--xx-dark)}:is(.c-button--tertiary,.button--3,.btn-info,.btn-success,.btn-warning,.btn-danger):active:not(:is([class*=button--is-busy],[data-state=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)}:is(.c-button--tertiary,.button--3,.btn-info,.btn-success,.btn-warning,.btn-danger):focus:not(:active,:is([class*=button--is-busy],[data-state=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)}:is(.c-button--tertiary,.button--3,.btn-info,.btn-success,.btn-warning,.btn-danger):is([class*=button--is-busy],[data-state=busy]),:is(.c-button--tertiary,.button--3,.btn-info,.btn-success,.btn-warning,.btn-danger):not(:hover,:focus,:active,:is(:disabled,: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)}:is(.c-button--can-truncate,.button--truncate){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:is([class*=button--is-active],.btn.active):hover{background-color:var(--global-color-accent--xx-light);border-color:var(--global-color-accent--dark);color:var(--global-color-primary--xx-dark)}:is([class*=button--is-active],.btn.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)}:is([class*=button--is-active],.btn.active):focus:not(:active){background-color:var(--global-color-accent--xx-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)}:is([class*=button--is-active],.btn.active):is([class*=button--is-busy],[data-state=busy]),:is([class*=button--is-active],.btn.active):not(:hover,:focus,:active,:is(:disabled,: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)}:is([class*=button--as-link],.btn-link){background:unset;border:unset;color:var(--global-color-accent--light);font-family:inherit;font-size:inherit;font-weight:inherit;padding-inline:unset;text-decoration-color:currentColor;text-decoration-line:none;text-decoration-thickness:var(--global-border-width--normal);text-underline-offset:.2em}:is([class*=button--as-link],.btn-link):where(:not(:is(:disabled,:where(a[disabled])))):hover{color:var(--global-color-accent--light);text-decoration-line:underline;text-decoration-style:solid}:is([class*=button--as-link],.btn-link):where(:not(:is(:disabled,:where(a[disabled])))):active{text-decoration-line:underline;text-decoration-style:dotted}:is([class*=button--is-busy],[data-state=busy]){opacity:.5;pointer-events:none}:is([class*=button--is-busy],[data-state=busy]) *{opacity:.5}:is(.c-button,[class*=button--],.btn):where(:not(:is([class*=button--width-short]),:is([class*=button--width-medium]),:is([class*=button--width-long]),:is([class*=button--size-small],.btn-sm),:is([class*=button--as-link],.btn-link))){--max-width:auto;width:auto}:is([class*=button--width-short]){width:var(--min-width)}:is([class*=button--width-medium]){width:var(--mid-width)}:is([class*=button--width-long]){width:var(--max-width)}:is([class*=button--size-small],.btn-sm){line-height:1;min-width:0;padding:4px 9px}:is(.c-button,[class*=button--],.btn) .spinner-border{align-self:center}.btn{border-radius:unset}.btn-lg,.btn-sm{font-size:inherit}.btn.focus,.btn:focus{box-shadow:unset}.card[class*=card--]{border:unset;border-radius:unset}.media-link{gap:1rem}.media-link>:not(.media-body){margin-top:.5rem}.text-primary:not(a){color:inherit!important}.text-secondary:not(a){color:var(--global-color-accent--secondary)!important}.text-muted{color:inherit!important;opacity:.5}.text-black:not(a),.text-dark:not(a){color:var(--global-color-primary--xx-dark)!important}.text-light:not(a),.text-white:not(a){color:var(--global-color-primary--xx-light)!important}[class*=text-]:not(a):not(.text-primary,.text-secondary,.text-muted,.text-dark,.text-light,.text-black,.text-white,.text-black-50,.text-white-50){color:inherit!important}a.text-primary:is(:link,:visited,:hover,:focus){color:var(--global-color-accent--light)!important}a.text-secondary:is(:link,:visited,:hover,:focus){color:var(--global-color-accent--secondary)!important}a[class*=text-]:not(.text-primary,.text-secondary):is(:link,:visited,:hover,:focus){color:var(--global-color-accent--light)!important} \ No newline at end of file +/*! core-styles.bootstrap4.css */.x-link{color:var(--global-color-accent--light);text-decoration-color:currentColor;text-decoration-line:none;text-decoration-thickness:var(--global-border-width--normal);text-underline-offset:.2em}.x-link--disabled{opacity:.75;pointer-events:none}.x-link--hover{color:var(--global-color-accent--light);text-decoration-line:underline;text-decoration-style:solid}.x-link--active{text-decoration-line:underline;text-decoration-style:dotted}.x-link--irregular{color:var(--global-color-accent--light);text-decoration-color:currentColor;text-decoration-line:none;text-decoration-line:underline;text-decoration-thickness:var(--global-border-width--normal);text-underline-offset:.2em}.x-link--irregular--disabled{opacity:.75;pointer-events:none}.x-link--irregular--hover{color:var(--global-color-accent--light);text-decoration-line:underline;text-decoration-style:solid;text-decoration-style:dashed}.x-link--irregular--active{text-decoration-line:underline;text-decoration-style:dotted;text-decoration-style:dotted}.alert{border-radius:unset}.alert>:first-child{margin-top:0}.alert>:last-child{margin-bottom:0}.alert{border-style:solid;border-width:var(--global-border-width--normal);padding-block:8px;padding-inline:12px}.alert-danger,.alert-dark,.alert-info,.alert-light,.alert-primary,.alert-secondary,.alert-success,.alert-warning{color:unset}.alert-primary{background-color:var(--global-color-info--x-light);border-color:var(--global-color-info--normal)}.alert-secondary{background-color:var(--global-color-extra--x-light);border-color:var(--global-color-extra--normal)}.alert-success{background-color:var(--global-color-success--x-light);border-color:var(--global-color-success--x-dark)}.alert-danger{background-color:var(--global-color-danger--x-light);border-color:var(--global-color-danger--dark)}.alert-warning{background-color:var(--global-color-warning--x-light);border-color:var(--global-color-warning--dark)}.alert-info{background-color:var(--global-color-info--x-light);border-color:var(--global-color-info--normal)}.alert-light{background-color:var(--global-color-info--x-light);border-color:var(--global-color-info--normal)}.alert-dark{background-color:var(--global-color-info--x-light);border-color:var(--global-color-info--normal)}.alert hr{border-top-color:unset}.alert-link{font-weight:unset}.alert-link{color:unset}.alert-dismissible{padding-right:calc(12px + 1ch)}.alert-dismissible .close{box-sizing:content-box;color:inherit;padding:8px 12px;position:absolute;right:0;top:0;width:1ch}.x-truncate--many-lines{--lines:2;-webkit-box-orient:vertical;-webkit-line-clamp:var(--lines);display:-webkit-box;max-height:calc(var(--lines) * 1lh);overflow:hidden}.x-untruncate--many-lines{-webkit-line-clamp:inherit;overflow:visible}.x-untruncate--many-lines{-webkit-line-clamp:inherit;overflow:visible}.x-truncate--one-line{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.x-untruncate--one-line{overflow:visible;white-space:normal}:is(.c-button,[class*=button--],.btn){--min-width:75px;--mid-width:110px;--max-width:130px;align-items:center;border-style:solid;border-width:var(--global-border-width--normal);box-sizing:border-box;display:inline-flex;gap:.5ch;justify-content:center;line-height:1.5}:is(.c-button,[class*=button--],.btn):where(:not(:is(:disabled,:where(a[disabled])))){cursor:pointer}:is(.c-button,[class*=button--],.btn){vertical-align:middle}a:is(.c-button,[class*=button--],.btn){text-align:center;text-decoration:none}a:is([class*=button--is-busy],[data-state=busy]){cursor:default}:is(.c-button,[class*=button--],.btn):is(:disabled,:where(a[disabled])){-webkit-user-select:none;-moz-user-select:none;user-select:none}:is(.c-button,[class*=button--],.btn):is(:disabled,:where(a[disabled])):not(:is([class*=button--is-busy],[data-state=busy])){border-color:var(--global-color-primary--dark);color:var(--global-color-primary--dark)}:is(.c-button,[class*=button--],.btn):is(:disabled,:where(a[disabled])):not(:is([class*=button--is-busy],[data-state=busy]),:is([class*=button--as-link],.btn-link)){background-color:var(--global-color-primary--xx-light)}:is(.c-button--primary,.button--1,.btn-primary,.btn-dark),:is(.c-button--secondary,.button--2,.btn-secondary,.btn-light),:is(.c-button--tertiary,.button--3,.btn-info,.btn-success,.btn-warning,.btn-danger),:is([class*=button--is-active],.btn.active){max-width:var(--max-width);min-width:var(--min-width);padding:6px 18px}:is(.c-button--primary,.button--1,.btn-primary,.btn-dark):hover{background-color:var(--global-color-accent--dark);border-color:var(--global-color-accent--dark);color:var(--global-color-primary--xx-light)}:is(.c-button--primary,.button--1,.btn-primary,.btn-dark):active:not(:is([class*=button--is-busy],[data-state=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)}:is(.c-button--primary,.button--1,.btn-primary,.btn-dark):focus:not(:active,:is([class*=button--is-busy],[data-state=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)}:is(.c-button--primary,.button--1,.btn-primary,.btn-dark):is([class*=button--is-busy],[data-state=busy]),:is(.c-button--primary,.button--1,.btn-primary,.btn-dark):not(:hover,:focus,:active,:is(:disabled,:where(a[disabled]))){background-color:var(--global-color-accent--normal);border-color:var(--global-color-accent--normal);color:var(--global-color-primary--xx-light)}:is(.c-button--secondary,.button--2,.btn-secondary,.btn-light):hover{background-color:var(--global-color-accent--x-light);border-color:var(--global-color-accent--normal);color:var(--global-color-primary--xx-dark)}:is(.c-button--secondary,.button--2,.btn-secondary,.btn-light):active:not(:is([class*=button--is-busy],[data-state=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)}:is(.c-button--secondary,.button--2,.btn-secondary,.btn-light):focus:not(:active,:is([class*=button--is-busy],[data-state=busy])){background-color:var(--global-color-accent--x-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)}:is(.c-button--secondary,.button--2,.btn-secondary,.btn-light):is([class*=button--is-busy],[data-state=busy]),:is(.c-button--secondary,.button--2,.btn-secondary,.btn-light):not(:hover,:focus,:active,:is(:disabled,: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)}:is(.c-button,[class*=button--],.btn):is(.c-button--secondary,.button--2,.btn-secondary,.btn-light):is(:disabled,:where(a[disabled])){background-color:var(--global-color-primary--x-light)}:is(.c-button--tertiary,.button--3,.btn-info,.btn-success,.btn-warning,.btn-danger):hover{background-color:var(--global-color-primary--light);border-color:var(--global-color-accent--dark);color:var(--global-color-primary--xx-dark)}:is(.c-button--tertiary,.button--3,.btn-info,.btn-success,.btn-warning,.btn-danger):active:not(:is([class*=button--is-busy],[data-state=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)}:is(.c-button--tertiary,.button--3,.btn-info,.btn-success,.btn-warning,.btn-danger):focus:not(:active,:is([class*=button--is-busy],[data-state=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)}:is(.c-button--tertiary,.button--3,.btn-info,.btn-success,.btn-warning,.btn-danger):is([class*=button--is-busy],[data-state=busy]),:is(.c-button--tertiary,.button--3,.btn-info,.btn-success,.btn-warning,.btn-danger):not(:hover,:focus,:active,:is(:disabled,: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)}:is(.c-button--can-truncate,.button--truncate){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:is([class*=button--is-active],.btn.active):hover{background-color:var(--global-color-accent--xx-light);border-color:var(--global-color-accent--dark);color:var(--global-color-primary--xx-dark)}:is([class*=button--is-active],.btn.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)}:is([class*=button--is-active],.btn.active):focus:not(:active){background-color:var(--global-color-accent--xx-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)}:is([class*=button--is-active],.btn.active):is([class*=button--is-busy],[data-state=busy]),:is([class*=button--is-active],.btn.active):not(:hover,:focus,:active,:is(:disabled,: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)}:is([class*=button--as-link],.btn-link){background:unset;border:unset;color:var(--global-color-accent--light);font-family:inherit;font-size:inherit;font-weight:inherit;padding-inline:unset;text-decoration-color:currentColor;text-decoration-line:none;text-decoration-thickness:var(--global-border-width--normal);text-underline-offset:.2em}:is([class*=button--as-link],.btn-link):where(:not(:is(:disabled,:where(a[disabled])))):hover{color:var(--global-color-accent--light);text-decoration-line:underline;text-decoration-style:solid}:is([class*=button--as-link],.btn-link):where(:not(:is(:disabled,:where(a[disabled])))):active{text-decoration-line:underline;text-decoration-style:dotted}:is([class*=button--is-busy],[data-state=busy]){opacity:.5;pointer-events:none}:is([class*=button--is-busy],[data-state=busy]) *{opacity:.5}:is(.c-button,[class*=button--],.btn):where(:not(:is([class*=button--width-short]),:is([class*=button--width-medium]),:is([class*=button--width-long]),:is([class*=button--size-small],.btn-sm),:is([class*=button--as-link],.btn-link))){--max-width:auto;width:auto}:is([class*=button--width-short]){width:var(--min-width)}:is([class*=button--width-medium]){width:var(--mid-width)}:is([class*=button--width-long]){width:var(--max-width)}:is([class*=button--size-small],.btn-sm){line-height:1;min-width:0;padding:4px 9px}:is(.c-button,[class*=button--],.btn) .spinner-border{align-self:center}.btn{border-radius:unset}.btn-lg,.btn-sm{font-size:inherit}.btn.focus,.btn:focus{box-shadow:unset}.card[class*=card--]{border:unset;border-radius:unset}.media-link{gap:1rem}.media-link>:not(.media-body){margin-top:.5rem}.text-primary:not(a){color:inherit!important}.text-secondary:not(a){color:var(--global-color-accent--secondary)!important}.text-muted{color:inherit!important;opacity:.5}.text-black:not(a),.text-dark:not(a){color:var(--global-color-primary--xx-dark)!important}.text-light:not(a),.text-white:not(a){color:var(--global-color-primary--xx-light)!important}[class*=text-]:not(a):not(.text-primary,.text-secondary,.text-muted,.text-dark,.text-light,.text-black,.text-white,.text-black-50,.text-white-50){color:inherit!important}a.text-primary:is(:link,:visited,:hover,:focus){color:var(--global-color-accent--light)!important}a.text-secondary:is(:link,:visited,:hover,:focus){color:var(--global-color-accent--secondary)!important}a[class*=text-]:not(.text-primary,.text-secondary):is(:link,:visited,:hover,:focus){color:var(--global-color-accent--light)!important} \ No newline at end of file diff --git a/src/lib/_imports/bootstrap4/components/alert.css b/src/lib/_imports/bootstrap4/components/alert.css index 2ae00f62f..2f3212489 100644 --- a/src/lib/_imports/bootstrap4/components/alert.css +++ b/src/lib/_imports/bootstrap4/components/alert.css @@ -1,30 +1,72 @@ -/* FAQ: c-message.css also styles Bootstrap alert when `.c-message` is present */ -@import url("../../components/c-message.css"); +@import url("../../tools/x-message.css"); -.alert.c-message { +.alert { border-radius: unset; /* to undo bootstrap */ - border: unset; - background-color: unset; - color: unset; + + @mixin message; + @mixin message--scope-section; +} + +.alert-primary, +.alert-secondary, +.alert-success, +.alert-danger, +.alert-warning, +.alert-info, +.alert-light, +.alert-dark { + color: unset; /* to undo bootstrap */ +} + +.alert-primary { + @mixin message--type-info---message--scope-section; +} +.alert-secondary { + @mixin message--type-extra---message--scope-section; +} +.alert-success { + @mixin message--type-success---message--scope-section; +} +.alert-danger { + @mixin message--type-error---message--scope-section; +} +.alert-warning { + @mixin message--type-warning---message--scope-section; +} +.alert-info { + @mixin message--type-info---message--scope-section; +} +.alert-light { + @mixin message--type-info---message--scope-section; +} +.alert-dark { + @mixin message--type-info---message--scope-section; } -.alert.c-message hr { +.alert hr { border-top-color: unset; } -.alert.c-message .alert-link { +.alert-link { font-weight: unset; - color: unset; } -.alert.c-message.alert-dismissible { - padding-right: unset; +.alert-link { + color: unset; } -.alert.c-message.alert-dismissible .close { - position: absolute; - top: 0; - right: 0; - padding: 0.75rem 1.25rem; - color: inherit; +.alert-dismissible { + padding-right: calc(12px + 1ch); + + & .close { + position: absolute; + top: 0; + right: 0; + + padding: 8px 12px; + width: 1ch; + box-sizing: content-box; + + color: inherit; + } } diff --git a/src/lib/_imports/bootstrap4/components/alert/alert.hbs b/src/lib/_imports/bootstrap4/components/alert/alert.hbs index 6dfebe8ad..303ee51e3 100644 --- a/src/lib/_imports/bootstrap4/components/alert/alert.hbs +++ b/src/lib/_imports/bootstrap4/components/alert/alert.hbs @@ -3,11 +3,7 @@

{{title}}

{{#types}}