Change UI appearance
17.3.2.4.1. Change the Loginapp REST UI appearance with the UI SDK

Styling using SASS and CSS

The look and feel of the Loginapp REST UI can be changed using SASS or plain CSS. The relevant files are located in:
$CUSTOM_DIRECTORY/src/sass/custom

The Loginapp REST UI SDK provides useful variables to quickly change the REST UI. For a list of variables, see below. These variables can be added here:
_custom-variables.scss

The SASS variables are a very easy and quick way to get started and our recommendation unless they don't cover all relevant aspects. Whenever more advanced customizations are required, you can write custom SASS or just plain CSS styles here:
_custom-styles.scss

All variables used have to be explicitly defined or uncommented, e.g. when assigning the value of one variable to another.

List of available SASS variables

The following table shows all the variables supported by the Loginapp REST UI. Copies of all variables that need to be adapted for your styling should be added in:
_custom-variables.scss

copy
/** **************
 * Colors
 * **************/
$iam-color-black: #000 !default;
$iam-color-white: #fff !default;
$iam-color-gray-dark: #373a3c !default;
$iam-color-very-dark-gray: #555 !default;
$iam-primary-color: rgb(62, 92, 112) !default;

/** **************
 * Font
 * **************/
$iam-font-family-base: 'TypoPRO Source Sans Pro', sans-serif !default;
$iam-font-size-base: 1rem !default;

/** **************
 * Basic settings
 * **************/
$iam-body-color: #212529 !default;
$iam-body-bg: $iam-color-white !default;
$iam-line-height-base: 1.5 !default;
$iam-border-radius: .25rem !default;
$iam-border-width: 1px !default;

/** **************
 * Header, content, footer containers
 * **************/
$iam-header-container-padding: 0 15px !default;
$iam-header-container-full-width: false !default;
$iam-content-container-padding: 0 15px !default;
$iam-content-container-full-width: false !default;
$iam-footer-container-padding: 0 15px !default;
$iam-footer-container-full-width: false !default;

/** **************
 * Logo
 * **************/
$iam-show-logo: true !default;
$iam-logo-url: product-asset('img/logo.svg') !default;
$iam-logo-width: 95px !default;
$iam-logo-height: 35px !default;

/** **************
 * Portal Target
 * **************/
$iam-portal-target-icon: product-asset('img/icon-target.svg') !default;
$iam-portal-target-mobile-right-icon: product-asset('img/icon-chevron-compact-right.svg') !default;
$iam-portal-target-mobile-right-icon-white: product-asset('img/icon-chevron-compact-right-white.svg') !default;

/** **************
 * Loader
 * **************/
$iam-loader-show: true !default;
$iam-loader-logo-url: $iam-logo-url !default;
$iam-loader-logo-width: $iam-logo-width !default;
$iam-loader-logo-height: $iam-logo-height !default;
$iam-loader-animated-circle: true !default;
$iam-loader-animated-circle-size: 200px !default;
$iam-loader-animated-circle-thickness: 2px !default;
$iam-loader-animated-circle-color: $iam-primary-color !default;

/** **************
 * Links
 * ***************/
$iam-link-color: #555 !default;
$iam-link-decoration: underline !default;
$iam-link-hover-decoration: none !default;

/** **************
 * Cards
 * **************/
$iam-card-header-font-size: $iam-font-size-base * 1.75 !default;
$iam-card-header-font-weight: bold !default;
$iam-card-header-padding: .5rem 1.5rem !default;
$iam-card-header-text-align: left !default;
$iam-card-header-font-color: $iam-color-white !default;
$iam-card-header-background: $iam-primary-color !default;
$iam-card-border-width: $iam-border-width !default;
$iam-card-border-color: rgba($iam-color-black, .125) !default;
$iam-card-border-radius: $iam-border-radius !default;
$iam-card-body-padding: 1.75rem 1.5rem !default;
$iam-detail-card-header-background: lighten($iam-card-header-background, 60%) !default;
$iam-detail-card-header-font-size: $iam-font-size-base * 1.25 !default;
$iam-detail-card-header-padding: .1rem 1.5rem !default;
$iam-detail-card-header-font-weight: bold !default;
$iam-detail-card-header-font-color: $iam-body-color !default;
$iam-detail-card-body-padding: 1rem 1.5rem;
$iam-detail-card-margin-bottom: 1rem !default;

/** **************
 * Buttons
 * ***************/
$iam-btn-primary-bg: $iam-color-white !default;
$iam-btn-primary-color: $iam-color-gray-dark !default;
$iam-btn-primary-border: 1px solid $iam-color-very-dark-gray !default;
$iam-btn-border-radius: $iam-border-radius !default;
$iam-btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;

/** **************
 * Forms
 * **************/
$iam-input-border-color: #ced4da !default;
$iam-input-focus-border-color: lighten($iam-input-border-color, 25%) !default;
$iam-input-color: #55595c !default;
$iam-input-padding-y: .375rem !default;
$iam-input-padding-x: .75rem !default;
$iam-input-height: (($iam-font-size-base * $iam-line-height-base) + ($iam-input-padding-y * 2)) !default;
$iam-input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
$iam-form-group-margin-bottom: 1rem !default;
$iam-label-font-weight: bold !default;
$iam-label-always-on-top: false !default;
$iam-form-required-content: '*' !default;
$iam-form-required-content-color: $iam-color-gray-dark !default;
$iam-form-required-content-size: inherit !default;
$iam-form-required-content-vertical-align: baseline !default;
$iam-form-feedback-invalid-color: #dc3545 !default;
$iam-form-feedback-enable-validation-icons: true !default;

/** **************
 * Alerts
 * **************/
$iam-alert-border-radius: $iam-border-radius !default;
$iam-alert-danger-text: #721c24 !default;
$iam-alert-danger-bg: #f8d7da !default;
$iam-alert-danger-border: darken($iam-alert-danger-bg, 5%) !default;
$iam-alert-warning-text: #856404 !default;
$iam-alert-warning-bg: #fff3cd !default;
$iam-alert-warning-border: darken($iam-alert-warning-bg, 5%) !default;
$iam-alert-success-text: #155724 !default;
$iam-alert-success-bg: #d4edda !default;
$iam-alert-success-border: darken($iam-alert-success-bg, 5%) !default;
$iam-alert-info-text: #0c5460 !default;
$iam-alert-info-bg: #d1ecf1 !default;
$iam-alert-info-border: darken($iam-alert-info-bg, 5%) !default;
…Show more…Show less

Referencing static files in SASS

In some cases, static files – often called assets – like images or fonts need to be referenced. We recommend to use the SASS function custom-asset to reference assets relative to:
$CUSTOM_DIRECTORY/src/assets/custom

For example, in _custom-variables.scss the logo is referenced as follows:

$iam-logo-url: custom-asset('img/your_logo_file_name.svg') !default;

Examples for _custom-styles.scss

The following example illustrates how to use the _custom-styles.css to add CSS that goes beyond using the product's SASS variables":

copy
 //  
 // Example 1) align buttons left instead of right: 
 //.iam-button-group { 
 //	.iam-btn { 
 //		float: left !important; 
 //		margin-left: 0 !important; 
 //		margin-right: $spacer; 
 //	} 
 // 
 //	.iam-btn-wrapper { 
 //		float: left !important; 
 //	} 
 //}  
 
 // Example 2) Hiding the language selection: 
 //.iam-language-switcher { 
 //	visibility: hidden; 
 //}
  
 // Example 3) Making the container on the login page smaller: //#iamAuthPassword .iam-card { 
 //    width: 480px; 
 //    margin-left: auto; 
 //    margin-right: auto; 
 //}

Drop styles provided by IAM

In some cases, the required look and feel is vastly different from Airlock IAMs default styles and it may be preferable to drop all provided styling and start from scratch. The SDK allows for this by enabling the following option here:
$CUSTOM_DIRECTORY/src/sdk/config/custom.sdk.config.js

Example:

config.build = { 
    drop_styles: true 
};

As a consequence of dropping all standard styles, variables defined in _custom-variables.scss have no effect anymore. Instead, all SASS/CSS work has to be done in _custom-styles.scss.

Further links and information