Skip to content

Commit

Permalink
Fix single checkbox styling
Browse files Browse the repository at this point in the history
  • Loading branch information
enejb committed Jan 9, 2025
1 parent 7c4ad26 commit 29fc2b8
Showing 1 changed file with 10 additions and 7 deletions.
17 changes: 10 additions & 7 deletions projects/packages/forms/src/contact-form/css/grunion.css
Original file line number Diff line number Diff line change
Expand Up @@ -143,10 +143,12 @@
.contact-form .grunion-checkbox-multiple-options .contact-form-field,
.contact-form .grunion-radio-options .contact-form-field {
display: flex;
align-items: baseline;

align-items: center;
margin: 0;
}
.contact-form .grunion-radio-options .contact-form-field {
align-items: baseline;
}

.contact-form label span.required,
.grunion-label-required {
Expand Down Expand Up @@ -570,6 +572,8 @@ on production builds, the attributes are being reordered, causing side-effects
padding-top: 8px;
}

.contact-form .grunion-field-wrap input.consent,
.contact-form .grunion-field-wrap input.checkbox,
.contact-form .grunion-field-wrap input.checkbox-multiple,
.contact-form .grunion-field-wrap input.radio {
position: relative;
Expand All @@ -589,10 +593,11 @@ on production builds, the attributes are being reordered, causing side-effects

.contact-form .grunion-field-wrap input.radio {
border-radius: 50%;

transform: translateY(15%); /* Small offset to compensate the slightly odd perceived alignment that's due to the circular shape */
}

.contact-form .grunion-field-wrap input.consent:checked::before,
.contact-form .grunion-field-wrap input.checkbox:checked::before,
.contact-form .grunion-field-wrap input.checkbox-multiple:checked::before {
content: "\2713";

Expand Down Expand Up @@ -785,10 +790,8 @@ on production builds, the attributes are being reordered, causing side-effects
font-style: normal;
font-weight: bold;
}

.contact-form__checkbox-wrap {
.contact-form .contact-form__checkbox-wrap {
display: inline-flex;
align-items: baseline;
}

.contact-form :is([type="submit"],button:not([type="reset"])) {
Expand All @@ -807,7 +810,7 @@ on production builds, the attributes are being reordered, causing side-effects
display: block;
}

.visually-hidden {
.contact-form .visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
Expand Down

0 comments on commit 29fc2b8

Please sign in to comment.