scout.form.fields.wizard.WizardProgressField.css Maven / Gradle / Ivy
/*******************************************************************************
* Copyright (c) 2014-2015 BSI Business Systems Integration AG.
* All rights reserved. This program and the accompanying materials
* are made available under the terms of the Eclipse Public License v1.0
* which accompanies this distribution, and is available at
* http://www.eclipse.org/legal/epl-v10.html
*
* Contributors:
* BSI Business Systems Integration AG - initial API and implementation
******************************************************************************/
@wizard-progress-height: 52px;
@wizard-progress-border-width: 1px;
@wizard-progress-content-h-padding: 15px;
@wizard-progress-separator-width: 10px;
@wizard-progress-separator-line-width: 1px;
@wizard-progress-border-color: @border-color;
@wizard-step-active-background-color: @active-inverted-background-color;
@wizard-step-active-color: @active-inverted-color;
@wizard-step-active-separator-color: @wizard-step-default-separator-color;
@wizard-step-after-active-background-color: @palette-blue-0;
@wizard-step-after-active-color: @wizard-step-default-color;
@wizard-step-after-active-separator-color: @wizard-step-default-separator-color;
@wizard-step-before-active-background-color: @palette-blue-0;
@wizard-step-before-active-color: @wizard-step-default-color;
@wizard-step-before-active-separator-color: @border-color;
@wizard-step-default-background-color: @control-background-color;
@wizard-step-default-color: @control-color;
@wizard-step-default-separator-color: @border-color;
@wizard-step-disabled-active-background-color: @palette-gray-2;
@wizard-step-disabled-active-color: @wizard-step-disabled-color;
@wizard-step-disabled-active-separator-color: @wizard-step-disabled-separator-color;
@wizard-step-disabled-background-color: @wizard-step-default-background-color;
@wizard-step-disabled-color: @palette-gray-6;
@wizard-step-disabled-separator-color: @wizard-step-default-separator-color;
#scout {
.wizard-step-color(@color) {
color: @color;
}
.wizard-step-background-color(@background-color) {
background-color: @background-color;
& .wizard-step-separator::after {
border-left-color: @background-color;
}
}
.wizard-step-separator-color(@separator-color) {
& .wizard-step-separator::before {
border-left-color: @separator-color;
}
}
}
.wizard-steps {
overflow: hidden;
margin-left: @mandatory-indicator-width;
margin-right: 0;
padding-bottom: @scrollbar-margin + (2 * @scrollbar-side-margin);
}
.wizard-steps-body {
height: @wizard-progress-height;
overflow: hidden;
white-space: nowrap; /* Allows the last wizard-step to be 100% without line break */
border: @wizard-progress-border-width solid @wizard-progress-border-color;
/* This creates a new stacking context: */
position: relative;
z-index: 0;
}
.wizard-step {
display: inline-block;
height: @wizard-progress-height - (2 * @wizard-progress-border-width);
line-height: @wizard-progress-height - (2 * @wizard-progress-border-width);
position: relative;
color: @wizard-step-default-color;
background-color: @wizard-step-default-background-color;
/* Spacing */
padding-left: @wizard-progress-separator-width + @wizard-progress-content-h-padding;
padding-right: @wizard-progress-content-h-padding;
/* Step content */
& > .wizard-step-content {
display: inline-table;
line-height: normal;
vertical-align: middle;
margin-top: -2px; /* "display: inline-xyz" seems to add some implicit margins, which causes the block not to be vertically centered */
table-layout: fixed;
max-width: 200px;
min-height: 30px;
& > .wizard-step-content-icon {
display: table-cell;
vertical-align: top;
padding-right: 8px;
}
& > .wizard-step-content-text {
display: table-cell;
vertical-align: top;
& > .wizard-step-title {
#scout.overflow-ellipsis-nowrap();
font-weight: bold;
}
& > .wizard-step-sub-title {
#scout.overflow-ellipsis-nowrap();
}
}
}
&.first {
padding-left: @wizard-progress-content-h-padding;
}
&.last > .wizard-step-content {
max-width: none;
}
/* Step separator */
.wizard-step-separator {
/* Arrow separators (::after is behind ::before) */
&::after,
&::before {
content: '';
display: inline-block;
position: absolute;
top: (@wizard-progress-height / 2) - @wizard-progress-border-width;
left: 100%;
height: 0;
width: 0;
margin-top: -((@wizard-progress-height / 2) + 4);
border-top: ((@wizard-progress-height / 2) + 4) solid transparent;
border-bottom: ((@wizard-progress-height / 2) + 4) solid transparent;
border-left: @wizard-progress-separator-width solid transparent;
z-index: 1; /* draw over next .wizard-step */
}
&::after {
/* border-left-color must match background color of .wizard-step */
border-left-color: @wizard-step-default-background-color;
}
&::before {
margin-left: @wizard-progress-separator-line-width;
border-left-color: @wizard-step-default-separator-color;
}
}
/* Hover state */
&.action-enabled:hover {
cursor: pointer;
& > .wizard-step-content > .wizard-step-title {
text-decoration: underline;
}
}
/* Step types */
&.disabled {
#scout.wizard-step-color(@wizard-step-disabled-color);
#scout.wizard-step-background-color(@wizard-step-disabled-background-color);
#scout.wizard-step-separator-color(@wizard-step-disabled-separator-color);
&.active {
#scout.wizard-step-color(@wizard-step-disabled-active-color);
#scout.wizard-step-background-color(@wizard-step-disabled-active-background-color);
#scout.wizard-step-separator-color(@wizard-step-disabled-active-separator-color);
}
}
&:not(.disabled) {
&.active {
#scout.wizard-step-color(@wizard-step-active-color);
#scout.wizard-step-background-color(@wizard-step-active-background-color);
#scout.wizard-step-separator-color(@wizard-step-active-separator-color);
}
&.left-of-active {
#scout.wizard-step-separator-color(@wizard-step-active-separator-color);
}
&.before-active {
#scout.wizard-step-color(@wizard-step-before-active-color);
#scout.wizard-step-background-color(@wizard-step-before-active-background-color);
#scout.wizard-step-separator-color(@wizard-step-before-active-separator-color);
}
&.after-active {
#scout.wizard-step-color(@wizard-step-after-active-color);
#scout.wizard-step-background-color(@wizard-step-after-active-background-color);
#scout.wizard-step-separator-color(@wizard-step-after-active-separator-color);
}
}
}
/* Special rules for wizard container form */
.form.wizard-container-form > .root-group-box {
/* Remove the menubar border, instead the .wizard-steps's border will be used */
& > .main-menubar {
border-bottom: 0;
}
/* If wizard progress field is in the root-group-box, use negative margins to */
/* draw it up to the border of the form (like the main-menubar itself). */
& > .group-box-body > .wizard-progress-field > .wizard-steps {
margin-left: -@root-group-box-padding-left;
margin-right: -@root-group-box-padding-right;
/* Align first and last step content with form fields */
& > .wizard-steps-body {
border-left: 0;
border-right: 0;
& > .wizard-step.first {
padding-left: @root-group-box-padding-left + @mandatory-indicator-width;
}
& > .wizard-step.last {
padding-right: @root-group-box-padding-right;
}
}
}
/* FIXME bsh: Try to find a better solution */
& > .group-box-body > .group-box > .group-box-body {
padding-top: 0;
padding-bottom: @group-margin-bottom;
}
}
© 2015 - 2025 Weber Informatics LLC | Privacy Policy