Skip to content

Commit

Permalink
Add blocksyles to the consent checkbox
Browse files Browse the repository at this point in the history
  • Loading branch information
@enejb
enejb committed Jan 9, 2025
1 parent 176dd4a commit 5394b73
Show file tree
Hide file tree
Showing 3 changed files with 43 additions and 54 deletions.
8 changes: 8 additions & 0 deletions projects/packages/forms/src/blocks/contact-form/components/jetpack-field-consent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { withSharedFieldAttributes } from '../util/with-shared-field-attributes'
import JetpackFieldLabel from './jetpack-field-label';
import JetpackFieldWidth from './jetpack-field-width';
import JetpackManageResponsesSettings from './jetpack-manage-responses-settings';
import { useJetpackFieldStyles } from './use-jetpack-field-styles';

const JetpackFieldConsent = ( {
instanceId,
Expand All @@ -16,9 +17,11 @@ const JetpackFieldConsent = ( {
setAttributes,
attributes,
} ) => {
const { blockStyle } = useJetpackFieldStyles( attributes );
const blockProps = useBlockProps( {
id: `jetpack-field-consent-${ instanceId }`,
className: 'jetpack-field jetpack-field-consent',
style: blockStyle,
} );

return (
Expand Down Expand Up @@ -66,6 +69,11 @@ const JetpackFieldConsent = ( {
onChange: value => setAttributes( { labelColor: value } ),
label: __( 'Label Text', 'jetpack-forms' ),
},
{
value: attributes.borderColor,
onChange: value => setAttributes( { borderColor: value } ),
label: __( 'Border', 'jetpack-forms' ),
},
] }
/>
<PanelBody title={ __( 'Consent Settings', 'jetpack-forms' ) }>
Expand Down
81 changes: 27 additions & 54 deletions projects/packages/forms/src/blocks/contact-form/editor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -334,66 +334,26 @@
margin-bottom: 0;
}

&.jetpack-field-consent .jetpack-field-consent__checkbox,
&.jetpack-field-checkbox .jetpack-field-checkbox__checkbox,
&.jetpack-field-consent .jetpack-field-consent__checkbox {
margin: 0 0.75rem 0 0;
border-color: currentColor;
opacity: 1;
}

&.jetpack-field-checkbox .jetpack-field-checkbox__checkbox {
align-items: center;
all: initial;
appearance: none;
color: var(--jetpack--contact-form--border-color);

border: none;
font-size: var(--jetpack--contact-form--font-size);
font-family: var(--jetpack--contact-form--font-family);
height: var(--jetpack--contact-form--font-size);
justify-content: center;
margin: 0 10px 0 0;
outline: none;
position: relative;
width: var(--jetpack--contact-form--font-size);
pointer-events: none;
display: flex;

&::before {
all: initial;
color: inherit;
font-size: inherit;
font-family: inherit;
align-items: center;
border-color: currentColor;
border-radius: min(var(--jetpack--contact-form--button-outline--border-radius, 0px), 4px);
border-style: solid;
border-width: 1px;
box-sizing: border-box;
content: ' ';

font-weight: bold;
height: var(--jetpack--contact-form--font-size);
justify-content: center;
width: var(--jetpack--contact-form--font-size);
}
}

.jetpack-option__type.jetpack-option__type {
align-items: center;
all: initial;
appearance: none;
color: var(--jetpack--contact-form--text-color);
color: var(--jetpack--contact-form--border-color);
display: flex;
border: none;
font-size: var(--jetpack--contact-form--font-size, 16px );
font-family: var(--jetpack--contact-form--font-family);
height: var(--jetpack--contact-form--font-size, 16px );
opacity: 1;
justify-content: center;
margin: 0 10px 0 0;
outline: none;
position: relative;
width: var(--jetpack--contact-form--font-size, 16px);
min-width: var(--jetpack--contact-form--font-size, 16px);
flex-shrink: inherit;
pointer-events: none;

&::after, &::before {
Expand All @@ -405,24 +365,43 @@

&::before {
align-items: center;
border-color: currentColor;
border-color: var(--jetpack--contact-form--border-color);
border-radius: min(var(--jetpack--contact-form--button-outline--border-radius, 0px), 4px);
border-style: solid;
border-width: 1px;
box-sizing: border-box;
content: ' ';
display: flex;
font-weight: bold;
height: var(--jetpack--contact-form--font-size, 16px);
justify-content: center;
height: var(--jetpack--contact-form--font-size, 16px);
width: var(--jetpack--contact-form--font-size, 16px);
min-width: var(--jetpack--contact-form--font-size, 16px);
background:var( --jetpack--contact-form--input-background );
}

&[type="radio"]::before {
border-radius: 50%;
}
}

&.jetpack-field-checkbox .jetpack-field-checkbox__checkbox:checked::before {
position: absolute;
content: "\2713";

top: calc(var(--jetpack--contact-form--font-size) / 2);
left: calc(var(--jetpack--contact-form--font-size) / 2);

display: flex;

font-size: var(--jetpack--contact-form--font-size);
line-height: 1;

transform: translate(-50%, -50%);
color: var(--jetpack--contact-form--text-color);
opacity: 1;
}

&.jetpack-field-multiple {

&.is-style-button {
Expand Down Expand Up @@ -483,10 +462,6 @@
}
}

.jetpack-field-consent__checkbox + .jetpack-field-label {
line-height: normal;
}

.jetpack-field-option {
display: flex;
align-items: center;
Expand Down Expand Up @@ -613,15 +588,13 @@
}

.jetpack-field-checkbox {
align-items: baseline;

.jetpack-field-label {
display: block;
line-height: 1;
}
}

.jetpack-field-consent {
align-items: center;

.jetpack-field-label {
flex-grow: 1;
Expand Down
8 changes: 8 additions & 0 deletions projects/packages/forms/src/contact-form/css/grunion.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,8 @@

.contact-form label.checkbox {
font-weight: normal;
margin-bottom: 0;
line-height: 1;
}

.contact-form label.checkbox-multiple,
Expand Down Expand Up @@ -580,6 +582,7 @@ on production builds, the attributes are being reordered, causing side-effects

box-sizing: border-box;
width: var(--jetpack--contact-form--font-size);
min-width: var(--jetpack--contact-form--font-size);
height: var(--jetpack--contact-form--font-size);
margin-inline-end: calc(var(--jetpack--contact-form--font-size) / 2);
padding: 0;
Expand All @@ -590,6 +593,9 @@ on production builds, the attributes are being reordered, causing side-effects

outline-offset: 4px;
color: var( --jetpack--contact-form--border-color );
background-color: var(--jetpack--contact-form--input-background);
font-family: var( --jetpack--contact-form--font-family );
flex-basis: content;
}

.contact-form .grunion-field-wrap input.radio {
Expand All @@ -612,6 +618,7 @@ on production builds, the attributes are being reordered, causing side-effects
line-height: 1;

transform: translate(-50%, -50%);
color: var(--jetpack--contact-form--text-color);
}

.contact-form .grunion-field-wrap input.radio:checked::before {
Expand All @@ -624,6 +631,7 @@ on production builds, the attributes are being reordered, causing side-effects
position: absolute;
transform: translate(-50%, -50%);
width: calc(var(--jetpack--contact-form--font-size) / 2);
color: var(--jetpack--contact-form--text-color);
}

.contact-form .grunion-field-wrap.grunion-field-checkbox-multiple-wrap.is-style-button-wrap .contact-form-field,
Expand Down

0 comments on commit 5394b73

Please sign in to comment.