@visa/nova-styles/base/elevation/index.css

Visa Product Design System Nova HTML+CSS library

/**
 *              Copyright (c) 2025 Visa, Inc.
 *
 * 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 base{:root{--elevation-offset-x: 0;--elevation-offset-y: 0;--elevation-blur-radius: 0;--elevation-spread: 0;--elevation-color: var(--palette-default-transparent)}}@layer base{.v-elevation,.v-elevation-xxlarge,.v-elevation-xlarge,.v-elevation-large,.v-elevation-medium,.v-elevation-small,.v-elevation-xsmall,.v-elevation-inset,.v-elevation-none{box-shadow:var(--elevation-offset-x) var(--elevation-offset-y) var(--elevation-blur-radius) var(--elevation-spread) var(--elevation-color)}:root{--elevation-none-offset-x: 0;--elevation-none-offset-y: 0;--elevation-none-blur-radius: 0;--elevation-none-spread: 0;--elevation-none-color: var(--palette-default-transparent);--elevation-none: var(--elevation-none-offset-x) var(--elevation-none-offset-y) var(--elevation-none-blur-radius) var(--elevation-none-spread) var(--elevation-none-color);--elevation-inset-offset-x: 0;--elevation-inset-offset-y: 0;--elevation-inset-blur-radius: 4px;--elevation-inset-spread: 0;--elevation-inset-color: var(--palette-default-disabled);--elevation-inset: inset var(--elevation-inset-offset-x) var(--elevation-inset-offset-y) var(--elevation-inset-blur-radius) var(--elevation-inset-spread) var(--elevation-inset-color);--elevation-xsmall-offset-x: 0;--elevation-xsmall-offset-y: 1px;--elevation-xsmall-blur-radius: 3px;--elevation-xsmall-spread: 0;--elevation-xsmall-color: var(--palette-default-disabled);--elevation-xsmall: var(--elevation-xsmall-offset-x) var(--elevation-xsmall-offset-y) var(--elevation-xsmall-blur-radius) var(--elevation-xsmall-spread) var(--elevation-xsmall-color);--elevation-small-offset-x: 0;--elevation-small-offset-y: 2px;--elevation-small-blur-radius: 6px;--elevation-small-spread: -1px;--elevation-small-color: var(--palette-default-disabled);--elevation-small: var(--elevation-small-offset-x) var(--elevation-small-offset-y) var(--elevation-small-blur-radius) var(--elevation-small-spread) var(--elevation-small-color);--elevation-medium-offset-x: 0;--elevation-medium-offset-y: 4px;--elevation-medium-blur-radius: 15px;--elevation-medium-spread: -1px;--elevation-medium-color: var(--palette-default-disabled);--elevation-medium: var(--elevation-medium-offset-x) var(--elevation-medium-offset-y) var(--elevation-medium-blur-radius) var(--elevation-medium-spread) var(--elevation-medium-color);--elevation-large-offset-x: 0;--elevation-large-offset-y: 10px;--elevation-large-blur-radius: 18px;--elevation-large-spread: -3px;--elevation-large-color: var(--palette-default-disabled);--elevation-large: var(--elevation-large-offset-x) var(--elevation-large-offset-y) var(--elevation-large-blur-radius) var(--elevation-large-spread) var(--elevation-large-color);--elevation-xlarge-offset-x: 0;--elevation-xlarge-offset-y: 20px;--elevation-xlarge-blur-radius: 25px;--elevation-xlarge-spread: -5px;--elevation-xlarge-color: var(--palette-default-disabled);--elevation-xlarge: var(--elevation-xlarge-offset-x) var(--elevation-xlarge-offset-y) var(--elevation-xlarge-blur-radius) var(--elevation-xlarge-spread) var(--elevation-xlarge-color);--elevation-xxlarge-offset-x: 0;--elevation-xxlarge-offset-y: 25px;--elevation-xxlarge-blur-radius: 50px;--elevation-xxlarge-spread: -12px;--elevation-xxlarge-color: var(--palette-default-disabled);--elevation-xxlarge: var(--elevation-xxlarge-offset-x) var(--elevation-xxlarge-offset-y) var(--elevation-xxlarge-blur-radius) var(--elevation-xxlarge-spread) var(--elevation-xxlarge-color)}}@layer utilities{.v-elevation-none{--elevation-offset-x: var(--elevation-none-offset-x);--elevation-offset-y: var(--elevation-none-offset-y);--elevation-blur-radius: var(--elevation-none-blur-radius);--elevation-spread: var(--elevation-none-spread);--elevation-color: var(--elevation-none-color)}.v-elevation-inset{--elevation-offset-x: var(--elevation-inset-offset-x);--elevation-offset-y: var(--elevation-inset-offset-y);--elevation-blur-radius: var(--elevation-inset-blur-radius);--elevation-spread: var(--elevation-inset-spread);--elevation-color: var(--elevation-inset-color)}.v-elevation-xsmall{--elevation-offset-x: var(--elevation-xsmall-offset-x);--elevation-offset-y: var(--elevation-xsmall-offset-y);--elevation-blur-radius: var(--elevation-xsmall-blur-radius);--elevation-spread: var(--elevation-xsmall-spread);--elevation-color: var(--elevation-xsmall-color)}.v-elevation-small{--elevation-offset-x: var(--elevation-small-offset-x);--elevation-offset-y: var(--elevation-small-offset-y);--elevation-blur-radius: var(--elevation-small-blur-radius);--elevation-spread: var(--elevation-small-spread);--elevation-color: var(--elevation-small-color)}.v-elevation-medium{--elevation-offset-x: var(--elevation-medium-offset-x);--elevation-offset-y: var(--elevation-medium-offset-y);--elevation-blur-radius: var(--elevation-medium-blur-radius);--elevation-spread: var(--elevation-medium-spread);--elevation-color: var(--elevation-medium-color)}.v-elevation-large{--elevation-offset-x: var(--elevation-large-offset-x);--elevation-offset-y: var(--elevation-large-offset-y);--elevation-blur-radius: var(--elevation-large-blur-radius);--elevation-spread: var(--elevation-large-spread);--elevation-color: var(--elevation-large-color)}.v-elevation-xlarge{--elevation-offset-x: var(--elevation-xlarge-offset-x);--elevation-offset-y: var(--elevation-xlarge-offset-y);--elevation-blur-radius: var(--elevation-xlarge-blur-radius);--elevation-spread: var(--elevation-xlarge-spread);--elevation-color: var(--elevation-xlarge-color)}.v-elevation-xxlarge{--elevation-offset-x: var(--elevation-xxlarge-offset-x);--elevation-offset-y: var(--elevation-xxlarge-offset-y);--elevation-blur-radius: var(--elevation-xxlarge-blur-radius);--elevation-spread: var(--elevation-xxlarge-spread);--elevation-color: var(--elevation-xxlarge-color)}}