Styles

The SR360 styles are developed on the basis of Bootstrap framework and Less syntax.

Web module styles

Each web module can contain custom styles, defined in the styles.less file. When creating them, remember to follow a few rules:

  • The styles.less file must contain single web module root class.

  • The root class name must be the same as the web module name.

For example, if the web module name is com-sabre-redapp-example3-web-tilewidgets-web-module, then the root class name must be .com-sabre-redapp-example3-web-tilewidgets-web-module.

  • The styles.less file cannot contain any classes outside the scope of the web module root class.

  • The root class name must be wrapped with HTML div tag when used in HTML templates:

<div class=”com-sabre-redapp-example3-web-tilewidgets-web-module”>
	<!-- Content -->
</div>
Note
 If the Red App styles do not follow the above rules, it will cause SVS validation failure.

Example contents of the styles.less file:

.com-sabre-redapp-example3-web-tilewidgets-web-module {
	.myDiv {
		background-color: #80ff80;
	}
}

Core styles

Core styles are also available for each web module, providing mixins and Less variables. To use them, add the appropriate import in the styles.less file:

@import "../../core/styles/core-styles"; // (1)

.com-sabre-redapp-example3-web-tilewidgets-web-module {
	.myDiv {
		background-color: @gray-lighter; // (2)
	}
}

  1. Importing core styles

  2. Using one of the available Less variables

CSS variables

The SR360 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. The currently available CSS 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