@tacc/core-styles 2.14.0 → 2.15.0

package/src/lib/_imports/elements/{form.cms.css → form.css}

@@ -17,17 +17,25 @@ label {
   font-weight: var(--medium);
 
   line-height: normal;
-  margin-bottom: 0.75em;
 }
 /* To avoid extra space between field wrappers */
 /* FAQ: The known use case is a django.cms.forms `.checkboxselectmultiple` */
 li > label:only-child {
   margin-bottom: unset;
 }
-/* To avoid inline labels for raw form elements */
+/* To avoid inline labels for (most) raw form elements */
 /* FAQ: Any specific form styling (e.g. django.cms.forms) manages this */
-:not(input[type="checkbox"]) + label {
+label:not(
+  input[type="checkbox"] + *, /* so checkbox labels are still inline */
+  :is(ul, menu) * /* so menus of radios or checkboxes are still inline */
+) {
   display: block;
+  margin-bottom: 0.75em;
+}
+/* To avoid extra space between label and list of inputs */
+label + :is(ul, menu),
+.checkboxinput .errorlist /* django-cms-forms */ {
+  margin-top: unset;
 }
 
 

package/src/lib/_imports/elements/html-elements.cms.css

@@ -1,4 +1,5 @@
 @import url("../tools/selectors.css");
+@import url("../tools/selectors.form.css");
 
 /* To scope these styles to main content (i.e. not header, not navbar) */
 :where(:--main-content) {
@@ -56,6 +57,8 @@ Styleguide Elements.TextContent
 & :is(
   ol, ul,
   dl dl /* Treat nested definition lists like other nested lists */
+):not(
+  :--form *
 ) {
   padding-left: var(--global-space--list-indent);
 }

package/src/lib/_imports/elements/html-elements.css

@@ -59,7 +59,7 @@ Styleguide Elements.TextContent
 }
 
 /* To mimic Bootstrap */
-& :is(dl, ol, ul) {
+& :is(dl, ol, ul, menu) {
   margin-top: 0;
   margin-bottom: 1rem;
 }

package/src/lib/_imports/tools/selectors.form.css

@@ -0,0 +1,71 @@
+@import url("../components/c-form.selectors.css");
+@import url("../components/django-cms-forms.selectors.css");
+@import url("../trumps/s-form.selectors.css");
+
+@custom-selector :--form
+    :--c-form,
+    :--s-form,
+    :--cms-form;
+
+@custom-selector :--form__title
+    :--c-form__title,
+    :--s-form__title,
+    :--cms-form__title;
+@custom-selector :--form__desc
+    :--c-form__desc,
+    :--s-form__desc,
+    :--cms-form__desc;
+
+@custom-selector :--form__errors /* errors container (maybe not the list) */
+    :--c-form__errors,
+    :--s-form__errors,
+    :--cms-form__errors;
+@custom-selector :--form__errors_list /* list of errors (maybe not container) */
+    :--c-form__errors_list,
+    :--s-form__errors_list,
+    :--cms-form__errors_list;
+@custom-selector :--form__errors--form /* submission errors */
+    :--c-form__errors--form,
+    :--s-form__errors--form,
+    :--cms-form__errors--form;
+@custom-selector :--form__errors--field /* validation errors */
+    :--c-form__errors--field,
+    :--s-form__errors--field,
+    :--cms-form__errors--field;
+
+@custom-selector :--form__field
+    :--c-form__field,
+    :--s-form__field,
+    :--cms-form__field;
+@custom-selector :--form__field--has-required
+    :--c-form__field--has-required,
+    :--s-form__field--has-required,
+    :--cms-form__field--has-required;
+@custom-selector :--form__field--has-checkbox
+    :--c-form__field--has-checkbox,
+    :--s-form__field--has-checkbox,
+    :--cms-form__field--has-checkbox;
+
+@custom-selector :--form__menu
+    :--c-form__menu,
+    :--s-form__menu,
+    :--cms-form__menu;
+
+@custom-selector :--form__help 
+    :--c-form__help,
+    :--s-form__help,
+    :--cms-form__help;
+
+@custom-selector :--form__badge
+    :--c-form__badge,
+    :--s-form__badge,
+    :--cms-form__badge;
+
+@custom-selector :--form__buttons
+    :--c-form__buttons,
+    :--s-form__buttons,
+    :--cms-form__buttons;
+@custom-selector :--form__button
+    :--c-form__button,
+    :--s-form__button,
+    :--cms-form__button;

package/src/lib/_imports/trumps/s-affixed-input-wrapper.css

@@ -1,3 +1,5 @@
+@import url("../tools/selectors.form.css");
+
 /* Grid */
 
 .s-affixed-input-wrapper:where(:not(
@@ -15,9 +17,9 @@
 .s-affixed-input-wrapper label { grid-area: label; }
 .s-affixed-input-wrapper input { grid-area: input; }
 .s-affixed-input-wrapper .help-text /* for Django CMS */,
-.s-affixed-input-wrapper .c-form__help { grid-area: help; }
+.s-affixed-input-wrapper :--form__help { grid-area: help; }
 .s-affixed-input-wrapper .field-errors /* for Django CMS */,
-.s-affixed-input-wrapper .c-form__errors { grid-area: error; }
+.s-affixed-input-wrapper :--form__errors { grid-area: error; }
 
 /* To render element atop input */
 .s-affixed-input-wrapper__prepend,

package/src/lib/_imports/trumps/s-form/config.yml

@@ -0,0 +1,23 @@
+context:
+  helpTextTag: small
+  inputListTag: menu
+  selectors:
+    errorList: :where(.s-form > ul), :where(.s-form > div > ul)
+    wrap: :where(.s-form > div)
+  classNames:
+    root: s-form
+    has_required: has-required
+    has_checkbox: has-type-check
+    has_spam_filter: has-spam-check
+variants:
+  - name: default
+    status: wip
+  - name: portal
+    status: wip
+    context:
+      shouldLoadPortal: true
+  - name: cms
+    label: CMS
+    status: wip
+    context:
+      shouldLoadCMS: true

package/src/lib/_imports/trumps/s-form/readme.md

@@ -0,0 +1,8 @@
+To style when mostly raw [Form elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#table_content) are sufficient.
+
+<script>
+/* To open external links in new window */
+Array.from(document.links)
+  .filter(link => link.hostname != window.location.hostname)
+  .forEach(link => link.target = '_blank');
+</script>

package/src/lib/_imports/trumps/s-form/s-form.hbs

@@ -0,0 +1 @@
+{{> @form class=classNames selectors=selectors message=message }}

package/src/lib/_imports/trumps/s-form--cms.css

@@ -0,0 +1 @@
+@import url("../components/c-form--cms.css");

package/src/lib/_imports/trumps/s-form--portal.css

@@ -0,0 +1 @@
+@import url("../components/c-form--portal.css");

package/src/lib/_imports/trumps/s-form.css

@@ -0,0 +1,2 @@
+/* FAQ: c-form.css styles s-form and django-cms-forms */
+@import url("../components/c-form.css");

package/src/lib/_imports/trumps/s-form.selectors.css

@@ -0,0 +1,38 @@
+@custom-selector :--s-form
+    .s-form;
+
+@custom-selector :--s-form__desc
+    :where(.s-form > :is(h1, h2, h3, h4, h5, h6) + p);
+@custom-selector :--s-form__title
+    :where(.s-form > :is(h1, h2, h3, h4, h5, h6));
+
+@custom-selector :--s-form__errors
+    :where(:--s-form__errors--form, :--s-form__errors--field);
+@custom-selector :--s-form__errors_list
+    :--s-form__errors;
+@custom-selector :--s-form__errors--form /* submission errors */
+    :where(.s-form > ul);
+@custom-selector :--s-form__errors--field /* validation errors */
+    :where(.s-form > div > ul);
+
+@custom-selector :--s-form__field
+    :where(.s-form > div);
+@custom-selector :--s-form__field--has-required
+    :where(.s-form > div).has-required;
+@custom-selector :--s-form__field--has-checkbox
+    :--s-form__field.has-type-check;
+
+@custom-selector :--s-form__menu
+    :where(.s-form > div > menu);
+
+@custom-selector :--s-form__help
+    :where(.s-form > div > small);
+
+@custom-selector :--s-form__badge
+    :where(.s-form label > span);
+
+@custom-selector :--s-form__buttons
+    :where(.s-form > footer);
+
+@custom-selector :--s-form__button
+    :where(.s-form button);

package/dist/components/django-cms-forms--errors-via-c-message.css

@@ -1 +0,0 @@
-/*! @tacc/core-styles 2.14.0+ | MIT | github.com/TACC/Core-Styles */.c-message>:first-child,.field-errors li>:first-child,.form-errors>:first-child,[class*=message--]>:first-child{margin-top:0}.c-message>:last-child,.field-errors li>:last-child,.form-errors>:last-child,[class*=message--]>:last-child{margin-bottom:0}.field-errors li,.form-errors,[class*=message--scope-]{padding:var(--pad-vert,0) var(--pad-horz,0)}.c-message--scope-global,.message--scope-global{--pad-vert:15px;--pad-horz:20px;border-width:var(--global-border-width--thick);text-align:center}.c-message--type-info.c-message--scope-section,.c-message--type-info.message--scope-section,.message--type-info.c-message--scope-section,.message--type-info.message--scope-section{background-color:var(--global-color-info--x-light);border-color:var(--global-color-info--normal)}.c-message--type-success.c-message--scope-section,.c-message--type-success.message--scope-section,.message--type-success.c-message--scope-section,.message--type-success.message--scope-section{background-color:var(--global-color-success--x-light);border-color:var(--global-color-success--normal)}.c-message--type-warning.c-message--scope-section,.c-message--type-warning.message--scope-section,.message--type-warning.c-message--scope-section,.message--type-warning.message--scope-section{background-color:var(--global-color-warning--x-light);border-color:var(--global-color-warning--normal)}.c-message--type-error.c-message--scope-section,.c-message--type-error.message--scope-section,.field-errors li.c-message--scope-section,.field-errors li.message--scope-section,.form-errors,.form-errors.c-message--scope-section,.form-errors.message--scope-section,.message--type-error.c-message--scope-section,.message--type-error.message--scope-section{background-color:var(--global-color-danger--x-light);border-color:var(--global-color-danger--normal)}:--c-message--type-tip.c-message--scope-section,:--c-message--type-tip.message--scope-section{background-color:var(--global-color-extra--x-light);border-color:var(--global-color-extra--normal)}.c-message--scope-global,.message--scope-global{background-color:var(--global-color-accent--secondary);border-color:var(--global-color-primary--dark);color:var(--global-color-primary--xx-light)}.c-message--scope-global [class*=button--as-link],.c-message--scope-global a,.message--scope-global [class*=button--as-link],.message--scope-global a,.x-link,.x-link--irregular{color:var(--global-color-accent--normal);text-decoration:none;text-decoration-thickness:var(--global-border-width--normal);text-underline-offset:.2em}.x-link--disabled,.x-link--irregular--disabled{opacity:.5;pointer-events:none}.c-message--scope-global [class*=button--as-link]:hover,.c-message--scope-global a:hover,.message--scope-global [class*=button--as-link]:hover,.message--scope-global a:hover,.x-link--hover,.x-link--irregular--hover{color:var(--global-color-accent--normal);text-decoration-line:underline;text-decoration-style:solid;text-decoration-thickness:var(--global-border-width--normal)}.c-message--scope-global [class*=button--as-link]:active,.c-message--scope-global a:active,.message--scope-global [class*=button--as-link]:active,.message--scope-global a:active,.x-link--active,.x-link--irregular--active{text-decoration-line:underline;text-decoration-style:dotted}.c-message--scope-global [class*=button--as-link],.c-message--scope-global a,.message--scope-global [class*=button--as-link],.message--scope-global a,.x-link--irregular{text-decoration-line:underline}.c-message--scope-global [class*=button--as-link]:hover,.c-message--scope-global a:hover,.message--scope-global [class*=button--as-link]:hover,.message--scope-global a:hover,.x-link--irregular--hover{text-decoration-style:dashed}.c-message--scope-global [class*=button--as-link]:active,.c-message--scope-global a:active,.message--scope-global [class*=button--as-link]:active,.message--scope-global a:active,.x-link--irregular--active{text-decoration-style:dotted}.c-message--scope-global [class*=button--as-link],.c-message--scope-global a,.message--scope-global [class*=button--as-link],.message--scope-global a{color:inherit!important}.c-message--scope-section,.form-errors,.message--scope-section{--pad-vert:20px;--pad-horz:30px;border-style:solid;border-width:var(--global-border-width--normal)}.c-message--scope-section,.form-errors,.message--scope-section{color:var(--global-color-primary--dark)}.c-message--type-info.c-message--scope-inline,.c-message--type-info.message--scope-inline,.message--type-info.c-message--scope-inline,.message--type-info.message--scope-inline{color:var(--global-color-info--x-dark)}.c-message--type-success.c-message--scope-inline,.c-message--type-success.message--scope-inline,.message--type-success.c-message--scope-inline,.message--type-success.message--scope-inline{color:var(--global-color-success--x-dark)}.c-message--type-warning.c-message--scope-inline,.c-message--type-warning.message--scope-inline,.message--type-warning.c-message--scope-inline,.message--type-warning.message--scope-inline{color:var(--global-color-warning--x-dark)}.c-message--type-error.c-message--scope-inline,.c-message--type-error.message--scope-inline,.field-errors li,.field-errors li.c-message--scope-inline,.field-errors li.message--scope-inline,.form-errors.c-message--scope-inline,.form-errors.message--scope-inline,.message--type-error.c-message--scope-inline,.message--type-error.message--scope-inline{color:var(--global-color-danger--x-dark)}:--c-message--type-tip.c-message--scope-inline,:--c-message--type-tip.message--scope-inline{color:var(--global-color-extra--x-dark)}.c-message--type-info:before,.message--type-info:before{background-color:var(--global-color-info--normal)}.c-message--type-success:before,.message--type-success:before{background-color:var(--global-color-success--normal)}.c-message--type-warning:before,.message--type-warning:before{background-color:var(--global-color-warning--normal)}.c-message--type-error:before,.field-errors li:before,.form-errors:before,.message--type-error:before{background-color:var(--global-color-danger--normal)}:--c-message--type-tip:before{background-color:var(--global-color-extra--normal)}

package/dist/elements/form.cms.css

@@ -1 +0,0 @@
-/*! @tacc/core-styles 2.14.0+ | MIT | github.com/TACC/Core-Styles */input,label,select,textarea{font-family:var(--global-font-family--sans--portal)}label{font-size:var(--global-font-size--small);font-weight:var(--medium);line-height:normal;margin-bottom:.75em}li>label:only-child{margin-bottom:unset}:not(input[type=checkbox])+label{display:block}fieldset:not(:last-child){margin-bottom:3.5rem}input,select,textarea{border:var(--global-border--normal)}::-moz-placeholder{color:var(--global-color-primary--dark)}::placeholder{color:var(--global-color-primary--dark)}input,select{box-sizing:content-box;height:1.4em}input[type=date],input[type=time]{font-family:var(--global-font-family--mono)}input[type=search]{outline-offset:revert}input:where([type=time],[type=date],[type=checkbox],[type=radio]){width:-moz-min-content;width:min-content}@media (pointer:coarse){input,select,textarea{padding:12px}}@media (pointer:fine),(pointer:none){input,select,textarea{padding:5px 10px}}

package/src/lib/_imports/components/django-cms-forms--errors-via-c-message.css

@@ -1,23 +0,0 @@
-@import url("../components/c-message.css");
-@import url("../components/c-message--expanded.css");
-
-
-
-/* Errors */
-
-.form-errors {
-  @extend :--c-message;
-  @extend :--c-message--type;
-  @extend :--c-message--type-error;
-  @extend :--c-message--scope;
-  @extend :--c-message--scope-section;
-  @extend :--c-message--type-error:--c-message--scope-section;
-}
-.field-errors li {
-  @extend :--c-message;
-  @extend :--c-message--type;
-  @extend :--c-message--type-error;
-  @extend :--c-message--scope;
-  @extend :--c-message--scope-inline;
-  @extend :--c-message--type-error:--c-message--scope-inline;
-}