@digdir/designsystemet-css/dist/src/dialog.css

CSS for Designsystemet

.ds-dialog{--dsc-dialog-backdrop-background:rgba(0,0,0,.5);--dsc-dialog-background:var(--ds-color-neutral-surface-default);--dsc-dialog-icon-spacing:var(--ds-size-3);--dsc-dialog-icon-url:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M6.53 5.47a.75.75 0 0 0-1.06 1.06L10.94 12l-5.47 5.47a.75.75 0 1 0 1.06 1.06L12 13.06l5.47 5.47a.75.75 0 1 0 1.06-1.06L13.06 12l5.47-5.47a.75.75 0 0 0-1.06-1.06L12 10.94z'/%3E%3C/svg%3E");--dsc-dialog-color:var(--ds-color-neutral-text-default);--dsc-dialog-divider-border-width:var(--ds-border-width-default);--dsc-dialog-divider-border-style:solid;--dsc-dialog-divider-border-color:var(--ds-color-neutral-border-subtle);--dsc-dialog-border-width:var(--ds-border-width-default);--dsc-dialog-border-style:solid;--dsc-dialog-border-color:var(--ds-color-neutral-border-subtle);--dsc-dialog-max-height:80vh;--dsc-dialog-max-width:40rem;--dsc-dialog-spacing:var(--ds-size-6);--_dsc-dialog-icon-top-right-margin:calc(var(--dsc-dialog-spacing)*-1 + var(--dsc-dialog-icon-spacing));animation:ds-dialog-fade-in .2s forwards;background:var(--dsc-dialog-background);border-color:var(--dsc-dialog-border-color);border-radius:var(--ds-border-radius-lg);border-style:var(--dsc-dialog-border-style);border-width:var(--dsc-dialog-border-width);bottom:auto;box-shadow:var(--ds-shadow-xl);box-sizing:border-box;color:var(--dsc-dialog-color);left:50%;margin:0;max-height:var(--dsc-dialog-max-height);max-width:var(--dsc-dialog-max-width);overflow:auto;padding:var(--dsc-dialog-spacing);position:fixed;right:auto;top:50%;transform:translate(-50%,-50%);width:100%}.ds-dialog::backdrop{animation:ds-dialog-fade-in .3s ease-in-out;background:var(--dsc-dialog-backdrop-background,rgba(0,0,0,.5))}.ds-dialog[open]{animation:ds-dialog-slide-in .3s ease-in-out,ds-dialog-fade-in .3s ease-in-out}.ds-dialog:has(>.ds-dialog__block){--_dsc-dialog-icon-top-right-margin:var(--dsc-dialog-icon-spacing);padding:0}@media (prefers-reduced-motion:reduce){.ds-dialog::backdrop,.ds-dialog[open]{animation:none}}@media (max-width:40rem){.ds-dialog{border-radius:0;max-width:100%;min-width:100%}}.ds-dialog button[data-command=close]:empty:before{background:currentcolor;content:"";height:var(--ds-size-6);-webkit-mask:center/contain no-repeat var(--dsc-dialog-icon-url);mask:center/contain no-repeat var(--dsc-dialog-icon-url);width:var(--ds-size-6)}@media (forced-colors:active){.ds-dialog button[data-command=close]:empty:before{background:ButtonText}}.ds-dialog>button[data-command=close]:first-child{color:inherit;float:inline-end;margin-block-end:var(--dsc-dialog-icon-spacing);margin-block-start:var(--_dsc-dialog-icon-top-right-margin);margin-inline-end:var(--_dsc-dialog-icon-top-right-margin);margin-inline-start:var(--dsc-dialog-icon-spacing)}.ds-dialog>form[method=dialog]:first-child>button:only-child{color:inherit;float:inline-end;margin-block-end:var(--dsc-dialog-icon-spacing);margin-block-start:var(--_dsc-dialog-icon-top-right-margin);margin-inline-end:var(--_dsc-dialog-icon-top-right-margin);margin-inline-start:var(--dsc-dialog-icon-spacing)}:is(.ds-dialog>form[method=dialog]:first-child>button:only-child):before{background:currentcolor;content:"";height:var(--ds-size-6);-webkit-mask:center/contain no-repeat var(--dsc-dialog-icon-url);mask:center/contain no-repeat var(--dsc-dialog-icon-url);width:var(--ds-size-6)}@media (forced-colors:active){:is(.ds-dialog>form[method=dialog]:first-child>button:only-child):before{background:ButtonText}}.ds-dialog__block{padding:var(--dsc-dialog-spacing)}.ds-dialog__block+.ds-dialog__block{border-top:var(--dsc-dialog-divider-border-width) var(--dsc-dialog-divider-border-style) var(--dsc-dialog-divider-border-color)}body:has(.ds-dialog:modal){overflow:hidden}@keyframes ds-dialog-slide-in{0%{translate:0 3rem}}@keyframes ds-dialog-fade-in{0%{opacity:0}}