@gravityforms/components
Version:
UI components for use in Gravity Forms development. Both React and vanilla js flavors.
58 lines (46 loc) • 1.3 kB
CSS
.gform-admin .gform-address {
display: flex;
flex-wrap: wrap;
gap: 0.75rem 0.5rem;
/*
.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);
}
}
}
*/
}
.gform-admin .gform-address .gform-address__field {
display: flex;
flex-basis: 100%;
flex-direction: column;
flex-grow: 0;
flex-shrink: 1;
min-width: 0;
width: 100%;
}
@media (min-width: 768px) {
.gform-admin .gform-address .gform-address__field--full {
flex-basis: 100%;
width: 100%;
}
.gform-admin .gform-address .gform-address__field--half {
flex-basis: calc(( 100% - 0.5rem ) / 2);
flex-shrink: 0; /* Prevent shrinking below half width on this breakpoint */
width: calc(( 100% - 0.5rem ) / 2);
}
}
/* Ensure inputs/dropdowns within the field wrapper take full width of that wrapper */
.gform-admin .gform-address .gform-address__field .gform-input, .gform-admin .gform-address .gform-address__field .gform-dropdown {
width: 100%;
}
/*# sourceMappingURL=address.css.map */