/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/styles.scss ***!
\*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/* You can add global styles to this file, and also import other style files */
.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}
.cdk-overlay-container{position:fixed;z-index:1000}
.cdk-overlay-container:empty{display:none}
.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}
.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}
.cdk-overlay-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);opacity:0}
.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}
.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}
.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}
.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}
.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}
.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}
.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}
/*
Colors
Styleguide 2.1
*/
/*
Color definitions
markup:
sg-wrapper:
#ffffff rgb(255,255,255) tr-white
#b9dcf7
rgb(185,220,247)
tr-blue0
Content Button selected: Background
#74b9ef
rgb(116,185,239)
tr-blue1
Active state on dark-blue background
Main menu tab selected: Icon, Label, Indicator
#51a7eb
rgb(81,167,235)
tr-blue2
Active state on white background
Sub menu tab selected: Indicator
#177AC9
rgb(23,122,201)
tr-blue3
Active text-color on light backgrounds
Content button active: Label
#285172
rgb(40,81,114)
tr-blue4
machine-blue
Footer: Background
Menu button: Background
Icon color
Flag, e.g. Unsaved
#142939
rgb(20,41,57)
tr-blue5
dark-blue
Main menu: Background
Sub menu tab selected: Icon Label
#899fb2
rgb(137,159,178)
tr-blue6
Box shadow
Dialog
Tooltip
Message
#93a8b8
rgb(147,168,148)
tr-blue7
in Grafiken
#e7ecf0
rgb(231,236,240)
tr-grey1
Content tab enabled: Background
Wizard enabled: Background
#a1a1a1
rgb(161,161,161)
tr-grey2
Main menu tab pressed: Icon Label
Input filed enabled: Outline
#363636
rgb(54,54,54)
tr-grey3
Icon color
Icon enabled
#131313
rgb(19,19,19)
tr-grey4
Button Icon enabled: Icon
Button Label enabled: Label
#9a9a9a
rgb(154,154,154)
tr-grey5
Icon color
Icon disabled
#707070
rgb(112,112,112)
tr-grey6
Icon color
Breadcrumb-Icon disabled
Flag, e.g. Hold
#f7f7f7
rgb(247,247,247)
tr-grey7
Hintergründe für Bilder und Grafiken
#bbd03a
rgb(187,208,58)
tr-green
in Grafiken
flag checked
#ff1e00
rgb(255,30,0)
tr-red1
Helpertext
Outline Tooltip, Messages
#cc292d
rgb(204,41,45)
tr-red2
Icon color
Flag, e.g. Error
#000000
rgb(0,0,)
tr-black
Background
Styleguide 2.1.1
*/
/*
Color Contrast
To ensure the best readability in low light conditions, the color contrast should be checked.
A lower contrast is allowed for elements with noncritical information or to visualize a temporary state.
The following picture exemplary shows the color contrasts of a content button and its corresponding label
for different states according to conformance levels AA and AAA (as documented in the Web Content Accessibility Guidelines (WCAG)).
The enabled state has the highest contrast (AAA conformance), because the user should be
able to read the text under any circumstances.
The other states are temporary. They do either need no user action (disabled, selected) or only provide feedback to a
successful user interaction (hover, pressed). Therefore, it is possible to have a lower
contrast in this case (AA conformance).
Styleguide 2.1.2
*/
/*
Accessibility
To ensure a good readability for people with color blindness, it is necessary that the screen design
is checked for the following types of color blindness:
Styleguide 2.2
*/
@font-face {
font-family: "OpenSans";
font-style: normal;
font-weight: 300;
src: url('OpenSans-Light.woff2?v=1.101') format("woff2"), url('OpenSans-Light.woff?v=1.101') format("woff");
}
@font-face {
font-family: "OpenSans";
font-style: italic;
font-weight: 300;
src: url('OpenSans-LightItalic.woff2?v=1.101') format("woff2"), url('OpenSans-LightItalic.woff?v=1.101') format("woff");
}
@font-face {
font-family: "OpenSans";
font-style: normal;
font-weight: normal;
src: url('OpenSans-Regular.woff2?v=1.101') format("woff2"), url('OpenSans-Regular.woff?v=1.101') format("woff");
}
@font-face {
font-family: "OpenSans";
font-style: italic;
font-weight: normal;
src: url('OpenSans-Italic.woff2?v=1.101') format("woff2"), url('OpenSans-Italic.woff?v=1.101') format("woff");
}
@font-face {
font-family: "OpenSans";
font-style: normal;
font-weight: 600;
src: url('OpenSans-Semibold.woff2?v=1.101') format("woff2"), url('OpenSans-Semibold.woff?v=1.101') format("woff");
}
@font-face {
font-family: "OpenSans";
font-style: italic;
font-weight: 600;
src: url('OpenSans-SemiboldItalic.woff2?v=1.101') format("woff2"), url('OpenSans-SemiboldItalic.woff?v=1.101') format("woff");
}
@font-face {
font-family: "OpenSans";
font-style: normal;
font-weight: bold;
src: url('OpenSans-Bold.woff2?v=1.101') format("woff2"), url('OpenSans-Bold.woff?v=1.101') format("woff");
}
@font-face {
font-family: "OpenSans";
font-style: italic;
font-weight: bold;
src: url('OpenSans-BoldItalic.woff2?v=1.101') format("woff2"), url('OpenSans-BoldItalic.woff?v=1.101') format("woff");
}
@font-face {
font-family: "OpenSans";
font-style: normal;
font-weight: 800;
src: url('OpenSans-ExtraBold.woff2?v=1.101') format("woff2"), url('OpenSans-ExtraBold.woff?v=1.101') format("woff");
}
@font-face {
font-family: "OpenSans";
font-style: italic;
font-weight: 800;
src: url('OpenSans-ExtraBoldItalic.woff2?v=1.101') format("woff2"), url('OpenSans-ExtraBoldItalic.woff?v=1.101') format("woff");
}
@font-face {
font-family: "uid-iconfont";
src: url('uid-iconfont.ttf');
}
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in
* IE on Windows Phone and in iOS.
*/
html {
line-height: 1.15;
/* 1 */
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers (opinionated).
*/
body {
margin: 0;
}
/**
* Add the correct display in IE 9-.
*/
article,
aside,
footer,
header,
nav,
section {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
margin: 0.67em 0;
font-size: 2em;
}
/* Grouping content
========================================================================== */
/**
* Add the correct display in IE 9-.
* 1. Add the correct display in IE.
*/
figcaption,
figure,
main {
/* 1 */
display: block;
}
/**
* Add the correct margin in IE 8.
*/
figure {
margin: 1em 40px;
}
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
height: 0;
/* 1 */
box-sizing: content-box;
/* 1 */
overflow: visible;
/* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/
a {
background-color: transparent;
/* 1 */
-webkit-text-decoration-skip: objects;
/* 2 */
}
/**
* 1. Remove the bottom border in Chrome 57- and Firefox 39-.
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none;
/* 1 */
text-decoration: underline;
/* 2 */
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
/* 2 */
}
/**
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
*/
b,
strong {
font-weight: inherit;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/**
* Add the correct font style in Android 4.3-.
*/
dfn {
font-style: italic;
}
/**
* Add the correct background and color in IE 9-.
*/
mark {
background-color: #ff0;
color: #000;
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
audio,
video {
display: inline-block;
}
/**
* Add the correct display in iOS 4-7.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Remove the border on images inside links in IE 10-.
*/
img {
border-style: none;
}
/**
* Hide the overflow in IE.
*/
svg:not(:root) {
overflow: hidden;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
margin: 0;
/* 2 */
font-family: OpenSans, sans-serif;
/* 1 */
font-size: 100%;
/* 1 */
line-height: 1.15;
/* 1 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input {
/* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select {
/* 1 */
text-transform: none;
}
/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
* controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.
*/
button,
html [type=button],
[type=reset],
[type=submit] {
-webkit-appearance: button;
/* 2 */
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
padding: 0;
border-style: none;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
display: table;
/* 1 */
max-width: 100%;
/* 1 */
box-sizing: border-box;
/* 1 */
padding: 0;
/* 3 */
color: inherit;
/* 2 */
white-space: normal;
/* 1 */
}
/**
* 1. Add the correct display in IE 9-.
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
display: inline-block;
/* 1 */
vertical-align: baseline;
/* 2 */
}
/**
* Remove the default vertical scrollbar in IE.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.
*/
[type=checkbox],
[type=radio] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type=search] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
*/
[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
*/
details,
menu {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Scripting
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
canvas {
display: inline-block;
}
/**
* Add the correct display in IE.
*/
template {
display: none;
}
/* Hidden
========================================================================== */
/**
* Add the correct display in IE 10-.
*/
[hidden] {
display: none;
}
/**
* Remove the blue border on images and links inside links
*/
img {
border-style: none;
}
a img {
outline: none;
}
:focus {
outline: none;
}
html,
body {
min-width: 800px;
height: 100%;
min-height: 600px;
position: relative;
font-size: 14px;
}
.trumpf-ui {
font-family: OpenSans, sans-serif;
font-weight: normal;
}
/*
Assets
markup:
sg-wrapper:
Styleguide 2.3
*/
/*
Basic Atom
Default behaviour of components
Available modifiers:
:disabled - disabled state
default - default state
:focus - focus state
:hover - mouseover state
:active - pressed state
.selected - selected state
.selected:focus - selected & focus state
.selected:hover - selected & hover state
markup:
sg-wrapper:
For active states and transition to selected state see exemplary animation.
transparent area over hover state reduces in direction to selection line and gets 0% transparency
selection line moves to tab
markup:
sg-wrapper:
Styleguide 3.2.1
*/
/*
General
This living style guide supports you in creating Graphical User Interfaces (GUIs) for all TRUMPF products on
different devices in the TRUMPF style. By applying the guidelines, you help to create a holistic brand experience.
Screen sizes
All components apply to all screen sizes, but are shown exemplary for two screen sizes:
A: View 100%, as in layout including animations/effects
B: View with slight limitations, e.g. without animation, dropdowns in system color
C: Use possible, hint on current browser
D: Not supported, hint on current browser
Browser
A
B
C
D
Windows Edge
X
Windows - IE11
X
Windows - IE10
X
Windows - IE9
X
Windows - IE <9
X
Windows Chrome (current version)
X
Windows Chrome (Chrome for work)
X
Windows Firefox (current version)
X
Windows Firefox (ESR)
X
macOS - Safari 10
X
macOS - Safari 9
X
iOS 10 - Safari
X
iOS 9 - Safari
X
Android - Browser
X
Android - Chrome (aktuelle Version)
X
Android - Firefox (aktuelle Version)
X
Windows Phone 10
X
markup:
sg-wrapper:
Styleguide 1.1
*/
/*
GUI design
The GUI design is derived from the product design of TRUMPF machines
and takes up their brand-typical design language.
Visual similarity between machine and GUI is created by the division into areas.
The main menu button (Design element in machine-blue color) on the top left corner of every
screen serves as the central focus point. The resulting areas structure the content and
create an orientation in horizontal and vertical direction for the user.
The GUI design combines visual elements from the TRUMPF HMI Touchpoint and the TRUMPF website:
as they are two main touchpoints.
Similar to Touchpoint, the GUI has a black background and dark navigation,
to integrate well into the hardware.
Similar to the website, the GUI has a bright content area and works with soft
shadows on elements to create a light deep effect.
TRUMPF Design element
The harmonic and characteristic proportion of 5:4 is used in several controls and in parts
of the screen design, to support the brand recognition.
The proportions are used in controls, like:
Home Button
Buttons
Checkbox
Wizard indicators
Flag of input field
Paging indicator
Progress bar
Loader animations
markup:
sg-wrapper:
Styleguide 1.3
*/
/*
9 Rules to design a TRUMPF GUI
With high contrasts, minimum touch sizes and uniformly designed controls,
the style guide is the basis for accessible GUIs. To achieve a high usability, the user,
their tasks and goals and the context of use shall be considered for each new GUI design.
Share new use cases or GUIs to the styleguide team, to help us improve the styleguide.
markup:
sg-wrapper:
Styleguide 1.2
*/
/*
Basic layout structure
The content area of each GUI is structured in the same way. The orientation (horizontal or vertical)
of main and sub navigation depends on the content of a GUI.
General recommendations for building navigation structures:
Strive for flat navigation, that means that a user can access the deepest
menu level within two clicks if possible
Limit the number of levels
Consider which layout fits your most important data best: Does your data benefit from more horizontal or vertical space?
A horizontal orientation is recommended for GUIs, which
Have more than two menu levels. The third and fourth level are positioned vertically then.
Need more horizontal than vertical space, e.g. for charts with a time line
A vertical orientation is recommended for GUIs, which
Have only a flat navigation structure with two levels
Need more horizontal space, e.g. for lists
The following pictures show how to build possible layout structures step by step.
1. Background
2. TRUMPF Design element
3. Main navigation
4. Sub navigation and content area
5. Nested content areas
6. Footer bar
7. Overlay e.g. tooltip
8. Popups
Example for an GUI which is integrated in Touchpoint
Example for a stand-alone GUI
tr-black
markup:
sg-wrapper:
Styleguide 1.4
*/
/*
Screen sizes and resolutions
The control sizes for different screen sizes and their resolutions can be calculated by using a scaling factor.
For the screen design and implementation in web technology the base
for smartphone and tablet is chosen always in the technical resolution (= half resolution).
The tablet "Base" screen type is the initial point as shown in the table:
Name
Screen Diagonal (inch)
Width (px)
Height (px)
Resolution (dpi)
Pixel size (mm)
Scaling Factor (rounded)
Desktop
23
1920
1080
~96
0.27
0.8
Example Screen: "16:9 B20"
15.6
1920
1080
141
0.18
1.2
Example Screen: "3:4 B20"
10.5
1024
768
122
0.21
1.0
Tablet "Base"
10.5
1024
768
~120
0.21
1.0
Tablet
10
1920
1080
~240
0.12
2.0
Smartphone
5
1920
1080
~480
0.06
3.5
How to calculate the scaling factor:
Summarize necessary information of the screen:
Screen diagonal (inch)
Width (px)
Height (px)
Resolution (dpi)
Pixel size (mm)
You get the resolution from your width and height with:
resolution = square root of (widthInPx² + heightInPx²) / ScreenDiagonalInInch
Example: Calculate the scaling factor for "Desktop"
0.21 / 0.27 = 0.77…
Round the scaling factor:
The "Base" screen is designed on an 8*8px grid. To continue working with this grid and make the scaling
of the controls easier, round the scaling factor to the next or last value which is divisible by 8.
40px
X
scaling factor
= approximate button height
> new button height (divisible though 8)
40px
/
new button height
= rounded scaling factor
Example: Height of a button
40px
"Base" X
0.77…
= 31.12
> 32
32
/
40
= 0.8
So use 0.8 as your scaling factor for this resolution.
markup:
sg-wrapper:
Styleguide 1.5
*/
/*
Touch areas
A touch area is the tappable area of a control which must not necessarily be visible in the design.
The appropriate size of a touch area supports accurate interactions, reduces the number of operating errors and operating time.
The touch area for TRUMPF GUIs is defined with 13x13 mm.
This size lies between the VDI Norm 3850 which recommends a size of 15x15 mm as industrial standard and the Microsoft guidelines which recommend a size of 7x7 mm for mobile consumer devices.
The following graphic shows the touch area for a button (single) and a toggle bar:
The margin of the touch area should be enlarged, if
The actions are time-critical. The user must be able to quickly find controls and actuate them.
The actions themselves are critical. Reduce the risk of actuating them accidentally.
The action is the primary action or one of the main actions.
The touch area may be smaller (but shall not be less than 7 mm), if
The target device is a smartphone.
markup:
sg-wrapper:
Styleguide 1.6
*/
/*
Grid
A grid represents the basic structure of the graphic design and gives it an orderly look.
It helps you to organize the content and supports consistency throughout different TRUMPF GUIs.
The grid consists of margins, columns and rows. Margins are the space between content area to the
screens edges and the spaces between controls.
The sizes of the grid refer to the screen tablet "Base" (screen size 10.5 inch, resolution 1024x768 px).
To calculate the corresponding sizes for other screens, see chapter 1.5 Screen sizes and resolutions.
Columns and rows are built on an 8x8 px grid.
Margins of content areas differ; the minimum distance is 12 px.
Margins between controls differ; the minimum distance is 4 px.
They are a multiple of 8 or less, but always an even number.
Alignment
Controls are aligned to an 8 px grid.
Smaller components, like typography and icons are aligned to a 4 px grid.
While aligning try to identify key lines in the content.
Elements in the same row or columns are aligned to the grid.
Control sizes vary only within the grid.
The following examples show the use of an 8x8 px grid for the screen tablet "Base" (screen size 10.5 inch, resolution 1024x768 px).
Margin between controls
To support the function of the controls, different margin between controls are needed.
0px: Atoms which build molecules (e.g. button in a toggle bar) where only one atom can be active
4px: Atoms which build molecules, but the atoms trigger separate functions
(e.g.: Input field with button, spinner)
12px: Grouped atoms which build a content unity (e.g.: footer)
Controls used in the content area have different margin:
16px: Visible margin between controls which are placed in the content
Technically the margin are created as follows
0px margin between controls which bring their own padding, e.g.
8px: margin between a control with padding and a control without padding
Example: Wizard Popup
The size of the wizard popup is defined by margins to the screen edges:
Margin -top and -bottom: 1.5x8 px
Margin -right: 3x8 px
Margin -left: aligned in a key line with the menu button
The wizard is structured in header, content and footer. The size of header and footer limit the size of the content.
Height header: 64 px (8x8 px)
Height footer: 52 px (fixed size)
The individual width of a control is defined by its content. If controls are placed in a row first define their
individual width and scale them afterwards to the total content width within the grid. In this case,
the controls have a margin of 4 px to the left and right border of the wizard.
To provide a visual hierarchy, parts may be indented by 48 px.
Key lines are used to structure the controls in the vertical direction.
Example: Main navigation (Atom – Tab > Organism – Main menu)
The length of the tabs in the main navigation depends on the content. Therefore, the tabs can not be
built on the 8 x 8px grid, like the input field. The paddings base on the grid.
Padding- top, -button: 16 px
Padding- left: 4 px
Padding- right: 10 px
Padding between icon and label: 8 px
The main navigation consists of several tabs. The distances of the tabs are defined at a multiple of 8 (6x8 px).
The group is aligned to the left (30 px).
Example: Content
Contents have margins of 24 px (3x8 px) to the left and right.
The Content is structured in a header, content and a footer.
The height of the content is defined by the height of header and footer.
The header is 40 px high, has a top-margin of 12 px (1,5x8 px) and a bottom-border of 28 px.
The footer is 52 px high. The content of the footer is aligned to the center.
Example: Table
The columns of the table are flexible. The first and the last columns have a gutter of 8 px.
The gutters have a fixed width of 12 px.
If the first column contains a checkbox, the gutter is 8 px.
Text in columns is aligned to the text in the column header. (visualized by key lines)
The column drop layout stacks one column at a time as the viewport is reduced.
Reveal / Hide Content
In smaller screens, parts of the content may be hidden. They are revealed if enough space is available,
e.g. after a defined breakpoint.
Expand
Content may expand across the screen if more space is available.
Divide
Content which must not be seen at the same time is divided into two screens,
if there is little space. As soon as more space is available, the whole content
may be presented on the same screen
Transform
The content status changes according to the needed space for a status.
If there is little space, information may be displayed read-only whereas with enough
space edit fields may be displayed instead.
To ensure the best readability in low light conditions, the color contrast should be checked.
A lower contrast is allowed for elements with noncritical information or to visualize a temporary state.
The following picture exemplary shows the color contrasts of a content button and its corresponding label
for different states according to conformance levels AA and AAA (as documented in the Web Content Accessibility Guidelines (WCAG)).
The enabled state has the highest contrast (AAA conformance), because the user should be
able to read the text under any circumstances.
The other states are temporary. They do either need no user action (disabled, selected) or only provide feedback to a
successful user interaction (hover, pressed). Therefore, it is possible to have a lower
contrast in this case (AA conformance).
Styleguide 2.1.2
*/
/*
Accessibility
To ensure a good readability for people with color blindness, it is necessary that the screen design
is checked for the following types of color blindness:
Protanopia
Tritanopia
Deuteranopia
Monochromacy
Styleguide 2.1.3
*/
/*
Buttons
There are four different kinds of buttons, which may be used in TRUMPF GUIs:
Menu Button
Content Button
Footer Button
Icon Only Button
1. Menu Button
The menu button shall only be used in the main navigation as a link to main menu.
Visualization: tr-blue4 (machine-blue) button with a fixed proportion
of 5:4 in the upper left corner of the screen
2. - 3. Buttons
The other two button types shall be used in different areas of the content.
The buttons may be composed of the following parts:
Label
Icon. All icon buttons have a fixed proportion of 5:4 (= 50x40px > Tablet "Base")
Icon and label
2. Content Button
Content buttons shall only be used in in content areas in combination or in grouped with other controls.
Visualization: The visualization distinguishes between primary and secondary action. The primary action has a tr-blue4 background and outer-shadow to emphasize it visually. The secondary action has a tr-grey2 outline and outer-shadow, see 2.4 Basic Atom
In front of pictures or graphics (e.g. to navigate) use the content button secondary .icon-transparent-btn.
3. Footer Button
Footer buttons shall only be used in the footer on a tr-blue4 (machine-blue) background.
Visualization: The visualization distinguishes between primary and secondary action.
The primary action has a tr-white background to emphasize it visually.
The secondary action has a tr-white outline to attracts less attention.
4. Icon Only Button
Icon Only Buttons shall only be used as element of other controls, e.g. dialog, scrollbar, Sidebar-Footer, scrollbar or infotip.
Visualization: The button is composed of an icon only. Just the focus state has a 2px outline.
Styleguide 4.1
*/
/*
Content Button Primary
Available modifiers:
:disabled - Content Button Primary disabled state
default - Content Button Primary default state
:focus - Content Button Primary focus state
:hover - Content Button Primary mouseover state
:active - Content Button Primary pressed state
.selected - Content Button Primary selected state
.selected:focus - Content Button Primary selected & focus state
.selected:hover - Content Button Primary selected & hover state
.icon-label-btn - Content Button Primary selected & hover state
.icon-btn - Content Button Primary selected & hover state
markup:
:disabled - Icon Only Button disabled state
default - Icon Only Button default state
:focus - Icon Only Button focus state
:hover - Icon Only Button mouseover state
:active - Icon Only Button pressed state
.selected - Icon Only Button selected & hover state
markup:
default - default Menu Button state
:focus - Menu Button focus state
:hover - Menu Button mouseover state
:active - Menu Button pressed state
markup:
sg-wrapper:
To ensure the best readability in low light conditions, the color contrast should be checked.
A lower contrast is allowed for elements with noncritical information or to visualize a temporary state.
The following picture exemplary shows the color contrasts of a content button and its corresponding label
for different states according to conformance levels AA and AAA (as documented in the Web Content Accessibility Guidelines (WCAG)).
The enabled state has the highest contrast (AAA conformance), because the user should be
able to read the text under any circumstances.
The other states are temporary. They do either need no user action (disabled, selected) or only provide feedback to a
successful user interaction (hover, pressed). Therefore, it is possible to have a lower
contrast in this case (AA conformance).
Styleguide 2.1.2
*/
/*
Accessibility
To ensure a good readability for people with color blindness, it is necessary that the screen design
is checked for the following types of color blindness:
Protanopia
Tritanopia
Deuteranopia
Monochromacy
Styleguide 2.1.3
*/
/*
Input Field
Input fields shall only be used in in content areas.
Input fields differ depending on text or value input. Text input is aligned on the left. Value input is aligned on the right.
Input fields are also available with: placeholder text, flags and helper text, e.g. to show an error
Visualization: tr-white field with tr-grey2 outline
:disabled - Input Field disabled state
default - Input Field enabled state
:focus - Input Field focus state
:hover - Input Field mouseover state
:active - Input Field pressed state
.error - Input Field with error flag
.error-high - Input Field with error-high flag
.error-low - Input Field with error-low flag
.warning - Input Field with warning flag
.warning-high - Input Field with warning-high flag
.warning-low - Input Field with warning-low flag
.unsaved - Input Field with unsaved flag
.mandatory - Input Field with mandatory flag
.hold - Input Field with hold flag
.calculated - Input Field with calculated flag
.operator-settings - Input Field with operator-settings flag
markup:
Helper Text (optional)
Helper Text (optional)
sg-wrapper:
Styleguide 4.2
*/
/*
Input Field Value
Available modifiers:
default - enabled state
:disabled - disabled state
:focus - focus state
:hover - mouseover state
:active - pressed state
.placeholder - placeholder
markup:
To ensure the best readability in low light conditions, the color contrast should be checked.
A lower contrast is allowed for elements with noncritical information or to visualize a temporary state.
The following picture exemplary shows the color contrasts of a content button and its corresponding label
for different states according to conformance levels AA and AAA (as documented in the Web Content Accessibility Guidelines (WCAG)).
The enabled state has the highest contrast (AAA conformance), because the user should be
able to read the text under any circumstances.
The other states are temporary. They do either need no user action (disabled, selected) or only provide feedback to a
successful user interaction (hover, pressed). Therefore, it is possible to have a lower
contrast in this case (AA conformance).
Styleguide 2.1.2
*/
/*
Accessibility
To ensure a good readability for people with color blindness, it is necessary that the screen design
is checked for the following types of color blindness:
To ensure the best readability in low light conditions, the color contrast should be checked.
A lower contrast is allowed for elements with noncritical information or to visualize a temporary state.
The following picture exemplary shows the color contrasts of a content button and its corresponding label
for different states according to conformance levels AA and AAA (as documented in the Web Content Accessibility Guidelines (WCAG)).
The enabled state has the highest contrast (AAA conformance), because the user should be
able to read the text under any circumstances.
The other states are temporary. They do either need no user action (disabled, selected) or only provide feedback to a
successful user interaction (hover, pressed). Therefore, it is possible to have a lower
contrast in this case (AA conformance).
Styleguide 2.1.2
*/
/*
Accessibility
To ensure a good readability for people with color blindness, it is necessary that the screen design
is checked for the following types of color blindness:
To ensure the best readability in low light conditions, the color contrast should be checked.
A lower contrast is allowed for elements with noncritical information or to visualize a temporary state.
The following picture exemplary shows the color contrasts of a content button and its corresponding label
for different states according to conformance levels AA and AAA (as documented in the Web Content Accessibility Guidelines (WCAG)).
The enabled state has the highest contrast (AAA conformance), because the user should be
able to read the text under any circumstances.
The other states are temporary. They do either need no user action (disabled, selected) or only provide feedback to a
successful user interaction (hover, pressed). Therefore, it is possible to have a lower
contrast in this case (AA conformance).
Styleguide 2.1.2
*/
/*
Accessibility
To ensure a good readability for people with color blindness, it is necessary that the screen design
is checked for the following types of color blindness:
Protanopia
Tritanopia
Deuteranopia
Monochromacy
Styleguide 2.1.3
*/
/*
Tab
There are four different kinds of tabs:
Main menu tab
Sub menu tab
Content tab
Content with information tab
1. Main menu tab
The main menu tab shall only be used in the main menu.
Visualization: The tabs shall be placed on a tr-blue5 (dark-blue) background.
The font color of the selected tab turns tr-blue1 and the tab gets a tr-blue1 underline.
2. Sub menu tab
The sub menu tab shall only be used in the sub menu.
Visualization: The tabs shall be placed on a tr-black background. The font color of the selected tab turns
bold and tr-blue5 (dark-blue) and the tab gets a tr-blue2 line at its left side.
3. Content tab
The content tab shall only be used in the third level navigation, called
tab bar.
Visualization: The tabs shall be placed on a tr-white background. The font of the selected tab turns
bold and tr-blue5 (dark-blue) and the tab gets a tr-blue2 line at its left side.
The other tabs shall have a tr-grey1 background.
4. Tab Content with information
The content tab may be used in the third or fourth level navigation, called
tab bar.
Visualization: The tabs shall be placed on a tr-white background.
The font of the selected tab turns bold and tr-blue5 (dark-blue) and the tab gets a tr-blue2
line at its left side. The other tabs shall have a tr-grey1 background.
For active states and transition to selected state see exemplary 3.2.1 Animation Tabs
transparent area over hover state reduces in direction to selection line and gets 0% transparency
selection line moves to tab
Styleguide 4.5
*/
/*
Main menu tab
Available modifiers:
:disabled - Tab disabled state
default - Tab default state
:focus - Tab focus state
:hover - Tab hover state
selected - Tab selected state
error - Tab error state
.loading - Tab loading state
markup:
Label
sg-wrapper:
Styleguide 4.5.1
*/
/*
Main menu tab flyout
Available modifiers:
:disabled - Tab disabled state
default - Tab default state
:focus - Tab focus state
:hover - Tab hover state
selected - Tab selected state
error - Tab error state
.loading - Tab loading state
markup:
To ensure the best readability in low light conditions, the color contrast should be checked.
A lower contrast is allowed for elements with noncritical information or to visualize a temporary state.
The following picture exemplary shows the color contrasts of a content button and its corresponding label
for different states according to conformance levels AA and AAA (as documented in the Web Content Accessibility Guidelines (WCAG)).
The enabled state has the highest contrast (AAA conformance), because the user should be
able to read the text under any circumstances.
The other states are temporary. They do either need no user action (disabled, selected) or only provide feedback to a
successful user interaction (hover, pressed). Therefore, it is possible to have a lower
contrast in this case (AA conformance).
Styleguide 2.1.2
*/
/*
Accessibility
To ensure a good readability for people with color blindness, it is necessary that the screen design
is checked for the following types of color blindness:
Protanopia
Tritanopia
Deuteranopia
Monochromacy
Styleguide 2.1.3
*/
/*
Progress Bar
This progress bar should be used to visualize the progression of a defined operation (0-100%).
The graphic may be combined with explaining text and the percent value, see 5.8 Progress
The steps are represented by rectangles with a fixed proportion of 5 to 4.
Visualization: tr-blue4 (maschine-blue) bar, 50% tr-blue4 (maschine-blue) rectangles
If the duration of the progress is not predictable, use the loader.
To ensure the best readability in low light conditions, the color contrast should be checked.
A lower contrast is allowed for elements with noncritical information or to visualize a temporary state.
The following picture exemplary shows the color contrasts of a content button and its corresponding label
for different states according to conformance levels AA and AAA (as documented in the Web Content Accessibility Guidelines (WCAG)).
The enabled state has the highest contrast (AAA conformance), because the user should be
able to read the text under any circumstances.
The other states are temporary. They do either need no user action (disabled, selected) or only provide feedback to a
successful user interaction (hover, pressed). Therefore, it is possible to have a lower
contrast in this case (AA conformance).
Styleguide 2.1.2
*/
/*
Accessibility
To ensure a good readability for people with color blindness, it is necessary that the screen design
is checked for the following types of color blindness:
Protanopia
Tritanopia
Deuteranopia
Monochromacy
Styleguide 2.1.3
*/
/*
Checkbox
Checkboxes allow the user to select one or multiple items from a list.
If the state of a single setting shall be toggled, use the switch
Checkboxes can have a parent-chlid relationship with other checkboxes. The parent checkbox becomes a mixed-state, if some, but not all child checkboxes are checked.
A checkbox has a fixed proportion of 5:4 (= 30x24px > Tablet "Base")
Visualization: tr-white field with tr-grey2 outline, see 2.4 Basic Atom
:disabled - Checkbox disabled state
default - Checkbox default state
:focus - Checkbox focus state
:hover - Checkbox hover state
:active - Checkbox active state
markup:
sg-wrapper:
Styleguide 4.6.1
*/
/*
Checkbox (with label)
Available modifiers:
:disabled - Checkbox disabled state
default - Checkbox default state
:focus - Checkbox focus state
:hover - Checkbox hover state
:active - Checkbox active state
markup:
sg-wrapper:
Styleguide 4.6.2
*/
/*
Checkbox mixed-state
Available modifiers:
:disabled - Checkbox disabled state
default - Checkbox default state
:focus - Checkbox focus state
:hover - Checkbox hover state
:active - Checkbox active state
markup:
To ensure the best readability in low light conditions, the color contrast should be checked.
A lower contrast is allowed for elements with noncritical information or to visualize a temporary state.
The following picture exemplary shows the color contrasts of a content button and its corresponding label
for different states according to conformance levels AA and AAA (as documented in the Web Content Accessibility Guidelines (WCAG)).
The enabled state has the highest contrast (AAA conformance), because the user should be
able to read the text under any circumstances.
The other states are temporary. They do either need no user action (disabled, selected) or only provide feedback to a
successful user interaction (hover, pressed). Therefore, it is possible to have a lower
contrast in this case (AA conformance).
Styleguide 2.1.2
*/
/*
Accessibility
To ensure a good readability for people with color blindness, it is necessary that the screen design
is checked for the following types of color blindness:
Protanopia
Tritanopia
Deuteranopia
Monochromacy
Styleguide 2.1.3
*/
/*
Radio Button
Styleguide 4.7
*/
/*
Radio Button (with label)
Radio buttons allow the user to choose only one of a predefined set of mutually exclusive options.
They are arranged in groups of two or more.
A radio button always has a label.
Visualization: tr-white field with tr-grey2 outline, see 2.4 Basic Atom
Available modifiers:
:disabled - Radio Button disabled state
default - Radio Button default state
:focus - Radio Button focus state
:hover - Radio Button hover state
:active - Radio Button active state
markup:
sg-wrapper:
Styleguide 4.7.1
*/
/*
Radio Button (with label and icon)
Available modifiers:
:disabled - Radio Button disabled state
default - Radio Button default state
:focus - Radio Button focus state
:hover - Radio Button hover state
:active - Radio Button active state
markup:
sg-wrapper:
To ensure the best readability in low light conditions, the color contrast should be checked.
A lower contrast is allowed for elements with noncritical information or to visualize a temporary state.
The following picture exemplary shows the color contrasts of a content button and its corresponding label
for different states according to conformance levels AA and AAA (as documented in the Web Content Accessibility Guidelines (WCAG)).
The enabled state has the highest contrast (AAA conformance), because the user should be
able to read the text under any circumstances.
The other states are temporary. They do either need no user action (disabled, selected) or only provide feedback to a
successful user interaction (hover, pressed). Therefore, it is possible to have a lower
contrast in this case (AA conformance).
Styleguide 2.1.2
*/
/*
Accessibility
To ensure a good readability for people with color blindness, it is necessary that the screen design
is checked for the following types of color blindness:
Protanopia
Tritanopia
Deuteranopia
Monochromacy
Styleguide 2.1.3
*/
/*
Breadcrumb Item
The breadcrumb item shall only be used in the breadcrumb.
Available modifiers:
default - Breadcrumb Item default state
.selected - Breadcrumb Item selected state
.hide - Breadcrumb Item is hidden
markup:
To ensure the best readability in low light conditions, the color contrast should be checked.
A lower contrast is allowed for elements with noncritical information or to visualize a temporary state.
The following picture exemplary shows the color contrasts of a content button and its corresponding label
for different states according to conformance levels AA and AAA (as documented in the Web Content Accessibility Guidelines (WCAG)).
The enabled state has the highest contrast (AAA conformance), because the user should be
able to read the text under any circumstances.
The other states are temporary. They do either need no user action (disabled, selected) or only provide feedback to a
successful user interaction (hover, pressed). Therefore, it is possible to have a lower
contrast in this case (AA conformance).
Styleguide 2.1.2
*/
/*
Accessibility
To ensure a good readability for people with color blindness, it is necessary that the screen design
is checked for the following types of color blindness:
Protanopia
Tritanopia
Deuteranopia
Monochromacy
Styleguide 2.1.3
*/
/*
Scrollbar
The scrollbar shall only be placed on the right side of the content area.
To ensure the best readability in low light conditions, the color contrast should be checked.
A lower contrast is allowed for elements with noncritical information or to visualize a temporary state.
The following picture exemplary shows the color contrasts of a content button and its corresponding label
for different states according to conformance levels AA and AAA (as documented in the Web Content Accessibility Guidelines (WCAG)).
The enabled state has the highest contrast (AAA conformance), because the user should be
able to read the text under any circumstances.
The other states are temporary. They do either need no user action (disabled, selected) or only provide feedback to a
successful user interaction (hover, pressed). Therefore, it is possible to have a lower
contrast in this case (AA conformance).
Styleguide 2.1.2
*/
/*
Accessibility
To ensure a good readability for people with color blindness, it is necessary that the screen design
is checked for the following types of color blindness:
LabelLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergre.
To ensure the best readability in low light conditions, the color contrast should be checked.
A lower contrast is allowed for elements with noncritical information or to visualize a temporary state.
The following picture exemplary shows the color contrasts of a content button and its corresponding label
for different states according to conformance levels AA and AAA (as documented in the Web Content Accessibility Guidelines (WCAG)).
The enabled state has the highest contrast (AAA conformance), because the user should be
able to read the text under any circumstances.
The other states are temporary. They do either need no user action (disabled, selected) or only provide feedback to a
successful user interaction (hover, pressed). Therefore, it is possible to have a lower
contrast in this case (AA conformance).
Styleguide 2.1.2
*/
/*
Accessibility
To ensure a good readability for people with color blindness, it is necessary that the screen design
is checked for the following types of color blindness:
Protanopia
Tritanopia
Deuteranopia
Monochromacy
Styleguide 2.1.3
*/
/*
Loader
The loader should be used to visualize a process whose duration cannot be predicted.
Visualization: tr-blue4 (maschine-blue) bar
If the duration can be defined, use the progress bar.
To ensure the best readability in low light conditions, the color contrast should be checked.
A lower contrast is allowed for elements with noncritical information or to visualize a temporary state.
The following picture exemplary shows the color contrasts of a content button and its corresponding label
for different states according to conformance levels AA and AAA (as documented in the Web Content Accessibility Guidelines (WCAG)).
The enabled state has the highest contrast (AAA conformance), because the user should be
able to read the text under any circumstances.
The other states are temporary. They do either need no user action (disabled, selected) or only provide feedback to a
successful user interaction (hover, pressed). Therefore, it is possible to have a lower
contrast in this case (AA conformance).
Styleguide 2.1.2
*/
/*
Accessibility
To ensure a good readability for people with color blindness, it is necessary that the screen design
is checked for the following types of color blindness:
Protanopia
Tritanopia
Deuteranopia
Monochromacy
Styleguide 2.1.3
*/
/*
Text
Styleguide 4.12
*/
/*
Headline
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergre.
To ensure the best readability in low light conditions, the color contrast should be checked.
A lower contrast is allowed for elements with noncritical information or to visualize a temporary state.
The following picture exemplary shows the color contrasts of a content button and its corresponding label
for different states according to conformance levels AA and AAA (as documented in the Web Content Accessibility Guidelines (WCAG)).
The enabled state has the highest contrast (AAA conformance), because the user should be
able to read the text under any circumstances.
The other states are temporary. They do either need no user action (disabled, selected) or only provide feedback to a
successful user interaction (hover, pressed). Therefore, it is possible to have a lower
contrast in this case (AA conformance).
Styleguide 2.1.2
*/
/*
Accessibility
To ensure a good readability for people with color blindness, it is necessary that the screen design
is checked for the following types of color blindness:
Protanopia
Tritanopia
Deuteranopia
Monochromacy
Styleguide 2.1.3
*/
/*
Switch
A switch shall be used to toggles the state of a single setting on or off.
To ensure the best readability in low light conditions, the color contrast should be checked.
A lower contrast is allowed for elements with noncritical information or to visualize a temporary state.
The following picture exemplary shows the color contrasts of a content button and its corresponding label
for different states according to conformance levels AA and AAA (as documented in the Web Content Accessibility Guidelines (WCAG)).
The enabled state has the highest contrast (AAA conformance), because the user should be
able to read the text under any circumstances.
The other states are temporary. They do either need no user action (disabled, selected) or only provide feedback to a
successful user interaction (hover, pressed). Therefore, it is possible to have a lower
contrast in this case (AA conformance).
Styleguide 2.1.2
*/
/*
Accessibility
To ensure a good readability for people with color blindness, it is necessary that the screen design
is checked for the following types of color blindness:
Protanopia
Tritanopia
Deuteranopia
Monochromacy
Styleguide 2.1.3
*/
/*
Toggle Bar
The toggle bar is a molecule composed of two or more content buttons (label icon label or icon). A toggle bar works just as a group of radio buttons using a different visualization.
It allows the user to choose only one of a predefined set of mutually exclusive options.
Content buttons with an icon have a minimum width of 64 px (Tablet "Base")
to meet the size of the touch area.
Use a toggle bar, if there are 2-7 options which have at best a visual representation e.g. an icon.
Alternatives:
Use a group of radio buttons, if there are up to 7 options, each option has only a label. If there are more than two options, group them vertically.
Use a dropdown, if there are more than 7 options, and/or screen space is limited, and/or the options have labels with more than 15 characters.
To ensure the best readability in low light conditions, the color contrast should be checked.
A lower contrast is allowed for elements with noncritical information or to visualize a temporary state.
The following picture exemplary shows the color contrasts of a content button and its corresponding label
for different states according to conformance levels AA and AAA (as documented in the Web Content Accessibility Guidelines (WCAG)).
The enabled state has the highest contrast (AAA conformance), because the user should be
able to read the text under any circumstances.
The other states are temporary. They do either need no user action (disabled, selected) or only provide feedback to a
successful user interaction (hover, pressed). Therefore, it is possible to have a lower
contrast in this case (AA conformance).
Styleguide 2.1.2
*/
/*
Accessibility
To ensure a good readability for people with color blindness, it is necessary that the screen design
is checked for the following types of color blindness:
Protanopia
Tritanopia
Deuteranopia
Monochromacy
Styleguide 2.1.3
*/
/*
Spinner
The spinner is a molecule composed of content buttons secondary and an input field.
The content buttons are positioned to the right of the input field.
Users may either incrementally change the value within the input field or touch the input field to open a
keyboard. Useful increments need to be defined according to the value range.
Use a spinner if you have numeric input and users often make small changes to an existing value.
If users usually modify the value completely, use an input field.
Disable the minus button, if the spinner indicates 0 and it is not possible to set a negative value.
:disabled - disabled state
default - enabled state
:focus - focus state
:hover - mouseover state
:active - pressed state
.error - error state
.show-help - show helper text
markup:
To ensure the best readability in low light conditions, the color contrast should be checked.
A lower contrast is allowed for elements with noncritical information or to visualize a temporary state.
The following picture exemplary shows the color contrasts of a content button and its corresponding label
for different states according to conformance levels AA and AAA (as documented in the Web Content Accessibility Guidelines (WCAG)).
The enabled state has the highest contrast (AAA conformance), because the user should be
able to read the text under any circumstances.
The other states are temporary. They do either need no user action (disabled, selected) or only provide feedback to a
successful user interaction (hover, pressed). Therefore, it is possible to have a lower
contrast in this case (AA conformance).
Styleguide 2.1.2
*/
/*
Accessibility
To ensure a good readability for people with color blindness, it is necessary that the screen design
is checked for the following types of color blindness:
Protanopia
Tritanopia
Deuteranopia
Monochromacy
Styleguide 2.1.3
*/
/*
Infotip
The Infotip is shown as an overlay. It should be used for supplemental information,
e.g. to explain an error of an output value.
Visualization standard: tr-blue4 (maschine-blue) outline and outer-shadow
Visualization error: tr-red1 outline and outer-shadow
Infotips should be placed above the object they refer to, to avoid occlusion.
The Infotip has a max. height of 192 px, a max. width of 92 px with max. 80 characters.
The Infotip should automatically disappear after 5 seconds.
.top-left - Infotip from top left
.top-right - Infotip from top right
.bottom-left - Infotip from bottom left
.bottom-right - Infotip from bottom right
.close - Infotip with close btn
markup:
Lorem ipsum dolor sit amet, consetetur sadip scing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua.
sg-wrapper:
Styleguide 5.4
*/
/*
Infotip (with error)
Available modifiers:
.top-left - Infotip from top left in error state
.top-right - Infotip from top right in error state
.bottom-left - Infotip from bottom left in error state
.bottom-right - Infotip from bottom right in error state
.close - Infotip with close btn in state
markup:
Lorem ipsum dolor sit amet, consetetur sadip scing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua.
To ensure the best readability in low light conditions, the color contrast should be checked.
A lower contrast is allowed for elements with noncritical information or to visualize a temporary state.
The following picture exemplary shows the color contrasts of a content button and its corresponding label
for different states according to conformance levels AA and AAA (as documented in the Web Content Accessibility Guidelines (WCAG)).
The enabled state has the highest contrast (AAA conformance), because the user should be
able to read the text under any circumstances.
The other states are temporary. They do either need no user action (disabled, selected) or only provide feedback to a
successful user interaction (hover, pressed). Therefore, it is possible to have a lower
contrast in this case (AA conformance).
Styleguide 2.1.2
*/
/*
Accessibility
To ensure a good readability for people with color blindness, it is necessary that the screen design
is checked for the following types of color blindness:
Per default the dropdown list opens downwards.
If the list is higher than the available screen space below the control, the list opens upwards.
Visualization: tr-white field with tr-grey2 outline and outer-shadow, see
2.4 Basic Atom
A dropdown allows the user to choose only one of a predefined set of mutually exclusive options.
Use a dropdown, if there are 7 or more options, and/or screen space for the control is limited,
and/or the options have labels with more than 15 characters.
To ensure the best readability in low light conditions, the color contrast should be checked.
A lower contrast is allowed for elements with noncritical information or to visualize a temporary state.
The following picture exemplary shows the color contrasts of a content button and its corresponding label
for different states according to conformance levels AA and AAA (as documented in the Web Content Accessibility Guidelines (WCAG)).
The enabled state has the highest contrast (AAA conformance), because the user should be
able to read the text under any circumstances.
The other states are temporary. They do either need no user action (disabled, selected) or only provide feedback to a
successful user interaction (hover, pressed). Therefore, it is possible to have a lower
contrast in this case (AA conformance).
Styleguide 2.1.2
*/
/*
Accessibility
To ensure a good readability for people with color blindness, it is necessary that the screen design
is checked for the following types of color blindness:
The last item shows the current location and it is bold and tr-black.
Use a breadcrumb if you have multiple content hierarchies. Like on the TRUMPF Website the arrows point to the left, to show where the user is coming from. If screen size is limited, show only the first and the last two items, the items in between are indicated using dots "…".
To ensure the best readability in low light conditions, the color contrast should be checked.
A lower contrast is allowed for elements with noncritical information or to visualize a temporary state.
The following picture exemplary shows the color contrasts of a content button and its corresponding label
for different states according to conformance levels AA and AAA (as documented in the Web Content Accessibility Guidelines (WCAG)).
The enabled state has the highest contrast (AAA conformance), because the user should be
able to read the text under any circumstances.
The other states are temporary. They do either need no user action (disabled, selected) or only provide feedback to a
successful user interaction (hover, pressed). Therefore, it is possible to have a lower
contrast in this case (AA conformance).
Styleguide 2.1.2
*/
/*
Accessibility
To ensure a good readability for people with color blindness, it is necessary that the screen design
is checked for the following types of color blindness:
Protanopia
Tritanopia
Deuteranopia
Monochromacy
Styleguide 2.1.3
*/
/*
Paging
A page indicator is a molecule composed of rectangle icons. The number of rectangles equals the number of pages.
Pages are represented as rectangles with a fixed proportion of 5 to 4.
Visualization: The current page is highlighted with tr-blue4 and bigger size of the rectangle.
To visualize a horizontal paging pattern the indicator should be placed at the bottom of the content area.
To visualize a vertical paging pattern, use infinite scrolling or lazy loading.
To ensure the best readability in low light conditions, the color contrast should be checked.
A lower contrast is allowed for elements with noncritical information or to visualize a temporary state.
The following picture exemplary shows the color contrasts of a content button and its corresponding label
for different states according to conformance levels AA and AAA (as documented in the Web Content Accessibility Guidelines (WCAG)).
The enabled state has the highest contrast (AAA conformance), because the user should be
able to read the text under any circumstances.
The other states are temporary. They do either need no user action (disabled, selected) or only provide feedback to a
successful user interaction (hover, pressed). Therefore, it is possible to have a lower
contrast in this case (AA conformance).
Styleguide 2.1.2
*/
/*
Accessibility
To ensure a good readability for people with color blindness, it is necessary that the screen design
is checked for the following types of color blindness:
Protanopia
Tritanopia
Deuteranopia
Monochromacy
Styleguide 2.1.3
*/
/*
Wizard Header Step
A wizard header step is a molecule composed of a label,
a number icon and a flag for completed steps and/or inaccurate steps.
It is used to indicate a single step in a multi-step task.
The wizard header steps shall only be used in the wizard header.
To ensure the best readability in low light conditions, the color contrast should be checked.
A lower contrast is allowed for elements with noncritical information or to visualize a temporary state.
The following picture exemplary shows the color contrasts of a content button and its corresponding label
for different states according to conformance levels AA and AAA (as documented in the Web Content Accessibility Guidelines (WCAG)).
The enabled state has the highest contrast (AAA conformance), because the user should be
able to read the text under any circumstances.
The other states are temporary. They do either need no user action (disabled, selected) or only provide feedback to a
successful user interaction (hover, pressed). Therefore, it is possible to have a lower
contrast in this case (AA conformance).
Styleguide 2.1.2
*/
/*
Accessibility
To ensure a good readability for people with color blindness, it is necessary that the screen design
is checked for the following types of color blindness:
Protanopia
Tritanopia
Deuteranopia
Monochromacy
Styleguide 2.1.3
*/
/*
Progress Overlay
The progress overlay is a molecule composed of a progress bar, text and percent value.
To ensure the best readability in low light conditions, the color contrast should be checked.
A lower contrast is allowed for elements with noncritical information or to visualize a temporary state.
The following picture exemplary shows the color contrasts of a content button and its corresponding label
for different states according to conformance levels AA and AAA (as documented in the Web Content Accessibility Guidelines (WCAG)).
The enabled state has the highest contrast (AAA conformance), because the user should be
able to read the text under any circumstances.
The other states are temporary. They do either need no user action (disabled, selected) or only provide feedback to a
successful user interaction (hover, pressed). Therefore, it is possible to have a lower
contrast in this case (AA conformance).
Styleguide 2.1.2
*/
/*
Accessibility
To ensure a good readability for people with color blindness, it is necessary that the screen design
is checked for the following types of color blindness:
Protanopia
Tritanopia
Deuteranopia
Monochromacy
Styleguide 2.1.3
*/
/*
Loader Overlay
The loader overlay is a molecule composed of a loader.
To ensure the best readability in low light conditions, the color contrast should be checked.
A lower contrast is allowed for elements with noncritical information or to visualize a temporary state.
The following picture exemplary shows the color contrasts of a content button and its corresponding label
for different states according to conformance levels AA and AAA (as documented in the Web Content Accessibility Guidelines (WCAG)).
The enabled state has the highest contrast (AAA conformance), because the user should be
able to read the text under any circumstances.
The other states are temporary. They do either need no user action (disabled, selected) or only provide feedback to a
successful user interaction (hover, pressed). Therefore, it is possible to have a lower
contrast in this case (AA conformance).
Styleguide 2.1.2
*/
/*
Accessibility
To ensure a good readability for people with color blindness, it is necessary that the screen design
is checked for the following types of color blindness:
Protanopia
Tritanopia
Deuteranopia
Monochromacy
Styleguide 2.1.3
*/
/*
Slider
A slider shall be used to make selections from a range of values.
The slider has a track that shows the range and a thumb that shows the current value.
The slider is composed of the basic atom.
Styleguide 5.10
*/
/*
Slider (horizontal)
This slider was created for the project LT06579 and is implemented in desktop size only for mouse operation.
This slider was created for the project LT06579 and is implemented in desktop size only for mouse operation.
The track is shown in 3 states: not loaded, loading and loaded/normal.
To ensure the best readability in low light conditions, the color contrast should be checked.
A lower contrast is allowed for elements with noncritical information or to visualize a temporary state.
The following picture exemplary shows the color contrasts of a content button and its corresponding label
for different states according to conformance levels AA and AAA (as documented in the Web Content Accessibility Guidelines (WCAG)).
The enabled state has the highest contrast (AAA conformance), because the user should be
able to read the text under any circumstances.
The other states are temporary. They do either need no user action (disabled, selected) or only provide feedback to a
successful user interaction (hover, pressed). Therefore, it is possible to have a lower
contrast in this case (AA conformance).
Styleguide 2.1.2
*/
/*
Accessibility
To ensure a good readability for people with color blindness, it is necessary that the screen design
is checked for the following types of color blindness:
Protanopia
Tritanopia
Deuteranopia
Monochromacy
Styleguide 2.1.3
*/
/*
Message
A message is an organism composed of a headline, text, flag inside a box.
Messages appear on the right side of the screen.
The most recent messages are shown on top. The number of displayed messages depends on the size of the content area.
The last message disappears if there is not enough space for a new one.
Messages disappear after 10 seconds. The user may also close them using a swipe to the right.
There are 2 message categories: Error, Information.
Available modifiers:
default - page not selected
.info - page not selected
.error - page currently selected
markup:
To ensure the best readability in low light conditions, the color contrast should be checked.
A lower contrast is allowed for elements with noncritical information or to visualize a temporary state.
The following picture exemplary shows the color contrasts of a content button and its corresponding label
for different states according to conformance levels AA and AAA (as documented in the Web Content Accessibility Guidelines (WCAG)).
The enabled state has the highest contrast (AAA conformance), because the user should be
able to read the text under any circumstances.
The other states are temporary. They do either need no user action (disabled, selected) or only provide feedback to a
successful user interaction (hover, pressed). Therefore, it is possible to have a lower
contrast in this case (AA conformance).
Styleguide 2.1.2
*/
/*
Accessibility
To ensure a good readability for people with color blindness, it is necessary that the screen design
is checked for the following types of color blindness:
Protanopia
Tritanopia
Deuteranopia
Monochromacy
Styleguide 2.1.3
*/
/*
Table
The table is an organism composed of an table header and table rows.
Depending on the use case a table may be structured differ. In the following example:
To ensure the best readability in low light conditions, the color contrast should be checked.
A lower contrast is allowed for elements with noncritical information or to visualize a temporary state.
The following picture exemplary shows the color contrasts of a content button and its corresponding label
for different states according to conformance levels AA and AAA (as documented in the Web Content Accessibility Guidelines (WCAG)).
The enabled state has the highest contrast (AAA conformance), because the user should be
able to read the text under any circumstances.
The other states are temporary. They do either need no user action (disabled, selected) or only provide feedback to a
successful user interaction (hover, pressed). Therefore, it is possible to have a lower
contrast in this case (AA conformance).
Styleguide 2.1.2
*/
/*
Accessibility
To ensure a good readability for people with color blindness, it is necessary that the screen design
is checked for the following types of color blindness:
To ensure the best readability in low light conditions, the color contrast should be checked.
A lower contrast is allowed for elements with noncritical information or to visualize a temporary state.
The following picture exemplary shows the color contrasts of a content button and its corresponding label
for different states according to conformance levels AA and AAA (as documented in the Web Content Accessibility Guidelines (WCAG)).
The enabled state has the highest contrast (AAA conformance), because the user should be
able to read the text under any circumstances.
The other states are temporary. They do either need no user action (disabled, selected) or only provide feedback to a
successful user interaction (hover, pressed). Therefore, it is possible to have a lower
contrast in this case (AA conformance).
Styleguide 2.1.2
*/
/*
Accessibility
To ensure a good readability for people with color blindness, it is necessary that the screen design
is checked for the following types of color blindness:
Protanopia
Tritanopia
Deuteranopia
Monochromacy
Styleguide 2.1.3
*/
/*
Main Menu
The main menu is an organism composed of main menu tabs.
The main menu may be presented in portrait or landscape direction depending on the workflow of an app.
To ensure the best readability in low light conditions, the color contrast should be checked.
A lower contrast is allowed for elements with noncritical information or to visualize a temporary state.
The following picture exemplary shows the color contrasts of a content button and its corresponding label
for different states according to conformance levels AA and AAA (as documented in the Web Content Accessibility Guidelines (WCAG)).
The enabled state has the highest contrast (AAA conformance), because the user should be
able to read the text under any circumstances.
The other states are temporary. They do either need no user action (disabled, selected) or only provide feedback to a
successful user interaction (hover, pressed). Therefore, it is possible to have a lower
contrast in this case (AA conformance).
Styleguide 2.1.2
*/
/*
Accessibility
To ensure a good readability for people with color blindness, it is necessary that the screen design
is checked for the following types of color blindness:
Protanopia
Tritanopia
Deuteranopia
Monochromacy
Styleguide 2.1.3
*/
/*
Sub Menu
The sub menu is an organism composed of sub menu tabs.
It should only be used in combination with the main menu.
The sub menu may be presented in portrait or landscape direction depending on the direction of the main menu.
If the main menu is presented in landscape direction, the sub menu is presented in portrait direction and vice versa.
To ensure the best readability in low light conditions, the color contrast should be checked.
A lower contrast is allowed for elements with noncritical information or to visualize a temporary state.
The following picture exemplary shows the color contrasts of a content button and its corresponding label
for different states according to conformance levels AA and AAA (as documented in the Web Content Accessibility Guidelines (WCAG)).
The enabled state has the highest contrast (AAA conformance), because the user should be
able to read the text under any circumstances.
The other states are temporary. They do either need no user action (disabled, selected) or only provide feedback to a
successful user interaction (hover, pressed). Therefore, it is possible to have a lower
contrast in this case (AA conformance).
Styleguide 2.1.2
*/
/*
Accessibility
To ensure a good readability for people with color blindness, it is necessary that the screen design
is checked for the following types of color blindness:
Protanopia
Tritanopia
Deuteranopia
Monochromacy
Styleguide 2.1.3
*/
/*
Footer
The footer is an organism composed of footer buttons (primary/secondary).
Use a footer for actions that apply to the whole content area.
Place primary actions on the right side, secondary actions on the left side.
To ensure the best readability in low light conditions, the color contrast should be checked.
A lower contrast is allowed for elements with noncritical information or to visualize a temporary state.
The following picture exemplary shows the color contrasts of a content button and its corresponding label
for different states according to conformance levels AA and AAA (as documented in the Web Content Accessibility Guidelines (WCAG)).
The enabled state has the highest contrast (AAA conformance), because the user should be
able to read the text under any circumstances.
The other states are temporary. They do either need no user action (disabled, selected) or only provide feedback to a
successful user interaction (hover, pressed). Therefore, it is possible to have a lower
contrast in this case (AA conformance).
Styleguide 2.1.2
*/
/*
Accessibility
To ensure a good readability for people with color blindness, it is necessary that the screen design
is checked for the following types of color blindness:
The tab bar shall only be used in the third level navigation. It should be displayed in portrait direction.
If possible, a fourth level should be eliminated to avoid too many nestings.
To ensure the best readability in low light conditions, the color contrast should be checked.
A lower contrast is allowed for elements with noncritical information or to visualize a temporary state.
The following picture exemplary shows the color contrasts of a content button and its corresponding label
for different states according to conformance levels AA and AAA (as documented in the Web Content Accessibility Guidelines (WCAG)).
The enabled state has the highest contrast (AAA conformance), because the user should be
able to read the text under any circumstances.
The other states are temporary. They do either need no user action (disabled, selected) or only provide feedback to a
successful user interaction (hover, pressed). Therefore, it is possible to have a lower
contrast in this case (AA conformance).
Styleguide 2.1.2
*/
/*
Accessibility
To ensure a good readability for people with color blindness, it is necessary that the screen design
is checked for the following types of color blindness:
To ensure the best readability in low light conditions, the color contrast should be checked.
A lower contrast is allowed for elements with noncritical information or to visualize a temporary state.
The following picture exemplary shows the color contrasts of a content button and its corresponding label
for different states according to conformance levels AA and AAA (as documented in the Web Content Accessibility Guidelines (WCAG)).
The enabled state has the highest contrast (AAA conformance), because the user should be
able to read the text under any circumstances.
The other states are temporary. They do either need no user action (disabled, selected) or only provide feedback to a
successful user interaction (hover, pressed). Therefore, it is possible to have a lower
contrast in this case (AA conformance).
Styleguide 2.1.2
*/
/*
Accessibility
To ensure a good readability for people with color blindness, it is necessary that the screen design
is checked for the following types of color blindness:
To ensure the best readability in low light conditions, the color contrast should be checked.
A lower contrast is allowed for elements with noncritical information or to visualize a temporary state.
The following picture exemplary shows the color contrasts of a content button and its corresponding label
for different states according to conformance levels AA and AAA (as documented in the Web Content Accessibility Guidelines (WCAG)).
The enabled state has the highest contrast (AAA conformance), because the user should be
able to read the text under any circumstances.
The other states are temporary. They do either need no user action (disabled, selected) or only provide feedback to a
successful user interaction (hover, pressed). Therefore, it is possible to have a lower
contrast in this case (AA conformance).
Styleguide 2.1.2
*/
/*
Accessibility
To ensure a good readability for people with color blindness, it is necessary that the screen design
is checked for the following types of color blindness:
To ensure the best readability in low light conditions, the color contrast should be checked.
A lower contrast is allowed for elements with noncritical information or to visualize a temporary state.
The following picture exemplary shows the color contrasts of a content button and its corresponding label
for different states according to conformance levels AA and AAA (as documented in the Web Content Accessibility Guidelines (WCAG)).
The enabled state has the highest contrast (AAA conformance), because the user should be
able to read the text under any circumstances.
The other states are temporary. They do either need no user action (disabled, selected) or only provide feedback to a
successful user interaction (hover, pressed). Therefore, it is possible to have a lower
contrast in this case (AA conformance).
Styleguide 2.1.2
*/
/*
Accessibility
To ensure a good readability for people with color blindness, it is necessary that the screen design
is checked for the following types of color blindness:
To ensure the best readability in low light conditions, the color contrast should be checked.
A lower contrast is allowed for elements with noncritical information or to visualize a temporary state.
The following picture exemplary shows the color contrasts of a content button and its corresponding label
for different states according to conformance levels AA and AAA (as documented in the Web Content Accessibility Guidelines (WCAG)).
The enabled state has the highest contrast (AAA conformance), because the user should be
able to read the text under any circumstances.
The other states are temporary. They do either need no user action (disabled, selected) or only provide feedback to a
successful user interaction (hover, pressed). Therefore, it is possible to have a lower
contrast in this case (AA conformance).
Styleguide 2.1.2
*/
/*
Accessibility
To ensure a good readability for people with color blindness, it is necessary that the screen design
is checked for the following types of color blindness:
The proportions are used in controls, like:
The wizard is structured in header, content and footer. The size of header and footer limit the size of the content.
The individual width of a control is defined by its content. If controls are placed in a row first define their
individual width and scale them afterwards to the total content width within the grid. In this case,
the controls have a margin of 4 px to the left and right border of the wizard.
The Content is structured in a header, content and a footer.
