Current Path : /var/www/www-root/data/www/info.monolith-realty.ru/bitrix/js/ui/progressround/src/css/ |
Current File : /var/www/www-root/data/www/info.monolith-realty.ru/bitrix/js/ui/progressround/src/css/style.css |
:root { /*size*/ --ui-current-round-size: 8px; /*color*/ --ui-current-round-color: #2fc6f6; --ui-current-round-bg-track-color: #edeef0; --ui-progressround-color-success: #9dcf00; --ui-progressround-bg-track-color-success: #d7f282; --ui-progressround-color-primary: #2fc6f6; --ui-progressround-bg-track-color-primary: #b0e8fa; --ui-progressround-color-danger: #ff5752; --ui-progressround-bg-track-color-danger: #ffccca; --ui-progressround-color-warning: #e5cf4d; --ui-progressround-bg-track-color-warning: #f9f0b7; } /*region Base style*/ .ui-progressround { display: flex; flex-direction: column; box-sizing: border-box; width: 100%; transition: 250ms linear all; align-items: center; } .ui-progressround.ui-progressround-bg .ui-progressround-track-bar-bg { stroke: var(--ui-current-round-bg-track-color) !important;} .ui-progressround-track { position: relative; } .ui-progressround-track svg { display: block; transform: rotate(-90deg); } .ui-progressround-track-bar-bg { stroke: #edeef0; stroke-dashoffset: 0; fill: transparent; stroke-dasharray: 400% } .ui-progressround-track-bar-progress { fill: transparent; stroke: var(--ui-current-round-color) !important; transition: 120ms ease-in-out; } .ui-progressround-status, .ui-progressround-status-percent { order: 3; text-align: center; } .ui-progressround-status, .ui-progressround-status-percent, .ui-progressround-text-after, .ui-progressround-text-before { padding: 0 17px 4px; color: #535c69; font: 13px/16px var(--ui-font-family-secondary, var(--ui-font-family-open-sans)); font-weight: var(--ui-font-weight-regular, 400); } .ui-progressround-text-after { padding-left: 15px; order: 4; } .ui-progressround-text-before { padding-right: 15px; order: 1; } .ui-progressround-pie {} .ui-progressround-pie:after { } .ui-progressround-rotation svg { animation: infinite uiProgressbarRotation 2500ms linear; } @keyframes uiProgressbarRotation { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } } .ui-progressround-finished.ui-progressround-rotation svg { animation: none; } /*endregion*/ /*region Column*/ .ui-progressround-track { order: 3 } .ui-progressround-text-before { padding: 0 0 14px; font-size: 14px; order: 1; } .ui-progressround-text-after { padding: 9px 0 0; color: #828b95; font-size: 12px; order: 5; } .ui-progressround-status { order: 4 } .ui-progressround-status-percent { color: #333; font: 16px/20px var(--ui-font-family-secondary, var(--ui-font-family-open-sans)); font-weight: var(--ui-font-weight-regular, 400); } .ui-progressround-status-percent-incircle, .ui-progressround-status-incircle { position: absolute; top:50%; left: 0; right: 0; text-align: center; margin-top: -1px; transform: translateY(-50%); } /*endregion*/ /*region Bar colors*/ .ui-progressround-bg, .ui-progressround-primary { --ui-current-round-color: var(--ui-progressround-color-primary); --ui-current-round-bg-track-color: var(--ui-progressround-bg-track-color-primary) } .ui-progressround-danger { --ui-current-round-color: var(--ui-progressround-color-danger); --ui-current-round-bg-track-color: var(--ui-progressround-bg-track-color-danger) } .ui-progressround-warning { --ui-current-round-color: var(--ui-progressround-color-warning); --ui-current-round-bg-track-color: var(--ui-progressround-bg-track-color-warning) } .ui-progressround-success { --ui-current-round-color: var(--ui-progressround-color-success); --ui-current-round-bg-track-color: var(--ui-progressround-bg-track-color-success) } /*endregion*/