@itwin/itwinui-css/css/dialog.css

CSS library for building beautiful and well working web UI components within Bentley Systems & iTwin.js applications.

/*---------------------------------------------------------------------------------------------
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
.iui-dialog-wrapper{pointer-events:none;z-index:999;isolation:isolate;block-size:100%;inline-size:100%;position:fixed;inset-block-start:0;inset-inline-start:0;overflow:hidden;transform:translate(0)}.iui-dialog-wrapper[data-iui-relative=true]{position:absolute}.iui-dialog{z-index:999;isolation:isolate;border-radius:var(--iui-border-radius-1);box-shadow:var(--iui-shadow-5);padding-block:var(--iui-size-s);padding-inline:var(--iui-size-m);pointer-events:auto;background-color:var(--iui-color-background);transition:visibility var(--iui-duration-0)linear var(--iui-duration-1),opacity var(--iui-duration-1)ease-out;flex-direction:column;display:flex;position:fixed}@media (forced-colors:active){.iui-dialog{border:1px solid}}.iui-dialog:not(.iui-dialog-visible){visibility:hidden;opacity:0}.iui-dialog.iui-dialog-visible{animation:iui-fade-in var(--iui-duration-1)ease-out}@keyframes iui-slide-up{0%{transform:translateY(100%)}}.iui-dialog-default{min-block-size:7.75rem;max-block-size:100vh;min-inline-size:min(100%,380px);max-inline-size:max(50%,380px);max-block-size:100dvh}.iui-dialog-default:not([data-iui-placement]){inset-block-start:33%;inset-inline-start:50%;transform:translate(-50%,-33%)}.iui-dialog-default[data-iui-placement=top-left]{margin-block-start:var(--iui-size-m);margin-inline-start:var(--iui-size-s);inset-block-start:0;inset-inline-start:0}.iui-dialog-default[data-iui-placement=top-right]{margin-block-start:var(--iui-size-m);margin-inline-end:var(--iui-size-s);inset-block-start:0;inset-inline-end:0}.iui-dialog-default[data-iui-placement=bottom-left]{margin-block-end:var(--iui-size-m);margin-inline-start:var(--iui-size-s);inset-block-end:0;inset-inline-start:0}.iui-dialog-default[data-iui-placement=bottom-right]{margin-block-end:var(--iui-size-m);margin-inline-end:var(--iui-size-s);inset-block-end:0;inset-inline-end:0}.iui-dialog-full-page{block-size:100vh;block-size:100dvb;inline-size:100vw;will-change:transform;border-radius:0;inline-size:100vi;inset-block-start:0;inset-inline-start:0}.iui-dialog-full-page:not(.iui-dialog-visible){transform:translateY(100%)}@media (prefers-reduced-motion:no-preference){.iui-dialog-full-page{transition:visibility var(--iui-duration-0)linear var(--iui-duration-2),opacity var(--iui-duration-0)linear var(--iui-duration-2),transform var(--iui-duration-1)ease-in}.iui-dialog-full-page.iui-dialog-visible{animation:iui-slide-up var(--iui-duration-2)ease-out,iui-fade-in var(--iui-duration-2)ease-out}}.iui-dialog-draggable{border:1px solid var(--iui-color-border)}.iui-dialog-title{margin-inline-end:auto}.iui-dialog-title-bar{font-size:var(--iui-font-size-3);align-items:center;margin-block-end:var(--iui-size-s);display:flex}.iui-dialog-title-bar-filled{font-size:var(--iui-font-size-2);padding-block:calc(var(--iui-size-s)*.5);padding-inline:var(--iui-size-m);margin-inline:calc(0px - var(--iui-size-m));margin-block:calc(0px - var(--iui-size-s))var(--iui-size-s);cursor:grab;background-color:var(--iui-color-background-backdrop);border-block-end:1px solid var(--iui-color-border);border-start-start-radius:var(--iui-border-radius-1);border-start-end-radius:var(--iui-border-radius-1)}.iui-dialog-title-bar-filled:active{cursor:grabbing}.iui-dialog-content{margin-inline:calc(0px - var(--iui-size-m));padding-inline:var(--iui-size-m);flex-grow:2;overflow-y:auto}.iui-dialog-button-bar{justify-content:flex-end;align-items:center;gap:var(--iui-size-xs);margin-block-start:var(--iui-size-s);display:flex}