Created by
Daniel Gurtner
last modified
| <div id="breadcrumb">
<a href="index.html" class="stepcrumb complete-step">Step 1<span class="after-crumb"></span></a>
<span class="stepcrumb current-step"><span class="before-crumb"></span>Step 2<span class="after-crumb"></span></span>
<span class="stepcrumb incomplete-step"><span class="before-crumb"></span>Step 3<span class="after-crumb"></span></span>
<span class="stepcrumb incomplete-step"><span class="before-crumb"></span>Step 4<span class="after-crumb"></span></span>
</div>
|
| /* Multi-step checkout */
* {
box-sizing: border-box;
}
#breadcrumb {
font-size: 12px;
}
#breadcrumb a.stepcrumb,
#breadcrumb span.stepcrumb {
background-color: #00f030;
min-width: 140px !important;
padding: 3px 0 3px 15px;
color: #333333;
}
#breadcrumb a.stepcrumb.incomplete-step,
#breadcrumb span.stepcrumb.incomplete-step {
background-color: #cccccc;
color: #eeeeee;
cursor: not-allowed;
}
#breadcrumb a.stepcrumb.current-step,
#breadcrumb span.stepcrumb.current-step {
font-weight: bold;
cursor: progress;
}
#breadcrumb a.stepcrumb.complete-step,
#breadcrumb span.stepcrumb.complete-step {
cursor: pointer;
}
.before-crumb,
.after-crumb {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
font-size: 0px;
position: relative;
top: -4px;
left: 0;
}
.before-crumb {
border-left:10px solid #ffffff;
left: -15px;
z-index: 50;
}
.after-crumb {
border-left:10px solid #00f030;
left: 10px;
z-index: 60;
}
#breadcrumb span.stepcrumb.incomplete-step .after-crumb {
border-left:10px solid #cccccc;
}
|