@gravityforms/components
Version:
UI components for use in Gravity Forms development. Both React and vanilla js flavors.
314 lines (257 loc) • 8.43 kB
CSS
.admin-bar .gform-admin .gform-dialog__mask--position-fixed {
block-size: calc(100vh - 46px);
inset-block-start: 46px;
}
@media (min-width: 783px) {.admin-bar .gform-admin .gform-dialog__mask--position-fixed {
block-size: calc(100vh - 32px);
inset-block-start: 32px
}
}
@media (min-width: 783px) {
.wp-admin .gform-admin .gform-dialog__mask--position-fixed {
inline-size: calc(100% - 160px)
}
}
@media (min-width: 783px) {
.wp-admin.folded .gform-admin .gform-dialog__mask--position-fixed, .wp-admin.auto-fold .gform-admin .gform-dialog__mask--position-fixed {
inline-size: calc(100% - 36px)
}
}
@media (min-width: 961px) {
.wp-admin.auto-fold:not(.folded) .gform-admin .gform-dialog__mask--position-fixed {
inline-size: calc(100% - 160px)
}
}
.gform-admin .gform-dialog__mask {
align-items: center;
display: none;
height: 100%;
justify-content: center;
opacity: 0;
top: 0;
transition: opacity 200ms ease-in-out;
width: 100%;
}
.gform-admin .gform-dialog__mask.gform-dialog--alignment-top {
align-items: flex-start;
overflow-y: auto;
padding-bottom: 50px;
padding-top: 110px;
}
.gform-admin .gform-dialog__mask.gform-dialog--anim-in-ready {
display: flex;
opacity: 0;
}
.gform-admin .gform-dialog__mask.gform-dialog--anim-in-active {
opacity: 1;
}
.gform-admin .gform-dialog__mask.gform-dialog--anim-in-active .gform-dialog {
transform: scale(1);
}
.gform-admin .gform-dialog__mask.gform-dialog__mask--position-fixed {
position: fixed;
}
.gform-admin .gform-dialog__mask.gform-dialog__mask--position-absolute {
position: absolute;
}
.gform-admin .gform-dialog__mask.gform-dialog__mask--theme-light {
background: rgba(255, 255, 255, 0.65);
}
.gform-admin .gform-dialog__mask.gform-dialog__mask--theme-dark {
background-color: rgba(36, 39, 72, 0.75);
}
.gform-admin .gform-dialog__mask.gform-dialog__mask--blur {
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.gform-admin .gform-dialog {
background: #fff;
border: 1px solid #f6f9fc;
box-shadow: 0 0 1px rgba(18, 25, 97, 0.24), 0 24px 24px rgba(18, 25, 97, 0.03), 0 2px 2px rgba(18, 25, 97, 0.03), 0 4px 4px rgba(18, 25, 97, 0.03), 0 8px 8px rgba(18, 25, 97, 0.03), 0 16px 16px rgba(18, 25, 97, 0.03);
box-sizing: border-box;
max-width: 600px;
overflow-y: auto;
padding: 14px 25px 25px;
position: relative;
transform: scale(0.95);
transition: transform 200ms ease-in-out;
width: calc(100% - 40px);
}
.gform-admin .gform-dialog.gform-dialog--container {
border: none;
box-shadow: none;
height: 100%;
max-width: none;
padding: 0;
width: 100%;
}
.gform-admin .gform-dialog.gform-dialog--animated {
opacity: 0;
position: relative;
top: 20px;
transform: scale(1);
transition: transform 600ms, opacity 600ms, top 600ms;
}
.gform-admin .gform-dialog.gform-dialog--animated.gform-dialog--animate-reveal {
opacity: 1;
top: 0;
transform: scale(1);
}
.gform-admin .gform-dialog.gform-dialog__theme--cosmos {
border-radius: 3px;
box-shadow: 0 24px 24px rgba(18, 25, 97, 0.03), 0 2px 2px rgba(18, 25, 97, 0.03), 0 4px 4px rgba(18, 25, 97, 0.03), 0 8px 8px rgba(18, 25, 97, 0.03), 0 16px 16px rgba(18, 25, 97, 0.03);
}
.gform-admin .gform-dialog.gform-dialog__theme--cosmos .gform-dialog__content {
color: #667085;
}
.gform-admin .gform-dialog.gform-dialog__theme--cosmos .gform-dialog__footer {
padding-top: 32px;
}
.gform-admin .gform-dialog.gform-dialog--simplebar {
align-items: stretch;
display: flex;
flex-direction: column;
overflow-y: inherit;
padding: 0;
}
.gform-admin .gform-dialog.gform-dialog--simplebar [data-simplebar="init"] {
box-sizing: border-box;
display: flex;
flex-grow: 1;
overflow-y: auto;
padding: 14px 25px 25px;
width: 100%;
}
.gform-admin .gform-dialog.gform-dialog--simplebar .simplebar-content-wrapper {
border: 0;
outline: 0;
}
.gform-admin .gform-dialog .gform-dialog__close {
inset-inline-end: 25px;
position: absolute;
top: 25px;
}
.gform-admin .gform-dialog .gform-dialog__close.gform-button--size-xs {
height: 1.875rem;
width: 1.875rem;
}
.gform-admin .gform-dialog .gform-dialog__close.gform-button--size-xs .gform-button__icon {
top: 0;
}
.gform-admin .gform-dialog .gform-dialog__close.gform-button--size-md {
height: 2.5rem;
inset-inline-end: 20px;
top: 20px;
width: 2.5rem;
}
.gform-admin .gform-dialog .gform-dialog__close.gform-button--size-md .gform-button__icon {
top: 0;
}
.gform-admin .gform-dialog .gform-dialog__close.gform-button--circular.gform-dialog__close--plain {
background: none;
border: none;
}
.gform-admin .gform-dialog .gform-dialog__close.gform-button--circular.gform-dialog__close--plain .gform-button__icon {
color: #fff;
font-size: 2rem;
}
.gform-admin .gform-dialog .gform-dialog__close.gform-button--unstyled.gform-button--size-md {
justify-content: flex-end;
}
.gform-admin .gform-dialog .gform-dialog__close.gform-button--unstyled .gform-button__icon {
color: #5b5e80;
}
.gform-admin .gform-dialog .gform-dialog__head.gform-dialog__head--with-divider {
border-bottom: 1px solid #e4e4ee;
padding-bottom: 15px;
}
.gform-admin .gform-dialog .gform-dialog__head .gform-indicator {
position: absolute;
}
.gform-admin .gform-dialog .gform-dialog__head .gform-indicator--confirm {
inset-block-start: 28px;
}
.gform-admin .gform-dialog .gform-dialog__title {
color: #242748;
font-family: inter, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen-sans, ubuntu, cantarell, "Helvetica Neue", sans-serif;
font-size: 1.1875rem;
font-weight: 500;
line-height: normal;
line-height: initial;
margin: 10px 0 0 0;
padding-inline-end: 30px;
position: relative;
}
.gform-admin .gform-dialog .gform-dialog__title.gform-dialog__title--has-icon {
padding-block-start: 6px;
padding-inline-start: 50px;
}
.gform-admin .gform-dialog .gform-dialog__title.gform-dialog__title--icon-type-confirm {
padding-block-start: 0;
padding-inline-start: 30px;
}
.gform-admin .gform-dialog.gform-dialog--title-size-md .gform-dialog__title {
font-size: 1.5rem;
font-weight: 600;
}
.gform-admin .gform-dialog .gform-dialog__description {
color: #5b5e80;
display: inline-block;
font-family: inter, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen-sans, ubuntu, cantarell, "Helvetica Neue", sans-serif;
font-size: 0.875rem;
font-weight: 400;
line-height: normal;
line-height: initial;
margin: 0.75rem 0 0 0;
padding-inline-end: 30px;
position: relative;
}
.gform-admin .gform-dialog .gform-dialog__description.gform-dialog__title--has-icon {
padding-inline-start: 50px;
}
.gform-admin .gform-dialog .gform-dialog__title-icon {
font-size: 1.5rem;
inset-inline-start: 0;
position: absolute;
top: 3px;
}
.gform-admin .gform-dialog .gform-dialog__content {
padding-bottom: 0;
padding-inline-start: 0;
padding-top: 10px;
}
.gform-admin .gform-dialog .gform-dialog__content.gform-dialog__content--with-divider {
padding-top: 15px;
}
.gform-admin .gform-dialog .gform-dialog__content.gform-dialog__content--pad-content {
padding-inline-end: 30px;
}
.gform-admin .gform-dialog .gform-dialog__content, .gform-admin .gform-dialog .gform-dialog__content p {
color: #242748;
font-family: inter, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen-sans, ubuntu, cantarell, "Helvetica Neue", sans-serif;
font-size: 0.875rem;
line-height: 1.188rem;
}
.gform-admin .gform-dialog .gform-dialog__footer {
align-items: center;
display: flex;
padding-top: 20px;
width: 100%;
}
.gform-admin .gform-dialog .gform-dialog__confirm {
margin-inline-start: 12px;
}
.gform-admin .gform-dialog .gform-dialog__confirm.gform-button--icon-leading .gform-button__icon {
font-size: 1.5rem;
}
.gform-admin .gform-dialog--full-screen {
height: calc(100vh - 40px);
max-width: 1280px;
overflow: auto;
padding: 0;
}
.gform-admin .gform-dialog--full-screen .gform-dialog__content {
margin: 0;
padding: 0;
}
/*# sourceMappingURL=dialog.css.map */