diff --git a/projects/packages/forms/changelog/fix-forms-checkbox-text-size-scaling b/projects/packages/forms/changelog/fix-forms-checkbox-text-size-scaling new file mode 100644 index 000000000000..0ebc9fddf2a5 --- /dev/null +++ b/projects/packages/forms/changelog/fix-forms-checkbox-text-size-scaling @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +Forms: Scale the checkbox input proportionally when a custom font size is set. diff --git a/projects/packages/forms/src/contact-form/css/grunion.scss b/projects/packages/forms/src/contact-form/css/grunion.scss index 279a908fc0e6..ce064f30ada0 100644 --- a/projects/packages/forms/src/contact-form/css/grunion.scss +++ b/projects/packages/forms/src/contact-form/css/grunion.scss @@ -1285,8 +1285,8 @@ on production builds, the attributes are being reordered, causing side-effects font-size: var(--jetpack--contact-form--font-size); } -.contact-form .is-style-list input.consent, -.contact-form .is-style-list input.checkbox, +.contact-form .grunion-field-consent-wrap input.consent, +.contact-form .grunion-field-checkbox-wrap input.checkbox, .contact-form .grunion-field-wrap:not(.is-style-plain) input.checkbox-multiple, .contact-form .grunion-field-wrap:not(.is-style-plain) input.radio { position: relative; @@ -1340,8 +1340,8 @@ on production builds, the attributes are being reordered, causing side-effects } -.contact-form .is-style-list input.consent, -.contact-form .is-style-list input.checkbox, +.contact-form .grunion-field-consent-wrap input.consent, +.contact-form .grunion-field-checkbox-wrap input.checkbox, .contact-form .grunion-field-wrap:not(.is-style-plain) input.checkbox-multiple { &:not(.is-style-button):checked { @@ -1356,8 +1356,8 @@ on production builds, the attributes are being reordered, causing side-effects display: none; } -.contact-form .is-style-list input.consent::before, -.contact-form .is-style-list input.checkbox::before, +.contact-form .grunion-field-consent-wrap input.consent::before, +.contact-form .grunion-field-checkbox-wrap input.checkbox::before, .contact-form .grunion-field-wrap:not(.is-style-plain) input.checkbox-multiple::before { position: absolute; width: 0.25em; @@ -1379,8 +1379,8 @@ on production builds, the attributes are being reordered, causing side-effects left: 0; } -.contact-form .is-style-list input.consent:checked::before, -.contact-form .is-style-list input.checkbox:checked::before, +.contact-form .grunion-field-consent-wrap input.consent:checked::before, +.contact-form .grunion-field-checkbox-wrap input.checkbox:checked::before, .contact-form .grunion-field-wrap:not(.is-style-plain) input.checkbox-multiple:checked::before { scale: 1; opacity: 1;