// Steppers
ul.stepper {
padding: 0 1.5rem;
padding: 1.5rem;
margin: 1em -1.5rem;
overflow-x: hidden;
overflow-y: auto;
counter-reset: section;
li {
a {
padding: $stepper-li-a-padding;
text-align: center;
.circle {
display: inline-block;
width: 1.75rem;
height: 1.75rem;
margin-right: $stepper-li-a-circle-mr;
line-height: 1.7rem;
color: $stepper-li-a-circle-color;
text-align: center;
background: $stepper-li-a-circle-bg;
border-radius: $stepper-li-a-circle-border-radius;
}
.label {
display: inline-block;
color: $stepper-li-a-circle-bg;
}
}
&.active,
&.completed {
a {
.circle {
@extend .primary-color;
}
.label {
font-weight: 600;
color: $stepper-li-a-label-color;
}
}
}
&.warning {
a {
.circle {
// background-color: #ff3547 !important;
@extend .danger-color !optional;
}
}
}
}
}
// Horizontal
.stepper-horizontal {
position: relative;
display: flex;
justify-content: space-between;
li {
position: relative;
display: flex;
flex: 1;
align-items: center;
transition: $stepper-horizontal-li-transition;
a {
.label {
margin-top: $stepper-horizontal-li-a-label-mt;
}
}
&:not(:last-child):after {
position: relative;
flex: 1;
height: $stepper-horizontal-li-after-height;
margin: $stepper-horizontal-li-after-margin 0 0 0;
content: "";
background-color: $stepper-horizontal-li-after-bgc;
}
&:not(:first-child):before {
position: relative;
flex: 1;
height: $stepper-horizontal-li-after-height;
margin: $stepper-horizontal-li-after-margin 0 0 0;
content: "";
background-color: $stepper-horizontal-li-after-bgc;
}
&:hover {
background-color: rgba(0, 0, 0, .06);
}
}
@media (max-width: $stepper-horizontal-breakpoint) {
flex-direction: column;
li {
flex-direction: column;
align-items: flex-start;
a {
.label {
flex-flow: column nowrap;
order: 2;
margin-top: $stepper-horizontal-small-li-a-label-mt;
}
}
&:not(:last-child):after {
position: absolute;
top: $stepper-horizontal-small-li-after-top;
left: $stepper-horizontal-small-li-after-left;
width: $stepper-horizontal-small-li-after-width;
height: $stepper-horizontal-small-li-after-height;
content: "";
}
}
}
> li:not(:last-of-type) {
margin-bottom: 0 !important;
}
}
// Vertical
.stepper-vertical {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
li {
position: relative;
display: flex;
flex: 1;
flex-direction: column;
align-items: flex-start;
a {
position: relative;
display: flex;
align-self: flex-start;
.circle {
order: 1;
}
.label {
flex-flow: column nowrap;
order: 2;
margin-top: $stepper-vertical-li-a-label-mt;
}
}
&.completed {
a {
.label {
font-weight: 500;
}
}
}
.step-content {
display: block;
padding: $stepper-vertical-li-step-content-padding;
margin-top: 0;
margin-left: $stepper-vertical-li-step-content-ml;
p {
font-size: $stepper-vertical-li-step-content-p-font-size;
}
}
&:not(:last-child):after {
position: absolute;
top: $stepper-vertical-li-after-top;
left: $stepper-vertical-li-after-left;
width: $stepper-vertical-li-after-width;
height: $stepper-vertical-li-after-height;
content: "";
background-color: $stepper-vertical-li-after-bgc;
}
}
}
|