ElyBy-Mirror/accounts-frontend
1
0
Fork 0
mirror of https://github.com/elyby/accounts-frontend.git synced 2025-05-31 14:11:58 +05:30
Code Issues Packages Projects Releases Wiki Activity

Change prettier rules

Browse Source
This commit is contained in:
ErickSkrauch
2020-05-24 02:08:24 +03:00
parent 73f0c37a6a
commit f85b9d8d35
382 changed files with 24137 additions and 26046 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
packages/app/components/ui/stepper/Stepper.tsx
View File

@@ -5,24 +5,24 @@ import { Color, COLOR_GREEN } from 'app/components/ui';
import styles from './stepper.scss';
export default function Stepper({
totalSteps,
activeStep,
color = COLOR_GREEN,
totalSteps,
activeStep,
color = COLOR_GREEN,
}: {
totalSteps: number;
activeStep: number;
color?: Color;
totalSteps: number;
activeStep: number;
color?: Color;
}) {
return (
<div className={clsx(styles.steps, styles[`${color}Steps`])}>
{new Array(totalSteps).fill(0).map((_, step) => (
<div
className={clsx(styles.step, {
[styles.activeStep]: step <= activeStep,
})}
key={step}
/>
))}
</div>
);
return (
<div className={clsx(styles.steps, styles[`${color}Steps`])}>
{new Array(totalSteps).fill(0).map((_, step) => (
<div
className={clsx(styles.step, {
[styles.activeStep]: step <= activeStep,
})}
key={step}
/>
))}
</div>
);
}

119
packages/app/components/ui/stepper/stepper.scss
View File

@@ -1,82 +1,81 @@
@import '~app/components/ui/colors.scss';
.steps {
height: 40px;
display: flex;
align-items: center;
height: 40px;
display: flex;
align-items: center;
}
.step {
position: relative;
text-align: right;
width: 100%;
height: 4px;
background: #d8d5ce;
&:first-child {
width: 12px;
}
&:before {
content: '';
display: block;
position: absolute;
height: 4px;
left: 0;
right: 100%;
top: 50%;
margin-top: -2px;
background: #aaa;
transition: 0.4s ease 0.1s;
}
&:after {
content: '';
display: inline-block;
position: relative;
top: -7px;
z-index: 1;
text-align: right;
width: 100%;
width: 12px;
height: 12px;
border-radius: 100%;
box-sizing: border-box;
height: 4px;
background: #d8d5ce;
background: #aaa;
border: 2px solid #aaa;
transition: background 0.4s ease,
border-color 0.4s cubic-bezier(0.19, 1, 0.22, 1); // easeOutExpo
}
&:first-child {
width: 12px;
}
&:before {
content: '';
display: block;
position: absolute;
height: 4px;
left: 0;
right: 100%;
top: 50%;
margin-top: -2px;
background: #aaa;
transition: 0.4s ease 0.1s;
}
&:after {
content: '';
display: inline-block;
position: relative;
top: -7px;
z-index: 1;
width: 12px;
height: 12px;
border-radius: 100%;
box-sizing: border-box;
background: #aaa;
border: 2px solid #aaa;
transition: background 0.4s ease, border-color 0.4s cubic-bezier(0.19, 1, 0.22, 1); // easeOutExpo
}
}
.activeStep {
&:before {
right: 0;
transition-delay: unset;
}
&:before {
right: 0;
transition-delay: unset;
}
&:after {
transition-delay: 0.3s;
}
&:after {
transition-delay: 0.3s;
}
}
.greenSteps {
.activeStep {
&:after {
background: $green;
border-color: darker($green);
.activeStep {
&:after {
background: $green;
border-color: darker($green);
}
}
}
}
.violetSteps {
.activeStep {
&:after {
background: $violet;
border-color: darker($violet);
.activeStep {
&:after {
background: $violet;
border-color: darker($violet);
}
}
}
}