diff --git a/projects/packages/forms/changelog/fix-choice-fields-styles b/projects/packages/forms/changelog/fix-choice-fields-styles new file mode 100644 index 0000000000000..cdadb1d4204b9 --- /dev/null +++ b/projects/packages/forms/changelog/fix-choice-fields-styles @@ -0,0 +1,5 @@ +Significance: patch +Type: fixed +Comment: Single and Multiple Choice fields: fix view styles + + diff --git a/projects/packages/forms/src/blocks/contact-form/editor.scss b/projects/packages/forms/src/blocks/contact-form/editor.scss index f69b780dbcf02..c1704fffc8281 100644 --- a/projects/packages/forms/src/blocks/contact-form/editor.scss +++ b/projects/packages/forms/src/blocks/contact-form/editor.scss @@ -399,6 +399,7 @@ border-radius: var(--jetpack--contact-form--button-outline--border-radius); padding: var(--jetpack--contact-form--button-outline--padding); line-height: var(--jetpack--contact-form--button-outline--line-height); + align-items: center; &.field-option-radio { position: relative; @@ -470,8 +471,9 @@ } } - .jetpack-field-option { - &.field-option-radio .jetpack-option__type { + .jetpack-field-option.field-option-radio, + .wp-block-jetpack-field-option-radio { + .jetpack-option__type { transform: translateY(15%); /* Small offset to compensate the slightly odd perceived alignment that's due to the circular shape */ } } diff --git a/projects/packages/forms/src/contact-form/css/grunion.css b/projects/packages/forms/src/contact-form/css/grunion.css index 02428f826aed8..90ecfbdc68369 100644 --- a/projects/packages/forms/src/contact-form/css/grunion.css +++ b/projects/packages/forms/src/contact-form/css/grunion.css @@ -72,6 +72,7 @@ .contact-form input[type='checkbox'] { top: 0; margin-left: 0; + border-radius: 4px; } .contact-form label { @@ -580,7 +581,7 @@ on production builds, the attributes are being reordered, causing side-effects padding: 0; appearance: none; - border: solid 1px var(--jetpack--contact-form--text-color); + border: solid 1px currentColor; outline-offset: 4px; }