Cards
Installation
yarn add @chewy/kib-cards-stylesImport
@use '../../styles/mixins' as common;Mixins
card-interactive-forced-colors
@mixin card-interactive-forced-colors($hover-not) { ... }@mixin card-interactive-forced-colors($hover-not) { @media (forced-colors: active) { box-shadow: none !important; border: 1px solid CanvasText; background-color: Canvas; &:focus-visible { border-color: Highlight; outline: 2px solid Highlight; outline-offset: 2px; } @media (hover: hover) and (pointer: fine) { &:hover:not(#{$hover-not}):not(:active):not(:focus-visible) { border-color: Highlight !important; background-color: Canvas !important; } } } }
Description
Base interactive card forced-colors treatment (default + focus + hover)
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$hover-not | Selector to exclude from HCM hover (default | String | — none |
card-interactive-disabled-hcm
@mixin card-interactive-disabled-hcm() { ... }@mixin card-interactive-disabled-hcm() { @include card.card-interactive-disabled; @media (forced-colors: active) { border-color: GrayText; opacity: 1; } }
Description
Base interactive card disabled treatment (opacity + HCM)
Parameters
None.