mirror of
https://github.com/wahyd4/cdnjs.git
synced 2026-08-09 21:06:39 +10:00
168 lines
2.7 KiB
CSS
168 lines
2.7 KiB
CSS
.steps-indicator {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
height: 30px;
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.steps-indicator:before {
|
|
position: absolute;
|
|
height: 1px;
|
|
background-color: #e6e6e6;
|
|
content: '';
|
|
}
|
|
|
|
.steps-indicator.steps-2:before {
|
|
right: calc(25%);
|
|
left: calc(25%);
|
|
}
|
|
|
|
.steps-indicator.steps-3:before {
|
|
right: calc(16.666666666666668%);
|
|
left: calc(16.666666666666668%);
|
|
}
|
|
|
|
.steps-indicator.steps-4:before {
|
|
right: calc(12.5%);
|
|
left: calc(12.5%);
|
|
}
|
|
|
|
.steps-indicator.steps-5:before {
|
|
right: calc(10%);
|
|
left: calc(10%);
|
|
}
|
|
|
|
.steps-indicator.steps-6:before {
|
|
right: calc(8.333333333333334%);
|
|
left: calc(8.333333333333334%);
|
|
}
|
|
|
|
.steps-indicator.steps-7:before {
|
|
right: calc(7.142857142857143%);
|
|
left: calc(7.142857142857143%);
|
|
}
|
|
|
|
.steps-indicator.steps-8:before {
|
|
right: calc(6.25%);
|
|
left: calc(6.25%);
|
|
}
|
|
|
|
.steps-indicator.steps-9:before {
|
|
right: calc(5.555555555555555%);
|
|
left: calc(5.555555555555555%);
|
|
}
|
|
|
|
.steps-indicator.steps-10:before {
|
|
right: calc(5%);
|
|
left: calc(5%);
|
|
}
|
|
|
|
.steps-indicator * {
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.steps-indicator li {
|
|
position: relative;
|
|
float: left;
|
|
padding: 0;
|
|
padding-top: 10px;
|
|
margin: 0;
|
|
line-height: 15px;
|
|
text-align: center;
|
|
}
|
|
|
|
.steps-indicator li a {
|
|
font-weight: bold;
|
|
color: #808080;
|
|
text-decoration: none;
|
|
text-transform: uppercase;
|
|
cursor: pointer;
|
|
transition: 0.25s;
|
|
}
|
|
|
|
.steps-indicator li a:before {
|
|
position: absolute;
|
|
top: -7px;
|
|
left: calc(43%);
|
|
width: 14px;
|
|
height: 14px;
|
|
background-color: #e6e6e6;
|
|
border-radius: 100%;
|
|
content: '';
|
|
transition: 0.25s;
|
|
}
|
|
|
|
.steps-indicator li a:hover {
|
|
color: #4d4d4d;
|
|
}
|
|
|
|
.steps-indicator.steps-2 li {
|
|
width: calc(50%);
|
|
}
|
|
|
|
.steps-indicator.steps-3 li {
|
|
width: calc(33.333333333333336%);
|
|
}
|
|
|
|
.steps-indicator.steps-4 li {
|
|
width: calc(25%);
|
|
}
|
|
|
|
.steps-indicator.steps-5 li {
|
|
width: calc(20%);
|
|
}
|
|
|
|
.steps-indicator.steps-6 li {
|
|
width: calc(16.666666666666668%);
|
|
}
|
|
|
|
.steps-indicator.steps-7 li {
|
|
width: calc(14.285714285714286%);
|
|
}
|
|
|
|
.steps-indicator.steps-8 li {
|
|
width: calc(12.5%);
|
|
}
|
|
|
|
.steps-indicator.steps-9 li {
|
|
width: calc(11.11111111111111%);
|
|
}
|
|
|
|
.steps-indicator.steps-10 li {
|
|
width: calc(10%);
|
|
}
|
|
|
|
.steps-indicator.steps-11 li {
|
|
width: calc(9.090909090909092%);
|
|
}
|
|
|
|
.steps-indicator li.default {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.steps-indicator li.default a:hover {
|
|
color: #808080;
|
|
}
|
|
|
|
.steps-indicator li.current,
|
|
.steps-indicator li.editing {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.steps-indicator li.current a:before {
|
|
background-color: #808080;
|
|
}
|
|
|
|
.steps-indicator li.done a:before {
|
|
background-color: #339933;
|
|
}
|
|
|
|
.steps-indicator li.editing a:before {
|
|
background-color: #ff0000;
|
|
} |