sudovanilla-website/public/@shoelace-style/shoelace/cdn/chunks/chunk.ANN75NG2.js

129 lines
2.9 KiB
JavaScript
Raw Normal View History

2024-05-13 22:34:06 -05:00
import {
component_styles_default
} from "./chunk.K23QWHWK.js";
import {
i
} from "./chunk.CXZZ2LVK.js";
// src/components/tag/tag.styles.ts
var tag_styles_default = i`
${component_styles_default}
:host {
display: inline-block;
}
.tag {
display: flex;
align-items: center;
border: solid 1px;
line-height: 1;
white-space: nowrap;
user-select: none;
-webkit-user-select: none;
}
.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--primary:active > sl-icon-button {
color: var(--sl-color-primary-600);
}
.tag--success {
background-color: var(--sl-color-success-50);
border-color: var(--sl-color-success-200);
color: var(--sl-color-success-800);
}
.tag--success:active > sl-icon-button {
color: var(--sl-color-success-600);
}
.tag--neutral {
background-color: var(--sl-color-neutral-50);
border-color: var(--sl-color-neutral-200);
color: var(--sl-color-neutral-800);
}
.tag--neutral:active > sl-icon-button {
color: var(--sl-color-neutral-600);
}
.tag--warning {
background-color: var(--sl-color-warning-50);
border-color: var(--sl-color-warning-200);
color: var(--sl-color-warning-800);
}
.tag--warning:active > sl-icon-button {
color: var(--sl-color-warning-600);
}
.tag--danger {
background-color: var(--sl-color-danger-50);
border-color: var(--sl-color-danger-200);
color: var(--sl-color-danger-800);
}
.tag--danger:active > sl-icon-button {
color: var(--sl-color-danger-600);
}
/*
* 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--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--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 {
margin-inline-start: var(--sl-spacing-x-small);
}
/*
* Pill modifier
*/
.tag--pill {
border-radius: var(--sl-border-radius-pill);
}
`;
export {
tag_styles_default
};