98 lines
2 KiB
JavaScript
98 lines
2 KiB
JavaScript
|
import {
|
||
|
|
component_styles_default
|
||
|
|
} from "./chunk.K23QWHWK.js";
|
||
|
|
import {
|
||
|
|
i
|
||
|
|
} from "./chunk.CXZZ2LVK.js";
|
||
|
|
|
||
|
|
// src/components/progress-bar/progress-bar.styles.ts
|
||
|
|
var progress_bar_styles_default = i`
|
||
|
|
${component_styles_default}
|
||
|
|
|
||
|
|
: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;
|
||
|
|
-webkit-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);
|
||
|
|
}
|
||
|
|
|
||
|
|
.progress-bar--indeterminate.progress-bar--rtl .progress-bar__indicator {
|
||
|
|
animation-name: indeterminate-rtl;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (forced-colors: active) {
|
||
|
|
.progress-bar {
|
||
|
|
outline: solid 1px SelectedItem;
|
||
|
|
background-color: var(--sl-color-neutral-0);
|
||
|
|
}
|
||
|
|
|
||
|
|
.progress-bar__indicator {
|
||
|
|
outline: solid 1px SelectedItem;
|
||
|
|
background-color: SelectedItem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes indeterminate {
|
||
|
|
0% {
|
||
|
|
left: -50%;
|
||
|
|
width: 50%;
|
||
|
|
}
|
||
|
|
75%,
|
||
|
|
100% {
|
||
|
|
left: 100%;
|
||
|
|
width: 50%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes indeterminate-rtl {
|
||
|
|
0% {
|
||
|
|
right: -50%;
|
||
|
|
width: 50%;
|
||
|
|
}
|
||
|
|
75%,
|
||
|
|
100% {
|
||
|
|
right: 100%;
|
||
|
|
width: 50%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
`;
|
||
|
|
|
||
|
|
export {
|
||
|
|
progress_bar_styles_default
|
||
|
|
};
|