@xh/hoist 80.0.0-SNAPSHOT.1768360784265 → 80.0.0-SNAPSHOT.1768415875152

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/desktop/cmp/form/FormField.scss +14 -5
  2. package/package.json +1 -1
  3. package/styles/vars.scss +12 -5
package/desktop/cmp/form/FormField.scss CHANGED
@@ -12,22 +12,31 @@
12
12
  margin: var(--xh-form-field-margin);
13
13
 
14
14
  &__label {
15
+ // Common label attrs
15
16
  color: var(--xh-form-field-label-color);
16
17
  font-size: var(--xh-form-field-label-font-size);
17
18
  font-style: var(--xh-form-field-label-font-style);
18
19
  font-weight: var(--xh-form-field-label-font-weight);
19
20
  text-transform: var(--xh-form-field-label-text-transform);
20
21
 
21
- // Borders + padding (not inline)
22
+ // Borders + padding - editable, not inline - the default case.
22
23
  border-bottom: var(--xh-form-field-label-border-bottom);
23
24
  margin: var(--xh-form-field-label-margin);
24
25
  padding: var(--xh-form-field-label-padding);
25
26
 
26
- // Borders + padding (inline)
27
+ // Borders + padding - readonly, not inline - commonly used to add bottom border when using
28
+ // forms as a kind of detail view, as readonly fields often lack other visual boundaries.
29
+ .xh-form-field--readonly:not(.xh-form-field--inline) & {
30
+ border-bottom: var(--xh-form-field-readonly-label-border-bottom);
31
+ margin: var(--xh-form-field-readonly-label-margin);
32
+ padding: var(--xh-form-field-readonly-label-padding);
33
+ }
34
+
35
+ // Borders + padding - inline, both editable and readonly.
27
36
  .xh-form-field--inline & {
28
- border-bottom: var(--xh-form-field-label-inline-border-bottom);
29
- margin: var(--xh-form-field-label-inline-margin);
30
- padding: var(--xh-form-field-label-inline-padding);
37
+ border-bottom: var(--xh-form-field-inline-label-border-bottom);
38
+ margin: var(--xh-form-field-inline-label-margin);
39
+ padding: var(--xh-form-field-inline-label-padding);
31
40
  }
32
41
  }
33
42
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xh/hoist",
3
- "version": "80.0.0-SNAPSHOT.1768360784265",
3
+ "version": "80.0.0-SNAPSHOT.1768415875152",
4
4
  "description": "Hoist add-on for building and deploying React Applications.",
5
5
  "repository": "github:xh/hoist-react",
6
6
  "homepage": "https://xh.io",
package/styles/vars.scss CHANGED
@@ -432,20 +432,27 @@ body {
432
432
  --xh-form-field-focused-border-color: var(--form-field-focused-border-color, var(--xh-focus-outline-color));
433
433
  --xh-form-field-focused-box-shadow: var(--form-field-focused-box-shadow, #{inset 0 0 0 1px var(--xh-form-field-focused-border-color), inset 0 1px 1px var(--xh-form-field-focused-border-color)});
434
434
 
435
- // Label styling (shared)
435
+ // Label styling - common to all variants
436
436
  --xh-form-field-label-color: var(--form-field-label-color, var(--xh-text-color));
437
437
  --xh-form-field-label-font-size: var(--form-field-label-font-size, var(--xh-font-size-px));
438
438
  --xh-form-field-label-font-style: var(--form-field-label-font-style, normal);
439
439
  --xh-form-field-label-font-weight: var(--form-field-label-font-weight, normal);
440
440
  --xh-form-field-label-text-transform: var(--form-field-label-text-transform, none);
441
441
 
442
- // Label borders+padding (with inline variants)
442
+ // Label borders + padding - editable, not inline - the default case.
443
443
  --xh-form-field-label-border-bottom: var(--form-field-label-border-bottom, none);
444
444
  --xh-form-field-label-margin: var(--form-field-label-margin, 0 0 3px 0);
445
445
  --xh-form-field-label-padding: var(--form-field-label-padding, 0);
446
- --xh-form-field-label-inline-border-bottom: var(--form-field-label-inline-border-bottom, none);
447
- --xh-form-field-label-inline-margin: var(--form-field-label-inline-margin, 0);
448
- --xh-form-field-label-inline-padding: var(--form-field-label-inline-padding, 0);
446
+
447
+ // Label borders + padding - readonly, not inline
448
+ --xh-form-field-readonly-label-border-bottom: var(--form-field-readonly-label-border-bottom, var(--xh-form-field-label-border-bottom));
449
+ --xh-form-field-readonly-label-margin: var(--form-field-readonly-label-margin, var(--xh-form-field-label-margin));
450
+ --xh-form-field-readonly-label-padding: var(--form-field-readonly-label-padding, var(--xh-form-field-label-padding));
451
+
452
+ // Label borders + padding - inline, both editable and readonly
453
+ --xh-form-field-inline-label-border-bottom: var(--form-field-inline-label-border-bottom, var(--xh-form-field-label-border-bottom));
454
+ --xh-form-field-inline-label-margin: var(--form-field-inline-label-margin, 0); // Defaulted to zero for inline
455
+ --xh-form-field-inline-label-padding: var(--form-field-inline-label-padding, var(--xh-form-field-label-padding));
449
456
 
450
457
  // Messages (general info text + validation results)
451
458
  --xh-form-field-msg-font-size: var(--form-field-msg-font-size, var(--xh-font-size-small-px));