From 0101aa7b2174484428697ac2c1ede1be1daa7a2b Mon Sep 17 00:00:00 2001 From: Clement Date: Fri, 17 Feb 2017 17:03:42 +1100 Subject: [PATCH] Refactor variables --- src/app/stylesheets/table.less | 6 ++ src/app/stylesheets/theme.less | 55 ++++++++++++++++++ src/app/stylesheets/variable.less | 95 +++++++++++++------------------ 3 files changed, 102 insertions(+), 54 deletions(-) create mode 100644 src/app/stylesheets/table.less create mode 100644 src/app/stylesheets/theme.less diff --git a/src/app/stylesheets/table.less b/src/app/stylesheets/table.less new file mode 100644 index 00000000..b9d91698 --- /dev/null +++ b/src/app/stylesheets/table.less @@ -0,0 +1,6 @@ +table.table { + > thead > tr > th { + vertical-align: bottom; + border-bottom: 1px solid @table-header-border-color; + } +} diff --git a/src/app/stylesheets/theme.less b/src/app/stylesheets/theme.less new file mode 100644 index 00000000..08352bc5 --- /dev/null +++ b/src/app/stylesheets/theme.less @@ -0,0 +1,55 @@ +/*-----------------------------------------------------------------------*/ +/* General Theme Colors */ +/*-----------------------------------------------------------------------*/ +@mnoe-admin-panel-orange: #e99d1a; +@mnoe-admin-panel-blue: #30426a; +@mnoe-admin-panel-grey: #626d6d; +@mnoe-admin-panel-dark-grey: #17262d; +@mnoe-admin-panel-light-grey: #e6edee; +@mnoe-admin-panel-dark-white: #f1f1f1; +@mnoe-admin-panel-white: #ffffff; + +/*-----------------------------------------------------------------------*/ +/* Twitter Bootstrap colors */ +/*-----------------------------------------------------------------------*/ +@brand-primary: darken(#428bca, 6.5%); +@brand-success: #5cb85c; +@brand-info: #5bc0de; +@brand-warning: #f0ad4e; +@brand-danger: #d9534f; + +// Main colors +//------------------------------------------------------------- +// Dashboard background color +@bg-main-color: @mnoe-admin-panel-dark-white; + +// Elements placed on top of bg-main-color +@decorator-main-color: @mnoe-admin-panel-orange; + +// Used for text used in the context of bg-main-color +@text-main-color: @mnoe-admin-panel-grey; + +// Used for strong text used in the context of bg-main-color +@text-main-strong-color: @mnoe-admin-panel-dark-grey; + +// Inverse colors +//------------------------------------------------------------- +// Background color used for dashboard side menu. top banners, inverse modals +@bg-inverse-color: @mnoe-admin-panel-blue; + +// Background color for elements displayed on top of inverse elements +@bg-on-bg-inverse-color: @mnoe-admin-panel-dark-white; + +// Design elements (lines, borders) on top of bg-inverse-color +@decorator-inverse-color: @mnoe-admin-panel-orange; + +// Text used on top of bg-inverse-color such as inverse modals +@text-inverse-color: @mnoe-admin-panel-light-grey; + +// Strong text used on top of bg-inverse-color +@text-inverse-strong-color: @mnoe-admin-panel-white; + +// Color used in small/isolated elements +//------------------------------------------------------------- +// Color used as a decoration on small icons or specific text +@decorator-touch-color: @mnoe-admin-panel-orange; diff --git a/src/app/stylesheets/variable.less b/src/app/stylesheets/variable.less index 1aebd910..874e6ec1 100644 --- a/src/app/stylesheets/variable.less +++ b/src/app/stylesheets/variable.less @@ -8,27 +8,6 @@ @elemental-aqua: #2C594F; @elemental-blue: #002D40; -@mno-dark: #17262d; -@mno-green: #d1e55c; -@mno-blue: #00e5f0; -@mno-purple: #977bf0; -@mno-grey: #626d6d; -@mno-white: #fff; -@mno-light-blue: #abc4c6; -@mno-light-grey: #e6edee; - -@mno-web-green: #47ff00; -@mno-web-yellow: #fbd925; -@mno-web-orange: #ff7300; -@mno-web-pink: #ed1e79; -@color-danger: #d43f3a; - -@brand-primary: darken(#428bca, 6.5%); -@brand-success: #5cb85c; -@brand-info: #5bc0de; -@brand-warning: #f0ad4e; -@brand-danger: #d9534f; - /* General */ @border-radius-base: 4px; @border-radius-large: 6px; @@ -47,30 +26,27 @@ @mno-admin-kpi-bg-color-3: @elemental-green; @mno-admin-kpi-bg-color-4: @elemental-aqua; - /* Header vars */ -@mno-admin-header-bg-color: #fff; -@mno-admin-header-font-color: #000; +@mno-admin-header-bg-color: lighten(@bg-main-color, 5%); +@mno-admin-header-font-color: @text-main-strong-color; @mno-admin-header-height: 60px; @mno-admin-header-title-text-size: 18px; -@mno-admin-header-title-text-color: @mno-admin-header-font-color; +@mno-admin-header-title-text-color: @text-main-strong-color; -@mno-admin-header-user-color: #919191; +@mno-admin-header-user-color: @text-main-color; /* Main content */ -@mno-admin-content-bg-color: #f1f1f1; +@mno-admin-content-bg-color: @bg-main-color; /* Navigation - Sidebar */ -@mno-admin-sidebar-base-color: #30426a; -@mno-admin-sidebar-menu-base-color: #e99d1a; - +@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: #738bc0; -@mno-admin-sidebar-menu-item-font-color: #b2bfdc; -@mno-admin-sidebar-menu-item-font-hover-color: #fff; -@mno-admin-sidebar-menu-item-hover-color: @mno-admin-sidebar-menu-base-color; -@mno-admin-sidebar-menu-item-hover-border-color: @mno-admin-sidebar-menu-base-color; +@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; @@ -79,31 +55,43 @@ @mno-admin-sidebar-reduced-width: 70px; /* Widget */ -@mno-widget-bg-color: @mno-white; -@mno-widget-border-color: darken(@mno-admin-content-bg-color, 3%); -@mno-widget-header-font-color: @mno-grey; -@mno-widget-header-bg-color: lighten(@mno-admin-content-bg-color, 3%); -@mno-widget-header-border-bottom-color: darken(@mno-admin-content-bg-color, 3%); -@mno-widget-body-loader-color: @mno-admin-sidebar-base-color; +@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: #fff; -@input-bg-disabled: @gray-lighter; -@input-color: @gray; -@input-border: #ccc; +@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: #66afe9; -@input-color-placeholder: #999; +@input-border-focus: @decorator-main-color; +@input-color-placeholder: lighten(@text-main-color, 5%); @form-group-margin-bottom: 15px; -@legend-color: @gray-dark; -@legend-border-color: #e5e5e5; +@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; + /* DropDown */ -@dropdown-bg: @mno-white; +@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%); @@ -113,18 +101,17 @@ @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: #ccc; +@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: #fff; +@modal-content-bg: lighten(@bg-main-color, 5%); @modal-content-border-color: rgba(0,0,0,.2); -@modal-content-fallback-border-color: #999; @modal-backdrop-bg: #000; @modal-backdrop-opacity: .5; -@modal-header-border-color: #e5e5e5; +@modal-header-border-color: darken(@modal-content-bg, 10%); @modal-footer-border-color: @modal-header-border-color; @modal-lg: 900px;