wizard.less
Home
/
themes /
src /
main /
node_modules /
patternfly /
dist /
less /
wizard.less
//
// Wizard
// --------------------------------------------------
.wizard-pf {
padding: 10px;
margin: 0 auto;
max-height: 900px;
width: auto;
.modal-content {
min-height:100%;
}
}
// Wizard header
// Top section of the wizard w/ title and dismiss
.wizard-pf-body {
background:@color-pf-white;
padding: 0;
position: static;
}
/* styles the sidebard containing the sub-steps */
.wizard-pf-sidebar {
background: @color-pf-black-100;
border-right: 1px solid @color-pf-black-300;
display:none;
@media (min-width: @screen-sm-min) {
display:inherit;
flex:0 0 auto;
overflow-x: hidden;
overflow-y: auto;
.list-group {
border-top: 0;
margin-bottom: 0;
}
.list-group-item {
background-color: transparent;
border-color: @color-pf-black-200;
padding: 0;
> a {
color: @color-pf-black;
cursor: pointer;
display: block;
font-size: 14px;
font-weight: 700;
height: 50px;
outline: 0;
padding-top: 11px;
padding-left: 20px;
position: relative;
white-space: nowrap;
width: 14em;
&:hover {
text-decoration: none;
background-color: @color-pf-black-200;
}
&:focus {
//corrects odd behavior when hover and focus are combined.
text-decoration: none;
span {
text-decoration: underline;
}
}
}
&.active {
background-color: @color-pf-black-200;
//override default behavior
&:hover {
border-color: @color-pf-black-200;
}
> a {
color: @color-pf-blue-300;
cursor: default;
}
// line to left side showing active substep
> a:before {
content: " ";
background: @color-pf-blue-300;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 3px;
}
// caret to right showing active substep
> a:after {
color: @color-pf-blue-300;
content: "\f105"; // right caret
display: block;
font-family: FontAwesome;
font-size: 24px;
font-weight: 500;
line-height: 30px;
padding-top: 10px;
position: absolute;
right: 23px;
top: 0;
}
}
}
}
}
.wizard-pf-substep-number {
display:inline-block;
margin-right: 5px;
vertical-align: middle;
width: 25px;
}
.wizard-pf-substep-title {
display:inline-block;
margin-right: 5px;
text-align: left;
vertical-align: middle;
}
/* styles the steps indicator across the top of the wizard */
.wizard-pf-steps {
border-bottom: solid 1px @color-pf-black-300;
@media (min-width: @screen-sm-min) {
text-align: center;
}
}
.wizard-pf-steps-indicator {
background: @color-pf-black-200;
border-top: 1px solid @color-pf-black-300;
display: inline-block;
display: flex;
font-size: ceil((@font-size-base * 1.3333));
list-style: none;
margin-bottom: 0;
padding: 15px 0;
@media (min-width: @screen-sm-min) {
background: @color-pf-white;
height: 120px;
padding: 38px 0 0;
justify-content: space-around;
}
li {
counter-increment: section;
float:left; /* float for IE9 since it doesn't support flex. If items wrap, they overlap */
flex-grow: 1;
flex-basis: 0;
line-height: 15px;
margin: 0;
padding: 0;
position: relative;
text-align: center;
&:not(.active) {
display: none;
@media (min-width: @screen-sm-min) {
display: block;
}
}
a {
align-items: center;
display: flex;
flex-wrap:wrap;
font-weight: 700;
@media (min-width: @screen-sm-min) {
font-weight: normal;
justify-content: center;
}
.wizard-pf-step-title {
margin-left: 10px;
@media(min-width: @screen-sm-min) {
margin-left: 0;
}
&-substep {
font-weight: normal;
margin-left: 10px;
text-transform: capitalize;
&:before {
content:"\00BB";
font-size: 20px;
margin-right: 10px;
}
&:not(.active) {
display: none;
}
}
}
}
/* draw the line between the circles */
@media (min-width: @screen-sm-min) {
.wizard-pf-step-title-substep {
display: none;
}
&:before {
background-color: @color-pf-black-400;
content: "";
height: 2px;
left: 0;
position: absolute;
right: 0;
top: 40px; // needed for IE9/10 calculate 50% of just the li, others calc 50% of the entire thing including the a:before
//otherwise, use top: calc(50% - 1px);
}
/* don't draw the line between the circles on the ends */
&:first-child:before {
left: 50%;
right: 0;
}
&:last-child:before {
left: 0;
right: 50%;
}
&:only-of-type:before {
background-color: transparent;
}
}
a {
color: @color-pf-black;
cursor: pointer;
font-size: 16px;
margin-left:1em;
margin-right:1em;
text-decoration: none;
&:hover {
.wizard-pf-step-number {
background-color: @color-pf-black-400;
border-color: @color-pf-black-400;
color: @color-pf-white;
}
}
}
}
/* draw the step number in the circle */
.wizard-pf-step-number {
background-color: @color-pf-white;
border-radius: 50%;
border: solid 2px @color-pf-black-400;
color: @color-pf-black-400;
font-size: @font-size-base;
font-weight: 700;
height: 25px;
line-height: 22px;
@media (min-width: @screen-sm-min) {
left: ~"calc(50% - 13px)";
position: absolute;
top: 27px;
}
width: 25px;
}
.active .wizard-pf-step-number {
background-color: @color-pf-blue-300;
border-color: @color-pf-blue-300;
cursor: default;
color: @color-pf-white;
}
.viewed-pf .wizard-pf-step-number {
color: @color-pf-black;
background-color: @color-pf-white;
border-color: @color-pf-blue-300;
}
}
/* styles the main content portion of the wizard */
.wizard-pf-main {
height: 100%;
padding:1em;
vertical-align: top;
width:100%;
@media (min-width: @screen-sm-min) {
overflow: auto;
padding:3em;
flex:1 1 auto;
}
.blank-slate-pf {
background-color: transparent;
border: none;
left: 0;
right: 0;
}
}
.wizard-pf-contents textarea {
resize: vertical;
}
/* styles the content of a review page */
.wizard-pf-review-steps {
list-style: none;
.list-group, .list-group-item {
border: none;
margin-bottom: 0;
}
> ul {
> li {
float: left;
line-height: 15px;
margin: 0;
padding-top: 0;
position: relative;
width: 100%;
> a {
color: #030303;
cursor: pointer;
font-size: 16px;
padding-left: 30px;
padding-right: 5px;
text-decoration: none;
transition: 250ms;
&:before {
content: "\f107";
display: block;
font-family: FontAwesome;
font-size: 24px;
font-weight: 500;
left: 20px;
position: absolute;
top: 0;
}
&.collapsed {
&:before {
content: "\f105";
}
}
}
}
}
}
.wizard-pf-review-substeps {
padding-left: 22px;
> ul {
> li {
float: left;
line-height: 15px;
margin: 0;
position: relative;
width: 100%;
a {
color: #030303;
cursor: pointer;
font-size: 16px;
padding-left: 30px;
padding-right: 5px;
text-decoration: none;
transition: 250ms;
&:before {
content: "\f107";
display: block;
font-family: FontAwesome;
font-size: 24px;
font-weight: 500;
left: 20px;
position: absolute;
top: 10px;
}
&.collapsed {
&:before {
content: "\f105";
}
}
}
}
}
}
.wizard-pf-review-content {
padding-top: 10px;
padding-left: 40px;
.wizard-pf-review-item {
padding: 5px 0;
&.sub-item {
margin-left: 10px;
}
.wizard-pf-review-item-label {
font-weight: 700;
padding-right: 10px;
}
.wizard-pf-review-item-field {
font-weight: 700;
margin: 5px 0;
padding-right: 10px;
&:first-of-type {
margin-top: 0;
}
&:last-of-type {
margin-bottom: 0;
}
&.sub-field {
margin-left: 10px;
}
}
}
}
.wizard-pf-success-icon {
color: @color-pf-green-400;
font-size: (@font-size-base * 5.6);
line-height: (@font-size-base * 5.6);
}
/* styles the footer */
.wizard-pf-footer {
background:@color-pf-white;
border-top: 1px solid @color-pf-black-300;
margin-top: 0;
padding-bottom: 17px;
.btn-cancel {
margin-right:25px;
}
}
.wizard-pf-row {
@media (min-width: @screen-sm-min) {
display: flex;
width:100%;
height: 900px;
max-height: 65vh;
}
}
// Scale up the modal
@media (min-width: @screen-md-min) {
// increasing space around modal for larger viewports
.wizard-pf {
padding: 30px 0;
width: 900px;
}
// increasing width of sidebar for larger viewports
.wizard-pf-sidebar .list-group-item > a {
width: 18em;
}
}
//
//
// This is for the new wizard that is more robust on mobile.
// --------------------------------------------------
.wizard-pf-steps-alt, .wizard-pf-steps-alt ul {
list-style: none;
margin: 0;
padding: 0;
}
.wizard-pf-steps-alt {
margin-left: 15px;
margin-top: 15px;
background-image: linear-gradient(to right, transparent 11px, @color-pf-black-300 11px, @color-pf-black-300 13px, transparent 13px);
@media (min-width: @screen-sm-min) {
display:none;
}
&-indicator {
position: relative;
// caret to top showing active substep
&:after {
color: @color-pf-black-700;
content: "\f107"; // top caret
display: block;
font-family: FontAwesome;
font-size: 24px;
font-weight: 500;
position: absolute;
right: 17px;
top: 50%;
transform:translateY(-50%);
@media (min-width: @screen-sm-min) {
display:none;
}
}
&.active {
&:after {
content: "\f106";
}
}
}//indicator
}//.wizard-pf-steps-alt
.wizard-pf-step-alt {
margin-bottom: 10px;
a {
display:flex;
flex:1;
&:hover {
text-decoration: none;
.wizard-pf-step-alt-title {
color: @color-pf-blue-300;
}
}
}
ul {
margin-left: 11px;
}
.wizard-pf-step-alt-title {
margin-left: 5px;
align-self:center;
}
.wizard-pf-step-alt-number {
flex:0 0 auto;
}
&.active {
.wizard-pf-step-alt-number {
background-color: @color-pf-blue-300;
border-color: @color-pf-blue-300;
cursor: default;
color: @color-pf-white;
}
.wizard-pf-step-alt-title {
color: @color-pf-blue-300;
}
.wizard-pf-step-alt-substep:first-of-type {
margin-top: 2px; // gives proper spacing below number in circle active state
}
}
&.viewed {
.wizard-pf-step-alt-number {
color: @color-pf-black;
background-color: @color-pf-white;
border-color: @color-pf-blue-300;
}
}
}//.wizard-pf-step-alt
.wizard-pf-step-alt-number {
background-color: @color-pf-white;
border-radius: 50%;
border: solid 2px @color-pf-black-400;
color: @color-pf-black-400;
font-size: @font-size-base;
font-weight: 700;
height: 24px;
width: 24px;
display: inline-block;
text-align: center;
}
.wizard-pf-step-alt-title {
color: @color-pf-black;
font-weight: 700;
text-transform: capitalize;
display:inline-block;
}//.wizard-pf-steps-alt-title
.wizard-pf-step-alt-substep {
display:flex;
a {
padding:5px 0 5px 18px;
color: @color-pf-black-800;
}
&:not(.disabled) {
&.active, &:hover {
background-color: @color-pf-black-200;
background-image: linear-gradient(to right, @color-pf-blue-300 2px, transparent 2px);
a {
color:@color-pf-blue-300;
}
}
}
&.active {
a {
font-weight:700;
}
}
&.disabled {
cursor: not-allowed;
a {
pointer-events: none;
}
}
}