vtenext/themes/next/scss/_progressbar.scss
2021-04-28 20:10:26 +02:00

106 lines
1.9 KiB
SCSS

/*************************************
* SPDX-FileCopyrightText: 2009-2020 Vtenext S.r.l. <info@vtenext.com>
* SPDX-License-Identifier: AGPL-3.0-only
************************************/
/* crmv@82419 */
/* crmv@69398 */
/* styles for progress bar with circles */
.progressbar-circles {
padding-left: 8px;
padding-right: 8px;
}
.progressbar-circles table {
height: 32px;
}
.progressbar-circles .steps-border {
position: absolute;
left:0px;
top: 14px;
width:100%;
height: 22px;
border-radius: 16px;
border-left: none;
border: 1px solid $white;
background: $vte-box-verylight-bg;
}
.progressbar-circles .step-border {
position: absolute;
left: 0px;
width: 32px;
height: 32px;
text-align: center;
line-height: 32px;
border: 1px solid $grey-400;
border-radius: 16px;
background: $white;
padding: 0px;
display: inline-block;
position: relative;
box-sizing: content-box;
}
.progressbar-circles td:first-child .border {
border-left: none;
}
.progressbar-circles .step-num {
position: relative;
width: 28px;
height: 28px;
left: 0px;
text-align: center;
line-height: 28px;
border-radius: 14px;
background: $vte-primary;
margin: 2px;
padding: 0px;
display: inline-block;
color: $white;
font-weight:700;
}
.progressbar-circles .step-text {
position: relative;
}
/* active step */
.progressbar-circles .active-step .step-text {
font-weight:700;
top: -2px;
}
.progressbar-circles .active-step .step-border {
width: 50px;
height: 50px;
border-radius: 25px;
}
.progressbar-circles .active-step .step-num {
background: $vte-primary;
width: 46px;
height: 46px;
border-radius: 23px;
line-height: 46px;
font-size: 20px;
}
/* prev steps */
.progressbar-circles .previous-step .step-num {
background: darken($vte-primary, 12%);
}
/* next steps */
.progressbar-circles .next-step .step-num {
background: $vte-submenu;
color: $grey-800;
}
.progressbar-circles .next-step .step-text {
color: $grey-800;
}