wix-style-react/dist/src/CircularProgressBar/CircularProgressBar.st.css

wix-style-react

@st-import [
    --wds-font-family-default,
  --wds-font-size-100,
  --wds-font-weight-bold,
  --wds-font-line-height-200,
] from "@wix/design-system-tokens/all.st.css";

:import {
    -st-from: './CircularProgressBarCore/CircularProgressBarCore.st.css';
    -st-default: CircularProgressBar;
}

:import {
    -st-from: '../Tooltip/Tooltip.st.css';
    -st-default: Tooltip;
}

:import {
    -st-from: '../Foundation/stylable/colors.st.css';
    -st-named:
        B10, B50,
        D20, D60, D80-30,
        G10, G60,
        R00, R10, R30,
        P10, P60,
}

:import {
    -st-from: '../Foundation/stylable/typography.st.css';
    -st-named: wsr-font-family, wsr-heading-font-size-h6, wsr-font-weight-bold, wsr-heading-line-height-h6;
}

.progressBar {
    -st-states: light, size(enum(small, medium, large)), skin(enum(standard, premium, success));
    -st-extends: CircularProgressBar;
}

.tooltip {
    -st-extends: Tooltip;
}


.root {
    display: inline-block;
}

.root .progressBar::foreArc {
    stroke: value(B10);
}

.root .progressBar::backArc {
    stroke: value(B50);
}

.root .progressBar:skin(premium)::foreArc {
    stroke: value(P10);
}

.root .progressBar:skin(premium)::backArc {
    stroke: value(P60);
}

.root .progressBar:skin(success)::foreArc {
    stroke: value(G10);
}

.root .progressBar:skin(success)::backArc {
    stroke: value(G60);
}

.root .progressBar:error::foreArc {
    stroke: value(R00);
}

.root .progressBar:error::backArc {
    stroke: value(R30);
}

.root .progressBar:light::backArc {
    stroke: value(D80-30);
}

.root .progressBar::statusIndicator {
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.root .progressBar:success::statusIndicator {
    color: value(B10);
}

.root .progressBar:skin(premium)::statusIndicator {
    color: value(P10);
}

.root .progressBar:skin(success)::statusIndicator {
    color: value(G10);
}

.root .progressBar:error::statusIndicator {
    color: value(R10);
}

.root .progressBar::statusIndicator svg {
    height: 15px;
    width: 20px;
}

.root .progressBar:size(small)::statusIndicator svg {
    height: 9px;
    width: 12px;
}

.root .progressBar::label,
.root .progressBar::progressIndicator {
    font-family: var(--wds-font-family-default, value(wsr-font-family));
    font-size: var(--wds-font-size-100, value(wsr-heading-font-size-h6));
    font-weight: var(--wds-font-weight-bold, value(wsr-font-weight-bold));
    line-height: var(--wds-font-line-height-200, value(wsr-heading-line-height-h6));

    color: value(D20);
    margin-top: 12px;
}

/* st-namespace-reference="../../../src/CircularProgressBar/CircularProgressBar.st.css" */