82 lines
2.2 KiB
CSS
82 lines
2.2 KiB
CSS
:root {
|
|
--step-active-text: var(--secondary-color);
|
|
--step-active-background: var(--secondary-color);
|
|
--step-active-color: var(--light-color);
|
|
|
|
--step-done-text: var(--primary-color);
|
|
--step-done-background: var(--primary-color);
|
|
--step-done-color: var(--light-color);
|
|
|
|
--step-default-text: var(--primary-color);
|
|
--step-default-background: var(--light-color);
|
|
--step-default-color: var(--primary-color);
|
|
--step-default-background-hover: var(--primary-color);
|
|
--step-default-color-hover: var(--light-color);
|
|
|
|
--step-disabled-text: var(--disable-color);
|
|
--step-disabled-background: var(--muted-color);
|
|
}
|
|
|
|
.stepper-line {
|
|
/*border-top-width: 3px;*/
|
|
/*border-top-style: solid;*/
|
|
/*flex: auto;*/
|
|
/*height: 0;*/
|
|
margin: 0 -16px;
|
|
margin-left: -16px;
|
|
min-width: 32px;
|
|
height: 16px;
|
|
}
|
|
.stepper button.active{
|
|
background-color:var(--step-active-background);
|
|
color:var(--step-active-color);
|
|
}
|
|
.stepper button.disabled {
|
|
background-color: var(--step-disabled-background);
|
|
color: var(--step-disabled-text);
|
|
}
|
|
.stepper .stepper-text.active{
|
|
color:var(--step-active-text);
|
|
}
|
|
.stepper button.done{
|
|
background-color:var(--step-done-background);
|
|
color:var(--step-done-color);
|
|
}
|
|
.stepper .stepper-text.done{
|
|
color:var(--step-done-text);
|
|
}
|
|
.stepper button.default{
|
|
background-color:var(--step-default-background);
|
|
color:var(--step-default-color);
|
|
}
|
|
.stepper button.default:hover{
|
|
background-color:var(--step-default-background-hover);
|
|
color:var(--step-default-color-hover);
|
|
}
|
|
.stepper .stepper-text.default{
|
|
color:var(--step-default-text);
|
|
}
|
|
.stepper .stepper-line {
|
|
box-shadow: inset -3px -3px 6px rgba(255, 255, 255, 0.9), inset 3px 3px 6px rgba(0, 0, 0, 0.1);
|
|
border-radius: 6px;
|
|
opacity: 1;
|
|
width: 100%;
|
|
}
|
|
.stepper .stepper-line {
|
|
box-shadow:inset -3px -3px 6px rgba(255, 255, 255, 0.9), inset 3px 3px 6px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.stepper .stepper-line.active, .stepper .stepper-line.done {
|
|
background-color: var(--step-done-background);
|
|
}
|
|
/*.stepper .stepper-line.default {*/
|
|
/* background-color: var(--step-default-background);*/
|
|
/*}*/
|
|
.stepper .stepper-line.disabled {
|
|
background-color: var(--muted-color);
|
|
|
|
}
|
|
.stepper .stepper-line-container{
|
|
position: absolute; bottom: -4px; left: -90px; right: 0; width: 200px;
|
|
}
|
|
|