CSS Styles

The appearance of the AMT web application can be customized. You can define styles for various elements to match your application's look and feel.

The style.scss file is found in the following folder: ..\Development\client\web<ApplicationName>\src\.

Accessibility

Interactible elements of the AMT application are outlined when in focus. This feature can be disabled by adding the following CSS to style.scss of the Angular web client.

input:focus {  
    outline: none;  
}

IBM BMS Terminal

The appearance of the BMS Terminal can be customized using CSS. You can define styles for the text box, buttons, and other elements.

Available Classes

.normal
Default editable input fields (unprotected) in the BMS terminal.

.protected
Read-only and unselectable fields rendered as static labels without border.

.non-display-print
Non-display fields shown with low contrast on-screen. These are used for print contexts and not for user input.

.high-intensity
Emphasized fields, or messages that have bold text and bright color.

.auto-skip
Non-interactive fields the cursor skips during navigation. These are rendered like labels.

Sample CSS

The CSS sample below contains default values for the classes described above.

.normal {
background-color: #FFFFFF;
border: 1px solid black;
}

.protected {
background-color: inherit !important;
border: none; /* Remove the border around the input field showing it as a label */
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
}

.non-display-print {
color: #C0C0C0 !important;
background-color: #C0C0C0 !important;
border: 0px solid !important;
}

.high-intensity {
color: #FF0000 !important;
font-weight: bold !important;
}

.auto-skip {
border: 0px solid !important;
border: none; /* Remove the border around the input field showing it as a label */
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
}