@visa/nova-styles/components/dialog/index.css

Visa Product Design System Nova HTML+CSS library

/**
 *              © 2025-2026 Visa
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *         http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 **/
@layer components{:root,.v-alternate{--v-dialog-background-color:var(--palette-default-surface-1);--v-dialog-header-padding-block:0 var(--size-scalable-8);--v-dialog-content-padding-block:0;--v-dialog-content-padding-inline:0;--v-dialog-content-word-break:normal;--v-dialog-padding:var(--size-scalable-24);--v-dialog-padding-inline-end:var(--size-scalable-22);--v-dialog-padding-block-end:var(--size-scalable-19);--v-dialog-margin:var(--size-scalable-16)}}@layer components{.v-dialog{max-block-size:calc(100% - 2*var(--v-dialog-margin));--v-message-max-inline-size:var(--v-dialog-inline-size, calc(100% - 2 * var(--v-dialog-margin)))}.v-dialog-default{--v-message-border-color:rgba(0,0,0,0)}.v-dialog-header{--typography-font-family:var(--typography-headline-3-font-family);--typography-font-size:var(--typography-headline-3-font-size);--typography-font-weight:var(--typography-headline-3-font-weight);--typography-letter-spacing:var(--typography-headline-3-letter-spacing);--typography-line-height:var(--typography-headline-3-line-height);--typography-text-decoration:var(--typography-headline-3-text-decoration);--typography-text-transform:var(--typography-headline-3-text-transform);font-family:var(--typography-font-family);font-size:var(--typography-font-size);font-weight:var(--typography-font-weight);letter-spacing:var(--typography-letter-spacing);line-height:var(--typography-line-height);text-decoration:var(--typography-text-decoration);text-transform:var(--typography-text-transform);padding-block:var(--v-dialog-header-padding-block)}.v-dialog:not([open]){display:none}.v-dialog[open]{--v-message-border-block-start-size:0px;--v-message-border-inline-end-size:0px;--v-message-border-inline-start-size:0px;--v-message-border-radius:var(--size-rounded-large);--v-message-elevation:var(--elevation-xxlarge);--v-message-gap:0px;--v-message-padding-block-end:var(--v-dialog-padding-block-end);--v-message-padding-block-start:var(--v-dialog-padding);--v-message-padding-inline-end:var(--v-dialog-padding-inline-end);--v-message-padding-inline-start:var(--v-dialog-padding);--v-message-background:var(--v-dialog-background-color)}.v-dialog[open] .v-message-content{--typography-font-family:var(--typography-body-2-font-family);--typography-font-size:var(--typography-body-2-font-size);--typography-font-weight:var(--typography-body-2-font-weight);--typography-letter-spacing:var(--typography-body-2-letter-spacing);--typography-line-height:var(--typography-body-2-line-height);--typography-text-decoration:var(--typography-body-2-text-decoration);--typography-text-transform:var(--typography-body-2-text-transform);font-family:var(--typography-font-family);font-size:var(--typography-font-size);font-weight:var(--typography-font-weight);letter-spacing:var(--typography-letter-spacing);line-height:var(--typography-line-height);text-decoration:var(--typography-text-decoration);text-transform:var(--typography-text-transform);--v-message-text:var(--palette-default-text);overflow-y:auto;padding-block:var(--v-dialog-content-padding-block);padding-inline:var(--v-dialog-content-padding-inline);word-break:var(--v-dialog-content-word-break)}.v-dialog[open] dialog::backdrop{background:var(--palette-default-overlay)}@media(prefers-contrast: more)and (forced-colors: active){.v-dialog[open]{--v-message-border-block-end-size:var(--size-scalable-1);--v-message-border-block-start-size:var(--size-scalable-1);--v-message-border-inline-end-size:var(--size-scalable-1);--v-message-border-inline-start-size:var(--size-scalable-1)}}}