Browse Source

fix(dashboard): fixed white theme for new dashboard row look / dash edit mode, #6442

Torkel Ödegaard 9 years ago
parent
commit
8eee4d8e6b

+ 5 - 0
public/sass/_variables.dark.scss

@@ -90,6 +90,8 @@ $component-active-bg:    $brand-primary !default;
 // -------------------------
 // -------------------------
 $panel-bg: 				      $dark-2;
 $panel-bg: 				      $dark-2;
 $panel-border:  	      solid 1px $dark-3;
 $panel-border:  	      solid 1px $dark-3;
+$panel-drop-zone-bg:    repeating-linear-gradient(-128deg, #111, #111 10px, #191919 10px, #222 20px);
+$panel-menu-border:     solid 1px black;
 
 
 $divider-border-color:        #555;
 $divider-border-color:        #555;
 
 
@@ -280,3 +282,6 @@ $dash-row-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0,
 // footer
 // footer
 $footer-link-color:   $gray-1;
 $footer-link-color:   $gray-1;
 $footer-link-hover:   $gray-4;
 $footer-link-hover:   $gray-4;
+
+// Dashboard row
+$dash-row-border-color: $dark-4

+ 7 - 6
public/sass/_variables.light.scss

@@ -95,8 +95,10 @@ $component-active-bg:    $brand-primary !default;
 // Panel
 // Panel
 // -------------------------
 // -------------------------
 
 
-$panel-bg: 		  $gray-7;
-$panel-border:  solid 1px $gray-6;
+$panel-bg: 		       $gray-7;
+$panel-border:       solid 1px $gray-6;
+$panel-drop-zone-bg: repeating-linear-gradient(-128deg, $body-bg, $body-bg 10px, $gray-6 10px, $gray-6 20px);
+$panel-menu-border:  solid 1px white;
 
 
 $divider-border-color:	      $gray-2;
 $divider-border-color:	      $gray-2;
 
 
@@ -297,10 +299,9 @@ $card-background: linear-gradient(135deg, $gray-5, $gray-6);
 $card-background-hover: linear-gradient(135deg, $gray-6, $gray-7);
 $card-background-hover: linear-gradient(135deg, $gray-6, $gray-7);
 $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1);
 $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1);
 
 
-// dash row
-$dash-row-background: linear-gradient(135deg, $gray-5, $gray-6);
-$dash-row-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1);
-
 // footer
 // footer
 $footer-link-color:   $gray-3;
 $footer-link-color:   $gray-3;
 $footer-link-hover:   $dark-5;
 $footer-link-hover:   $dark-5;
+
+// Dashboard row
+$dash-row-border-color: $gray-4

+ 15 - 17
public/sass/components/_row.scss

@@ -58,7 +58,7 @@
   a.active {
   a.active {
     color: $link-color;
     color: $link-color;
     background: $panel-bg;
     background: $panel-bg;
-    border: $panel-border;
+    border: 1px solid $dash-row-border-color;
     border-bottom: none;
     border-bottom: none;
     position: relative;
     position: relative;
     top: 1px;
     top: 1px;
@@ -93,13 +93,13 @@ a.dash-row-header-actions--tight {
 .dash-edit-mode {
 .dash-edit-mode {
   .dash-row-header {
   .dash-row-header {
     display: flex;
     display: flex;
-    border-bottom: 1px solid $dark-4;
-    border-right: 1px solid $dark-4;
+    border-bottom: 1px solid $dash-row-border-color;
+    border-right: 1px solid $dash-row-border-color;
     margin-right: 0;
     margin-right: 0;
   }
   }
   .dash-row-header::after {
   .dash-row-header::after {
     content: ' ';
     content: ' ';
-    border-top: 1px solid $dark-4;
+    border-top: 1px solid $dash-row-border-color;
     width: 15px;
     width: 15px;
     position: relative;
     position: relative;
   }
   }
@@ -107,23 +107,23 @@ a.dash-row-header-actions--tight {
     margin-bottom: $spacer;
     margin-bottom: $spacer;
   }
   }
   .dash-row-header-title {
   .dash-row-header-title {
-    border-left: 1px solid $dark-4;
+    border-left: 1px solid $dash-row-border-color;
   }
   }
   .dash-row-header-title::before {
   .dash-row-header-title::before {
     content: ' ';
     content: ' ';
-    border-top: 1px solid $dark-4;
+    border-top: 1px solid $dash-row-border-color;
     width: 15px;
     width: 15px;
     position: absolute;
     position: absolute;
     margin: -9px 0 0 -9px;
     margin: -9px 0 0 -9px;
   }
   }
   .panels-wrapper {
   .panels-wrapper {
     padding: $panel-margin*2 $panel-margin 0 $panel-margin;
     padding: $panel-margin*2 $panel-margin 0 $panel-margin;
-    border-left: 1px solid $dark-4;
-    border-right: 1px solid $dark-4;
+    border-left: 1px solid $dash-row-border-color;
+    border-right: 1px solid $dash-row-border-color;
   }
   }
   .panels-wrapper::after {
   .panels-wrapper::after {
     content: ' ';
     content: ' ';
-    border-bottom: 1px solid $dark-4;
+    border-bottom: 1px solid $dash-row-border-color;
     width: 15px;
     width: 15px;
     position: absolute;
     position: absolute;
     margin: 0 0 0 -6px;
     margin: 0 0 0 -6px;
@@ -152,22 +152,20 @@ a.dash-row-header-actions--tight {
 
 
 .dash-row-options {
 .dash-row-options {
   background:  $panel-bg;
   background:  $panel-bg;
-  border-left: $panel-border;
-  border-bottom: $panel-border;
-  border-right: $panel-border;
+  border-left: 1px solid $dash-row-border-color;
+  border-bottom: 1px solid $dash-row-border-color;
+  border-right: 1px solid $dash-row-border-color;
   margin: 0 0 $panel-margin*2 0;
   margin: 0 0 $panel-margin*2 0;
   padding: $panel-margin*2;
   padding: $panel-margin*2;
-  box-shadow: 0px 3px 7px -3px $black;
 }
 }
 
 
 .dash-row-add-panel {
 .dash-row-add-panel {
   background:  $panel-bg;
   background:  $panel-bg;
-  border-left: $panel-border;
-  border-bottom: $panel-border;
-  border-right: $panel-border;
+  border-left: 1px solid $dash-row-border-color;
+  border-bottom: 1px solid $dash-row-border-color;
+  border-right: 1px solid $dash-row-border-color;
   margin: 0 0 $panel-margin*2 0;
   margin: 0 0 $panel-margin*2 0;
   padding: $panel-margin*2;
   padding: $panel-margin*2;
-  box-shadow: 0px 3px 7px -3px $black;
   display: flex;
   display: flex;
 }
 }
 
 

+ 5 - 5
public/sass/pages/_dashboard.scss

@@ -124,11 +124,11 @@ div.flot-text {
   z-index: 500;
   z-index: 500;
   position: absolute;
   position: absolute;
   background: $tight-form-func-bg;
   background: $tight-form-func-bg;
-  border: 1px solid black;
+  border: $panel-menu-border;
 
 
   .panel-menu-row {
   .panel-menu-row {
     white-space: nowrap;
     white-space: nowrap;
-    border-bottom: 1px solid black;
+    border-bottom: $panel-menu-border;
     &:last-child {
     &:last-child {
       border-bottom: none;
       border-bottom: none;
     }
     }
@@ -140,7 +140,7 @@ div.flot-text {
 
 
   .panel-menu-link {
   .panel-menu-link {
     display: inline-block;
     display: inline-block;
-    border-right: 1px solid black;
+    border-right: $panel-menu-border;
     &:last-child {
     &:last-child {
       border: none;
       border: none;
     }
     }
@@ -164,14 +164,14 @@ div.flot-text {
 .panel-drop-zone {
 .panel-drop-zone {
   display: none;
   display: none;
   .panel-container {
   .panel-container {
-    border: 1px solid $dark-3;
+    border: $panel-border;
     display: flex;
     display: flex;
     justify-content: center;
     justify-content: center;
     flex-direction: column;
     flex-direction: column;
     text-align: center;
     text-align: center;
     color: $text-color-faint;
     color: $text-color-faint;
     font-weight: bold;
     font-weight: bold;
-    background: repeating-linear-gradient(-128deg, #111, #111 10px, #191919 10px, #222 20px);
+    background: $panel-drop-zone-bg;
   }
   }
 }
 }