strong-arc/client/less/ui/globals.less

A visual suite for the StrongLoop API Platform

//misc
@ui-gray-light: lighten(#000, 60%);
@ui-link-color: #7dbd33;
@ui-font-size-base: 14px;
@ui-white: #fff;
@ui-action-primary: #7dbd33;


//color palette
@white: #fff;
@green-1: #7dbd33;
@green-2: #08592b;
@green-3: #6ea530;
@green-4: #5e9323;
@green-5: #0D5A2E;
@blue-1: #4a90e2;
@blue-2: #2e6ab0;
@grey-1: #444;
@grey-2: #888;
@grey-3: #aaa;
@grey-4: #bbb;
@grey-5: #ddd;
@grey-6: #eee;
@grey-7: #f4f4f4;
@red-1: #d4470f;
@red-2: #b33f1f;
@teal-dark: #0085a1;
@teal-light: #00c1d5;
@orange: #ff7f41;
@purple-dark: #470a59;
@purple-light: #9063cd;


//select menu
@ui-select-bg-color: #7dbd33;
@ui-select-hover-bg-color: #65a718;
@ui-select-color: #fff;
@ui-select-hover-color: #fff;
@ui-select-nav-bg-color: #fff;

//select .more menu
@ui-select-more-bg-color: #fff;
@ui-select-more-hover-bg-color: #5f8de1;
@ui-select-more-selected-color: #999;
@ui-select-more-selected-bg-color: #5f8de1;
@ui-select-more-selected-item-color: #fff;
@ui-select-more-color: #999;

//dropdown menu
@ui-dropdown-menu-border-color: #ccc;
@ui-dropdown-menu-background-color: #fff;
@ui-dropdown-menu-bg-color: #7dbd33;
@ui-dropdown-menu-color: #999;
@ui-dropdown-menu-link-hover-color: #fff;
@ui-dropdown-menu-link-active-bg-color: #51ad2f;
@ui-dropdown-menu-selected-bg-color: #3e8ae5;

//action menu
@ui-menu-action-bg-color: #fff;

//icons
@ui-icon-selected: #4a90e2;
@ui-icon-selected-hover: #fff;
@ui-icon-focused: #4a90e2;
@ui-icon-action-focused: #BBB;
@ui-icon-action-hover: #4a90e2;

//messaging
@ui-msg-success-color: #7dbd33;
@ui-msg-error-color: @red-1;
@ui-msg-error-bg-color: #fee;
@ui-msg-error-border-color: @red-1;
@ui-msg-info-color: #4a90e2;


//links
@ui-disabled-text-color: @grey-4;

//forms
@ui-form-color: #999;
@ui-form-field-border-color: #ccc;
@ui-form-border-color: #ccc;
@ui-label-color: #999;

//buttons
@ui-button-color: #fff;
@ui-button-bg-color: #7DBD33;
@ui-button-hover-bg-color: #6EA530;
@ui-button-active-bg-color: #5E9323;
@ui-button-active-border-color: #5E9323;
@ui-button-border-color: #6EA530;
@ui-disabled-button-color: #999;
@ui-disabled-button-bg-color: #ccc;
@ui-disabled-input-bg-color: #eee;
@ui-secondary-button-color: #4A4A4A;
@ui-secondary-button-bg-color: #ddd;
@ui-secondary-button-border-color: #BBB;
@ui-secondary-button-hover-color: #444;
@ui-secondary-button-hover-bg-color: #aaa;
@ui-secondary-button-hover-border-color: #aaa;
@ui-secondary-button-active-color: #fff;
@ui-secondary-button-active-bg-color: #888;
@ui-secondary-button-active-border-color: #888;
@ui-accessory-button-color: #6DA442;
@ui-accessory-button-bg-color: transparent;
@ui-accessory-button-border-color: transparent;
@ui-accessory-button-hover-color: #507830;
@ui-accessory-button-hover-bg-color: transparent;
@ui-accessory-button-hover-border-color: transparent;
@ui-accessory-button-active-color: #4A90E2;
@ui-accessory-button-active-bg-color: transparent;
@ui-accessory-button-active-border-color: transparent;
@ui-button-primary-dark-bg-hover-color: #7DBD33;
@ui-button-primary-dark-bg-hover-bg-color: #fff;
@ui-button-primary-dark-bg-hover-border-color: #fff;
@ui-button-primary-dark-bg-active-bg-color: #f4f4f4;
@ui-button-primary-dark-bg-active-border-color: #f4f4f4;
@ui-button-primary-dark-bg-selected-bg-color: #6EA530;
@ui-button-primary-dark-bg-selected-border-color: #6EA530;

//inputs
@ui-input-placeholder-color: #ccc;
@ui-input-color: #444;
@ui-input-bg-color: #fff;
@ui-input-border-color: #ccc;
@ui-input-inner-shadow-color: #ECECEC;
@ui-input-error-border-color: #D0021B;
@ui-input-focus-border-color: #4A90E2;
@ui-input-search-radius: 2rem;

//checkboxes
@ui-checkbox-off-color: #bbb;
@ui-checkbox-off-hover-color: #4990e2;
@ui-checkbox-on-color: #4990e2;
@ui-checkbox-on-hover-color: #2e6ab0;

//radio buttons
@ui-radio-off-color: #bbb;
@ui-radio-off-hover-color: #4990e2;
@ui-radio-on-color: #4990e2;
@ui-radio-on-hover-color: #2e6ab0;

//tabs
@ui-tabs-border-radius: .5rem .5rem 0 0;
@ui-tabs-color: #808080;
@ui-tabs-bg-color: #fff;
@ui-tabs-hover-color: #444;
@ui-tabs-hover-bg-color: #ddd;
@ui-tabs-hover-border-color: #ddd;
@ui-tabs-border-color: #ddd;
@ui-tabs-active-color: #4A90E2;
@ui-tabs-active-bg-color: #fff;
@ui-tabs-active-border-color: #bbb;



//togglers
@ui-toggler-color: #fff;
@ui-toggler-inactive-color: #aaa;
@ui-toggler-inactive-bg-color: #fff;
@ui-toggler-active-border-color: #fff;
@ui-toggler-bg-color: #7fc030;
@ui-toggler-border-color: #7fc030;
@ui-toggler-small-bg-color: #aaa;
@ui-toggler-small-border-color: #aaa;

//switches
@ui-switch-color: #000;
@ui-switch-bg-color: #7fc030;
@ui-switch-wrap-bg-color: #fff;
@ui-switch-border-color: #7fc030;
@ui-switch-power-bg-color: #ccc;
@ui-switch-power-border-color: #ccc;

//breadcrumbs
@ui-crumb-color: #000;

//tooltips
@ui-tooltip-color: #000;
@ui-tooltip-bg: #fff;
@ui-tooltip-arrow-color: #fff;
@ui-tooltip-border-color: #aaa;

//help popover
@ui-popover-bg: #fff;
@ui-popover-arrow-color: #aaa;
@ui-popover-title-bg: #aaa;
@ui-popover-title-color: #eee;
@ui-popover-border-color: #aaa;
@ui-popover-icon-color: #eee;

//menu popover
@ui-popover-menu-header-bg: #eee;
@ui-popover-menu-header-border-color: #aaa;
@ui-popover-menu-footer-bg: #fff;
@ui-popover-menu-footer-border-color: #aaa;

//tables
@ui-table-border-color: #ddd;
@ui-table-row-hover-border-color: @blue-1;
@ui-table-header-color: #444;
@ui-table-header-bg-color: #eee;
@ui-table-cell-hover-color: #fff;
@ui-table-cell-hover-bg-color: @blue-1;
@ui-table-cell-selected-border-color: @blue-1;
@ui-table-selectable-btn-color: #444;

//arrow next indicator
@ui-arrow-next-color: #7fc030;

//popover
@ui-popover-menu-arrow-color: #eee;

//other
@ui-radius: .5rem;