@gravityforms/components
Version:
UI components for use in Gravity Forms development. Both React and vanilla js flavors.
331 lines (268 loc) • 6.45 kB
CSS
.gform-admin {
.admin-bar & {
.gform-dialog__mask--position-fixed {
block-size: calc(100vh - 46px);
inset-block-start: 46px;
@media (--gform-admin-viewport-wpadmin) {
block-size: calc(100vh - 32px);
inset-block-start: 32px;
}
}
}
.wp-admin & {
.gform-dialog__mask--position-fixed {
@media (--gform-admin-viewport-wpadmin) {
inline-size: calc(100% - 160px);
}
}
}
.wp-admin.folded &,
.wp-admin.auto-fold & {
.gform-dialog__mask--position-fixed {
@media (--gform-admin-viewport-wpadmin) {
inline-size: calc(100% - 36px);
}
}
}
.wp-admin.auto-fold:not(.folded) & {
.gform-dialog__mask--position-fixed {
@media (--gform-admin-viewport-wpadmin-961) {
inline-size: calc(100% - 160px);
}
}
}
.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-dialog--alignment-top {
align-items: flex-start;
overflow-y: auto;
padding-bottom: 50px;
padding-top: 110px;
}
&.gform-dialog--anim-in-ready {
display: flex;
opacity: 0;
}
&.gform-dialog--anim-in-active {
opacity: 1;
.gform-dialog {
transform: scale(1);
}
}
&.gform-dialog__mask--position-fixed {
position: fixed;
}
&.gform-dialog__mask--position-absolute {
position: absolute;
}
&.gform-dialog__mask--theme-light {
background: rgba(255, 255, 255, 0.65);
}
&.gform-dialog__mask--theme-dark {
background-color: rgba(36, 39, 72, 0.75);
}
&.gform-dialog__mask--blur {
backdrop-filter: blur(8px);
}
}
.gform-dialog {
background: var(--gform-admin-color-white);
border: 1px solid var(--gform-admin-color-light-blue);
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-dialog--container {
border: none;
box-shadow: none;
height: 100%;
max-width: none;
padding: 0;
width: 100%;
}
&.gform-dialog--animated {
opacity: 0;
position: relative;
top: 20px;
transform: scale(1);
transition: transform 600ms, opacity 600ms, top 600ms;
&.gform-dialog--animate-reveal {
opacity: 1;
top: 0;
transform: scale(1);
}
}
&.gform-dialog__theme--cosmos {
border-radius: 3px;
box-shadow: var(--gform-admin-box-shadow-mega);
.gform-dialog__content {
color: var(--gform-admin-color-grey-500);
}
.gform-dialog__footer {
padding-top: 32px;
}
}
&.gform-dialog--simplebar {
align-items: stretch;
display: flex;
flex-direction: column;
overflow-y: inherit;
padding: 0;
[data-simplebar="init"] {
box-sizing: border-box;
display: flex;
flex-grow: 1;
overflow-y: auto;
padding: 14px 25px 25px;
width: 100%;
}
.simplebar-content-wrapper {
border: 0;
outline: 0;
}
}
.gform-dialog__close {
inset-inline-end: 25px;
position: absolute;
top: 25px;
&.gform-button--size-xs {
height: 1.875rem;
width: 1.875rem;
.gform-button__icon {
top: 0;
}
}
&.gform-button--size-md {
height: 2.5rem;
inset-inline-end: 20px;
top: 20px;
width: 2.5rem;
.gform-button__icon {
top: 0;
}
}
}
.gform-dialog__close.gform-button--circular.gform-dialog__close--plain {
background: none;
border: none;
.gform-button__icon {
color: var(--gform-admin-color-white);
font-size: 2rem;
}
}
.gform-dialog__close.gform-button--unstyled.gform-button--size-md {
justify-content: flex-end;
}
.gform-dialog__close.gform-button--unstyled .gform-button__icon {
color: var(--gform-admin-color-comet);
}
.gform-dialog__head {
&.gform-dialog__head--with-divider {
border-bottom: 1px solid var(--gform-admin-color-secondary-border);
padding-bottom: 15px;
}
.gform-indicator {
position: absolute;
}
.gform-indicator--confirm {
inset-block-start: 28px;
}
}
.gform-dialog__title {
color: var(--gform-admin-color-port);
font-family: var(--gform-admin-font-family-base);
font-size: 1.1875rem;
font-weight: var(--gform-common-font-weight-medium);
line-height: initial;
margin: 10px 0 0 0;
padding-inline-end: 30px;
position: relative;
&.gform-dialog__title--has-icon {
padding-block-start: 6px;
padding-inline-start: 50px;
}
&.gform-dialog__title--icon-type-confirm {
padding-block-start: 0;
padding-inline-start: 30px;
}
}
&.gform-dialog--title-size-md {
.gform-dialog__title {
font-size: 1.5rem;
font-weight: var(--gform-common-font-weight-semibold);
}
}
.gform-dialog__description {
color: var(--gform-admin-color-comet);
display: inline-block;
font-family: var(--gform-admin-font-family-base);
font-size: 0.875rem;
font-weight: var(--gform-common-font-weight-normal);
line-height: initial;
margin: 0.75rem 0 0 0;
padding-inline-end: 30px;
position: relative;
&.gform-dialog__title--has-icon {
padding-inline-start: 50px;
}
}
.gform-dialog__title-icon {
font-size: 1.5rem;
inset-inline-start: 0;
position: absolute;
top: 3px;
}
.gform-dialog__content {
padding-bottom: 0;
padding-inline-start: 0;
padding-top: 10px;
&.gform-dialog__content--with-divider {
padding-top: 15px;
}
&.gform-dialog__content--pad-content {
padding-inline-end: 30px;
}
}
.gform-dialog__content,
.gform-dialog__content p {
color: var(--gform-admin-color-port);
font-family: var(--gform-admin-font-family-base);
font-size: 0.875rem;
line-height: 1.188rem;
}
.gform-dialog__footer {
align-items: center;
display: flex;
padding-top: 20px;
width: 100%;
}
.gform-dialog__confirm {
margin-inline-start: 12px;
&.gform-button--icon-leading .gform-button__icon {
font-size: 1.5rem;
}
}
}
.gform-dialog--full-screen {
height: calc(100vh - 40px);
max-width: 1280px;
overflow: auto;
padding: 0;
.gform-dialog__content {
margin: 0;
padding: 0;
}
}
}