kopia lustrzana https://github.com/shoelace-style/shoelace
112 wiersze
2.7 KiB
TypeScript
112 wiersze
2.7 KiB
TypeScript
import { css } from 'lit';
|
|
import componentStyles from '../../styles/component.styles';
|
|
|
|
export default css`
|
|
${componentStyles}
|
|
|
|
:host {
|
|
display: inline-block;
|
|
}
|
|
|
|
.tag {
|
|
display: flex;
|
|
align-items: center;
|
|
border: solid 1px;
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
user-select: none;
|
|
cursor: default;
|
|
}
|
|
|
|
.tag__remove::part(base) {
|
|
color: inherit;
|
|
padding: 0;
|
|
}
|
|
|
|
/*
|
|
* Variant modifiers
|
|
*/
|
|
|
|
.tag--primary {
|
|
background-color: var(--sl-color-primary-50);
|
|
border-color: var(--sl-color-primary-200);
|
|
color: var(--sl-color-primary-800);
|
|
}
|
|
|
|
.tag--success {
|
|
background-color: var(--sl-color-success-50);
|
|
border-color: var(--sl-color-success-200);
|
|
color: var(--sl-color-success-800);
|
|
}
|
|
|
|
.tag--neutral {
|
|
background-color: var(--sl-color-neutral-50);
|
|
border-color: var(--sl-color-neutral-200);
|
|
color: var(--sl-color-neutral-800);
|
|
}
|
|
|
|
.tag--warning {
|
|
background-color: var(--sl-color-warning-50);
|
|
border-color: var(--sl-color-warning-200);
|
|
color: var(--sl-color-warning-800);
|
|
}
|
|
|
|
.tag--danger {
|
|
background-color: var(--sl-color-danger-50);
|
|
border-color: var(--sl-color-danger-200);
|
|
color: var(--sl-color-danger-800);
|
|
}
|
|
|
|
/*
|
|
* Size modifiers
|
|
*/
|
|
|
|
.tag--small {
|
|
font-size: var(--sl-button-font-size-small);
|
|
height: calc(var(--sl-input-height-small) * 0.8);
|
|
line-height: calc(var(--sl-input-height-small) - var(--sl-input-border-width) * 2);
|
|
border-radius: var(--sl-input-border-radius-small);
|
|
padding: 0 var(--sl-spacing-x-small);
|
|
}
|
|
|
|
.tag--small .tag__remove {
|
|
margin-left: var(--sl-spacing-2x-small);
|
|
margin-right: calc(-1 * var(--sl-spacing-3x-small));
|
|
}
|
|
|
|
.tag--medium {
|
|
font-size: var(--sl-button-font-size-medium);
|
|
height: calc(var(--sl-input-height-medium) * 0.8);
|
|
line-height: calc(var(--sl-input-height-medium) - var(--sl-input-border-width) * 2);
|
|
border-radius: var(--sl-input-border-radius-medium);
|
|
padding: 0 var(--sl-spacing-small);
|
|
}
|
|
|
|
.tag__remove {
|
|
margin-left: var(--sl-spacing-2x-small);
|
|
margin-right: calc(-1 * var(--sl-spacing-2x-small));
|
|
}
|
|
|
|
.tag--large {
|
|
font-size: var(--sl-button-font-size-large);
|
|
height: calc(var(--sl-input-height-large) * 0.8);
|
|
line-height: calc(var(--sl-input-height-large) - var(--sl-input-border-width) * 2);
|
|
border-radius: var(--sl-input-border-radius-large);
|
|
padding: 0 var(--sl-spacing-medium);
|
|
}
|
|
|
|
.tag__remove {
|
|
font-size: 1.4em;
|
|
margin-left: var(--sl-spacing-2x-small);
|
|
margin-right: calc(-1 * var(--sl-spacing-x-small));
|
|
}
|
|
|
|
/*
|
|
* Pill modifier
|
|
*/
|
|
|
|
.tag--pill {
|
|
border-radius: var(--sl-border-radius-pill);
|
|
}
|
|
`;
|