Styles

Overview

Sabre Red 360 styles are based on Bootstrap and Less CSS Preprocessor is used to write them.

Custom Web Module Styles

Web Module can define custom styles in the styles.less file. Example content of the styles file:

.com-example-web-module {
    .div {
        background-color: #eeeeee;
    }
}

It is important to remember that the styles.less file must contain only the single root class based on the Web Module name.

This means that the content to which the styles apply must be children of an element that has a CSS class based on the Web Module name. The easiest way to achieve this is to add a div with the appropriate CSS class:

<div class="com-example-web-module">
    <!-- Content -->
</div>

Core styles

Core styles are available for each Web Module providing mixins and Less variables. In order to use them, the appropriate import must be added in the styles.less file:

/* Core styles import */
@import "../../core/styles/core-styles";

.com-example-web-module {
    .div {
        /* Using Less variable */
        background-color: @gray-lighter;
    }
}

Themes

Sabre Red 360 includes the option of selecting a display theme. Display themes are implemented by CSS variables (MDN), the value of which depends on the currently selected display theme. If Red App aims to support themes then it should use these variables. Currently available variables:

  • --theme-dominant-color

  • --theme-dominant-contrast-color

  • --theme-neutral-color

  • --theme-neutral-bright-color

  • --theme-accent-color

  • --theme-background-color

  • --theme-background-alternative-color

  • --theme-background-response-color

  • --theme-text-color

  • --theme-text-neutral-color

  • --theme-border-color