@kie-tools.dashbuilder-client.dist.org.dashbuilder.DashbuilderRuntime.less.wizard.less Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of quarkus-dashbuilder-ui
Show all versions of quarkus-dashbuilder-ui
Dashbuilder extension Web Bundle
//
// 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;
}
}