Commit 8eee4d8e by Torkel Ödegaard

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

parent f3090d8c
......@@ -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
......@@ -97,6 +97,8 @@ $component-active-bg: $brand-primary !default;
$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
......@@ -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;
}
......
......@@ -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;
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment