Change the Loginapp UI appearance with the Design Kit

Styling using SASS and CSS

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

The Loginapp Design Kit provides useful variables to quickly change the Loginapp 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

Notice

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

Change the favicon

To change the favicon of the Loginapp UI, replace the original favicon.ico in the $CUSTOM_DIRECTORY/src/assets/img folder and rebuild the customized Loginapp UI zip-file with the new favicon.

List of available SASS variables

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

Example

/** **************
 * 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;

/** **************
 * Logout Link
 * ***************/
$iam-show-logout-link: false !default;
$iam-show-logout-link-icon: product-asset('img/logout.svg') !default; // Use false if no icon required
$iam-hide-logout-link-icon-on-small-devices: false !default;
$iam-hide-logout-link-text-on-small-devices: true !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;

Referencing static files in SASS

In some cases, static files – often called assets – like images or fonts need to be referenced. We recommend using 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:

Example

$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":

Example

 //  
 // 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 Design Kit allows for this by enabling the following option here:
$CUSTOM_DIRECTORY/src/sdk/config/custom.sdk.config.js

Example

Example:

config.build = { 
    dropStyles: true 
};

Notice

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

For more information on flow ID and step ID see: Navigation menu configuration.