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

Cumulocity IoT applications

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

// // to hide the Cumulocity IoT logo on top of navigator
// // set @extending to true
@extending: false;

// 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
// @status-success: #5cb85c;
// @status-info: @brand-color;
// @status-warning: #f0ad4e;
// @status-danger: #d9534f;
// @danger: #d90000;
// @warning: #fdc000;
// @status-warning-dark: #ff8000;
// @success: #5cb85c;
// grays
// @text-color: #444;
// @gray-30: #3b4748;
// @gray-40: #49595b;
// @gray-40: #6d7a7c;
// // @gray: #8a9596;
// @gray-80: #cacece;
// @gray-90: #f8f8f8;
// @gray-100: #fcfcfc;
// @text-muted: @gray-50;

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

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

/* NAVIGATOR */
// @navColor: @gray-10;
// @navColorHeader: @gray-10;
// @navigator-header-color: white;
// @navigator-text-color: @gray-100;
// @navigator-separator-color: fade(white, 5%);
// @navigator-font-family: @headings-font-family;
// @navigator-font-size: 13px;
// @navigator-color-active: 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 */
// @component-border-radius-base-base:      2px;
// @component-border-radius-base-large:     @component-border-radius-base-base;
// @component-border-radius-base-small:     @component-border-radius-base-base;
// @btn-shadow:                  none;

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

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