nishant-design-system
Version:
Sense UI components library
37 lines (32 loc) • 1.17 kB
CSS
@value (colorBackgroundTertiary, colorFillPrimary, colorBorderSecondary, colorFocusPrimary) from '../../styles/variables/_color.css';
@value (borderRadiusMedium, borderWidthNone, borderWidthTertiary) from '../../styles/variables/_border.css';
@value (spaceSmall, spaceMedium, spaceLarge) from '../../styles/variables/_space.css';
.cardWrapper {
--card-padding-top: spaceMedium;
--card-padding-right: spaceMedium;
--card-padding-bottom: spaceMedium;
--card-padding-left: spaceMedium;
display: flex;
composes: borderPrimary from '../../styles/border.module.css';
background-color: colorBackgroundTertiary;
border-radius: borderRadiusMedium;
padding-top: var(--card-padding-top);
padding-right: var(--card-padding-right);
padding-bottom: var(--card-padding-bottom);
padding-left: var(--card-padding-left);
}
.clickableCard {
cursor: pointer;
outline: none;
}
.clickableCard.disabled {
pointer-events: none;
}
.clickableCard:hover {
border-color: colorBorderSecondary;
}
.clickableCard:focus-within {
border-color: colorFillPrimary;
box-shadow: borderWidthNone borderWidthNone borderWidthNone
borderWidthTertiary colorFocusPrimary;
}