@visa/nova-styles/components/panel/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-panel-border-color:var(--palette-default-border);--v-panel-border-width:0px 0px 0px var(--size-scalable-1);--v-panel-box-shadow:0px 0px 0px 0px;--v-panel-block-size:100%;--v-panel-drop-shadow:drop-shadow(var(--elevation-large-offset-x) var(--elevation-large-offset-y) var(--elevation-large-blur-radius) var(--elevation-large-color));--v-panel-display:flex;--v-panel-header-margin-block-end:var(--size-scalable-16);--v-panel-inline-size:360px;--v-panel-padding:var(--size-scalable-24);--v-panel-position:relative;--v-panel-toggle-border-color:var(--palette-default-border);--v-panel-toggle-border-radius:var(--size-rounded-medium) 0 0 var(--size-rounded-medium);--v-panel-toggle-border-style:var(--v-button-default-border-style);--v-panel-toggle-border-width:1px;--v-panel-toggle-margin-block-start:var(--size-scalable-24);--v-panel-toggle-padding:var(--size-scalable-13)}}@layer components{.v-panel{block-size:var(--v-panel-block-size);inline-size:var(--v-panel-inline-size);max-block-size:100vh;max-inline-size:fit-content;min-block-size:var(--v-panel-block-size);min-inline-size:var(--v-panel-inline-size)}.v-panel:not(dialog){display:var(--v-panel-display);overflow:visible;position:var(--v-panel-position)}dialog.v-panel{background-color:var(--palette-default-transparent);border:0;display:none;filter:var(--v-panel-drop-shadow);margin:0;margin-inline-start:auto;margin-inline-end:0;padding:0}dialog.v-panel[open]{display:var(--v-panel-display)}dialog.v-panel::backdrop{background-color:var(--palette-default-transparent)}dialog.v-panel.v-panel-skrim::backdrop{background-color:var(--palette-default-overlay)}.v-panel-body{padding-block-end:var(--v-panel-padding);padding-inline:var(--v-panel-padding)}.v-panel header,.v-panel-header{margin-block-end:var(--v-panel-header-margin-block-end);padding-block-start:var(--v-panel-padding);padding-inline:var(--v-panel-padding)}.v-panel-content{min-block-size:100%;overflow-y:auto;--v-surface-border-radius:var(--size-rounded-none);--v-surface-border-size:var(--size-scalable-0);--v-surface-padding-block:var(--size-scalable-0);--v-surface-padding-inline:var(--size-scalable-0)}.v-panel-expandable .v-panel-content,.v-panel-responsive .v-panel-content{border-color:var(--v-panel-border-color);border-width:var(--v-panel-border-width)}.v-panel-expandable:has(.v-panel-toggle:not([aria-expanded=true])){--v-panel-inline-size:0}.v-panel-responsive{--v-panel-drop-shadow:drop-shadow()}.v-panel-tabs{padding-block-start:var(--v-panel-padding);padding-inline:var(--v-panel-padding)}.v-panel-toggle{border-width:var(--v-panel-toggle-border-width) 0 var(--v-panel-toggle-border-width) var(--v-panel-toggle-border-width);margin-block-start:var(--v-panel-toggle-margin-block-start);--v-button-default-padding-block:var(--v-panel-toggle-padding);--v-button-default-padding-inline:var(--v-panel-toggle-padding);--v-button-default-border-radius:var(--v-panel-toggle-border-radius)}.v-panel-expandable:not(.v-panel[open]) .v-panel-toggle{inset-inline-start:calc(-1*(var(--v-button-default-icon-size) + 2*var(--v-button-default-padding-inline)));position:absolute}@media(max-width: 360px){.v-panel{min-inline-size:0}.v-panel.v-panel-responsive.v-panel-expandable{max-inline-size:calc(100% - (var(--v-button-default-icon-size) + 2*var(--v-button-default-padding-inline)))}}}