From 8eee4d8e6b755a33d1d307e2e04bc0d51af103d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 1 Nov 2016 16:06:49 +0100 Subject: [PATCH] fix(dashboard): fixed white theme for new dashboard row look / dash edit mode, #6442 --- public/sass/_variables.dark.scss | 5 +++++ public/sass/_variables.light.scss | 13 +++++++------ public/sass/components/_row.scss | 32 +++++++++++++++---------------- public/sass/pages/_dashboard.scss | 10 +++++----- 4 files changed, 32 insertions(+), 28 deletions(-) diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index 50ab3e53620..5350c3b5681 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -90,6 +90,8 @@ $component-active-bg: $brand-primary !default; // ------------------------- $panel-bg: $dark-2; $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; @@ -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-link-color: $gray-1; $footer-link-hover: $gray-4; + +// Dashboard row +$dash-row-border-color: $dark-4 diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index 11afe3ba88e..73602ff076a 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -95,8 +95,10 @@ $component-active-bg: $brand-primary !default; // 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; @@ -297,10 +299,9 @@ $card-background: linear-gradient(135deg, $gray-5, $gray-6); $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); -// 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-link-color: $gray-3; $footer-link-hover: $dark-5; + +// Dashboard row +$dash-row-border-color: $gray-4 diff --git a/public/sass/components/_row.scss b/public/sass/components/_row.scss index ea4858cc0e4..9c4af6cdb97 100644 --- a/public/sass/components/_row.scss +++ b/public/sass/components/_row.scss @@ -58,7 +58,7 @@ a.active { color: $link-color; background: $panel-bg; - border: $panel-border; + border: 1px solid $dash-row-border-color; border-bottom: none; position: relative; top: 1px; @@ -93,13 +93,13 @@ a.dash-row-header-actions--tight { .dash-edit-mode { .dash-row-header { 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; } .dash-row-header::after { content: ' '; - border-top: 1px solid $dark-4; + border-top: 1px solid $dash-row-border-color; width: 15px; position: relative; } @@ -107,23 +107,23 @@ a.dash-row-header-actions--tight { margin-bottom: $spacer; } .dash-row-header-title { - border-left: 1px solid $dark-4; + border-left: 1px solid $dash-row-border-color; } .dash-row-header-title::before { content: ' '; - border-top: 1px solid $dark-4; + border-top: 1px solid $dash-row-border-color; width: 15px; position: absolute; margin: -9px 0 0 -9px; } .panels-wrapper { 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 { content: ' '; - border-bottom: 1px solid $dark-4; + border-bottom: 1px solid $dash-row-border-color; width: 15px; position: absolute; margin: 0 0 0 -6px; @@ -152,22 +152,20 @@ a.dash-row-header-actions--tight { .dash-row-options { 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; padding: $panel-margin*2; - box-shadow: 0px 3px 7px -3px $black; } .dash-row-add-panel { 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; padding: $panel-margin*2; - box-shadow: 0px 3px 7px -3px $black; display: flex; } diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index 0dbe30912ce..d02a3101ce6 100644 --- a/public/sass/pages/_dashboard.scss +++ b/public/sass/pages/_dashboard.scss @@ -124,11 +124,11 @@ div.flot-text { z-index: 500; position: absolute; background: $tight-form-func-bg; - border: 1px solid black; + border: $panel-menu-border; .panel-menu-row { white-space: nowrap; - border-bottom: 1px solid black; + border-bottom: $panel-menu-border; &:last-child { border-bottom: none; } @@ -140,7 +140,7 @@ div.flot-text { .panel-menu-link { display: inline-block; - border-right: 1px solid black; + border-right: $panel-menu-border; &:last-child { border: none; } @@ -164,14 +164,14 @@ div.flot-text { .panel-drop-zone { display: none; .panel-container { - border: 1px solid $dark-3; + border: $panel-border; display: flex; justify-content: center; flex-direction: column; text-align: center; color: $text-color-faint; font-weight: bold; - background: repeating-linear-gradient(-128deg, #111, #111 10px, #191919 10px, #222 20px); + background: $panel-drop-zone-bg; } }