Skip to content

Instantly share code, notes, and snippets.

@malarahfelipe
Created April 5, 2021 12:33
Show Gist options
  • Save malarahfelipe/d4a32c3b19b770231fff1f0d54e5ce7f to your computer and use it in GitHub Desktop.
Save malarahfelipe/d4a32c3b19b770231fff1f0d54e5ce7f to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
#onboarding {
.not-allowed, .not-allowed * {
cursor: not-allowed !important;
}
.not-allowed span a {
pointer-events: none !important;
}
section:not(:target):not(#onboarding) {
cursor: not-allowed !important;
}
section:not(:target):not(#onboarding) > * {
pointer-events: none !important;
}
.steps-form {
width: 2px;
height: 65%;
position: fixed;
top: 12%;
left: 3%;
display: none;
}
.steps-form .steps-row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.steps-form .steps-row:before {
top: -4px;
bottom: 0;
position: absolute;
content: "";
width: 2px;
height: 112%;
background-color: #a77272;
}
.steps-form .steps-row .steps-step {
height: 115px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
text-align: center;
position: relative;
}
.steps-form .steps-row .steps-step.no-height {
height: 50px;
}
.steps-form .steps-row .steps-step p {
margin-top: 0.5rem;
}
.steps-form .steps-row .steps-step button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.steps-form .steps-row .steps-step .btn-circle {
width: 5px;
height: 5px;
border: 2px solid #8d5959;
background-color: white !important;
position: relative;
color: #8d5959 !important;
border-radius: 50%;
padding: 9px 9px 7.5px 7.5px;
margin-top: -22px;
}
.btn-circle {
background-image: linear-gradient(to bottom, #de3127 50%, transparent 50%);
background-size: 100% 200%;
background-position: bottom;
transition: background-position 0.5s ease-in-out; /** I've changed the time for demo purposes **/
}
.steps-form .steps-row .half-completed .btn-circle {
background-position: center;
}
.steps-form .steps-row .completed .btn-circle {
background-position: top;
border: 2px solid #de3127;
color: #de3127 !important;
}
.steps-form .steps-row .completed .btn-circle svg {
position: absolute;
color: white;
width: 15px;
height: 15px;
left: 1px;
top: 1px;
}
.steps-form .steps-row .steps-step .btn-circle span {
font-size: 1.3rem;
position: absolute;
margin-top: -0.7rem;
margin-left: -0.2rem;
}
}
#onboarding .not-allowed, #onboarding .not-allowed * {
cursor: not-allowed !important;
}
#onboarding .not-allowed span a {
pointer-events: none !important;
}
#onboarding section:not(:target):not(#onboarding) {
cursor: not-allowed !important;
}
#onboarding section:not(:target):not(#onboarding) > * {
pointer-events: none !important;
}
#onboarding .steps-form {
width: 2px;
height: 65%;
position: fixed;
top: 12%;
left: 3%;
display: none;
}
#onboarding .steps-form .steps-row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
#onboarding .steps-form .steps-row:before {
top: -4px;
bottom: 0;
position: absolute;
content: "";
width: 2px;
height: 112%;
background-color: #a77272;
}
#onboarding .steps-form .steps-row .steps-step {
height: 115px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
text-align: center;
position: relative;
}
#onboarding .steps-form .steps-row .steps-step.no-height {
height: 50px;
}
#onboarding .steps-form .steps-row .steps-step p {
margin-top: 0.5rem;
}
#onboarding .steps-form .steps-row .steps-step button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
#onboarding .steps-form .steps-row .steps-step .btn-circle {
width: 5px;
height: 5px;
border: 2px solid #8d5959;
background-color: white !important;
position: relative;
color: #8d5959 !important;
border-radius: 50%;
padding: 9px 9px 7.5px 7.5px;
margin-top: -22px;
}
#onboarding .btn-circle {
background-image: linear-gradient(to bottom, #de3127 50%, transparent 50%);
background-size: 100% 200%;
background-position: bottom;
transition: background-position 0.5s ease-in-out;
/** I've changed the time for demo purposes **/
}
#onboarding .steps-form .steps-row .half-completed .btn-circle {
background-position: center;
}
#onboarding .steps-form .steps-row .completed .btn-circle {
background-position: top;
border: 2px solid #de3127;
color: #de3127 !important;
}
#onboarding .steps-form .steps-row .completed .btn-circle svg {
position: absolute;
color: white;
width: 15px;
height: 15px;
left: 1px;
top: 1px;
}
#onboarding .steps-form .steps-row .steps-step .btn-circle span {
font-size: 1.3rem;
position: absolute;
margin-top: -0.7rem;
margin-left: -0.2rem;
}
{
"sass": {
"compiler": "dart-sass/1.26.11",
"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