Thomas des Francs
112 lines
2.2 KiB
SCSS
112 lines
2.2 KiB
SCSS
.chip {
|
|
--chip-horizontal-padding: var(--t-spacing-1);
|
|
--chip-vertical-padding: var(--t-spacing-1);
|
|
|
|
// Height and max-width are sized against the content box.
|
|
box-sizing: content-box;
|
|
text-decoration: none;
|
|
align-items: center;
|
|
cursor: inherit;
|
|
display: inline-flex;
|
|
justify-content: flex-start;
|
|
gap: var(--t-spacing-1);
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
padding: var(--chip-vertical-padding) var(--chip-horizontal-padding);
|
|
user-select: none;
|
|
font-weight: inherit;
|
|
background-color: inherit;
|
|
border: none;
|
|
border-radius: var(--t-border-radius-sm-round);
|
|
corner-shape: round;
|
|
|
|
& > svg {
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
|
|
.sizeLarge {
|
|
height: var(--t-spacing-4);
|
|
}
|
|
|
|
.sizeSmall {
|
|
height: var(--t-spacing-3);
|
|
}
|
|
|
|
.accentTextPrimary {
|
|
color: var(--t-font-color-primary);
|
|
}
|
|
|
|
.accentTextSecondary {
|
|
color: var(--t-font-color-secondary);
|
|
}
|
|
|
|
// Disabled color wins over accent colors, matching the Linaria ternary order.
|
|
.disabled {
|
|
color: var(--t-font-color-light);
|
|
}
|
|
|
|
.fontMedium {
|
|
font-weight: var(--t-font-weight-medium);
|
|
}
|
|
|
|
.cursorPointer {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.cursorNotAllowed {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.backgroundHighlighted {
|
|
background-color: var(--t-background-transparent-light);
|
|
|
|
&:hover {
|
|
background-color: var(--t-background-transparent-medium);
|
|
}
|
|
|
|
&:active {
|
|
background-color: var(--t-background-transparent-strong);
|
|
}
|
|
}
|
|
|
|
.backgroundStatic {
|
|
background-color: var(--t-background-transparent-light);
|
|
|
|
&:hover {
|
|
background-color: var(--t-background-transparent-light);
|
|
}
|
|
|
|
&:active {
|
|
background-color: var(--t-background-transparent-light);
|
|
}
|
|
}
|
|
|
|
// Applied only when variant is regular, clickable and not disabled.
|
|
.interactiveRegular {
|
|
&:hover {
|
|
background-color: var(--t-background-transparent-light);
|
|
}
|
|
|
|
&:active {
|
|
background-color: var(--t-background-transparent-medium);
|
|
}
|
|
}
|
|
|
|
.hasMaxWidth {
|
|
max-width: calc(var(--chip-max-width) - 2 * var(--chip-horizontal-padding));
|
|
}
|
|
|
|
.paddingLeftNone {
|
|
padding-left: var(--t-spacing-0);
|
|
}
|
|
|
|
.emptyLabel {
|
|
color: var(--t-font-color-tertiary);
|
|
}
|
|
|
|
.rightComponentDivider {
|
|
align-self: stretch;
|
|
border-left: 1px solid var(--t-border-color-light);
|
|
}
|