Merge branch 'develop-light-theme' into develop

public/sass/_variables.dark.scss

@@ -139,6 +139,8 @@ $table-bg-accent:             $dark-3; // for striping
 $table-bg-hover:              $dark-4; // for hover
 $table-border:                $dark-3; // table and cell border
 
+$table-bg-odd:               $dark-2;
+
 // Buttons
 // -------------------------
 
@@ -160,6 +162,7 @@ $btn-danger-bg-hl:            darken($red, 8%);
 $btn-inverse-bg:              $dark-3;
 $btn-inverse-bg-hl:     	    lighten($dark-3, 4%);
 $btn-inverse-text-color:      $link-color;
+$btn-inverse-text-shadow:     0px 1px 0 rgba(0,0,0,.1);
 
 $btn-link-color:              $gray-3;
 
@@ -182,7 +185,7 @@ $input-border-focus:             $input-border-color !default;
 $input-box-shadow-focus:         rgba(102,175,233,.6) !default;
 $input-color-placeholder:        $gray-1 !default;
 $input-label-bg:				         $gray-blue;
-$input-label-border-color:       transparent;
+$input-label-border-color:       $gray-blue;
 $input-invalid-border-color:     lighten($red, 5%);
 
 // Search
@@ -241,11 +244,14 @@ $navbarDropdownShadow:            inset 0px 4px 10px -4px $body-bg;
 $navbarButtonBackground:          $navbarBackground;
 $navbarButtonBackgroundHighlight: $body-bg;
 
+$navbar-button-border:             #151515;
+
 // Sidemenu
 // -------------------------
 $side-menu-bg:            $black;
 $side-menu-item-hover-bg: $dark-2;
 $side-menu-shadow:        0 0 20px black;
+$side-menu-link-color:    $link-color;
 $breadcrumb-hover-hl:   #111;
 
 // Menu dropdowns
@@ -261,6 +267,9 @@ $page-nav-bg: $black;
 $page-nav-shadow: 5px 5px 20px -5px $black;
 $page-nav-breadcrumb-color: $gray-3;
 
+// Tabs
+// -------------------------
+$tab-border-color:          $dark-4;
 
 // Pagination
 // -------------------------

public/sass/_variables.light.scss

@@ -14,24 +14,24 @@ $black:                 #000;
 
 // -------------------------
 $black:            #000;
-$dark-1:           #141414;
-$dark-2:           #1d1d1f;
-$dark-3:           #262628;
-$dark-4:           #373737;
-$dark-5:           #444444;
-$gray-1:           #555555;
-$gray-2:           #7B7B7B;
-$gray-3:           #b3b3b3;
-$gray-4:           #D8D9DA;
-$gray-5:           #ECECEC;
-$gray-6:           #f4f5f8;
-$gray-7:           #fbfbfb;
+$dark-1:           #13161d;
+$dark-2:           #1e2028;
+$dark-3:           #303133;
+$dark-4:           #35373f;
+$dark-5:           #41444b;
+$gray-1:           #52545c;
+$gray-2:           #767980;
+$gray-3:           #acb6bf;
+$gray-4:           #c7d0d9;
+$gray-5:           #dde4ed;
+$gray-6:           #e9edf2;
+$gray-7:           #f7f8fa;
 
 $white:            #fff;
 
 // Accent colors
 // -------------------------
-$blue:             	   	#2AB2E4;
+$blue:                  #1ca4d6;
 $blue-dark:             #3CAAD6;
 $green:                 #3aa655;
 $red:                   #d44939;
@@ -39,7 +39,7 @@ $yellow:                #FF851B;
 $orange:                #Ff7941;
 $pink:                  #E671B8;
 $purple:                #9954BB;
-$variable:              #2AB2E4;
+$variable:              $blue;
 
 $brand-primary:         $orange;
 $brand-success:         $green;
@@ -55,22 +55,22 @@ $critical:              #EC2128;
 // Scaffolding
 // -------------------------
 
-$body-bg:  		  		    $white;
-$page-bg:  		  		    $white;
+$body-bg:  		  		    $gray-7;
+$page-bg:  		  		    $gray-7;
 $body-color:    		    $gray-1;
-$text-color:    		    $gray-1;
+$text-color:    		    $dark-4;
 $text-color-strong:	    $white;
-$text-color-weak: 	    $gray-3;
+$text-color-weak: 	    $gray-2;
 $text-color-faint:      $gray-4;
 $text-color-emphasis: 	$dark-5;
 
 $text-shadow-strong: none;
 $text-shadow-faint: none;
+$textShadow: none;
 
 // gradients
 $brand-gradient: linear-gradient(to right, rgba(255,213,0,1.0) 0%, rgba(255,68,0,1.0) 99%, rgba(255,68,0,1.0) 100%);
-$page-gradient: linear-gradient(-60deg, transparent 70%, darken($page-bg, 4%) 98%);
-$page-header-bg: linear-gradient(90deg, #292a2d, black);
+$page-gradient: linear-gradient(-60deg, transparent 70%, $gray-7 98%);
 
 // Links
 // -------------------------
@@ -97,7 +97,7 @@ $component-active-bg:    $brand-primary !default;
 // Panel
 // -------------------------
 
-$panel-bg: 		       $gray-7;
+$panel-bg: 		       $white;
 $panel-border-color: $gray-5;
 $panel-border:       solid 1px $panel-border-color;
 $panel-drop-zone-bg: repeating-linear-gradient(-128deg, $body-bg, $body-bg 10px, $gray-6 10px, $gray-6 20px);
@@ -105,9 +105,9 @@ $panel-header-hover-bg:       $gray-6;
 $panel-header-menu-hover-bg:  $gray-4;
 
 // Page header
-$page-header-bg: linear-gradient(90deg, #292a2d, black);
-$page-header-shadow: inset 0px -4px 14px $dark-2;
-$page-header-border-color: $dark-4;
+$page-header-bg: linear-gradient(90deg, $white, $gray-7);
+$page-header-shadow: inset 0px -3px 10px $gray-6;
+$page-header-border-color: $gray-4;
 
 $divider-border-color:	      $gray-2;
 
@@ -122,12 +122,12 @@ $code-tag-bg:       $gray-6;
 $code-tag-border:   darken($code-tag-bg, 3%);
 
 // cards
-$card-background: linear-gradient(135deg, $gray-5, $gray-6);
-$card-background-hover: linear-gradient(135deg, $gray-6, $gray-7);
+$card-background: linear-gradient(135deg, $gray-6, $gray-5);
+$card-background-hover: linear-gradient(135deg, $gray-5, $gray-6);
 $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1);
 
 // Lists
-$list-item-bg:         $card-background;
+$list-item-bg:         linear-gradient(135deg, $gray-5, $gray-6);//$card-background;
 $list-item-hover-bg:   darken($gray-5, 5%);
 $list-item-link-color: $text-color;
 $list-item-shadow:     $card-shadow;
@@ -140,6 +140,8 @@ $table-bg-hover:             $gray-5; // for hover
 $table-bg-active:            $table-bg-hover !default;
 $table-border:               $gray-3; // table and cell border
 
+$table-bg-odd:               $gray-5;
+
 // Scrollbars
 $scrollbarBackground:   $gray-5;
 $scrollbarBackground2:  $gray-5;
@@ -162,9 +164,10 @@ $btn-warning-bg-hl:     darken($orange, 3%);
 $btn-danger-bg:         lighten($red, 3%);
 $btn-danger-bg-hl:      darken($red, 3%);
 
-$btn-inverse-bg:          $gray-5;
-$btn-inverse-bg-hl:       darken($gray-5, 5%);
-$btn-inverse-text-color:  $dark-4;
+$btn-inverse-bg:          $gray-6;
+$btn-inverse-bg-hl:       darken($gray-6, 5%);
+$btn-inverse-text-color:  $gray-1;
+$btn-inverse-text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
 
 $btn-link-color: $gray-1;
 
@@ -176,7 +179,7 @@ $iconContainerBackground: $white;
 
 // Forms
 // -------------------------
-$input-bg:                       $gray-7;
+$input-bg:                       $white;
 $input-bg-disabled:              $gray-5;
 
 $input-color:                    $dark-3;
@@ -185,33 +188,38 @@ $input-box-shadow:               none;
 $input-border-focus:             $blue !default;
 $input-box-shadow-focus:         $blue !default;
 $input-color-placeholder:        $gray-4 !default;
-$input-label-bg:	        	 #eaebee;
-$input-label-border-color:       #e3e4e7;
+$input-label-bg:	        	     $gray-5;
+$input-label-border-color:       $gray-5;
 $input-invalid-border-color:     lighten($red, 5%);
 
 // Sidemenu
 // -------------------------
-$side-menu-bg:            $body-bg;
-$side-menu-item-hover-bg: $gray-6;
-$side-menu-shadow:        0 0 5px #c2c2c2;
+$side-menu-bg:            $dark-2;
+$side-menu-item-hover-bg: $gray-1;
+$side-menu-shadow:        5px 0px 10px -5px $gray-1;
+$side-menu-link-color:    $gray-6;
 
 // Menu dropdowns
 // -------------------------
-$menu-dropdown-bg:            $white;
+$menu-dropdown-bg:            $gray-7;
 $menu-dropdown-hover-bg:      $gray-6;
 $menu-dropdown-border-color:  $gray-4;
-$menu-dropdown-shadow:        5px 5px 20px -5px $gray-4;
+$menu-dropdown-shadow:        5px 5px 10px -5px $gray-1;
 
 // Breadcrumb
 // -------------------------
-$page-nav-bg:               #eaebee;
+$page-nav-bg:               $gray-5;
 $page-nav-shadow:           5px 5px 20px -5px $gray-4;
 $page-nav-breadcrumb-color: $black;
 $breadcrumb-hover-hl:       #d9dadd;
 
+// Tabs
+// -------------------------
+$tab-border-color:          $gray-5;
+
 // search
 $search-shadow: 0 5px 30px 0 $gray-4;
-$search-filter-box-bg: $gray-4;
+$search-filter-box-bg: $gray-7;
 
 // Dropdowns
 // -------------------------
@@ -257,8 +265,8 @@ $wellBackground:                  $gray-3;
 // -------------------------
 
 $navbarHeight:                    52px;
-$navbarBackgroundHighlight:       #f8f8f8;
-$navbarBackground:                #f2f3f7;
+$navbarBackgroundHighlight:       $white;
+$navbarBackground:                $white;
 $navbarBorder:                    1px solid $gray-4;
 $navbarShadow:                    0 0 3px #c1c1c1;
 
@@ -275,6 +283,8 @@ $navbarBrandColor:                $navbarLinkColor;
 $navbarButtonBackground:          lighten($navbarBackground, 3%);
 $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%);
 
+$navbar-button-border:            $gray-4;
+
 
 // Pagination
 // -------------------------
@@ -318,7 +328,8 @@ $graph-tooltip-bg:        $gray-5;
 $checkboxImageUrl: '../img/checkbox_white.png';
 
 // info box
-$info-box-background: linear-gradient(135deg, #f1fbff, #d7ebff);
+// $info-box-background: linear-gradient(135deg, #f1fbff, #d7ebff);
+$info-box-background: linear-gradient(135deg, $blue, $blue-dark);
 
 // footer
 $footer-link-color:   $gray-3;

public/sass/_variables.scss

@@ -75,7 +75,7 @@ $container-max-widths: (
 $grid-columns:      12 !default;
 $grid-gutter-width: 30px !default;
 
-$enable-flex: false;
+$enable-flex: true;
 
 // Typography
 // -------------------------
@@ -224,7 +224,7 @@ $btn-padding-y-lg:               11px !default;
 $btn-padding-x-xl:               21px !default;
 $btn-padding-y-xl:               11px !default;
 
-$btn-border-radius:              3px;
+$btn-border-radius:              2px;
 
 // sidemenu
 $side-menu-width:  60px;

public/sass/components/_buttons.scss

@@ -106,7 +106,7 @@
 }
 // Inverse appears as dark gray
 .btn-inverse {
-  @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color);
+  @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color, $btn-inverse-text-shadow);
   //background: $card-background;
   box-shadow: $card-shadow;
   //border: 1px solid $tight-form-func-highlight-bg;

public/sass/components/_filter-table.scss

@@ -17,7 +17,7 @@
 
   tbody {
     tr:nth-child(odd) {
-      background: $dark-2;
+      background: $table-bg-odd;
     }
   }
 
@@ -34,7 +34,6 @@
     padding: $table-cell-padding;
     line-height: 30px;
     height: 30px;
-    border-bottom: 1px solid black;
     white-space: nowrap;
 
     &.filter-table__switch-cell {

public/sass/components/_navbar.scss

@@ -74,15 +74,15 @@
 }
 
 .navbar-button {
-  @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color);
+  @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color, $btn-inverse-text-shadow);
 
   display: inline-block;
   font-weight: $btn-font-weight;
   padding: 8px 11px;
   line-height: 16px;
   color: $text-muted;
-  border: 1px solid #151515;
-  margin-right: 1px;
+  border: 1px solid $navbar-button-border;
+  margin-right: 3px;
   white-space: nowrap;
 
   .gicon {

public/sass/components/_sidemenu.scss

@@ -110,7 +110,7 @@
   display: inline-block;
 
   .fa, .icon-gf, .gicon {
-    color: $link-color;
+    color: $side-menu-link-color;
     position: relative;
     opacity: .7;
     font-size: 130%;
@@ -135,6 +135,7 @@
   white-space: nowrap;
   background-color: $side-menu-item-hover-bg;
   font-size: 17px;
+  color: #ebedf2;
 }
 
 li.sidemenu-org-switcher {

public/sass/components/_tabs.scss

@@ -31,7 +31,7 @@
   &.active,
   &.active:hover,
   &.active:focus {
-    border-color: $orange $dark-4 transparent;
+    border-color: $orange $tab-border-color transparent;
     background: $page-bg;
     color: $link-color;
   }

public/sass/layout/_page.scss

@@ -15,8 +15,12 @@
 }
 
 .page-container {
-  @extend .container;
-  padding: 0 $spacer * 2;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left:  $spacer*2;
+  padding-right: $spacer*2;
+  max-width: 980px;
+  @include clearfix();
 }
 
 .scroll-canvas {