[system_tracking] Match button group colors to dashboard

This commit is contained in:
Joe Fiorini
2015-06-09 10:49:53 -04:00
parent 0016744e1f
commit 419bc3dd1c
3 changed files with 27 additions and 9 deletions

View File

@@ -1,5 +1,7 @@
/** @define DashboardGraphs */ /** @define DashboardGraphs */
@import "shared/branding/colors.less";
.DashboardGraphs { .DashboardGraphs {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -16,13 +18,12 @@
.DashboardGraphs-tab { .DashboardGraphs-tab {
flex: 1; flex: 1;
padding: 10px; padding: 10px;
border-right: solid 1px #a9a9a9; border-right: solid 1px @disabled-item-border;
border-bottom: solid 1px #a9a9a9; border-bottom: solid 1px @disabled-item-border;
text-align: center; text-align: center;
font-size: 20px; font-size: 20px;
background-color: #ccc; color: @disabled-item-text;
color: #545454; background-color: @disabled-item-background;
background-color: #EAEAEA;
} }
.DashboardGraphs-tab--firstTab { .DashboardGraphs-tab--firstTab {
@@ -40,8 +41,8 @@
} }
.DashboardGraphs-tab.is-selected { .DashboardGraphs-tab.is-selected {
background-color: #fff; background-color: @enabled-item-background;
color: #000; color: @enabled-item-text;
border-bottom: 0; border-bottom: 0;
} }

View File

@@ -16,6 +16,14 @@
@well-border: #e3e3e3; @well-border: #e3e3e3;
@white: #FFF; @white: #FFF;
@disabled-item-background: #eaeaea;
@disabled-item-text: #545454;
@disabled-item-border: #a9a9a9;
@enabled-item-background: #fff;
@enabled-item-text: #000;
@enabled-item-border: #a9a9a9;
@tip-background: #0088CC; @tip-background: #0088CC;
@tip-color: #fff; @tip-color: #fff;
@green: #60D66F; @green: #60D66F;

View File

@@ -1,19 +1,28 @@
/** @define FactModuleFilter */ /** @define FactModuleFilter */
@import "shared/branding/colors.less";
.FactModuleFilter { .FactModuleFilter {
width: 100%; width: 100%;
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
margin-bottom: 2.8rem; margin-bottom: 2.8rem;
&-module { &-module {
background-color: @disabled-item-background;
color: @disabled-item-text;
border-color: @disabled-item-border;
flex: 1 1 20%; flex: 1 1 20%;
@media screen and (max-width: 750px) { @media screen and (max-width: 750px) {
flex-basis: 50%; flex-basis: 50%;
} }
&--isActive { &--isActive {
// copied from bootstrap's .btn:focus // copied from bootstrap's .btn:focus
background-color: #ebebeb; background-color: @enabled-item-background;
border-color: #adadad; border-color: @enabled-item-border;
color: @enabled-item-text;
z-index: 2; z-index: 2;
} }
} }