Cavemanon/piratepoet
8
Fork 0
Code Pull Requests Actions Releases 16 Activity

New stepped progress styles

Browse Source 
[MAILPOET-1927]
This commit is contained in:
Ján Mikláš
2019-04-09 14:11:29 +02:00
committed by Ján Mikláš
parent f6192f77a1
commit 2ab94d0ab4
2 changed files with 38 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
assets/css/src/components/_progressBar.scss
View File

@@ -35,45 +35,52 @@
} }
.mailpoet_stepped_progress_bar { .mailpoet_stepped_progress_bar {
margin: auto; display: flex;
width: 400px; max-width: 100%;
width: 350px;
&:before {
background-color: #d8d8d8;
border-radius: 2px;
content: "";
display: block;
height: 2px;
margin: auto;
position: relative;
top: 9px;
width: 100%;
}
} }
.mailpoet_stepped_progress_bar_step { .mailpoet_stepped_progress_bar_step {
display: inline-block; flex-grow: 1;
&:before { &:before {
background-color: #d8d8d8; background-color: #f1f1f1;
border: 2px solid #dbdbdb;
border-radius: 14px; border-radius: 14px;
content: ""; content: '';
display: block; display: block;
height: 14px; height: 12px;
margin: auto;
position: relative; position: relative;
width: 14px; width: 12px;
z-index: 1;
} }
&.active { &:after {
&:before { background-color: #dbdbdb;
background-color: #979797; content: '';
} display: block;
height: 4px;
left: 4px;
position: relative;
top: -10px;
width: 100%;
} }
}
@media screen and (max-width: 520px) { &:last-of-type{
.mailpoet_stepped_progress_bar { flex-grow: 0;
width: 360px; width: 18px;
&:after { display: none; }
}
&.active:before,
&.active:after {
background-color: #23282d;
border-color: #23282d;
}
&.current {
&:before { background-color: #fff; }
&:after { background-color: #dbdbdb; }
} }
} }

5
assets/js/src/common/stepped_progess_bar.jsx
View File

@@ -10,9 +10,10 @@ const SteppedProgressBar = (props) => {
{ {
[...Array(props.steps_count).keys()].map(step => ( [...Array(props.steps_count).keys()].map(step => (
<div <div
className={`mailpoet_stepped_progress_bar_step ${(step < props.step ? 'active' : '')}`} className={`
mailpoet_stepped_progress_bar_step ${(step < props.step ? 'active' : '')} ${(step === (props.step - 1) ? 'current' : '')}
`}
key={`step_${step}`} key={`step_${step}`}
style={{ width: `${Math.floor(100 / props.steps_count)}%` }}
/> />
)) ))
} }