79 lines
2.1 KiB
CSS
79 lines
2.1 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(--uk-te);*/
|
||
|
|
/*--step-disabled-background --step-disabled-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 .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 {
|
||
|
|
/*border-top-color: rgba(0, 0, 0, 0.12);*/
|
||
|
|
|
||
|
|
box-shadow: inset -3px -3px 6px rgba(100, 100, 100, 0.5);
|
||
|
|
border-radius: 6px;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
.stepper .stepper-line {
|
||
|
|
box-shadow:inset -3px -3px 6px #FFFFFFE6;
|
||
|
|
}
|
||
|
|
.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;
|
||
|
|
}
|
||
|
|
|