v4web-components
Version:
Stencil Component Starter
71 lines (59 loc) • 2.64 kB
CSS
.v4-quantify {
display: flex;
align-items: center;
gap: var(--lab-ds-semantic-selectable-space-gap-s);
}
.v4-quantify button {
padding: var(--lab-ds-semantic-selectable-space-padding-sm);
cursor: pointer;
color: var(--lab-ds-semantic-color-fg-default);
outline: none;
background-color: var(--lab-ds-semantic-selectable-color-bg-default);
border-radius: var(--lab-ds-semantic-selectable-border-radius-xs);
border: var(--lab-ds-semantic-selectable-border-width-s) solid var(--lab-ds-semantic-selectable-color-border-default);
}
.v4-quantify-counter {
display: flex;
text-align: center;
justify-content: center;
padding-top: var(--lab-ds-semantic-selectable-space-padding-sm);
padding-bottom: var(--lab-ds-semantic-selectable-space-padding-sm);
padding-left: var(--lab-ds-semantic-selectable-space-padding-s);
padding-right: var(--lab-ds-semantic-selectable-space-padding-s);
gap: var(--lab-ds-semantic-selectable-space-gap-xs);
font: var(--lab-ds-semantic-typography-body-none-decoration-p2-regular);
color: var(--lab-ds-semantic-color-fg-default);
min-width: 5.313rem;
background-color: var(--lab-ds-semantic-selectable-color-bg-default);
border-radius: var(--lab-ds-semantic-selectable-border-radius-xs);
border: var(--lab-ds-semantic-selectable-border-width-s) solid var(--lab-ds-semantic-selectable-color-border-default);
}
.v4-quantify-option-divides {
color: var(--lab-ds-semantic-color-fg-disabled);
}
.v4-quantify-option-max-item {
color: var(--lab-ds-semantic-color-fg-disabled);
}
.v4-quantify button:hover {
background-color: var(--lab-ds-semantic-selectable-color-bg-hover);
border-color: var(--lab-ds-semantic-selectable-color-border-default);
}
.v4-quantify button:active {
background-color: var(--lab-ds-semantic-selectable-color-bg-default);
border-color: var(--lab-ds-semantic-selectable-color-primary-press);
color: var(--lab-ds-semantic-selectable-color-primary-press);
outline: none;
}
.v4-quantify button:focus {
outline-style: solid;
outline-offset: var(--lab-ds-semantic-selectable-space-padding-xxs);
outline-color: var(--lab-ds-semantic-selectable-color-primary-focus);
outline-width: var(--lab-ds-semantic-selectable-border-width-s);
background-color: var(--lab-ds-semantic-selectable-color-bg-default);
}
.v4-quantify button:disabled {
background-color: var(--lab-ds-semantic-selectable-color-bg-disabled);
border-color: var(--lab-ds-semantic-selectable-color-border-disabled);
color: var(--lab-ds-semantic-color-fg-disabled);
cursor: not-allowed;
}