me/glitchier-soc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

[Glitch] Add progress indicator to sign-up flow

Browse source 
Port 9a7a4d79ec to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Eugen Rochko 2023-04-16 07:01:24 +02:00 committed by Claire
parent 98bc47e3ca
commit 7642a3bb67
1 changed files with 86 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

86
app/javascript/flavours/glitch/styles/forms.scss
View file

@ -1118,3 +1118,89 @@ code {
white-space: nowrap;
}
}
.progress-tracker {
display: flex;
align-items: center;
padding-bottom: 30px;
margin-bottom: 30px;
li {
flex: 0 0 auto;
position: relative;
}
.separator {
height: 2px;
background: $ui-base-lighter-color;
flex: 1 1 auto;
&.completed {
background: $highlight-text-color;
}
}
.circle {
box-sizing: border-box;
position: relative;
width: 30px;
height: 30px;
border-radius: 50%;
border: 2px solid $ui-base-lighter-color;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
svg {
width: 16px;
}
}
.label {
position: absolute;
font-size: 14px;
font-weight: 500;
color: $secondary-text-color;
padding-top: 10px;
text-align: center;
width: 100px;
left: 50%;
transform: translateX(-50%);
}
li:first-child .label {
left: auto;
inset-inline-start: 0;
text-align: start;
transform: none;
}
li:last-child .label {
left: auto;
inset-inline-end: 0;
text-align: end;
transform: none;
}
.active .circle {
border-color: $highlight-text-color;
&::before {
content: '';
width: 10px;
height: 10px;
border-radius: 50%;
background: $highlight-text-color;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
.completed .circle {
border-color: $highlight-text-color;
background: $highlight-text-color;
}
}