maestrano/mnoe-admin-panel

View on GitHub
src/app/stylesheets/variables.less

Summary

Maintainability
Test Coverage
@import "../../../bower_components/bootstrap/less/bootstrap.less";
@import "../../../bower_components/mno-ui-elements/dist/mno-ui-elements.less";

/* General */
@border-radius-base:      4px;
@border-radius-large:     6px;
@border-radius-small:     3px;
@container-large-desktop: 100%;
@container-desktop:       100%;
@container-tablet:        100%;

/* KPIs vars */
@mno-kpi-color-1:    @mnoe-admin-panel-white;
@mno-kpi-bg-color-1: @elemental-pink;
@mno-kpi-color-2:    @mnoe-admin-panel-white;
@mno-kpi-bg-color-2: @elemental-orange;
@mno-kpi-color-3:    @mnoe-admin-panel-white;
@mno-kpi-bg-color-3: @elemental-green;
@mno-kpi-color-4:    @mnoe-admin-panel-white;
@mno-kpi-bg-color-4: @elemental-aqua;

/* Header vars */
@mno-admin-header-bg-color:           lighten(@bg-main-color, 5%);
@mno-admin-header-font-color:         @text-main-strong-color;
@mno-admin-header-logo-border:        1px solid @mno-admin-header-font-color;
@mno-admin-header-height:             60px;
@mno-admin-header-title-text-size:    18px;
@mno-admin-header-title-text-color:   @text-main-strong-color;

@mno-admin-header-user-color:         @text-main-color;

/* Main content */
@mno-admin-content-bg-color:          @bg-main-color;

/* Navigation - Sidebar */
@mno-admin-sidebar-base-color:                      @bg-inverse-color;
@mno-admin-sidebar-header-color:                    darken(@mno-admin-sidebar-base-color, 5%);
@mno-admin-sidebar-footer-color:                    darken(@mno-admin-sidebar-base-color, 5%);
@mno-admin-sidebar-title-color:                     lighten(@mno-admin-sidebar-base-color, 45%);
@mno-admin-sidebar-menu-item-font-color:            @text-inverse-color;
@mno-admin-sidebar-menu-item-font-hover-color:      @text-inverse-strong-color;
@mno-admin-sidebar-menu-item-hover-color:           @decorator-main-color;
@mno-admin-sidebar-menu-item-hover-border-color:    @decorator-main-color;
@mno-admin-sidebar-menu-item-hover-bg-color:        darken(@mno-admin-sidebar-base-color, 3%);
@mno-admin-sidebar-menu-active-item-font-color:     @mno-admin-sidebar-menu-item-font-hover-color;
@mno-admin-sidebar-menu-active-item-border-color:   @mno-admin-sidebar-menu-item-hover-border-color;
@mno-admin-sidebar-menu-active-item-bg-color:       @mno-admin-sidebar-menu-item-hover-bg-color;
@mno-admin-sidebar-full-width:                      250px;
@mno-admin-sidebar-reduced-width:                   70px;

/* Widget */
@mno-widget-bg-color:                     lighten(@bg-main-color, 5%);
@mno-widget-border-color:                 darken(@mno-widget-bg-color, 15%);
@mno-widget-header-bg-color:              darken(@mno-widget-bg-color, 2%);
@mno-widget-header-font-color:            @text-main-color;
@mno-widget-header-border-bottom-color:   @mno-widget-border-color;
@mno-widget-body-loader-color:            @decorator-touch-color;
@mno-widget-footer-bg-color:              darken(@mno-widget-bg-color, 2%);
@mno-widget-footer-border-top-color:      @mno-widget-header-border-bottom-color;

/* Forms */
@input-bg:                       lighten(@bg-main-color, 5%);
@input-bg-disabled:              darken(@bg-main-color, 10%);
@input-color:                    @text-main-color;
@input-border:                   darken(@bg-main-color, 15%);
@input-border-radius:            @border-radius-base;
@input-border-radius-large:      @border-radius-large;
@input-border-radius-small:      @border-radius-small;
@input-border-focus:             @decorator-main-color;
@input-color-placeholder:        lighten(@text-main-color, 5%);
@form-group-margin-bottom:       15px;
@legend-color:                   @text-main-strong-color;
@legend-border-color:            darken(@bg-main-color, 10%);
@input-group-addon-bg:           @gray-lighter;
@input-group-addon-border-color: @input-border;

/* Table */
@table-header-border-color:     darken(@bg-main-color, 15%);
@table-border-color:            darken(@bg-main-color, 10%);
@table-bg:                      lighten(@bg-main-color, 5%);
@table-bg-accent:               @bg-main-color;
@table-bg-hover:                darken(@bg-main-color, 10%);
@table-bg-active:               @table-bg-hover;
@headings-color:                @text-main-color;
@mno-row-sublink-color:         @text-main-strong-color;
@mno-feedback-bg-color:         @bg-main-color;
@mno-comment-bg-color:          white;
@mno-question-bg-color:         white;
@mno-answer-bg-color:           @bg-main-color;

/* DropDown */
@dropdown-bg:                   lighten(@bg-main-color, 5%);
@dropdown-divider-bg:           darken(@dropdown-bg, 5%);
@dropdown-link-color:           #333333;
@dropdown-link-hover-color:     darken(@dropdown-link-color, 5%);
@dropdown-link-hover-bg:        darken(@dropdown-bg, 5%);
@dropdown-link-active-bg:       @dropdown-link-hover-bg;
@dropdown-link-active-color:    @dropdown-link-hover-color;
@dropdown-link-disabled-color:  @dropdown-link-hover-color;
@dropdown-header-color:         @dropdown-link-hover-color;
@dropdown-border:               rgba(0,0,0,.15);
@dropdown-fallback-border:      @bg-main-color;

/* Modals */
@modal-inner-padding:                   15px;
@modal-title-padding:                   15px;
@modal-title-line-height:               @line-height-base;
@modal-content-bg:                      lighten(@bg-main-color, 5%);
@modal-content-border-color:            rgba(0,0,0,.2);
@modal-backdrop-bg:                     #000;
@modal-backdrop-opacity:                .5;
@modal-header-border-color:             darken(@modal-content-bg, 10%);
@modal-footer-border-color:             @modal-header-border-color;

@modal-lg: 900px;
@modal-md: 600px;
@modal-sm: 300px;

/* Impac! */
@impac-dashboard-margin-left:                   0px;