131 lines
2.4 KiB
CSS
131 lines
2.4 KiB
CSS
/**
|
|
* @file
|
|
* Wizard progress bar styles.
|
|
*
|
|
* @see /webform/example_wizard
|
|
* @see /webform/test_form_wizard_advanced
|
|
*/
|
|
|
|
/**
|
|
* Progress bar.
|
|
*
|
|
* @see https://coderwall.com/p/-7trcg/simple-css-only-wizard-progress-tracker
|
|
*/
|
|
.webform-progress-bar {
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
font-size: smaller;
|
|
}
|
|
|
|
li.webform-progress-bar__page {
|
|
list-style-type: none;
|
|
display: inline-block;
|
|
position: relative;
|
|
margin: 0;
|
|
padding: 0;
|
|
line-height: 30px;
|
|
height: 30px;
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
.webform-progress-bar[data-steps="2"] li {
|
|
width: 50%;
|
|
}
|
|
.webform-progress-bar[data-steps="3"] li {
|
|
width: 33%;
|
|
}
|
|
.webform-progress-bar[data-steps="4"] li {
|
|
width: 25%;
|
|
}
|
|
.webform-progress-bar[data-steps="5"] li {
|
|
width: 20%;
|
|
}
|
|
.webform-progress-bar[data-steps="6"] li {
|
|
width: 16.6%;
|
|
}
|
|
.webform-progress-bar[data-steps="7"] li {
|
|
width: 14.28%;
|
|
}
|
|
.webform-progress-bar[data-steps="8"] li {
|
|
width: 12.5%;
|
|
}
|
|
.webform-progress-bar[data-steps="9"] li {
|
|
width: 11.11%;
|
|
}
|
|
.webform-progress-bar[data-steps="10"] li {
|
|
width: 10%;
|
|
}
|
|
|
|
li.webform-progress-bar__page > b {
|
|
display: block;
|
|
padding: 0 0 0 30px;
|
|
font-weight: normal;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
li.webform-progress-bar__page--done > b {
|
|
background-color: #dbdbdb;
|
|
}
|
|
|
|
li.webform-progress-bar__page--current > b {
|
|
font-weight: bold;
|
|
}
|
|
|
|
li.webform-progress-bar__page > b:after,
|
|
li.webform-progress-bar__page > b:before {
|
|
content: "";
|
|
display: block;
|
|
width: 0;
|
|
height: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
border: solid transparent;
|
|
border-left-color: #ededed;
|
|
border-width: 15px;
|
|
}
|
|
|
|
li.webform-progress-bar__page > b:after {
|
|
top: -5px;
|
|
z-index: 1;
|
|
border-left-color: white;
|
|
border-width: 20px;
|
|
}
|
|
|
|
li.webform-progress-bar__page > b:before {
|
|
z-index: 2;
|
|
}
|
|
|
|
li.webform-progress-bar__page--done + li > b:before {
|
|
border-left-color: #dbdbdb;
|
|
}
|
|
|
|
li.webform-progress-bar__page:first-child > b:after,
|
|
li:first-child > b:before {
|
|
display: none;
|
|
}
|
|
|
|
li.webform-progress-bar__page:first-child span,
|
|
li.webform-progress-bar__page:last-child span {
|
|
display: block;
|
|
height: 0;
|
|
width: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
border: solid transparent;
|
|
border-left-color: white;
|
|
border-width: 15px;
|
|
}
|
|
|
|
li.webform-progress-bar__page:last-child span {
|
|
left: auto;
|
|
right: -15px;
|
|
border-left-color: transparent;
|
|
border-top-color: white;
|
|
border-bottom-color: white;
|
|
}
|