| // |
| // Wizard |
| // -------------------------------------------------- |
| .wizard-pf { |
| height:100%; |
| margin: 0 auto; |
| max-height: 900px; |
| padding: 10px; |
| width: auto; |
| .modal-content { |
| height:100%; |
| } |
| } |
| |
| // Wizard header |
| // Top section of the wizard w/ title and dismiss |
| |
| .wizard-pf-body { |
| 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; |
| bottom: 0; |
| left: 0; |
| overflow-x: hidden; |
| overflow-y: auto; |
| position: absolute; |
| top: 0; |
| .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; |
| } |
| } |
| &.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 { |
| background: @color-pf-blue-300; |
| content: " "; |
| 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; |
| text-align: center; |
| } |
| .wizard-pf-steps-indicator { |
| font-size: ceil((@font-size-base * 1.3333)); |
| display: inline-block; |
| @supports(display: flex) { |
| display: flex; |
| } |
| height: 120px; |
| justify-content: space-around; |
| list-style: none; |
| padding: 38px 0 0; |
| 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; |
| /* draw the line between the circles */ |
| &: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; |
| font-size: 16px; |
| cursor: pointer; |
| 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; |
| left: calc(50% - 13px); |
| line-height: 22px; |
| position: absolute; |
| top: 27px; |
| width: 25px; |
| } |
| .active .wizard-pf-step-number { |
| cursor: default; |
| background-color: @color-pf-blue-300; |
| border-color: @color-pf-blue-300; |
| color: @color-pf-white; |
| } |
| |
| .viewed-pf .wizard-pf-step-number { |
| background-color: @color-pf-white; |
| border-color: @color-pf-blue-300; |
| color: @color-pf-black; |
| } |
| } |
| |
| /* styles the main content portion of the wizard */ |
| .wizard-pf-main { |
| // display: table-cell; |
| height: 100%; |
| margin-left: 253px; /* this value is updated by js */ |
| overflow: auto; |
| padding: 3em; |
| vertical-align: top; |
| // width: 10000px; |
| .blank-slate-pf { |
| background-color: transparent; |
| border: none; |
| left: 0; |
| right: 0; |
| } |
| } |
| |
| /* 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 { |
| border-top: 1px solid @color-pf-black-300; |
| bottom: 0; |
| left: 0; |
| margin-top: 0; |
| padding-bottom: 17px; |
| position: absolute; |
| right: 0; |
| |
| .btn-cancel { |
| margin-right:25px; |
| } |
| } |
| |
| .wizard-pf-row { |
| bottom: 58px; /* this value is updated by js */ |
| position: absolute; |
| overflow: hidden; |
| top: 172px; /* this value is updated by js */ |
| width:100%; |
| } |
| |
| // 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; |
| } |
| } |
