.steps { // ... other styles ... --progress: 0%; display: flex; justify-content: space-around; list-style-type: none; padding: 1rem 0; position: relative; &:before { content: ' '; position: absolute; top: 50%; left: 0; right: 0; border-bottom: 1px solid white; } &:after { content: ' '; position: absolute; top: 50%; inset-inline-start: 0; inset-inline-end: calc(100% - var(--progress)); border-bottom: 1px solid lighten($primary-color-panel,20); transition: all 0.3s ease-in-out; } li { position: relative; z-index: 2; background: $lighter-color; cursor: pointer; border: 1px solid #ccc; border-radius: 50%; display: flex; align-items: center; justify-content: center; width: 65px; height: 65px; i { font-size: 35px; } &.active { border-color: lighten($primary-color-panel,20); background-color: $primary-color-panel; } } } #step-tabs { > div { display: none; opacity: 0; //transition: opacity 0.3s ease-in-out; &.active { display: block; opacity: 1; } } } .product-form .card-footer{ display: flex; justify-content: space-around; flex-direction: row-reverse; } #upload-drag-drop { border: 2px dashed silver; min-height: 150px; padding: 20px 10px; text-align: center; margin: 10px auto; transition: 600ms; cursor: pointer; display: flex; align-items: center; justify-content: center; &:hover { border-color: $primary-color-panel; } } #upload-drag-drop.active { border-color: $primary-color-panel; } .img-preview{ background-size: cover; } .img-list{ object-fit: cover; width: 100%; height: 275px; } .indexed{ background: $primary-color-panel; } #upload-image-select{ display: none; }