Created
April 28, 2022 19:20
-
-
Save uxmoon/c4fa3c8e3d452faee92d82f265ebc8a1 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.vv-wizard-stepper { | |
display: flex; | |
justify-content: center; | |
margin: 20px 0; | |
} | |
.vv-wizard-stepper ul { | |
display: flex; | |
margin: 0; | |
padding: 0; | |
} | |
.vv-wizard-stepper li { | |
display: flex; | |
font-size: 14px; | |
align-items: center; | |
margin: 5px; | |
cursor: default; | |
.num { | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
font-size: 13px; | |
width: 18px; | |
height: 18px; | |
margin-right: 5px; | |
border-radius: 50%; | |
background: white; | |
// color: $galaxy-800; | |
transition: background 500ms, color 500ms; | |
} | |
.text { | |
@media screen and (max-width: 768px) { | |
display: none; | |
} | |
} | |
} | |
.vv-wizard-stepper li:not(:last-child):after { | |
content: " "; | |
display: inline-block; | |
width: 20px; | |
// border-top: 1px solid $galaxy-200; | |
margin-left: 10px; | |
} | |
.vv-wizard-stepper li { | |
&.active .num { | |
// background: $big-sky-500; | |
color: white; | |
} | |
&.clickeable { | |
cursor: pointer; | |
.num { | |
// background: $thrive-500; | |
color: white; | |
} | |
} | |
} | |
.vv-wizard-carousel { | |
position: relative; | |
padding: 25px 0; | |
overflow: hidden; | |
} | |
.vv-wizard-items-container { | |
display: flex; | |
flex-direction: row; | |
flex-wrap: nowrap; | |
flex-direction: row; | |
min-width: 100%; | |
transition: transform 500ms ease-in-out; | |
} | |
.vv-wizard-carousel-item { | |
min-width: 100%; | |
padding: 0 25px; | |
height: 0; | |
&.active { | |
height: auto; | |
} | |
.v-enter-active, | |
.v-leave-active { | |
transition: opacity 500ms ease; | |
} | |
.v-leave-from, | |
.v-enter-to { | |
opacity: 1; | |
} | |
.v-enter-from, | |
.v-leave-to { | |
opacity: 0; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.vv-wizard-stepper { | |
display: flex; | |
justify-content: center; | |
margin: 20px 0; | |
} | |
.vv-wizard-stepper ul { | |
display: flex; | |
margin: 0; | |
padding: 0; | |
} | |
.vv-wizard-stepper li { | |
display: flex; | |
font-size: 14px; | |
align-items: center; | |
margin: 5px; | |
cursor: default; | |
} | |
.vv-wizard-stepper li .num { | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
font-size: 13px; | |
width: 18px; | |
height: 18px; | |
margin-right: 5px; | |
border-radius: 50%; | |
background: white; | |
transition: background 500ms, color 500ms; | |
} | |
@media screen and (max-width: 768px) { | |
.vv-wizard-stepper li .text { | |
display: none; | |
} | |
} | |
.vv-wizard-stepper li:not(:last-child):after { | |
content: " "; | |
display: inline-block; | |
width: 20px; | |
margin-left: 10px; | |
} | |
.vv-wizard-stepper li.active .num { | |
color: white; | |
} | |
.vv-wizard-stepper li.clickeable { | |
cursor: pointer; | |
} | |
.vv-wizard-stepper li.clickeable .num { | |
color: white; | |
} | |
.vv-wizard-carousel { | |
position: relative; | |
padding: 25px 0; | |
overflow: hidden; | |
} | |
.vv-wizard-items-container { | |
display: flex; | |
flex-direction: row; | |
flex-wrap: nowrap; | |
flex-direction: row; | |
min-width: 100%; | |
transition: transform 500ms ease-in-out; | |
} | |
.vv-wizard-carousel-item { | |
min-width: 100%; | |
padding: 0 25px; | |
height: 0; | |
} | |
.vv-wizard-carousel-item.active { | |
height: auto; | |
} | |
.vv-wizard-carousel-item .v-enter-active, | |
.vv-wizard-carousel-item .v-leave-active { | |
transition: opacity 500ms ease; | |
} | |
.vv-wizard-carousel-item .v-leave-from, | |
.vv-wizard-carousel-item .v-enter-to { | |
opacity: 1; | |
} | |
.vv-wizard-carousel-item .v-enter-from, | |
.vv-wizard-carousel-item .v-leave-to { | |
opacity: 0; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"sass": { | |
"compiler": "dart-sass/1.32.12", | |
"extensions": {}, | |
"syntax": "SCSS", | |
"outputStyle": "expanded" | |
}, | |
"autoprefixer": false | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment