@c8y/apps/tutorial/branding/branding.less

Cumulocity IoT applications

@import '~@c8y/style/extend.less';

// Replace and uncomment each variable as you need them

/* COLORS */
@brand-color: #53cd61; // main color
@brand-primary: @brand-color;
@brand-complementary: #a8b3b5;
@brand-primary-light: lighten(@brand-primary, 20%);
// status colors
@brand-success: #5cb85c;
@brand-info: @brand-color;
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;
@danger: #d90000;
@warning: #fdc000;
@dark-warning: #ff8000;
@success: #5cb85c;
// grays
// @gray-text: #444;
// @gray-darker: #2c3637;
// @gray-dark: #3b4748;
// @gray-medium-dark: #49595b;
// @gray-medium: #6d7a7c;
// // @gray: #8a9596;
// @gray-light: #cacece;
// @gray-lighter: #f8f8f8;
// @gray-white: #fcfcfc;
// @text-muted: @gray;

@body-background-color: #f8f8f8; // page background color - always use a light background

/* HEADER */
// @headerColor: white;
// @header-text-color: @gray-medium-dark;
// @header-text-color-hover: @brand-primary;
// @header-active-color: darken(@gray-medium-dark, 15%);

/* NAVIGATOR */
@navColor: @blue-14;
@navColorHeader: transparent;
// @navigator-title-color: white;
// @navigator-text-color: @gray-lighter;
// @navigator-separator-color: fade(white, 5%);
// @navigator-font-family: @headings-font-family;
// @navigator-font-size: 13px;
// @navigator-active-color: white;
@navigator-active-bg: @brand-primary;
// when set adds a vertical gradient in the navigator background
// @grad-top:                    "";
// @grad-bottom:                 "";

/* TYPOGRAPHY */
// @font-family-sans-serif:      "Lato",Arial, Verdana, sans-serif;
// @font-family-base:            @font-family-sans-serif;
// @headings-font-family:        "Roboto",Arial, Verdana, sans-serif;

/* BUTTONS */
// @btn-border-radius-base:      2px;
// @btn-border-radius-large:     @btn-border-radius-base;
// @btn-border-radius-small:     @btn-border-radius-base;
// @btn-shadow:                  none;

/* COMPONENTS */
// @spinner-color:               lighten(@brand-primary, 30%);
// @link-color:                  #337ab7;
// @link-hover-color:            darken(@link-color, 15%);
// @input-focus-color:           #66afe9;

// @body-background-pattern:     "";
// @darker-header:               @gray-dark;
// @appswitcher-background:      none;
// @table-bg-hover:              fade(black, 1.5%);
// @header-app-name:             @header-text-color;
// @image-path:                  'img/';