// Copyright (c) 2024 Xu Shaohua <shaohua@biofan.org>. All rights reserved.
// Use of this source is governed by Lesser General Public License
// that can be found in the LICENSE file.
/* Styles for Linear Progress */
/* Styles applied to the root element. */
.ZuLinearProgress-root {
position: relative;
overflow: hidden;
display: block;
height: 4px;
/* Fix Safari's bug during composition of different paint. */
z-index: 0;
}
@media print {
.ZuLinearProgress-root {
color-adjust: exact;
}
}
/* Styles applied to the root and bar2 element if color="primary"; bar2 if variant="buffer". */
.ZuLinearProgress-colorPrimary {
/* TODO(Shaohua): Adjust alpha value. */
background-color: var(--zu-palette-primary-main);
}
/* Styles applied to the root and bar2 elements if color="secondary"; bar2 if variant="buffer". */
.ZuLinearProgress-colorSecondary {
/* TODO(Shaohua): Adjust alpha value. */
background-color: var(--zu-palette-secondary-main);
}
.ZuLinearProgress-colorInherit {
}
/* Styles applied to the root element if variant="determinate". */
.ZuLinearProgress-determinate {
}
/* Styles applied to the root element if variant="indeterminate". */
.ZuLinearProgress-indeterminate {
}
/* Styles applied to the root element if variant="buffer". */
.ZuLinearProgress-buffer {
background-color: transparent;
}
.ZuLinearProgress-colorInherit.ZuLinearProgress-noBuffer {
background-color: transparent;
}
.ZuLinearProgress-colorInherit.ZuLinearProgress-noBuffer::before {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: currentColor;
opacity: 0.3;
}
/* Styles applied to the root element if variant="query". */
.ZuLinearProgress-query {
transform: rotate(180deg);
}
/* Styles applied to the additional bar element if variant="buffer". */
.ZuLinearProgress-dashed {
position: absolute;
margin-top: 0;
height: 100%;
width: 100%;
background-size: 10px 10px;
background-position: 0 -23px;
background-image: radial-gradient(
var(--background-color) 0%,
var(--background-color) 16%,
transparent 42%);
background-color: var(--background-color);
}
/* Styles applied to the additional bar element if variant="buffer" and color="primary". */
.ZuLinearProgress-dashedColorPrimary {
--background-color: var(--zu-palette-primary-main);
}
/* Styles applied to the additional bar element if variant="buffer" and color="secondary". */
.ZuLinearProgress-dashedColorSecondary {
--background-color: var(--zu-palette-secondary-main);
}
.ZuLinearProgress-dashedColorInherit {
--background-color: currentColor;
}
/* Styles applied to the layered bar1 and bar2 elements. */
.ZuLinearProgress-bar1 {
position: absolute;
left: 0;
top: 0;
bottom: 0;
transition: transform 0.2s linear;
transform-origin: left;
width: 100%;
}
.ZuLinearProgress-bar2 {
}
/* Styles applied to the bar elements if color="primary"; bar2 if variant not "buffer". */
.ZuLinearProgress-barColorPrimary {
}
/* Styles applied to the bar elements if color="secondary"; bar2 if variant not "buffer". */
.ZuLinearProgress-barColorSecondary {
}
/* Styles applied to the bar1 element if variant="indeterminate or query". */
.ZuLinearProgress-bar1Indeterminate {
}
/* Styles applied to the bar1 element if variant="determinate". */
.ZuLinearProgress-bar1Determinate {
}
/* Styles applied to the bar1 element if variant="buffer". */
.ZuLinearProgress-bar1Buffer {
}
/* Styles applied to the bar2 element if variant="indeterminate or query". */
.ZuLinearProgress-bar2Indeterminate {
}
/* Styles applied to the bar2 element if variant="buffer". */
.ZuLinearProgress-bar2Buffer {
}
@keyframes zu-linear-progress-indeterminate1Keyframe {
0% {
left: -35%;
right: 100%;
}
60% {
left: 100%;
right: -90%;
}
100% {
left: 100%;
right: -90%;
}
}
@keyframes zu-linear-progress-indeterminate2Keyframe {
0% {
left: -200%;
right: 100%;
}
60% {
left: 107%;
right: -8%;
}
100% {
left: 107%;
right: -8%;
}
}
@keyframes zu-linear-progress-bufferKeyframe {
0% {
opacity: 1;
background-position: 0 -23px;
}
60% {
opacity: 0;
background-position: 0 -23px;
}
100% {
opacity: 1;
background-position: -200px -23px;
}
}