@tacc/core-styles 2.21.1 → 2.22.0

package/src/lib/_imports/components/c-button.selectors.css

@@ -14,6 +14,10 @@
     .c-button--tertiary,
     .button--3;
 
+@custom-selector :--c-button--can-truncate
+    .c-button--can-truncate,
+    .button--truncate;
+
 @custom-selector :--c-button--is-active
     [class*="button--is-active"];
 @custom-selector :--c-button--is-busy

package/src/lib/_imports/components/c-form--login.css

@@ -65,12 +65,6 @@
   display: none;
 }
 
-/* To make elements bigger */
-& :--form__field:not(:--form__field--has-checkbox) {
-  /* To stretch input field width */
-  display: flex;
-  flex-direction: column;
-}
 /* To always use larger field inputs (not just on coarse pointer devices) */
 & input {
   padding: 12px 12px; /* mimic Core Styles forms.css @media (pointer: coarse) */

package/src/lib/_imports/components/c-form.css

@@ -38,6 +38,9 @@
 
 :--form__field {
   margin-bottom: 2rem; /* mimic <p> `margin-bottom` */
+
+  display: flex;
+  flex-direction: column;
 }
 
 :--form__field--has-checkbox {
@@ -86,7 +89,10 @@
   display: inline-block;
   visibility: hidden;
   line-height: 0;
-  font-size: 0;
+
+  /* To reduce asterisk character space */
+  /* WARNING: https://github.com/TACC/Core-Styles/pull/269 */
+  font-size: 0.25em;
 }
 :--form__badge::after {
   visibility: visible;

package/src/lib/_imports/components/django-cms-forms/config.yml

@@ -1,6 +1,9 @@
 label: Django CMS Forms
 status: ready
 context:
+  📝 supportStyles: only needed until core-styles.cms.css loads them
+  supportStyles:
+    - ../../assets/components/django-cms-forms.css
   shouldLoadCMS: true
   📝 shouldLoadCMS: because this is demo but this is CMS pattern
   markup:

package/src/lib/_imports/components/django-cms-forms.css

@@ -1,20 +1,18 @@
 /* FAQ: c-form.css styles s-form and django-cms-forms */
-@import url("./c-form.css");
-@import url("./c-form--cms.css");
 
 @import url("./django-cms-forms.hacks.css");
+@import url("./django-cms-forms.selectors.css");
 
-/* No other styles necessary, because c-form supports s-form selectors */
+/* Few other styles necessary, because c-form supports s-form selectors */
 /* SEE ../components/c-form.css */
 /* SEE: ../tools/selectors.form.css */
 
-@custom-selector :--cms-form__field--no-checkbox
-  .field-wrapper:where(:not(.checkboxinput));
+/* To re-order plugin elements to match order of such elements in `c-form` */
+:--cms-form__field > :--cms-form__errors { order: 1; }
+:--cms-form__field > :--cms-form__help { order: 2; }
 
-:--cms-form__field--no-checkbox {
-  display: flex;
-  flex-direction: column;
-  width: max-content;
+/* To increase asterisk character space */
+/* FAQ: Django form plugin markup neglects space between label and badge */
+:--cms-form__badge {
+  font-size: 1em;
 }
-:--cms-form__field--no-checkbox > .field-errors { order: 1; }
-:--cms-form__field--no-checkbox > .help-text    { order: 2; }