frontend/app/assets/stylesheets/mno_enterprise/variables.less
// Use this file to override Twitter Bootstrap variables or define own variables.
/*-----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------*/
/* Design variables */
/*-----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------*/
/* Fonts & Text */
/*-----------------------------------------------------------------------*/
@font-family-sans-serif: Arial, "Helvetica Neue", Helvetica, sans-serif;
@font-family-base: @font-family-sans-serif;
@font-path: '/dashboard/fonts';
@small: 11px;
@normal: 13px;
/*-----------------------------------------------------------------------*/
/* Public Page Header */
/*-----------------------------------------------------------------------*/
// Simple top header with brand logo - can be enabled/disabled via styleguide configuration
@public-page-header-bg-color: @bg-inverse-color;
@public-page-header-padding: 10px;
@public-page-header-logo-img: "mno_enterprise/main-logo.png";
@public-page-header-logo: { min-height: 61px; max-width: 160px; max-height: 130px; margin: 17px auto 5px auto; };
/*-----------------------------------------------------------------------*/
/* Error Page */
/*-----------------------------------------------------------------------*/
@error-bg-color: #fff;
@error-title-color: #000;
@error-status-code-color: #AAA;
@error-context-color: #AAA;
@error-hr-bg-color: #ddd;
@error-btn-bg-color: #2ecc71;
@error-btn-text-color: #fff;
@error-btn-border-radius: 99px;
@error-loader-text-color: #b5b5b5;
/*-----------------------------------------------------------------------*/
/* Login Page */
/*-----------------------------------------------------------------------*/
@login-bg-img: "mno_enterprise/login-background.jpg";
@login-bg-color: @bg-main-color;
@login-box-grid-position: { margin-top: 80px; .make-sm-column(4); .make-sm-column-offset(4); };
@login-box-corners: 0px;
@login-box-title-color: @text-inverse-color;
@login-box-title: { text-transform: uppercase; };
@login-box-title-display-box-arrow: false;
@login-box-bg-color: @bg-inverse-color;
@login-box-padding: 20px;
@login-box-brand-logo-img: "mno_enterprise/main-logo.png";
@login-box-brand-logo: { min-height: 61px; max-width: 160px; max-height: 130px; margin: 17px auto 5px auto; };
@login-box-btn-login: { width: 100%; };
@login-box-sso-intuit-logo: "mno_enterprise/logo-intuit.png";
@login-box-oauth-text-color: #fff;
@login-box-oauth-bg-color-facebook: #3b5998;
@login-box-oauth-bg-color-google: #dd4b39;
@login-box-oauth-bg-color-linkedin: #0074C4;
@login-box-oauth-bg-color-intuit: #fff;
/*-----------------------------------------------------------------------*/
/* Dashboard Layout */
/*-----------------------------------------------------------------------*/
@dashboard-bg-color: @bg-main-color;
@dashboard-section-title-color: @text-strong-color;
@dashboard-section-title-alignment: center;
@dashboard-section-title-display-subline: true;
// Side navbar menu
//--------------------------------------
@dashboard-side-menu-padding: 30px 0px 0px 14px;
@dashboard-side-menu-bg-color: @bg-inverse-color;
@dashboard-side-menu-brand-logo-img: "../images/main-logo.png";
@dashboard-side-menu-brand-logo: { background-size: 204px; width: 51px; margin-left: 5px; };
@dashboard-side-menu-brand-logo-expanded: { width: 201px; background-size: 100%; };
@dashboard-side-menu-link-color: @text-inverse-color;
@dashboard-side-menu-link-bg-color: @dashboard-side-menu-bg-color;
@dashboard-side-menu-link-hover-color: @dashboard-side-menu-bg-color;
@dashboard-side-menu-link-hover-bg-color: lighten(@bg-main-color,15%);
@dashboard-side-menu-link-active-color: @dashboard-side-menu-bg-color;
@dashboard-side-menu-link-active-bg-color: @bg-main-color;
@_default_style: { .fa-2x; margin-top: 6px; margin-left: 2px; color: @dashboard-side-menu-link-color; };
@_default_style_active: { @_default_style(); color: @dashboard-side-menu-link-active-color; };
@dashboard-side-menu-btn-dashboard: { .icon-fa(th); @_default_style(); };
@dashboard-side-menu-btn-dashboard-active: { .icon-fa(th); @_default_style_active(); };
@dashboard-side-menu-btn-impac: { .icon-fa(pie-chart); @_default_style(); };
@dashboard-side-menu-btn-impac-active: { .icon-fa(pie-chart); @_default_style_active(); };
@dashboard-side-menu-btn-account: { .icon-fa(user); @_default_style(); margin-left: 5px; };
@dashboard-side-menu-btn-account-active: { .icon-fa(user); @_default_style_active(); margin-left: 5px; };
@dashboard-side-menu-btn-company: { .icon-fa(briefcase); @_default_style(); };
@dashboard-side-menu-btn-company-active: { .icon-fa(briefcase); @_default_style_active(); };
@dashboard-side-menu-btn-marketplace: { .icon-fa(plus-square-o); @_default_style(); margin-left: 5px; };
@dashboard-side-menu-btn-marketplace-active: { .icon-fa(plus-square-o); @_default_style_active(); margin-left: 5px; };
@dashboard-side-menu-btn-logout: { .icon-fa(lock); @_default_style(); margin-left: 6px; };
@dashboard-side-menu-btn-logout-active: { .icon-fa(lock); @_default_style_active(); margin-left: 6px; };
// Company select box (top right)
//--------------------------------------
@dashboard-cpy-select-width: 280px;
@dashboard-cpy-select-pic-width: 50px;
@dashboard-cpy-select-bg-color: @bg-inverse-color;
@dashboard-cpy-select-border-radius: 0 0 0 6px;
@dashboard-cpy-select-border-color: @text-inverse-color;
@dashboard-cpy-select-header-text-bold-color: @text-inverse-color;
@dashboard-cpy-select-header-text-color: @text-inverse-color;
@dashboard-cpy-select-header-text-size: 13px;
@dashboard-cpy-select-link-icon-color: @decorator-touch-color;
@dashboard-cpy-select-link-color: @text-inverse-strong-color;
@dashboard-cpy-select-link-hover-color: @text-strong-color;
@dashboard-cpy-select-link-hover-bg-color: @text-inverse-strong-color;
// Loaders
//--------------------------------------
@dashboard-loader-color: @text-strong-color;
@dashboard-loader-icon: { .icon-fa(refresh); .fa-2x; .fa-spin; }; //pass a ruleset
/*-----------------------------------------------------------------------*/
/* Dashboard > Apps Section */
/*-----------------------------------------------------------------------*/
@dashboard-apps-tile-bg-color: @bg-inverse-color;
@dashboard-apps-tile-text-color: @text-inverse-color;
@dashboard-apps-tile-logo-border-size: 0px;
@dashboard-apps-tile-logo-border-color: @decorator-main-color;
@dashboard-apps-tile-settings-color: @dashboard-apps-tile-text-color;
@dashboard-apps-tile-settings-bg-color: @dashboard-apps-tile-bg-color;
@dashboard-apps-tile-settings-hover-color: @dashboard-apps-tile-text-color;
@dashboard-apps-tile-settings-hover-bg-color: @dashboard-apps-tile-bg-color;
@dashboard-apps-tile-add-color: @dashboard-apps-tile-text-color;
@dashboard-apps-tile-add-bg-color: @dashboard-apps-tile-bg-color;
/*-----------------------------------------------------------------------*/
/* Dashboard > My account Section */
/*-----------------------------------------------------------------------*/
@dashboard-account-tabs-bg-color: @bg-on-bg-inverse-color;
@dashboard-account-tabs-text-color: @text-inverse-color;
@dashboard-account-panel-header-bg-color: @bg-inverse-color;
@dashboard-account-panel-header-text-color: @text-inverse-color;
@dashboard-account-panel-body-bg-color: @bg-on-bg-inverse-color;
@dashboard-account-panel-text-color: @text-strong-color;
@dashboard-account-inline-text-color-checked: @brand-success;
@dashboard-account-inline-text-color-unchecked: @decorator-inverse-color;
/*-----------------------------------------------------------------------*/
/* Dashboard > Company Section */
/*-----------------------------------------------------------------------*/
// Tab Heading
//--------------------------------------
@dashboard-cpy-tabs-bg-color: @decorator-main-color;
@dashboard-cpy-tabs-text-color: @text-strong-color;
@dashboard-cpy-tabs-border-radius: 2px;
@dashboard-cpy-tabs-subline-size: 0px;
@dashboard-cpy-tabs-subline-color: transparent;
@dashboard-cpy-tabs-active-text-color: @decorator-main-color;
@dashboard-cpy-tabs-active-bg-color: @bg-inverse-color;
@dashboard-cpy-tabs-hover-text-color: @decorator-main-color;
@dashboard-cpy-tabs-hover-bg-color: @bg-inverse-color;
// Tab Content
//--------------------------------------
@dashboard-cpy-tabcontent-header-bg-color: @bg-inverse-color;
@dashboard-cpy-tabcontent-body-bg-color: @bg-on-bg-inverse-color;
@dashboard-cpy-tabcontent-bg-color: @bg-inverse-color;
@dashboard-cpy-tabcontent-text-color: @text-inverse-strong-color;
// Teams section
//--------------------------------------
@dashboard-cpy-teams-matrix-bg-color: @bg-inverse-color;
@dashboard-cpy-teams-matrix-border-color: @bg-inverse-color;
@dashboard-cpy-teams-matrix-text-color: @text-inverse-color;
@dashboard-cpy-teams-matrix-text-hover-color: @text-inverse-color;
@dashboard-cpy-teams-matrix-text-edit-color: @text-strong-color;
/*-----------------------------------------------------------------------*/
/* Dock */
/*-----------------------------------------------------------------------*/
@mno-dock-bg-color: @decorator-inverse-color;
@mno-dock-add-app-border-color: white;
@mno-dock-add-app-text-color: white;
@mno-dock-expand-arrow-color: white;
@mno-dock-expand-arrow-color-hover: darken(@mno-dock-expand-arrow-color, 5%);
@mno-dock-expand-left-border-color: white;
@mno-dock-app-title-color: white;
@mno-dock-app-logo-square-width: 70px;
@mno-dock-app-logo-minimized-square-width: 50px;
@mno-dock-app-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
@mno-dock-app-box-border: 1px solid rgba(0, 0, 0, 0.15);
@mno-dock-sub-menu-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
@mno-dock-sub-menu-bg-color: @bg-inverse-color;
@mno-dock-sub-menu-hover: @decorator-main-color;
@mno-dock-sub-menu-icon: @decorator-touch-color;
@mno-dock-sub-menu-text-color: @text-inverse-color;
@mno-dock-sub-menu-text-hover-color: darken(@mno-dock-sub-menu-text-color, 10%);
// Mobile dock
@mno-dock-mobile-bg-color: @bg-on-bg-inverse-color;
@mno-dock-mobile-button-color: @text-inverse-strong-color;
@mno-dock-mobile-button-bg-color: @decorator-inverse-color;
@mno-dock-mobile-app-active-color: lighten(@mno-dock-mobile-button-bg-color, 20%);
@mno-dock-mobile-app-border-bottom: 1px solid darken(@mno-dock-bg-color, 10%);
@mno-dock-mobile-add-app-color: @text-strong-color;
@mno-dock-mobile-app-name-color: @text-strong-color;
/*-----------------------------------------------------------------------*/
/* Dock Settings */
/*-----------------------------------------------------------------------*/
@mno-dock-settings-app-running: #33d375;
@mno-dock-settings-app-terminating: #ffe6ea;
@mno-dock-settings-app-upgrading: #ffdb99;
@mno-dock-settings-app-neutral: #E0FFFF;
/*-----------------------------------------------------------------------*/
/* IMPAC */
/*-----------------------------------------------------------------------*/
// Dashboard
//--------------------------------------
@impac-dashboard-padding-top: 33px;
@impac-dashboard-margin-left: 0px;
// Title
@impac-dashboard-title-label-color: @text-strong-color;
@impac-dashboard-title-color: @decorator-inverse-color;
@impac-dashboard-source-color: @impac-dashboard-title-label-color;
@impac-dashboard-buttons-border-radius: 4px;
// Widgets container
@impac-placeholder-border: 2px dashed @bg-inverse-color;
@impac-padding-between-widgets: 12px;
@impac-minimum-widget-size: 258px;
// Widgets
//--------------------------------------
// Global
@impac-widget-background-color: @bg-on-bg-inverse-color;
@impac-widget-text-color: black;
@impac-widget-text-color-light: lighten(@impac-widget-text-color,70%);
@impac-widget-borders-color: lighten(@impac-widget-text-color-light,10%);
@impac-widget-link-color: @decorator-inverse-color;
// Title
@impac-widget-title-text-color: white;
@impac-widget-title-bg: @bg-inverse-color;
@impac-widget-title-border: solid 1px @impac-widget-borders-color;
@impac-widget-title-text-transform: uppercase;
@impac-widget-title-text-size: 12px;
@impac-widget-title-border-radius: 5px 5px 0px 0px;
// Content
@impac-widget-content-border-radius: 0px 0px 5px 5px;
@impac-widget-lines-container-max-height: 210px;
// Hist Mode Choser
@impac-widget-hist-text-transform: uppercase;
@impac-widget-hist-text-size: 12px;
@impac-widget-hist-text-color: @impac-widget-text-color-light;
// Price
@impac-widget-price-color: @impac-widget-text-color;
@impac-widget-price-positive-color: @brand-success;
@impac-widget-price-negative-color: @brand-danger;
@impac-widget-currency-color: @impac-widget-text-color-light;
@impac-widget-legend-color: lighten(@impac-widget-text-color,30%);
// Edit settings
@impac-widget-sub-bg-color: darken(@impac-widget-background-color,10%);
@impac-widget-sub-bg-color-light: lighten(@impac-widget-sub-bg-color,5%);
// Invoices list
@impac-widget-line-hover-bg: lighten(@bg-inverse-color,10%);
@impac-widget-line-hover-text: @text-inverse-color;
// Accounts Comparison
@impac-big-widget-size: 581px;
@impac-big-widget-bottom-padding: 30px;
@impac-widget-accounts-comparison-lines-container-max-height: 250px;
/*-----------------------------------------------------------------------*/
/* Mno Enterprise > Marketplace Section */
/*-----------------------------------------------------------------------*/
@dashboard-marketplace-search-text-color: @text-strong-color;
@dashboard-marketplace-search-border-color: @text-strong-color;
@dashboard-marketplace-tile-bg-color: @bg-on-bg-inverse-color;
@dashboard-marketplace-tile-text-color: @text-strong-color;
@dashboard-marketplace-tile-img-border-color: @decorator-main-color;
@dashboard-marketplace-tile-hover-bg-color: @decorator-main-color;
@dashboard-marketplace-tile-hover-text-color: @dashboard-marketplace-tile-text-color;
@dashboard-marketplace-tile-hover-img-border-color: darken(@decorator-main-color,10%);
@dashboard-marketplace-tile-hover-arrow-color: @text-strong-color;
@dashboard-marketplace-show-header-text-color: @text-strong-color;
@dashboard-marketplace-show-sections-bg-color: @bg-on-bg-inverse-color;
@dashboard-marketplace-show-sections-text-color: @text-strong-color;
@dashboard-marketplace-app-card: { display: block; padding: 10px; height: 120px; margin-bottom: 10px; font-weight: 300; };
/*-----------------------------------------------------------------------*/
/* Responsive Table (cell table) */
/*-----------------------------------------------------------------------*/
@table-cell-header-row-spacing: 10px;
@table-cell-header-row-padding: 3px;
@table-cell-row-spacing: 0px;
@table-cell-row-padding: 3px;
@table-cell-header-text-size: 12px;
@table-cell-header-text-color: @text-inverse-strong-color;
@table-cell-header-bg-color: lighten(@bg-inverse-color, 5%);
@table-cell-header-additional-rule: { text-transform: uppercase; };
@table-cell-row-text-size: 13px;
@table-cell-row-odd-bg-color: darken(@bg-main-color,4%);
@table-cell-row-even-bg-color: darken(@bg-main-color,0%);
@table-inverse-cell-header-text-color: @text-inverse-strong-color;
@table-inverse-cell-header-bg-color: lighten(@bg-inverse-color, 5%);
@table-inverse-cell-row-odd-bg-color: darken(@bg-main-color,4%);
@table-inverse-cell-row-even-bg-color: darken(@bg-main-color,0%);
/*-----------------------------------------------------------------------*/
/* Navbar Customization */
/*-----------------------------------------------------------------------*/
@navbar-inverse-bg: @bg-inverse-color;
@navbar-height: 40px;
@navbar-inverse-link-color: @decorator-inverse-color;
@navbar-border-radius: 0px;
@navbar-inverse-border: @bg-inverse-color;
@navbar-desktop-height: 120px;
@navbar-inverse-link-active-bg: @navbar-inverse-bg;
/*-----------------------------------------------------------------------*/
/* Form Customization */
/*-----------------------------------------------------------------------*/
@input-bg: @bg-on-bg-inverse-color;
@input-color: @text-strong-color;
@input-color-placeholder: @input-color;
@input-label-color: @text-inverse-color;