@gravityforms/components
Version:
UI components for use in Gravity Forms development. Both React and vanilla js flavors.
59 lines (48 loc) • 1.22 kB
CSS
.gform-admin {
.gform-address {
display: flex;
flex-wrap: wrap;
gap: var(--gform-admin-spacer-3) var(--gform-admin-spacer-2);
.gform-address__field {
display: flex;
flex-basis: 100%;
flex-direction: column;
flex-grow: 0;
flex-shrink: 1;
min-width: 0;
width: 100%;
}
@media (--gform-admin-viewport-md) {
.gform-address__field--full {
flex-basis: 100%;
width: 100%;
}
.gform-address__field--half {
flex-basis: calc(( 100% - var(--gform-admin-spacer-2) ) / 2);
flex-shrink: 0; /* Prevent shrinking below half width on this breakpoint */
width: calc(( 100% - var(--gform-admin-spacer-2) ) / 2);
}
}
/* Ensure inputs/dropdowns within the field wrapper take full width of that wrapper */
.gform-address__field .gform-input,
.gform-address__field .gform-dropdown {
width: 100%;
}
/*
.gform-address__row {
flex-direction: column;
gap: 0;
@media (--gform-admin-viewport-md) {
flex-direction: row;
gap: var(--gform-admin-spacer-2);
}
.gform-input-wrapper:not(.gform-dropdown__search-wrapper),
.gform-dropdown {
@media (--gform-admin-viewport-md) {
width: calc(50% - 0.25rem);
}
}
}
*/
}
}