mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
925a19fa4a
This reverts commit f09ab8889148c406551dea1643966e3331fde4aa, reversing changes made to effc761e0ee4ea7ffb77f275b5ed650a7098d6f8. This is being temporarily reverted to make it easier to release an urgent fix for v10.15.1.
126 lines
2.3 KiB
SCSS
126 lines
2.3 KiB
SCSS
.progressbar {
|
|
counter-reset: step;
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
width: 500px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
ul.two-steps {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.progressbar li {
|
|
list-style-type: none;
|
|
width: 25%;
|
|
float: left;
|
|
font-size: 12px;
|
|
position: relative;
|
|
text-align: center;
|
|
color: var(--color-text-alternative);
|
|
z-index: 2;
|
|
}
|
|
|
|
.progressbar li::before {
|
|
width: 30px;
|
|
height: 30px;
|
|
content: counter(step);
|
|
counter-increment: step;
|
|
line-height: 30px;
|
|
border: 2px solid var(--color-border-muted);
|
|
display: block;
|
|
text-align: center;
|
|
margin: 0 auto 10px auto;
|
|
border-radius: 50%;
|
|
background-color: var(--color-background-default);
|
|
z-index: -1;
|
|
}
|
|
|
|
.progressbar li::after {
|
|
width: 100%;
|
|
height: 2px;
|
|
content: '';
|
|
position: absolute;
|
|
background-color: var(--color-background-alternative);
|
|
top: 15px;
|
|
right: 77px;
|
|
z-index: -1;
|
|
|
|
[dir='rtl'] & {
|
|
width: 100%;
|
|
height: 2px;
|
|
content: '';
|
|
position: absolute;
|
|
background-color: var(--color-background-alternative);
|
|
right: 77px;
|
|
z-index: -1;
|
|
}
|
|
}
|
|
|
|
.progressbar li:first-child::after {
|
|
content: none;
|
|
|
|
[dir='rtl'] & {
|
|
content: none;
|
|
}
|
|
}
|
|
|
|
.progressbar li.active {
|
|
color: var(--color-primary-default);
|
|
|
|
[dir='rtl'] & {
|
|
color: var(--color-primary-default);
|
|
}
|
|
}
|
|
|
|
.progressbar li.active::before {
|
|
border-color: var(--color-primary-default);
|
|
z-index: 1;
|
|
|
|
[dir='rtl'] & {
|
|
border-color: var(--color-primary-default);
|
|
z-index: 1;
|
|
}
|
|
}
|
|
|
|
.progressbar li.complete + li::after {
|
|
background-color: var(--color-primary-default);
|
|
z-index: -1;
|
|
|
|
[dir='rtl'] & {
|
|
background-color: var(--color-primary-default);
|
|
z-index: -1;
|
|
}
|
|
}
|
|
|
|
.progressbar li.complete::before {
|
|
background-color: var(--color-primary-default);
|
|
color: var(--color-primary-inverse);
|
|
|
|
[dir='rtl'] & {
|
|
background-color: var(--color-primary-default);
|
|
color: var(--color-primary-inverse);
|
|
}
|
|
}
|
|
|
|
.progressbar li.two-steps::after {
|
|
width: 180px;
|
|
height: 2px;
|
|
content: '';
|
|
position: absolute;
|
|
background-color: var(--color-background-alternative);
|
|
top: 15px;
|
|
right: 75px;
|
|
z-index: -1;
|
|
|
|
[dir='rtl'] & {
|
|
width: 180px;
|
|
height: 2px;
|
|
content: '';
|
|
position: absolute;
|
|
background-color: var(--color-background-alternative);
|
|
right: 75px;
|
|
z-index: -1;
|
|
}
|
|
}
|