@gravityforms/components
Version:
UI components for use in Gravity Forms development. Both React and vanilla js flavors.
88 lines (72 loc) • 2.37 kB
CSS
.gform-admin {
.gform-input-wrapper--select {
&,
* {
box-sizing: border-box;
}
&.gform-input-wrapper--size-r .gform-select {
padding-block: 0.375rem;
}
&.gform-input-wrapper--size-l .gform-select {
padding-block: 0.5rem;
}
&.gform-input-wrapper--size-xl .gform-select {
padding-block: 0.75rem;
}
}
.gform-select__wrapper {
position: relative;
&::after {
background: center / contain no-repeat url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="10" height="7" viewBox="0 0 10 7" fill="none"%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M0.292893 0.792893C0.683417 0.402369 1.31658 0.402369 1.70711 0.792893L5 4.08579L8.29289 0.792893C8.68342 0.402369 9.31658 0.402369 9.70711 0.792893C10.0976 1.18342 10.0976 1.81658 9.70711 2.20711L5.70711 6.20711C5.31658 6.59763 4.68342 6.59763 4.29289 6.20711L0.292893 2.20711C-0.0976311 1.81658 -0.0976311 1.18342 0.292893 0.792893Z" fill="%239092B0"/%3E%3C/svg%3E'); /* stylelint-disable-line */
content: "";
height: 0.375rem;
inset-inline-end: 1rem;
pointer-events: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 0.625rem;
}
}
.gform-select {
appearance: none;
background: var(--gform-admin-color-white);
border: 1px solid var(--gform-admin-color-santas);
border-radius: 0.1875rem;
box-shadow: var(--gform-admin-box-shadow-input-hover);
color: var(--gform-admin-color-port);
cursor: pointer;
font-family: var(--gform-admin-font-family-base);
font-size: var(--gform-admin-font-size-sm);
line-height: var(--gform-admin-line-height-sm);
margin: 0;
max-width: none;
min-height: 0;
outline: none;
padding-inline: 0.75rem 2rem;
width: 100%;
&:hover {
color: var(--gform-admin-color-port);
}
&:focus {
border-color: var(--gform-admin-color-blue-ribbon);
box-shadow: var(--gform-admin-box-shadow-focus);
}
&:disabled {
background: var(--gform-admin-color-light-blue);
border-color: var(--gform-admin-color-snuff);
color: var(--gform-admin-color-santas);
}
}
.gform-input-wrapper--select.gform-input-wrapper--theme-cosmos {
.gform-label {
margin-block-end: 0.375rem;
}
.gform-input-help-text:nth-child(2) {
margin-block-end: 0.375rem;
}
.gform-input-help-text:nth-child(3) {
margin-block-start: 0.375rem;
}
}
}