@gravityforms/components
Version:
UI components for use in Gravity Forms development. Both React and vanilla js flavors.
133 lines (109 loc) • 3.37 kB
CSS
.gform-admin .gform-droplist {
box-sizing: border-box;
font-family: inter, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen-sans, ubuntu, cantarell, "Helvetica Neue", sans-serif;
position: relative;
}
.gform-admin .gform-droplist * {
box-sizing: border-box;
}
.gform-admin .gform-droplist__list-container {
padding-block: 0.5rem;
}
.gform-admin .gform-droplist__list {
list-style-type: none;
margin: 0;
padding: 0;
}
.gform-admin .gform-droplist__item {
margin-block-end: 0.25rem;
padding-block: 0.25rem;
padding-inline: 0.5rem;
}
.gform-admin .gform-droplist__item:last-child {
margin-block-end: 0;
}
.gform-admin .gform-droplist__item--group {
position: relative;
}
.gform-admin .gform-droplist__item--has-divider {
position: relative;
}
.gform-admin .gform-droplist__item--has-divider::after {
border-block-end: 0.0625rem solid #ecedf8;
content: "";
inline-size: 100%;
inset-block-end: calc(0.25rem * -1);
inset-inline-start: 0;
position: absolute;
}
.gform-admin .gform-droplist__item-trigger {
align-items: flex-start;
background: #fff;
border: 0.0625rem solid #fff;
border-radius: 0.1875rem;
cursor: pointer;
display: flex;
inline-size: 100%;
outline: none;
padding-block: 0.25rem;
padding-inline: 0.5rem;
text-align: start;
text-decoration: none;
transition: all 0.15s ease;
}
.gform-admin .gform-droplist__item-trigger--info:hover {
background: #f6f9fc;
border-color: #f6f9fc;
}
.gform-admin .gform-droplist__item-trigger--info:focus {
background: #fdfdff;
border-color: #175cff;
box-shadow: 0 0.125rem 0.0675rem rgba(28, 31, 63, 0.0634624), 0 0 0 2px #bed8ed;
}
.gform-admin .gform-droplist__item-trigger--info:active {
background: #f6f9fc;
border-color: #d5d7e9;
box-shadow: none;
}
.gform-admin .gform-droplist__item-trigger--info .gform-droplist__item-trigger-icon::before, .gform-admin .gform-droplist__item-trigger--info .gform-droplist__item-trigger-group-icon::before {
color: #5b5e80;
}
.gform-admin .gform-droplist__item-trigger--error:hover {
background: #fee4e2;
border-color: #fee4e2;
}
.gform-admin .gform-droplist__item-trigger--error:focus {
background: #fee4e2;
border-color: #dd301d;
box-shadow: 0 0 0 2px #fee4e2, 0 1px 2px 0 rgba(16, 24, 40, 0.05);
}
.gform-admin .gform-droplist__item-trigger--error:active {
background: #fee4e2;
border-color: #ffc7bb;
box-shadow: none;
}
.gform-admin .gform-droplist__item-trigger--error, .gform-admin .gform-droplist__item-trigger--error .gform-droplist__item-trigger-icon::before, .gform-admin .gform-droplist__item-trigger--error .gform-droplist__item-trigger-group-icon::before {
color: #dd301d;
}
.gform-admin .gform-droplist__item-trigger--disabled:disabled {
background: #fff;
border: 0.0625rem solid #fff;
cursor: default;
opacity: 0.5;
}
.gform-admin .gform-droplist__item-trigger-text {
flex: auto;
padding-inline-end: 1.75rem;
white-space: nowrap;
}
.gform-admin .gform-droplist__item-trigger-icon {
flex: none;
font-size: 1.25rem;
}
.gform-admin .gform-droplist__item-trigger-icon--before {
margin-inline-end: 0.375rem;
}
.gform-admin .gform-droplist__item-trigger-icon--after {
margin-inline-start: 0.375rem;
}
/*# sourceMappingURL=droplist.css.map */