diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 52f739a..53a0fd9 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -18,7 +18,10 @@ on: jobs: release: - uses: builtnorth/basecamp-dev/.github/.github/workflows/npm-package-release.yml@dev + permissions: + contents: write + packages: write + uses: builtnorth/.github/.github/workflows/npm-package-release.yml@main with: version: ${{ inputs.version }} prerelease: ${{ inputs.prerelease }} @@ -26,7 +29,7 @@ jobs: node-version: "22" publish-to-npm: false publish-to-github: true - use-workspace: false # SCSS package doesn't need workspace dependencies + use-workspace: true secrets: POLARIS_PLUGIN_GITHUB_TOKEN: ${{ secrets.POLARIS_PLUGIN_GITHUB_TOKEN }} NPM_TOKEN: ${{ secrets.NPM_TOKEN }} diff --git a/src/scss/forms/_gravity-forms.scss b/src/scss/forms/_gravity-forms.scss new file mode 100644 index 0000000..2f53296 --- /dev/null +++ b/src/scss/forms/_gravity-forms.scss @@ -0,0 +1,179 @@ +.gform_body, +.gform_page { + display: flex; + flex-direction: column; + gap: var( + --wp--custom--spacing--form-column-gap, + var(--wp--style--block-gap, 1rem) + ); +} + +.gfield { + grid-column: 1 / -1; + min-inline-size: 0; +} + +.ginput_complex { + > span { + display: flex; + flex-direction: column; + + label { + order: 2; + } + + input { + order: 1; + } + } +} + +.gfield_radio, +.gfield_checkbox { + display: flex; + flex-wrap: wrap; + gap: var( + --wp--custom--spacing--form-column-gap, + var(--wp--style--block-gap, 1rem) + ); + + .gchoice { + display: flex; + align-items: flex-start; + gap: var( + --wp--custom--spacing--form-choice-gap, + var(--wp--preset--spacing--30, 0.75rem) + ); + } +} + +.ginput_container_consent { + display: grid; + grid-template-columns: auto 1fr; + gap: var( + --wp--custom--spacing--form-choice-gap, + var(--wp--preset--spacing--30, 0.75rem) + ); + align-items: start; + + input[type="checkbox"] { + margin-block-start: 0.25em; // Align with first line of text + } + + .gfield_consent_label { + display: inline; + } +} + +.gform_fields { + display: grid; + grid-template-columns: repeat(12, 1fr); + column-gap: var( + --wp--custom--spacing--form-column-gap, + var(--wp--style--block-gap, 1rem) + ); + row-gap: var( + --wp--custom--spacing--form-row-gap, + var(--wp--style--block-gap, 1rem) + ); +} + +.gform_page_footer { + display: flex; + flex-wrap: wrap; + gap: var( + --wp--custom--spacing--form-column-gap, + var(--wp--style--block-gap, 1rem) + ); +} + +.gform-grid-row { + display: flex; + flex-flow: row wrap; + gap: var( + --wp--custom--spacing--form-column-gap, + var(--wp--style--block-gap, 1rem) + ); +} + +.gform-grid-col { + flex: 0 0 100%; + min-inline-size: 0; +} + +.ginput_address_city, +.ginput_address_country, +.ginput_address_state, +.ginput_address_zip { + flex: 0 0 + calc( + 50% - + ( + var( + --wp--custom--spacing--form-column-gap, + var(--wp--style--block-gap, 1rem) + ) / + 2 + ) + ); + @container (max-width: 48rem) { + flex-basis: 100%; + } +} + +.gform-grid-col.gform-grid-col--size-auto { + flex: 1; + inline-size: auto; +} + +.gfield--width-full { + grid-column: span 12; +} + +.gfield--width-half { + grid-column: span 6; + @container (max-width: 48rem) { + grid-column: span 12; + } +} + +.gfield--width-third { + grid-column: span 4; + @container (max-width: 48rem) { + grid-column: span 12; + } +} + +.gfield--width-two-third { + grid-column: span 8; + @container (max-width: 48rem) { + grid-column: span 12; + } +} +.gfield--width-quarter { + grid-column: span 3; + @container (max-width: 48rem) { + grid-column: span 12; + } +} + +.gfield--width-three-quarter { + grid-column: span 9; + @container (max-width: 48rem) { + grid-column: span 12; + } +} + +.gfield--width-five-sixths { + grid-column: span 10; + @container (max-width: 48rem) { + grid-column: span 12; + } +} + +.gfield--width-one-sixth { + grid-column: span 2; + @container (max-width: 48rem) { + grid-column: span 12; + } +} diff --git a/src/scss/forms/_shared.scss b/src/scss/forms/_shared.scss new file mode 100644 index 0000000..34d3a37 --- /dev/null +++ b/src/scss/forms/_shared.scss @@ -0,0 +1,61 @@ +input, +select, +textarea { + margin: 0; + border-width: var(--wp--custom--border-width--form-field, 1px); + border-color: var(--wp--custom--color--form-field-border, #8e8e8e); + border-radius: var(--wp--custom--border-radius--form-field, 0); + padding-top: var(--wp--custom--spacing--form-field, 0.11rem); + padding-bottom: var(--wp--custom--spacing--form-field, 0.11rem); + padding-left: var(--wp--custom--spacing--form-field, 0.11rem); + padding-right: var(--wp--custom--spacing--form-field, 0.11rem); + width: 100%; + + &:focus, + &:focus-within { + outline-color: var(--wp--preset--color--primary); + } +} + +input[type="checkbox"], +input[type="radio"] { + margin-top: var(--wp--preset--spacing--20, 0.25rem); + width: var(--wp--custom--form-choice-size, 1.125rem); + height: var(--wp--custom--form-choice-size, 1.125rem); + appearance: none; + background-color: var(--wp--preset--color--white, #fff); + border-style: solid; + display: inline-block; + vertical-align: middle; + background-position: center; + background-repeat: no-repeat; + background-size: contain; + flex-shrink: 0; + + &:checked { + background-color: var(--wp--preset--color--primary); + border-color: var(--wp--preset--color--primary); + } + + &:focus { + outline-color: var(--wp--preset--color--primary); + outline-offset: 2px; + } +} + +input[type="checkbox"] { + border-radius: var(--wp--custom--border-radius--form-choice, 0.25rem); + + &:checked { + background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); + } +} + +input[type="radio"], +input[type="radio"] { + border-radius: 50%; + + &:checked { + background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e"); + } +} diff --git a/src/scss/layout/_columns.scss b/src/scss/layout/_columns.scss index 9d73302..f59a24a 100644 --- a/src/scss/layout/_columns.scss +++ b/src/scss/layout/_columns.scss @@ -25,7 +25,6 @@ min-width: 4rem; flex-direction: column; display: flex; - align-self: stretch; /* fix for gutenberg */ margin-block-start: 0;