@visa/nova-styles/components/checkbox/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 components{:root,.v-alternate{--v-checkbox-alignment:middle;--v-checkbox-gap:var(--size-scalable-2);--v-checkbox-group-gap:var(--size-scalable-4);--v-checkbox-outline-radius:calc(var(--v-checkbox-border-radius) * 4);--v-checkbox-indicator-background:var(--palette-default-surface-1);--v-checkbox-indicator-block-size:var(--size-responsive-18);--v-checkbox-color:var(--palette-default-active);--v-checkbox-border-radius:calc(var(--size-rounded-small) / 2);--v-checkbox-border-size:var(--theme-border-size);--v-checkbox-border-style:solid;--v-checkbox-indicator-foreground:var(--palette-default-surface-1);--v-checkbox-glow-color:var(--palette-default-transparent);--v-checkbox-glow-offset:var(--size-scalable-10);--v-checkbox-label-color:var(--palette-default-text);--v-checkbox-message-color:var(--palette-default-text-subtle);--v-checkbox-panel-border-color:var(--palette-default-active-subtle);--v-checkbox-panel-border-color-hover:var(--palette-default-active-hover);--v-checkbox-panel-border-color-focus:var(--palette-default-active-hover);--v-checkbox-panel-border-color-active:var(--palette-default-active-pressed);--v-checkbox-panel-border-color-disabled:var(--palette-default-disabled);--v-checkbox-panel-glow-offset:var(--size-responsive-8);--v-checkbox-panel-padding-inline:var(--size-responsive-18);--v-checkbox-panel-padding-block:var(--size-scalable-10);--v-checkbox-panel-border-size-highlight:var(--size-scalable-2);--v-checkbox-panel-group-gap:var(--size-scalable-8);--v-checkbox-hover-color:var(--palette-default-active-hover);--v-checkbox-hover-glow-color:var(--palette-default-surface-highlight);--v-checkbox-focus-color:var(--palette-default-active-hover);--v-checkbox-focus-glow-color:var(--palette-default-surface-highlight);--v-checkbox-active-color:var(--palette-default-active-pressed);--v-checkbox-active-glow-color:var(--palette-default-surface-lowlight);--v-checkbox-disabled-color:var(--palette-default-disabled);--v-checkbox-error-color:var(--palette-messaging-graphics-negative)}}@layer utilities{.v-screen-reader,.v-sr{clip:rect(0, 0, 0, 0);clip-path:inset(50%);height:1px;inset-inline-start:-100000px;overflow:hidden;position:absolute;inset-block-start:0;width:1px;z-index:-1;white-space:nowrap}}@layer components{.v-checkbox{align-items:center;appearance:none;background-color:var(--v-checkbox-indicator-background);block-size:var(--v-checkbox-indicator-block-size);border-color:var(--v-checkbox-color);border-radius:var(--v-checkbox-border-radius);border-style:var(--v-checkbox-border-style);border-width:var(--v-checkbox-border-size);box-shadow:0px 0px 0px var(--v-checkbox-glow-offset) var(--v-checkbox-glow-color);box-sizing:border-box;color:var(--v-checkbox-indicator-foreground);cursor:pointer;direction:ltr;display:inline-flex;flex-shrink:0;inline-size:var(--v-checkbox-indicator-block-size);justify-content:center;margin:var(--v-checkbox-glow-offset);outline-offset:var(--v-checkbox-glow-offset);position:relative}.v-checkbox:hover{--v-checkbox-glow-color:var(--v-checkbox-hover-glow-color);--v-checkbox-color:var(--v-checkbox-hover-color)}.v-checkbox:focus-visible{--v-checkbox-glow-color:var(--v-checkbox-focus-glow-color);--v-checkbox-color:var(--v-checkbox-focus-color)}.v-checkbox:focus-visible::after{transform:scale(1)}.v-checkbox:not(.v-radio):focus-visible{outline:none}.v-checkbox:active,.v-checkbox:has(+.v-label:active){--v-checkbox-glow-color:var(--v-checkbox-active-glow-color);--v-checkbox-color:var(--v-checkbox-active-color)}.v-label:not(.v-chip-selection):active .v-checkbox,.v-label:not(.v-chip-selection):active+.v-checkbox{--v-checkbox-glow-color:var(--v-checkbox-active-glow-color);--v-checkbox-color:var(--v-checkbox-active-color)}.v-checkbox::before{block-size:calc(.6666666667*var(--v-checkbox-indicator-block-size) - var(--v-checkbox-border-size)/2);border-block-end:var(--size-responsive-2) solid var(--v-checkbox-indicator-foreground);border-inline-end:var(--size-responsive-2) solid var(--v-checkbox-indicator-foreground);content:"";inline-size:calc(.3333333333*var(--v-checkbox-indicator-block-size) - var(--v-checkbox-border-size)/2);rotate:45deg;transform:scale(0);translate:0 -1px}.v-checkbox::after{block-size:calc(var(--v-checkbox-indicator-block-size) + var(--v-checkbox-glow-offset)*2 + var(--v-checkbox-border-size));border-color:var(--palette-default-active-pressed);border-radius:var(--v-checkbox-outline-radius);border-style:dashed;border-width:var(--theme-focus-outline-size);content:"";inline-size:calc(var(--v-checkbox-indicator-block-size) + var(--v-checkbox-glow-offset)*2 + var(--v-checkbox-border-size));position:absolute;transform:scale(0)}.v-checkbox.checked,.v-checkbox:checked{--v-checkbox-indicator-background:var(--v-checkbox-color)}.v-checkbox.checked::before,.v-checkbox:checked::before{transform:scale(1)}.v-checkbox[aria-invalid=true]:not(:disabled){--v-checkbox-color:var(--v-checkbox-error-color)}.v-checkbox:disabled{--v-checkbox-color:var(--v-checkbox-disabled-color);--v-checkbox-glow-color:var(--palette-default-transparent);cursor:default}.v-checkbox:disabled:checked:not(.v-radio){border-color:var(--palette-default-transparent)}.v-checkbox:disabled+.v-label{--v-label-color:var(--v-checkbox-disabled-color);cursor:default;pointer-events:none}fieldset>.v-flex-col,fieldset>.v-flex-row{gap:var(--v-checkbox-group-gap);margin-block:var(--v-checkbox-group-gap)}fieldset>.v-flex-col:has(.v-checkbox-panel),fieldset>.v-flex-row:has(.v-checkbox-panel){--v-checkbox-group-gap:var(--v-checkbox-panel-group-gap)}.v-checkbox.mixed,.v-checkbox[aria-checked=mixed],.v-checkbox[type=checkbox]:indeterminate{--v-checkbox-active-indicator-foreground:var(--v-checkbox-active-color)}.v-checkbox.mixed:not(:checked)::before,.v-checkbox[aria-checked=mixed]:not(:checked)::before,.v-checkbox[type=checkbox]:indeterminate:not(:checked)::before{align-self:center;block-size:0px;border-block-end:0;border-inline-end:0;border-radius:var(--v-checkbox-border-radius);border-top-color:var(--v-checkbox-color);border-top-style:solid;border-top-width:var(--v-checkbox-border-size);display:inline-flex;inline-size:10px;rotate:none;transform:scale(1);translate:none}.v-checkbox-panel{--v-checkbox-glow-offset:var(--v-checkbox-panel-glow-offset);--v-action-secondary-border-color:var(--v-checkbox-panel-border-color);--v-action-secondary-padding-block:calc(var(--v-checkbox-panel-padding-block) - var(--v-action-secondary-border-size));--v-action-secondary-padding-inline:calc(var(--v-checkbox-panel-padding-inline) - var(--v-checkbox-panel-glow-offset) - var(--v-action-secondary-border-size)) calc(var(--v-checkbox-panel-padding-inline) - var(--v-action-secondary-border-size))}.v-checkbox-panel .v-input-message{user-select:none}.v-checkbox-panel:has(.v-radio:only-of-type:hover),.v-checkbox-panel:has(.v-checkbox:only-of-type:hover),.v-checkbox-panel:hover{--v-action-secondary-border-color:var(--v-checkbox-panel-border-color-hover);--v-action-secondary-border-size:var(--v-checkbox-panel-border-size-highlight)}.v-checkbox-panel:has(.v-radio:only-of-type:focus-visible),.v-checkbox-panel:has(.v-checkbox:only-of-type:focus-visible),.v-checkbox-panel:focus-visible{--v-action-secondary-border-color:var(--v-checkbox-panel-border-color-focus);--v-action-secondary-border-size:var(--v-checkbox-panel-border-size-highlight)}.v-checkbox-panel:has(.v-radio:only-of-type:active),.v-checkbox-panel:has(.v-checkbox:only-of-type:active),.v-checkbox-panel:active{--v-action-secondary-border-color:var(--v-checkbox-panel-border-color-active);--v-action-secondary-border-size:var(--v-checkbox-panel-border-size-highlight)}.v-checkbox-panel:has(.v-radio:only-of-type:disabled),.v-checkbox-panel:has(.v-checkbox:only-of-type:disabled),.v-checkbox-panel:disabled{--v-action-secondary-border-color:var(--v-checkbox-panel-border-color-disabled);pointer-events:none}.v-checkbox-panel.v-label .v-input-message{white-space:normal}}