kopia lustrzana https://github.com/shoelace-style/shoelace
58 wiersze
1.3 KiB
TypeScript
58 wiersze
1.3 KiB
TypeScript
import { css } from 'lit';
|
|
import componentStyles from '~/styles/component.styles';
|
|
|
|
export default css`
|
|
${componentStyles}
|
|
|
|
:host {
|
|
--height: 1rem;
|
|
--track-color: var(--sl-color-neutral-200);
|
|
--indicator-color: var(--sl-color-primary-600);
|
|
--label-color: var(--sl-color-neutral-0);
|
|
|
|
display: block;
|
|
}
|
|
|
|
.progress-bar {
|
|
position: relative;
|
|
background-color: var(--track-color);
|
|
height: var(--height);
|
|
border-radius: var(--sl-border-radius-pill);
|
|
box-shadow: inset var(--sl-shadow-small);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-bar__indicator {
|
|
height: 100%;
|
|
font-family: var(--sl-font-sans);
|
|
font-size: 12px;
|
|
font-weight: var(--sl-font-weight-normal);
|
|
background-color: var(--indicator-color);
|
|
color: var(--label-color);
|
|
text-align: center;
|
|
line-height: var(--height);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
transition: 400ms width, 400ms background-color;
|
|
user-select: none;
|
|
}
|
|
|
|
/* Indeterminate */
|
|
.progress-bar--indeterminate .progress-bar__indicator {
|
|
position: absolute;
|
|
animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);
|
|
}
|
|
|
|
@keyframes indeterminate {
|
|
0% {
|
|
left: -50%;
|
|
width: 50%;
|
|
}
|
|
75%,
|
|
100% {
|
|
left: 100%;
|
|
width: 50%;
|
|
}
|
|
}
|
|
`;
|