diff --git a/pos-module-common-styling/modules/common-styling/pos-module.json b/pos-module-common-styling/modules/common-styling/pos-module.json index 53ddba0..694b71a 100644 --- a/pos-module-common-styling/modules/common-styling/pos-module.json +++ b/pos-module-common-styling/modules/common-styling/pos-module.json @@ -1,5 +1,5 @@ { "machine_name": "common-styling", - "version": "1.38.1", + "version": "1.38.2", "name": "platformOS common styling" } \ No newline at end of file diff --git a/pos-module-common-styling/modules/common-styling/public/assets/style/pos-forms.css b/pos-module-common-styling/modules/common-styling/public/assets/style/pos-forms.css index d14b498..a0d842a 100644 --- a/pos-module-common-styling/modules/common-styling/public/assets/style/pos-forms.css +++ b/pos-module-common-styling/modules/common-styling/public/assets/style/pos-forms.css @@ -91,14 +91,27 @@ align-self: start; } - .pos-form :has([required]:not([type="radio"])) label:after, - .pos-form :has([required]:not([type="radio"])) label strong:after { + /* + The required marker belongs to the field group that holds the required control. + `:has()` is unbounded on its own - `.pos-form :has([required])` is matched by + every ancestor of a required control, not just its group, so any wrapper holding + at least one required control (a `.pos-card` around a set of fieldsets, for + instance) marked every label inside it: optional fields, and fields whose control + is never required at all, such as an upload area. Matching the fieldset keeps the + marker on the group it describes, which is the documented behaviour - labels + placed in a fieldset that has a required input. + */ + .pos-form fieldset:has([required]:not([type="radio"])) label:after, + .pos-form fieldset:has([required]:not([type="radio"])) label strong:after, + .pos-form .pos-form-fieldset:has([required]:not([type="radio"])) label:after, + .pos-form .pos-form-fieldset:has([required]:not([type="radio"])) label strong:after { color: var(--pos-color-important); content: " *"; } - .pos-form :has([required]) label:has(strong):after { + .pos-form fieldset:has([required]) label:has(strong):after, + .pos-form .pos-form-fieldset:has([required]) label:has(strong):after { display: none; }