From 9725606acfa0fa3f3e2a34b0078884a236ef5692 Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Wed, 13 Nov 2019 11:26:24 -0800 Subject: [PATCH 01/28] Sweep #1 --- superset/assets/src/SqlLab/main.less | 4 ++-- .../assets/src/dashboard/stylesheets/builder-sidepane.less | 4 ++-- superset/assets/src/dashboard/stylesheets/builder.less | 6 +++--- .../assets/src/dashboard/stylesheets/components/chart.less | 2 +- .../src/dashboard/stylesheets/components/new-component.less | 4 ++-- .../assets/src/dashboard/stylesheets/components/tabs.less | 4 ++-- superset/assets/src/dashboard/stylesheets/dashboard.less | 2 +- superset/assets/src/dashboard/stylesheets/dnd.less | 2 +- .../src/dashboard/stylesheets/filter-indicator-tooltip.less | 4 ++-- superset/assets/src/dashboard/stylesheets/hover-menu.less | 4 ++-- superset/assets/src/dashboard/stylesheets/popover-menu.less | 4 ++-- superset/assets/src/dashboard/stylesheets/variables.less | 1 + superset/assets/src/messageToasts/stylesheets/toast.less | 2 +- 13 files changed, 22 insertions(+), 21 deletions(-) diff --git a/superset/assets/src/SqlLab/main.less b/superset/assets/src/SqlLab/main.less index 88b6841a61c5f..3ca66a1194673 100644 --- a/superset/assets/src/SqlLab/main.less +++ b/superset/assets/src/SqlLab/main.less @@ -48,7 +48,7 @@ body { .tab-content { height: 100%; position: relative; - background-color: #fff; + background-color: @lightest; > .tab-pane { position: absolute; @@ -383,7 +383,7 @@ a.Link { background: transparent; border: none; text-align: left; - color: white; + color: @lightest; font-size: 10px; } .tooltip-inner { diff --git a/superset/assets/src/dashboard/stylesheets/builder-sidepane.less b/superset/assets/src/dashboard/stylesheets/builder-sidepane.less index 6bf6f6fafdba7..3a061461f3e1e 100644 --- a/superset/assets/src/dashboard/stylesheets/builder-sidepane.less +++ b/superset/assets/src/dashboard/stylesheets/builder-sidepane.less @@ -55,7 +55,7 @@ .slider-container { position: absolute; - background: white; + background: @lightest; width: @builder-pane-width * 2; height: 100vh; display: flex; @@ -132,7 +132,7 @@ .is-added-label { background: @almost-black; - color: white; + color: @lightest; font-size: 12px; line-height: 1em; text-transform: uppercase; diff --git a/superset/assets/src/dashboard/stylesheets/builder.less b/superset/assets/src/dashboard/stylesheets/builder.less index a4347df3666cb..223eb2e750bb9 100644 --- a/superset/assets/src/dashboard/stylesheets/builder.less +++ b/superset/assets/src/dashboard/stylesheets/builder.less @@ -22,7 +22,7 @@ } .dashboard-header { - background: white; + background: @lightest; display: flex; flex-direction: row; align-items: center; @@ -61,7 +61,7 @@ } .dropdown-toggle.btn.btn-primary .caret { - color: white; + color: @lightest; } .background--transparent { @@ -69,5 +69,5 @@ } .background--white { - background-color: white; + background-color: @lightest; } diff --git a/superset/assets/src/dashboard/stylesheets/components/chart.less b/superset/assets/src/dashboard/stylesheets/components/chart.less index f4df7819db49a..2a1b1a032804a 100644 --- a/superset/assets/src/dashboard/stylesheets/components/chart.less +++ b/superset/assets/src/dashboard/stylesheets/components/chart.less @@ -20,7 +20,7 @@ width: 100%; height: 100%; color: @gray-dark; - background-color: white; + background-color: @lightest; position: relative; padding: 16px; diff --git a/superset/assets/src/dashboard/stylesheets/components/new-component.less b/superset/assets/src/dashboard/stylesheets/components/new-component.less index 0695b9099aba7..bd33746a95469 100644 --- a/superset/assets/src/dashboard/stylesheets/components/new-component.less +++ b/superset/assets/src/dashboard/stylesheets/components/new-component.less @@ -22,7 +22,7 @@ flex-wrap: nowrap; align-items: center; padding: 16px; - background: white; + background: @lightest; cursor: move; } @@ -36,7 +36,7 @@ width: 40px; height: 40px; margin-right: 16px; - border: 1px solid white; + border: 1px solid @lightest; display: flex; align-items: center; justify-content: center; diff --git a/superset/assets/src/dashboard/stylesheets/components/tabs.less b/superset/assets/src/dashboard/stylesheets/components/tabs.less index 4db076d61394c..f2a8029f52117 100644 --- a/superset/assets/src/dashboard/stylesheets/components/tabs.less +++ b/superset/assets/src/dashboard/stylesheets/components/tabs.less @@ -18,7 +18,7 @@ */ .dashboard-component-tabs { width: 100%; - background-color: white; + background-color: @lightest; & .nav-tabs { border-bottom: none; @@ -43,7 +43,7 @@ & > a:focus { outline: none; - background: #fff; + background: @lightest; } & .dragdroppable-tab { diff --git a/superset/assets/src/dashboard/stylesheets/dashboard.less b/superset/assets/src/dashboard/stylesheets/dashboard.less index c37d5e593761a..5afc12098ab96 100644 --- a/superset/assets/src/dashboard/stylesheets/dashboard.less +++ b/superset/assets/src/dashboard/stylesheets/dashboard.less @@ -102,7 +102,7 @@ body { z-index: 10; &.btn.btn-primary { - border-left-color: white; + border-left-color: @lightest; } & + .dropdown-menu.dropdown-menu-right { diff --git a/superset/assets/src/dashboard/stylesheets/dnd.less b/superset/assets/src/dashboard/stylesheets/dnd.less index 9c86abcaff30b..f234fda688950 100644 --- a/superset/assets/src/dashboard/stylesheets/dnd.less +++ b/superset/assets/src/dashboard/stylesheets/dnd.less @@ -88,7 +88,7 @@ .drag-handle-dot:after { content: ''; - background: #aaa; + background: @gray; float: left; height: 2px; margin: -1px; diff --git a/superset/assets/src/dashboard/stylesheets/filter-indicator-tooltip.less b/superset/assets/src/dashboard/stylesheets/filter-indicator-tooltip.less index b5932415f958f..bc8473ecda1a7 100644 --- a/superset/assets/src/dashboard/stylesheets/filter-indicator-tooltip.less +++ b/superset/assets/src/dashboard/stylesheets/filter-indicator-tooltip.less @@ -22,7 +22,7 @@ > .tooltip-arrow { margin-right: 8px; - border-left-color: #484848; + border-left-color: @gray-dark; } > .tooltip-inner { @@ -31,7 +31,7 @@ border-radius: 4px; margin-right: 8px; padding: 16px 12px; - background-color: #484848; + background-color: @gray-dark; text-align: left; } } diff --git a/superset/assets/src/dashboard/stylesheets/hover-menu.less b/superset/assets/src/dashboard/stylesheets/hover-menu.less index 87e8592718201..729bf1efa019c 100644 --- a/superset/assets/src/dashboard/stylesheets/hover-menu.less +++ b/superset/assets/src/dashboard/stylesheets/hover-menu.less @@ -56,7 +56,7 @@ /* A row within a column has inset hover menu */ .dragdroppable-column .dragdroppable-row .hover-menu--left { left: -12px; - background: white; + background: @lightest; border: 1px solid @gray-light; } @@ -64,7 +64,7 @@ .dragdroppable-column .dragdroppable-column .hover-menu--top, .dashboard-component-tabs .dragdroppable-column .hover-menu--top { top: -12px; - background: white; + background: @lightest; border: 1px solid @gray-light; } diff --git a/superset/assets/src/dashboard/stylesheets/popover-menu.less b/superset/assets/src/dashboard/stylesheets/popover-menu.less index ab403acc72c5d..7615a7d729320 100644 --- a/superset/assets/src/dashboard/stylesheets/popover-menu.less +++ b/superset/assets/src/dashboard/stylesheets/popover-menu.less @@ -49,7 +49,7 @@ top: -42px; height: 40px; padding: 0 16px; - background: white; + background: @lightest; box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2); font-size: 14px; cursor: default; @@ -139,7 +139,7 @@ } .background-style-option.background--white:before { - background: white; + background: @lightest; border: 1px solid @gray-light; } diff --git a/superset/assets/src/dashboard/stylesheets/variables.less b/superset/assets/src/dashboard/stylesheets/variables.less index 16a0476e151ee..f1b0be6fdc4c2 100644 --- a/superset/assets/src/dashboard/stylesheets/variables.less +++ b/superset/assets/src/dashboard/stylesheets/variables.less @@ -25,6 +25,7 @@ @gray-bg: #f5f5f5; @gray-heading: #A3A3A3; @menu-hover: #F2F3F5; +@lightest: #ffffff; /* builder component pane */ @builder-pane-width: 374px; diff --git a/superset/assets/src/messageToasts/stylesheets/toast.less b/superset/assets/src/messageToasts/stylesheets/toast.less index bd1e80dacf9ae..9a1c22030d14b 100644 --- a/superset/assets/src/messageToasts/stylesheets/toast.less +++ b/superset/assets/src/messageToasts/stylesheets/toast.less @@ -28,7 +28,7 @@ } .toast { - background: white; + background: @lightest; color: @almost-black; opacity: 0; position: relative; From bb2fd7fdeb5cc965f0d44528f34fa712028edc13 Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Wed, 13 Nov 2019 14:23:21 -0800 Subject: [PATCH 02/28] moving a few more colors, fixing an import issue. --- superset/assets/src/SqlLab/main.less | 13 +++++++------ .../assets/src/dashboard/stylesheets/variables.less | 4 ++++ .../assets/stylesheets/react-select/select.less | 2 +- 3 files changed, 12 insertions(+), 7 deletions(-) diff --git a/superset/assets/src/SqlLab/main.less b/superset/assets/src/SqlLab/main.less index 3ca66a1194673..d208fc335b034 100644 --- a/superset/assets/src/SqlLab/main.less +++ b/superset/assets/src/SqlLab/main.less @@ -17,6 +17,7 @@ * under the License. */ @import "../../stylesheets/less/cosmo/variables.less"; +@import "../dashboard/stylesheets/variables.less"; body { overflow: hidden; @@ -60,7 +61,7 @@ body { } .Workspace .btn-sm { - box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); + box-shadow: 1px 1px 2px fade(@darkest, 10%); margin-top: 2px; padding: 4px; } @@ -140,7 +141,7 @@ div.Workspace { width: 10px; height: 10px; display: inline-block; - background-color: #ccc; + background-color: @gray-light; line-height: 8px; text-align: center; vertical-align: middle; @@ -150,13 +151,13 @@ div.Workspace { } .running { background-color: lime; - color: black; + color: @darkest; } .success { - background-color: #4AC15F; + background-color: @success; } .failed { - background-color: red; + background-color: @error; } .handle { @@ -169,7 +170,7 @@ div.Workspace { opacity: 0.85; border: 1px solid #AAA; max-height: 600px; - box-shadow: rgba(0, 0, 0, 0.8) 5px 5px 25px + box-shadow: fade(@darkest, 80%) 5px 5px 25px } .SqlLab pre { padding: 0px !important; diff --git a/superset/assets/src/dashboard/stylesheets/variables.less b/superset/assets/src/dashboard/stylesheets/variables.less index f1b0be6fdc4c2..5e9daceb33b9f 100644 --- a/superset/assets/src/dashboard/stylesheets/variables.less +++ b/superset/assets/src/dashboard/stylesheets/variables.less @@ -26,6 +26,7 @@ @gray-heading: #A3A3A3; @menu-hover: #F2F3F5; @lightest: #ffffff; +@darkest: #000000; /* builder component pane */ @builder-pane-width: 374px; @@ -34,8 +35,11 @@ @pink: #E32364; @purple: #2C2261; +/* status colors */ @success: #00BFA5; @warning: #FFAB00; +@error: #FF0000; + @danger: @pink; /* filter indicators */ diff --git a/superset/assets/stylesheets/react-select/select.less b/superset/assets/stylesheets/react-select/select.less index 4c947969dda77..7943f1240f36c 100644 --- a/superset/assets/stylesheets/react-select/select.less +++ b/superset/assets/stylesheets/react-select/select.less @@ -55,7 +55,7 @@ padding: 0 .5rem; } .VirtualizedSelectFocusedOption { - background-color: rgba(0, 0, 0, 0.1); + background-color: fade(@darkest, 10%); } .VirtualizedSelectFocusedOption:hover { cursor: pointer; From 3d86c81d08496772887cf098fee4ae5329300811 Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Wed, 13 Nov 2019 15:42:03 -0800 Subject: [PATCH 03/28] another include, another color nabbed. --- superset/assets/stylesheets/react-select/select.less | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/superset/assets/stylesheets/react-select/select.less b/superset/assets/stylesheets/react-select/select.less index 7943f1240f36c..d59dafa5952a6 100644 --- a/superset/assets/stylesheets/react-select/select.less +++ b/superset/assets/stylesheets/react-select/select.less @@ -16,8 +16,11 @@ * specific language governing permissions and limitations * under the License. */ + +@import "../../src/dashboard/stylesheets/variables.less"; + @import "~react-select/less/select.less"; -@select-primary-color: black; +@select-primary-color: @darkest; @select-input-height: 30px; // imports From 6b7ed5d49fe223ee6a7c2e4cf3e8cc756446f4b0 Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Wed, 13 Nov 2019 16:34:27 -0800 Subject: [PATCH 04/28] more whittling. --- superset/assets/src/SqlLab/main.less | 2 +- .../assets/src/dashboard/stylesheets/builder-sidepane.less | 4 ++-- superset/assets/src/dashboard/stylesheets/builder.less | 4 ++-- .../assets/src/dashboard/stylesheets/filter-indicator.less | 6 +++--- superset/assets/src/dashboard/stylesheets/popover-menu.less | 2 +- superset/assets/src/messageToasts/stylesheets/toast.less | 2 +- superset/assets/stylesheets/superset.less | 4 +++- 7 files changed, 13 insertions(+), 11 deletions(-) diff --git a/superset/assets/src/SqlLab/main.less b/superset/assets/src/SqlLab/main.less index d208fc335b034..ea81067a88a30 100644 --- a/superset/assets/src/SqlLab/main.less +++ b/superset/assets/src/SqlLab/main.less @@ -150,7 +150,7 @@ div.Workspace { font-weight: bold; } .running { - background-color: lime; + background-color: fade(@success, 80%); color: @darkest; } .success { diff --git a/superset/assets/src/dashboard/stylesheets/builder-sidepane.less b/superset/assets/src/dashboard/stylesheets/builder-sidepane.less index 3a061461f3e1e..caddad46df3e2 100644 --- a/superset/assets/src/dashboard/stylesheets/builder-sidepane.less +++ b/superset/assets/src/dashboard/stylesheets/builder-sidepane.less @@ -50,7 +50,7 @@ overflow: hidden; width: @builder-pane-width; height: 100%; - box-shadow: -4px 0 4px 0 rgba(0, 0, 0, 0.1); + box-shadow: -4px 0 4px 0 fade(@darkest, 10%); } .slider-container { @@ -97,7 +97,7 @@ margin: 0 16px 16px 16px; position: relative; cursor: move; - background: rgba(255, 255, 255, 0.4); + background: fade(@lightest, 40%); &:hover { background: @gray-bg; diff --git a/superset/assets/src/dashboard/stylesheets/builder.less b/superset/assets/src/dashboard/stylesheets/builder.less index 223eb2e750bb9..1baff0ab6492f 100644 --- a/superset/assets/src/dashboard/stylesheets/builder.less +++ b/superset/assets/src/dashboard/stylesheets/builder.less @@ -28,7 +28,7 @@ align-items: center; justify-content: space-between; padding: 0 24px; - box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1); /* @TODO color */ + box-shadow: 0 4px 4px 0 fade(@darkest, 10%); /* @TODO color */ } .dashboard-content { @@ -45,7 +45,7 @@ /* drop shadow for top-level tabs only */ .dashboard .dashboard-component-tabs { - box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 4px 0 fade(@darkest, 10%); padding-left: 8px; /* note this is added to tab-level padding, to match header */ } diff --git a/superset/assets/src/dashboard/stylesheets/filter-indicator.less b/superset/assets/src/dashboard/stylesheets/filter-indicator.less index 928529225080c..24721666d4bde 100644 --- a/superset/assets/src/dashboard/stylesheets/filter-indicator.less +++ b/superset/assets/src/dashboard/stylesheets/filter-indicator.less @@ -54,12 +54,12 @@ } .filter-indicator-group { - box-shadow: rgb(255, 255, 255) -2px 0 0 0, rgb(219, 219, 219) -4px 0 0 0; + box-shadow: @lightest -2px 0 0 0, @gray-light -4px 0 0 0; } } .show-outline .filter-indicator-group { - box-shadow: rgba(0, 166, 153, 1) -2px 0 0 0, rgb(255, 255, 255) -4px 0 0 0, rgb(219, 219, 219) -6px 0 0 0; + box-shadow: rgba(0, 166, 153, 1) -2px 0 0 0, @lightest -4px 0 0 0, @gray-light -6px 0 0 0; } .dashboard-component-chart-holder, @@ -82,7 +82,7 @@ } .filter-indicator-group { - box-shadow: rgb(255, 255, 255) -4px 0 0 0, rgb(219, 219, 219) -6px 0 0 0; + box-shadow: @lightest -4px 0 0 0, @gray-light -6px 0 0 0; } } diff --git a/superset/assets/src/dashboard/stylesheets/popover-menu.less b/superset/assets/src/dashboard/stylesheets/popover-menu.less index 7615a7d729320..3399984c0930c 100644 --- a/superset/assets/src/dashboard/stylesheets/popover-menu.less +++ b/superset/assets/src/dashboard/stylesheets/popover-menu.less @@ -50,7 +50,7 @@ height: 40px; padding: 0 16px; background: @lightest; - box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2); + box-shadow: 0 1px 2px 1px fade(@darkest, 20%); font-size: 14px; cursor: default; z-index: 1000; diff --git a/superset/assets/src/messageToasts/stylesheets/toast.less b/superset/assets/src/messageToasts/stylesheets/toast.less index 9a1c22030d14b..f0110da0b20f1 100644 --- a/superset/assets/src/messageToasts/stylesheets/toast.less +++ b/superset/assets/src/messageToasts/stylesheets/toast.less @@ -33,7 +33,7 @@ opacity: 0; position: relative; white-space: pre-line; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.35); + box-shadow: 0 2px 4px 0 fade(@darkest, 35%); will-change: transform, opacity; transform: translateY(-100%); transition: transform 0.3s, opacity 0.3s; diff --git a/superset/assets/stylesheets/superset.less b/superset/assets/stylesheets/superset.less index a8aa49a4ba08c..a360a48c6b830 100644 --- a/superset/assets/stylesheets/superset.less +++ b/superset/assets/stylesheets/superset.less @@ -18,6 +18,8 @@ */ @import './less/index.less'; @import "./less/cosmo/variables.less"; +@import './less/index.less'; +@import "../src/dashboard/stylesheets/variables.less"; @datasource-sql-expression-width: 450px; @@ -474,7 +476,7 @@ table.table-no-hover tr:hover { font-size: 10px; line-height: 2px; border-radius: 50%; - box-shadow: 2px 2px 4px -1px rgba(0, 0, 0, 1); + box-shadow: 2px 2px 4px -1px fade(@darkest, 10%); } iframe { From b9698b0c1fa1cd7938b59f56320e6262ce253499 Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Thu, 14 Nov 2019 12:22:13 -0800 Subject: [PATCH 05/28] moving filterbox css to less, standardizing colors in there. --- .../src/dashboard/stylesheets/variables.less | 2 +- .../visualizations/FilterBox/FilterBox.jsx | 2 +- .../visualizations/FilterBox/FilterBox.less | 73 +++++++++++++++++++ 3 files changed, 75 insertions(+), 2 deletions(-) create mode 100644 superset/assets/src/visualizations/FilterBox/FilterBox.less diff --git a/superset/assets/src/dashboard/stylesheets/variables.less b/superset/assets/src/dashboard/stylesheets/variables.less index 5e9daceb33b9f..edc0333cf2297 100644 --- a/superset/assets/src/dashboard/stylesheets/variables.less +++ b/superset/assets/src/dashboard/stylesheets/variables.less @@ -79,4 +79,4 @@ } .badge-loop(@i - 1); } -.badge-loop (@iterations); +.badge-loop(@iterations); diff --git a/superset/assets/src/visualizations/FilterBox/FilterBox.jsx b/superset/assets/src/visualizations/FilterBox/FilterBox.jsx index a2b9cc84336a3..4eccb48daf512 100644 --- a/superset/assets/src/visualizations/FilterBox/FilterBox.jsx +++ b/superset/assets/src/visualizations/FilterBox/FilterBox.jsx @@ -32,7 +32,7 @@ import VirtualizedRendererWrap from '../../components/VirtualizedRendererWrap'; import { getFilterColorKey, getFilterColorMap } from '../../dashboard/util/dashboardFiltersColorMap'; import FilterBadgeIcon from '../../components/FilterBadgeIcon'; -import './FilterBox.css'; +import './FilterBox.less'; // maps control names to their key in extra_filters const TIME_FILTER_MAP = { diff --git a/superset/assets/src/visualizations/FilterBox/FilterBox.less b/superset/assets/src/visualizations/FilterBox/FilterBox.less new file mode 100644 index 0000000000000..862892fccecb1 --- /dev/null +++ b/superset/assets/src/visualizations/FilterBox/FilterBox.less @@ -0,0 +1,73 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + @import '../../dashboard/stylesheets/variables.less'; + +.select2-highlighted > .filter_box { + background-color: transparent; + border: 1px superset @darkest; +} + +.dashboard .filter_box .slice_container > div:not(.alert) { + padding-top: 0; +} + +.input-inline { + float: left; + // display: inline-block; //Ignored when float is applied. Leaving it here in case we lose the floats later. + padding-right: 3px; +} + +ul.select2-results li.select2-highlighted div.filter_box{ + color: @darkest; + border-width: 1px; + border-style: solid; + border-color: @gray; +} + +ul.select2-results div.filter_box{ + color: @darkest; + border-style: solid; + border-width: 1px; + border-color: transparent; +} +.filter_box { + padding: 10px 0; + overflow: visible !important; +} +.filter_box:hover { + z-index: 1000; +} +.m-b-5 { + margin-bottom: 5px; +} +.filter-container { + display: flex; +} +.filter-container label { + display: flex; + font-weight: bold; + margin-bottom: 8px; +} +.filter-container .filter-badge-container { + width: 30px; + padding-right: 10px; +} +.filter-container .filter-badge-container + div { + width: 100%; +} From 2ad6e64bc989aad0f3ecac673aaec497256a03bf Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Thu, 14 Nov 2019 12:24:31 -0800 Subject: [PATCH 06/28] nixing the css file I meant to nab in the last commit --- .../visualizations/FilterBox/FilterBox.css | 71 ------------------- 1 file changed, 71 deletions(-) delete mode 100644 superset/assets/src/visualizations/FilterBox/FilterBox.css diff --git a/superset/assets/src/visualizations/FilterBox/FilterBox.css b/superset/assets/src/visualizations/FilterBox/FilterBox.css deleted file mode 100644 index f546c9c463dc8..0000000000000 --- a/superset/assets/src/visualizations/FilterBox/FilterBox.css +++ /dev/null @@ -1,71 +0,0 @@ -/** - * Licensed to the Apache Software Foundation (ASF) under one - * or more contributor license agreements. See the NOTICE file - * distributed with this work for additional information - * regarding copyright ownership. The ASF licenses this file - * to you under the Apache License, Version 2.0 (the - * "License"); you may not use this file except in compliance - * with the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ -.select2-highlighted > .filter_box { - background-color: transparent; - border: 1px superset black; -} - -.dashboard .filter_box .slice_container > div:not(.alert) { - padding-top: 0; -} - -.input-inline { - float: left; - display: inline-block; - padding-right: 3px; -} - -ul.select2-results li.select2-highlighted div.filter_box{ - color: black; - border-width: 1px; - border-style: solid; - border-color: #666; -} - -ul.select2-results div.filter_box{ - color: black; - border-style: solid; - border-width: 1px; - border-color: transparent; -} -.filter_box { - padding: 10px 0; - overflow: visible !important; -} -.filter_box:hover { - z-index: 1000; -} -.m-b-5 { - margin-bottom: 5px; -} -.filter-container { - display: flex; -} -.filter-container label { - display: flex; - font-weight: bold; - margin-bottom: 8px; -} -.filter-container .filter-badge-container { - width: 30px; - padding-right: 10px; -} -.filter-container .filter-badge-container + div { - width: 100%; -} From a7fc0fcba06723679445fac0e7eebbd5da0da2cb Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Thu, 14 Nov 2019 14:03:56 -0800 Subject: [PATCH 07/28] Moving the variables file to a more global/sensible (I hope?) location. --- superset/assets/src/SqlLab/main.less | 2 +- .../assets/src/dashboard/stylesheets/index.less | 2 +- .../src/messageToasts/stylesheets/toast.less | 2 +- .../src/visualizations/FilterBox/FilterBox.less | 2 +- .../less}/variables.less | 8 ++++++++ .../assets/stylesheets/react-select/select.less | 3 +-- superset/assets/stylesheets/superset.less | 16 ++++++++-------- 7 files changed, 21 insertions(+), 14 deletions(-) rename superset/assets/{src/dashboard/stylesheets => stylesheets/less}/variables.less (81%) diff --git a/superset/assets/src/SqlLab/main.less b/superset/assets/src/SqlLab/main.less index ea81067a88a30..08e96480d8a9d 100644 --- a/superset/assets/src/SqlLab/main.less +++ b/superset/assets/src/SqlLab/main.less @@ -17,7 +17,7 @@ * under the License. */ @import "../../stylesheets/less/cosmo/variables.less"; -@import "../dashboard/stylesheets/variables.less"; +@import "../../stylesheets/less/variables.less"; body { overflow: hidden; diff --git a/superset/assets/src/dashboard/stylesheets/index.less b/superset/assets/src/dashboard/stylesheets/index.less index 01a0e3cb2eb0b..77f27777bb673 100644 --- a/superset/assets/src/dashboard/stylesheets/index.less +++ b/superset/assets/src/dashboard/stylesheets/index.less @@ -16,7 +16,7 @@ * specific language governing permissions and limitations * under the License. */ -@import './variables.less'; +@import './../../../stylesheets/less/variables.less'; @import './builder.less'; @import './builder-sidepane.less'; diff --git a/superset/assets/src/messageToasts/stylesheets/toast.less b/superset/assets/src/messageToasts/stylesheets/toast.less index f0110da0b20f1..e49f30c4bbbfd 100644 --- a/superset/assets/src/messageToasts/stylesheets/toast.less +++ b/superset/assets/src/messageToasts/stylesheets/toast.less @@ -16,7 +16,7 @@ * specific language governing permissions and limitations * under the License. */ -@import '../../dashboard/stylesheets/variables.less'; +@import '../../../stylesheets/less/variables.less'; .toast-presenter { position: fixed; diff --git a/superset/assets/src/visualizations/FilterBox/FilterBox.less b/superset/assets/src/visualizations/FilterBox/FilterBox.less index 862892fccecb1..ba700d06ae4d0 100644 --- a/superset/assets/src/visualizations/FilterBox/FilterBox.less +++ b/superset/assets/src/visualizations/FilterBox/FilterBox.less @@ -16,7 +16,7 @@ * specific language governing permissions and limitations * under the License. */ - @import '../../dashboard/stylesheets/variables.less'; +@import '../../../stylesheets/less/variables.less'; .select2-highlighted > .filter_box { background-color: transparent; diff --git a/superset/assets/src/dashboard/stylesheets/variables.less b/superset/assets/stylesheets/less/variables.less similarity index 81% rename from superset/assets/src/dashboard/stylesheets/variables.less rename to superset/assets/stylesheets/less/variables.less index edc0333cf2297..ba8fc5220aa66 100644 --- a/superset/assets/src/dashboard/stylesheets/variables.less +++ b/superset/assets/stylesheets/less/variables.less @@ -16,6 +16,14 @@ * specific language governing permissions and limitations * under the License. */ + +/************************************************************************/ +/* COLORS */ +/* Please attempt to use and standardize on these colors, */ +/* rather than including specific color values in */ +/* component styles. This will allow us to more easily adjust theming */ +/************************************************************************/ + @indicator-color: #44C0FF; @almost-black: #263238; diff --git a/superset/assets/stylesheets/react-select/select.less b/superset/assets/stylesheets/react-select/select.less index d59dafa5952a6..c32a63bb215bd 100644 --- a/superset/assets/stylesheets/react-select/select.less +++ b/superset/assets/stylesheets/react-select/select.less @@ -16,8 +16,7 @@ * specific language governing permissions and limitations * under the License. */ - -@import "../../src/dashboard/stylesheets/variables.less"; +@import "../../stylesheets/less/variables.less"; @import "~react-select/less/select.less"; @select-primary-color: @darkest; diff --git a/superset/assets/stylesheets/superset.less b/superset/assets/stylesheets/superset.less index a360a48c6b830..090c91ed63bfc 100644 --- a/superset/assets/stylesheets/superset.less +++ b/superset/assets/stylesheets/superset.less @@ -19,7 +19,7 @@ @import './less/index.less'; @import "./less/cosmo/variables.less"; @import './less/index.less'; -@import "../src/dashboard/stylesheets/variables.less"; +@import "./less/variables.less"; @datasource-sql-expression-width: 450px; @@ -28,7 +28,7 @@ } .alert.alert-danger > .debugger { - color: red; + color: @error; } .modal-dialog { @@ -43,11 +43,11 @@ } input.form-control { - background-color: white; + background-color: @lightest; } .chart-header a.danger { - color: red; + color: @error; } .disabledButton { @@ -111,7 +111,7 @@ input[type="checkbox"] { .notbtn { cursor: default; box-shadow: none; - border: 1px solid #ccc; + border: 1px solid @gray; } hr { @@ -159,7 +159,7 @@ img.loading { } img.viz-thumb-option { width: 100px; - border: 1px solid gray; + border: 1px solid @gray; margin-right: 5px; border-radius: 5px; } @@ -249,12 +249,12 @@ table.table-no-hover tr:hover { background: transparent; box-shadow: none; cursor: initial; - border: 1px solid #ccc; + border: 1px solid @gray; border-radius: 2px; } .editable-title input[type="text"] { - border: 1px solid #ccc; + border: 1px solid @gray; border-radius: 2px; padding: 2px; } From d57103f5a1c80a13e07020624708790cff6b22a4 Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Thu, 14 Nov 2019 16:39:03 -0800 Subject: [PATCH 08/28] FilterableTable moved from CSS to LESS, using color vars now. --- superset/assets/src/SqlLab/App.jsx | 2 +- superset/assets/src/SqlLab/main.less | 12 ++++++------ ...TableStyles.css => FilterableTableStyles.less} | 15 +++++++++------ 3 files changed, 16 insertions(+), 13 deletions(-) rename superset/assets/src/components/FilterableTable/{FilterableTableStyles.css => FilterableTableStyles.less} (90%) diff --git a/superset/assets/src/SqlLab/App.jsx b/superset/assets/src/SqlLab/App.jsx index 54c4711e4b524..4a5d33d2050fe 100644 --- a/superset/assets/src/SqlLab/App.jsx +++ b/superset/assets/src/SqlLab/App.jsx @@ -33,7 +33,7 @@ import setupApp from '../setup/setupApp'; import './main.less'; import '../../stylesheets/reactable-pagination.css'; -import '../components/FilterableTable/FilterableTableStyles.css'; +import '../components/FilterableTable/FilterableTableStyles.less'; setupApp(); diff --git a/superset/assets/src/SqlLab/main.less b/superset/assets/src/SqlLab/main.less index 08e96480d8a9d..308232914ef94 100644 --- a/superset/assets/src/SqlLab/main.less +++ b/superset/assets/src/SqlLab/main.less @@ -121,7 +121,7 @@ div.Workspace { background-color: #e8e8e8; display: flex; justify-content: space-between; - border: 1px solid #ccc; + border: 1px solid @gray-light; border-top: 0; form { @@ -276,8 +276,8 @@ div.Workspace { } .gutter { - border-top: 1px solid #ccc; - border-bottom: 1px solid #ccc; + border-top: 1px solid @gray-light; + border-bottom: 1px solid @gray-light; width: 3%; margin: 3px 47%; } @@ -293,7 +293,7 @@ div.Workspace { flex-direction: column; .divider { - border-bottom: 1px solid #f2f2f2; + border-bottom: 1px solid @gray-bg; margin: 15px 0; } @@ -326,7 +326,7 @@ div.tablePopover:hover { } .ace_editor { - border: 1px solid #ccc; + border: 1px solid @gray-light; } .Select-menu-outer { @@ -344,7 +344,7 @@ div.tablePopover:hover { } .ace_scroller { - background-color: #f4f4f4; + background-color: @gray-bg; } .TableElement { diff --git a/superset/assets/src/components/FilterableTable/FilterableTableStyles.css b/superset/assets/src/components/FilterableTable/FilterableTableStyles.less similarity index 90% rename from superset/assets/src/components/FilterableTable/FilterableTableStyles.css rename to superset/assets/src/components/FilterableTable/FilterableTableStyles.less index 4bf21072cf469..dc567273e2ed3 100644 --- a/superset/assets/src/components/FilterableTable/FilterableTableStyles.css +++ b/superset/assets/src/components/FilterableTable/FilterableTableStyles.less @@ -16,15 +16,18 @@ * specific language governing permissions and limitations * under the License. */ + +@import '../../../stylesheets/less/variables.less'; + .ReactVirtualized__Grid__innerScrollContainer { - border: 1px solid #ccc; + border: 1px solid; } .ReactVirtualized__Table__headerRow { font-weight: 700; display: flex; flex-direction: row; align-items: center; - border: 1px solid #ccc; + border: 1px solid @gray-light; } .ReactVirtualized__Table__row { display: flex; @@ -42,7 +45,7 @@ .ReactVirtualized__Table__rowColumn, .grid-cell { min-width: 0px; - border-right: 1px solid #ccc; + border-right: 1px solid @gray-light; align-self: center; padding: 12px; font-size: 12px; @@ -75,8 +78,8 @@ width: 1em; fill: currentColor; } -.even-row { background: #f2f2f2; } -.odd-row { background: #ffffff; } +.even-row { background: @gray-bg; } +.odd-row { background: @lightest; } .header-style { overflow: hidden; text-overflow: ellipsis; @@ -86,7 +89,7 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - color: #aaa; + color: @gray-heading; } .cell-text-for-measuring { font-family: Helvetica, Arial, sans-serif; From 02fe251ad412cbccc8fa21e13f1a9fb7c2b5bdad Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Thu, 14 Nov 2019 22:32:17 -0800 Subject: [PATCH 09/28] more whittling --- superset/assets/src/SqlLab/main.less | 4 ++-- .../stylesheets/filter-indicator.less | 2 +- superset/assets/stylesheets/superset.less | 18 +++++++++--------- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/superset/assets/src/SqlLab/main.less b/superset/assets/src/SqlLab/main.less index 308232914ef94..88fcb4b154cf5 100644 --- a/superset/assets/src/SqlLab/main.less +++ b/superset/assets/src/SqlLab/main.less @@ -118,7 +118,7 @@ div.Workspace { } .sql-toolbar { padding: 10px; - background-color: #e8e8e8; + background-color: @gray-bg; display: flex; justify-content: space-between; border: 1px solid @gray-light; @@ -168,7 +168,7 @@ div.Workspace { position: absolute; width: 300px; opacity: 0.85; - border: 1px solid #AAA; + border: 1px solid @gray-heading; max-height: 600px; box-shadow: fade(@darkest, 80%) 5px 5px 25px } diff --git a/superset/assets/src/dashboard/stylesheets/filter-indicator.less b/superset/assets/src/dashboard/stylesheets/filter-indicator.less index 24721666d4bde..afceacf23a3b2 100644 --- a/superset/assets/src/dashboard/stylesheets/filter-indicator.less +++ b/superset/assets/src/dashboard/stylesheets/filter-indicator.less @@ -34,7 +34,7 @@ height: 20px; overflow: hidden; display: flex; - background-color: #bababa; + background-color: @gray-light; transition: width 0.3s; border-top-right-radius: 2px; border-bottom-right-radius: 2px; diff --git a/superset/assets/stylesheets/superset.less b/superset/assets/stylesheets/superset.less index 090c91ed63bfc..fee60b262e107 100644 --- a/superset/assets/stylesheets/superset.less +++ b/superset/assets/stylesheets/superset.less @@ -66,8 +66,8 @@ input.form-control { .slice_description{ padding: 8px; margin: 5px 0; - border: 1px solid #DDD; - background-color: #F8F8F8; + border: 1px solid @gray-light; + background-color: @gray-bg; border-radius: 5px; font-size: 12px; } @@ -120,7 +120,7 @@ hr { } span.title-block { - background-color: #EEE; + background-color: @gray-bg; border-radius: 4px; padding: 6px 12px; margin: 0px 10px; @@ -174,7 +174,7 @@ li.widget:hover { div.widget .chart-header { padding-top: 8px; - color: #333; + color: @almost-black; margin: 0 10px; } @@ -182,7 +182,7 @@ div.widget .chart-header { font-size: 20px; line-height: 22px; padding-bottom: 8px; - border-bottom: 1px solid #888; + border-bottom: 1px solid @gray; margin-top: 10px; margin-left: 10px; margin-right: 10px; @@ -385,7 +385,7 @@ table.table-no-hover tr:hover { width: 98%; padding: 2rem; margin: 0 1% 20px 1%; - background: #f8f8f8; + background: @gray-bg; } /** table on both sides of the gap **/ @@ -468,7 +468,7 @@ table.table-no-hover tr:hover { border-top: none; } .list-container .filters-container table tr:last-child td { - border-bottom: 1px solid #b3b3b3; + border-bottom: 1px solid @gray-light; } .list-add-action .btn.btn-sm { @@ -558,7 +558,7 @@ tr.reactable-column-header th.reactable-header-sortable { .dismiss-overlay-btn { font-weight: bold; - background: white; + background: @lightest; color: @brand-primary; border-color: @brand-primary; } @@ -569,7 +569,7 @@ tr.reactable-column-header th.reactable-header-sortable { &, &:hover, &:active { - color: #263238; + color: @almost-black; } } } From e4c08c3a1f6e108408545fa90613de3aa420a1d9 Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Thu, 14 Nov 2019 22:43:46 -0800 Subject: [PATCH 10/28] standardizing opacity stops --- superset/assets/src/SqlLab/main.less | 6 +++--- .../src/dashboard/stylesheets/builder-sidepane.less | 4 ++-- superset/assets/src/dashboard/stylesheets/builder.less | 4 ++-- .../assets/src/dashboard/stylesheets/popover-menu.less | 2 +- .../assets/src/messageToasts/stylesheets/toast.less | 2 +- superset/assets/stylesheets/less/variables.less | 10 ++++++++++ superset/assets/stylesheets/react-select/select.less | 2 +- superset/assets/stylesheets/superset.less | 2 +- 8 files changed, 21 insertions(+), 11 deletions(-) diff --git a/superset/assets/src/SqlLab/main.less b/superset/assets/src/SqlLab/main.less index 88fcb4b154cf5..bb93c3c525ec0 100644 --- a/superset/assets/src/SqlLab/main.less +++ b/superset/assets/src/SqlLab/main.less @@ -61,7 +61,7 @@ body { } .Workspace .btn-sm { - box-shadow: 1px 1px 2px fade(@darkest, 10%); + box-shadow: 1px 1px 2px fade(@darkest, @opacity-light); margin-top: 2px; padding: 4px; } @@ -150,7 +150,7 @@ div.Workspace { font-weight: bold; } .running { - background-color: fade(@success, 80%); + background-color: fade(@success, @opacity-heavy); color: @darkest; } .success { @@ -170,7 +170,7 @@ div.Workspace { opacity: 0.85; border: 1px solid @gray-heading; max-height: 600px; - box-shadow: fade(@darkest, 80%) 5px 5px 25px + box-shadow: fade(@darkest, @opacity-heavy) 5px 5px 25px } .SqlLab pre { padding: 0px !important; diff --git a/superset/assets/src/dashboard/stylesheets/builder-sidepane.less b/superset/assets/src/dashboard/stylesheets/builder-sidepane.less index caddad46df3e2..1ae4a6f9921c7 100644 --- a/superset/assets/src/dashboard/stylesheets/builder-sidepane.less +++ b/superset/assets/src/dashboard/stylesheets/builder-sidepane.less @@ -50,7 +50,7 @@ overflow: hidden; width: @builder-pane-width; height: 100%; - box-shadow: -4px 0 4px 0 fade(@darkest, 10%); + box-shadow: -4px 0 4px 0 fade(@darkest, @opacity-light); } .slider-container { @@ -97,7 +97,7 @@ margin: 0 16px 16px 16px; position: relative; cursor: move; - background: fade(@lightest, 40%); + background: fade(@lightest, @opacity-medium-light); &:hover { background: @gray-bg; diff --git a/superset/assets/src/dashboard/stylesheets/builder.less b/superset/assets/src/dashboard/stylesheets/builder.less index 1baff0ab6492f..fbf0ab93fc30c 100644 --- a/superset/assets/src/dashboard/stylesheets/builder.less +++ b/superset/assets/src/dashboard/stylesheets/builder.less @@ -28,7 +28,7 @@ align-items: center; justify-content: space-between; padding: 0 24px; - box-shadow: 0 4px 4px 0 fade(@darkest, 10%); /* @TODO color */ + box-shadow: 0 4px 4px 0 fade(@darkest, @opacity-light); /* @TODO color */ } .dashboard-content { @@ -45,7 +45,7 @@ /* drop shadow for top-level tabs only */ .dashboard .dashboard-component-tabs { - box-shadow: 0 4px 4px 0 fade(@darkest, 10%); + box-shadow: 0 4px 4px 0 fade(@darkest, @opacity-light); padding-left: 8px; /* note this is added to tab-level padding, to match header */ } diff --git a/superset/assets/src/dashboard/stylesheets/popover-menu.less b/superset/assets/src/dashboard/stylesheets/popover-menu.less index 3399984c0930c..ec15daf1675ea 100644 --- a/superset/assets/src/dashboard/stylesheets/popover-menu.less +++ b/superset/assets/src/dashboard/stylesheets/popover-menu.less @@ -50,7 +50,7 @@ height: 40px; padding: 0 16px; background: @lightest; - box-shadow: 0 1px 2px 1px fade(@darkest, 20%); + box-shadow: 0 1px 2px 1px fade(@darkest, @opacity-medium-light); font-size: 14px; cursor: default; z-index: 1000; diff --git a/superset/assets/src/messageToasts/stylesheets/toast.less b/superset/assets/src/messageToasts/stylesheets/toast.less index e49f30c4bbbfd..08a8fa52925b7 100644 --- a/superset/assets/src/messageToasts/stylesheets/toast.less +++ b/superset/assets/src/messageToasts/stylesheets/toast.less @@ -33,7 +33,7 @@ opacity: 0; position: relative; white-space: pre-line; - box-shadow: 0 2px 4px 0 fade(@darkest, 35%); + box-shadow: 0 2px 4px 0 fade(@darkest, @opacity-medium-light); will-change: transform, opacity; transform: translateY(-100%); transition: transform 0.3s, opacity 0.3s; diff --git a/superset/assets/stylesheets/less/variables.less b/superset/assets/stylesheets/less/variables.less index ba8fc5220aa66..197aae4dd03f1 100644 --- a/superset/assets/stylesheets/less/variables.less +++ b/superset/assets/stylesheets/less/variables.less @@ -88,3 +88,13 @@ .badge-loop(@i - 1); } .badge-loop(@iterations); + + +/************************************************************************/ +/* OPACITIES */ +/* Used in LESS filters, e.g. fade(@someColorVar, @someOpacityBelow) */ +/************************************************************************/ +@opacity-light: 10%; +@opacity-medium-light: 35%; +@opacity-medium-heavy: 60%; +@opacity-heavy: 80%; \ No newline at end of file diff --git a/superset/assets/stylesheets/react-select/select.less b/superset/assets/stylesheets/react-select/select.less index c32a63bb215bd..11e0199769207 100644 --- a/superset/assets/stylesheets/react-select/select.less +++ b/superset/assets/stylesheets/react-select/select.less @@ -57,7 +57,7 @@ padding: 0 .5rem; } .VirtualizedSelectFocusedOption { - background-color: fade(@darkest, 10%); + background-color: fade(@darkest, @opacity-light); } .VirtualizedSelectFocusedOption:hover { cursor: pointer; diff --git a/superset/assets/stylesheets/superset.less b/superset/assets/stylesheets/superset.less index fee60b262e107..24a864bf59663 100644 --- a/superset/assets/stylesheets/superset.less +++ b/superset/assets/stylesheets/superset.less @@ -476,7 +476,7 @@ table.table-no-hover tr:hover { font-size: 10px; line-height: 2px; border-radius: 50%; - box-shadow: 2px 2px 4px -1px fade(@darkest, 10%); + box-shadow: 2px 2px 4px -1px fade(@darkest, @opacity-light); } iframe { From 79079ad5927f3c4f8f2d8d479e8cf1bf6814971d Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Fri, 15 Nov 2019 09:48:05 -0800 Subject: [PATCH 11/28] nails more colors, removes some old (seemingly unused) css --- superset/assets/src/SqlLab/main.less | 74 +++++++++---------- .../stylesheets/components/chart.less | 2 +- .../src/dashboard/stylesheets/dashboard.less | 4 +- .../stylesheets/filter-indicator.less | 2 +- .../src/dashboard/stylesheets/grid.less | 4 +- .../assets/stylesheets/less/variables.less | 4 +- superset/assets/stylesheets/superset.less | 48 ++++++------ 7 files changed, 70 insertions(+), 68 deletions(-) diff --git a/superset/assets/src/SqlLab/main.less b/superset/assets/src/SqlLab/main.less index bb93c3c525ec0..dadb24f1905e9 100644 --- a/superset/assets/src/SqlLab/main.less +++ b/superset/assets/src/SqlLab/main.less @@ -236,10 +236,10 @@ div.Workspace { height: 100%; padding: 10px; - .clock { - background-color: orange; - padding: 5px; - } + // .clock { + // background-color: @warning; + // padding: 5px; + // } .schemaPane { flex: 0 0 300px; @@ -252,39 +252,39 @@ div.Workspace { padding-left: 10px; } - .schemaPane-enter-done, .schemaPane-exit { - transform: translateX(0); - } - - .schemaPane-exit-active { - transform: translateX(-120%); - } - - .schemaPane-enter-active { - transform: translateX(0); - max-width: 300px; - } - - .schemaPane-enter, .schemaPane-exit-done { - max-width: 0; - transform: translateX(-120%); - overflow: hidden; - } - - .schemaPane-exit-done + .queryPane { - margin-left: 0; - } - - .gutter { - border-top: 1px solid @gray-light; - border-bottom: 1px solid @gray-light; - width: 3%; - margin: 3px 47%; - } - - .gutter.gutter-vertical { - cursor: row-resize; - } + // .schemaPane-enter-done, .schemaPane-exit { + // transform: translateX(0); + // } + + // .schemaPane-exit-active { + // transform: translateX(-120%); + // } + + // .schemaPane-enter-active { + // transform: translateX(0); + // max-width: 300px; + // } + + // .schemaPane-enter, .schemaPane-exit-done { + // max-width: 0; + // transform: translateX(-120%); + // overflow: hidden; + // } + + // .schemaPane-exit-done + .queryPane { + // margin-left: 0; + // } + + // .gutter { + // border-top: 1px solid @gray-light; + // border-bottom: 1px solid @gray-light; + // width: 3%; + // margin: 3px 47%; + // } + + // .gutter.gutter-vertical { + // cursor: row-resize; + // } } .SqlEditorLeftBar { diff --git a/superset/assets/src/dashboard/stylesheets/components/chart.less b/superset/assets/src/dashboard/stylesheets/components/chart.less index 2a1b1a032804a..1d03578e72d02 100644 --- a/superset/assets/src/dashboard/stylesheets/components/chart.less +++ b/superset/assets/src/dashboard/stylesheets/components/chart.less @@ -42,7 +42,7 @@ &.fade-in { border-radius: 4px; - box-shadow: inset 0 0 0 2px rgba(0, 166, 153, 1), 0 0 0 3px rgba(0, 166, 153, .15); + box-shadow: inset 0 0 0 2px fade(@shadow-highlight, 1), 0 0 0 3px fade(@shadow-highlight, @opacity-light); transition: box-shadow 1s ease-in-out; } diff --git a/superset/assets/src/dashboard/stylesheets/dashboard.less b/superset/assets/src/dashboard/stylesheets/dashboard.less index 5afc12098ab96..887cc8881e2d1 100644 --- a/superset/assets/src/dashboard/stylesheets/dashboard.less +++ b/superset/assets/src/dashboard/stylesheets/dashboard.less @@ -235,9 +235,9 @@ body { } i.danger { - color: red; + color: @danger; } i.warning { - color: orange; + color: @warning; } diff --git a/superset/assets/src/dashboard/stylesheets/filter-indicator.less b/superset/assets/src/dashboard/stylesheets/filter-indicator.less index afceacf23a3b2..462aae979854b 100644 --- a/superset/assets/src/dashboard/stylesheets/filter-indicator.less +++ b/superset/assets/src/dashboard/stylesheets/filter-indicator.less @@ -59,7 +59,7 @@ } .show-outline .filter-indicator-group { - box-shadow: rgba(0, 166, 153, 1) -2px 0 0 0, @lightest -4px 0 0 0, @gray-light -6px 0 0 0; + box-shadow: @shadow-highlight -2px 0 0 0, @lightest -4px 0 0 0, @gray-light -6px 0 0 0; } .dashboard-component-chart-holder, diff --git a/superset/assets/src/dashboard/stylesheets/grid.less b/superset/assets/src/dashboard/stylesheets/grid.less index 270f8ae3705c5..f03b4e4612063 100644 --- a/superset/assets/src/dashboard/stylesheets/grid.less +++ b/superset/assets/src/dashboard/stylesheets/grid.less @@ -44,9 +44,9 @@ position: absolute; top: 0; min-height: 100%; - background-color: rgba(68, 192, 255, 0.05); + background-color: fade(@indicator-color, @opacity-light); pointer-events: none; - box-shadow: inset 0 0 0 1px rgba(68, 192, 255, 0.5); + box-shadow: inset 0 0 0 1px fade(@indicator-color, @opacity-medium-heavy); } .grid-row-guide { diff --git a/superset/assets/stylesheets/less/variables.less b/superset/assets/stylesheets/less/variables.less index 197aae4dd03f1..73251745274b0 100644 --- a/superset/assets/stylesheets/less/variables.less +++ b/superset/assets/stylesheets/less/variables.less @@ -47,9 +47,11 @@ @success: #00BFA5; @warning: #FFAB00; @error: #FF0000; - @danger: @pink; +/* general component effects */ +@shadow-highlight: rgb(0, 166, 153); + /* filter indicators */ /* make sure be consistent with FILTER_COLORS_COUNT in dashboardFiltersColorMap.js diff --git a/superset/assets/stylesheets/superset.less b/superset/assets/stylesheets/superset.less index 24a864bf59663..05fe04c892701 100644 --- a/superset/assets/stylesheets/superset.less +++ b/superset/assets/stylesheets/superset.less @@ -172,11 +172,11 @@ li.widget:hover { z-index: 1000; } -div.widget .chart-header { - padding-top: 8px; - color: @almost-black; - margin: 0 10px; -} +// div.widget .chart-header { +// padding-top: 8px; +// color: @almost-black; +// margin: 0 10px; +// } .chart-header .header-text { font-size: 20px; @@ -197,25 +197,25 @@ div.widget .chart-header { opacity: .2; } -div.widget { - .slice_container { - overflow: hidden; - } - - .stack-trace-container.has-trace { - .alert-warning:hover { - cursor: pointer; - } - } - - .is-loading { - .stack-trace-container, - .slice_container { - opacity: 0.5; - position: relative; - } - } -} +// div.widget { +// .slice_container { +// overflow: hidden; +// } + +// .stack-trace-container.has-trace { +// .alert-warning:hover { +// cursor: pointer; +// } +// } + +// .is-loading { +// .stack-trace-container, +// .slice_container { +// opacity: 0.5; +// position: relative; +// } +// } +// } .navbar .alert { padding: 5px 10px; From 82dbc446325b3cebee0ecf94e04c1d035fe99a5c Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Fri, 15 Nov 2019 10:41:44 -0800 Subject: [PATCH 12/28] removing more dead css --- superset/assets/stylesheets/superset.less | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/superset/assets/stylesheets/superset.less b/superset/assets/stylesheets/superset.less index 05fe04c892701..b85caa8e1ef9a 100644 --- a/superset/assets/stylesheets/superset.less +++ b/superset/assets/stylesheets/superset.less @@ -464,12 +464,12 @@ table.table-no-hover tr:hover { padding-bottom: 15px; } -.list-container .filters-container table tr:first-child td { - border-top: none; -} -.list-container .filters-container table tr:last-child td { - border-bottom: 1px solid @gray-light; -} +// .list-container .filters-container table tr:first-child td { +// border-top: none; +// } +// .list-container .filters-container table tr:last-child td { +// border-bottom: 1px solid @gray-light; +// } .list-add-action .btn.btn-sm { padding: 5px 6px; From 94eec6a6a87d97769a3584d4023ff4a818f90f70 Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Fri, 15 Nov 2019 10:42:15 -0800 Subject: [PATCH 13/28] DatasourceControl moved from CSS to LESS --- .../src/explore/components/controls/DatasourceControl.jsx | 2 +- .../{DatasourceControl.css => DatasourceControl.less} | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) rename superset/assets/src/explore/components/controls/{DatasourceControl.css => DatasourceControl.less} (93%) diff --git a/superset/assets/src/explore/components/controls/DatasourceControl.jsx b/superset/assets/src/explore/components/controls/DatasourceControl.jsx index a2a35c2271d2a..c9cb86679eaf7 100644 --- a/superset/assets/src/explore/components/controls/DatasourceControl.jsx +++ b/superset/assets/src/explore/components/controls/DatasourceControl.jsx @@ -37,7 +37,7 @@ import MetricOption from '../../../components/MetricOption'; import DatasourceModal from '../../../datasource/DatasourceModal'; import ChangeDatasourceModal from '../../../datasource/ChangeDatasourceModal'; import TooltipWrapper from '../../../components/TooltipWrapper'; -import './DatasourceControl.css'; +import './DatasourceControl.less'; const propTypes = { onChange: PropTypes.func, diff --git a/superset/assets/src/explore/components/controls/DatasourceControl.css b/superset/assets/src/explore/components/controls/DatasourceControl.less similarity index 93% rename from superset/assets/src/explore/components/controls/DatasourceControl.css rename to superset/assets/src/explore/components/controls/DatasourceControl.less index 87ea089ef1199..b1f8db0658bdc 100644 --- a/superset/assets/src/explore/components/controls/DatasourceControl.css +++ b/superset/assets/src/explore/components/controls/DatasourceControl.less @@ -16,6 +16,8 @@ * specific language governing permissions and limitations * under the License. */ +@import "../../../../stylesheets/less/variables.less"; + #datasource_menu { border-radius: 2px; padding-left: 8px; @@ -26,7 +28,7 @@ position: relative; padding-right: 8px; margin-left: 4px; - color: #fff; + color: @lightest; top: -8px; } From c1afe022db4701d4800694074a7ce406c7308c9a Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Fri, 15 Nov 2019 10:44:42 -0800 Subject: [PATCH 14/28] BootstrapSliderWrapper CSS -> LESS --- superset/assets/src/components/BootstrapSliderWrapper.jsx | 2 +- ...otstrapSliderWrapper.css => BootstrapSliderWrapper.less} | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) rename superset/assets/src/components/{BootstrapSliderWrapper.css => BootstrapSliderWrapper.less} (89%) diff --git a/superset/assets/src/components/BootstrapSliderWrapper.jsx b/superset/assets/src/components/BootstrapSliderWrapper.jsx index 51698b5dfae04..5d2a5c8da13a1 100644 --- a/superset/assets/src/components/BootstrapSliderWrapper.jsx +++ b/superset/assets/src/components/BootstrapSliderWrapper.jsx @@ -19,7 +19,7 @@ import React from 'react'; import ReactBootstrapSlider from 'react-bootstrap-slider'; import 'bootstrap-slider/dist/css/bootstrap-slider.min.css'; -import './BootstrapSliderWrapper.css'; +import './BootstrapSliderWrapper.less'; export default function BootstrapSliderWrapper(props) { return ( diff --git a/superset/assets/src/components/BootstrapSliderWrapper.css b/superset/assets/src/components/BootstrapSliderWrapper.less similarity index 89% rename from superset/assets/src/components/BootstrapSliderWrapper.css rename to superset/assets/src/components/BootstrapSliderWrapper.less index c5d83f20a7d02..c942943b000a7 100644 --- a/superset/assets/src/components/BootstrapSliderWrapper.css +++ b/superset/assets/src/components/BootstrapSliderWrapper.less @@ -16,11 +16,13 @@ * specific language governing permissions and limitations * under the License. */ +@import "../../stylesheets/less/variables.less"; + .BootstrapSliderWrapper .slider-selection { - background: #efefef; + background: @gray-bg; } .BootstrapSliderWrapper .slider-handle { - background: #b3b3b3; + background: @gray-light; } From b84e38e74f76e3180b1267f25cfcd4e35ad1ef8b Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Fri, 15 Nov 2019 11:18:31 -0800 Subject: [PATCH 15/28] reactable-pagination CSS->LESS, color-conformed --- superset/assets/src/SqlLab/App.jsx | 2 +- .../assets/src/components/TableLoader.jsx | 2 +- superset/assets/src/explore/App.jsx | 2 +- .../assets/src/welcome/DashboardTable.jsx | 2 +- ...gination.css => reactable-pagination.less} | 20 ++++++++++--------- 5 files changed, 15 insertions(+), 13 deletions(-) rename superset/assets/stylesheets/{reactable-pagination.css => reactable-pagination.less} (83%) diff --git a/superset/assets/src/SqlLab/App.jsx b/superset/assets/src/SqlLab/App.jsx index 4a5d33d2050fe..926cec737343c 100644 --- a/superset/assets/src/SqlLab/App.jsx +++ b/superset/assets/src/SqlLab/App.jsx @@ -32,7 +32,7 @@ import { BYTES_PER_CHAR, KB_STORAGE } from './constants'; import setupApp from '../setup/setupApp'; import './main.less'; -import '../../stylesheets/reactable-pagination.css'; +import '../../stylesheets/reactable-pagination.less'; import '../components/FilterableTable/FilterableTableStyles.less'; setupApp(); diff --git a/superset/assets/src/components/TableLoader.jsx b/superset/assets/src/components/TableLoader.jsx index 0545fef55aa90..d38be49d07e53 100644 --- a/superset/assets/src/components/TableLoader.jsx +++ b/superset/assets/src/components/TableLoader.jsx @@ -24,7 +24,7 @@ import { SupersetClient } from '@superset-ui/connection'; import withToasts from '../messageToasts/enhancers/withToasts'; import Loading from '../components/Loading'; -import '../../stylesheets/reactable-pagination.css'; +import '../../stylesheets/reactable-pagination.less'; const propTypes = { dataEndpoint: PropTypes.string.isRequired, diff --git a/superset/assets/src/explore/App.jsx b/superset/assets/src/explore/App.jsx index c0fdcf5192987..8496329f2e5f3 100644 --- a/superset/assets/src/explore/App.jsx +++ b/superset/assets/src/explore/App.jsx @@ -33,7 +33,7 @@ import rootReducer from './reducers/index'; import setupApp from '../setup/setupApp'; import setupPlugins from '../setup/setupPlugins'; import './main.css'; -import '../../stylesheets/reactable-pagination.css'; +import '../../stylesheets/reactable-pagination.less'; setupApp(); setupPlugins(); diff --git a/superset/assets/src/welcome/DashboardTable.jsx b/superset/assets/src/welcome/DashboardTable.jsx index a3d689aec9321..d510730eb390c 100644 --- a/superset/assets/src/welcome/DashboardTable.jsx +++ b/superset/assets/src/welcome/DashboardTable.jsx @@ -24,7 +24,7 @@ import { t } from '@superset-ui/translation'; import withToasts from '../messageToasts/enhancers/withToasts'; import Loading from '../components/Loading'; -import '../../stylesheets/reactable-pagination.css'; +import '../../stylesheets/reactable-pagination.less'; const propTypes = { search: PropTypes.string, diff --git a/superset/assets/stylesheets/reactable-pagination.css b/superset/assets/stylesheets/reactable-pagination.less similarity index 83% rename from superset/assets/stylesheets/reactable-pagination.css rename to superset/assets/stylesheets/reactable-pagination.less index 497b44a513e29..28244df35d98d 100644 --- a/superset/assets/stylesheets/reactable-pagination.css +++ b/superset/assets/stylesheets/reactable-pagination.less @@ -16,21 +16,23 @@ * specific language governing permissions and limitations * under the License. */ +@import "../stylesheets/less/variables.less"; + .reactable-pagination td { padding: 15px 0 0 0!important; } .reactable-pagination a:focus { text-decoration: none; - color: #555555; + color: @gray-dark; outline: 1; } .reactable-page-button, .reactable-next-page, .reactable-previous-page { - background: #fff; + background: @lightest; border-radius: 2px; - border: 1px solid #b3b3b3; - color: #555555; + border: 1px solid @gray-light ; + color: @gray-dark; display: inline-block; font-size: 12px; line-height: 1.5; @@ -42,8 +44,8 @@ white-space: nowrap; } .reactable-current-page { - border: 1px solid #b3b3b3; - color: #555555; + border: 1px solid @gray-light; + color: @gray-dark; font-weight: bold; pointer-events: none; opacity: 0.65; @@ -51,8 +53,8 @@ .reactable-page-button:hover, .reactable-next-page:hover, .reactable-previous-page:hover { - background-color: #efefef; - border-color: #949494; - color: #555555; + background-color: @gray-bg; + border-color: @gray; + color: @gray-dark; text-decoration: none; } From 25e9aa3460ae6633310bc3b9c892f2c9b8220b8f Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Fri, 15 Nov 2019 14:07:04 -0800 Subject: [PATCH 16/28] FilterBadgeIcon CSS->LESS, conformed --- superset/assets/src/components/FilterBadgeIcon.jsx | 2 +- .../{FilterBadgeIcon.css => FilterBadgeIcon.less} | 8 +++++--- 2 files changed, 6 insertions(+), 4 deletions(-) rename superset/assets/src/components/{FilterBadgeIcon.css => FilterBadgeIcon.less} (87%) diff --git a/superset/assets/src/components/FilterBadgeIcon.jsx b/superset/assets/src/components/FilterBadgeIcon.jsx index e523aa28df7e3..f99644ea66299 100644 --- a/superset/assets/src/components/FilterBadgeIcon.jsx +++ b/superset/assets/src/components/FilterBadgeIcon.jsx @@ -19,7 +19,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import './FilterBadgeIcon.css'; +import './FilterBadgeIcon.less'; const propTypes = { colorCode: PropTypes.string, diff --git a/superset/assets/src/components/FilterBadgeIcon.css b/superset/assets/src/components/FilterBadgeIcon.less similarity index 87% rename from superset/assets/src/components/FilterBadgeIcon.css rename to superset/assets/src/components/FilterBadgeIcon.less index 2c13dc8a146ea..2866a900a2c33 100644 --- a/superset/assets/src/components/FilterBadgeIcon.css +++ b/superset/assets/src/components/FilterBadgeIcon.less @@ -16,19 +16,21 @@ * specific language governing permissions and limitations * under the License. */ +@import "../../stylesheets/less/variables.less"; + .filter-badge { width: 20px; height: 20px; - background-color: #bababa; + background-color: @gray-light; border-radius: 2px; z-index: 10; } .filter-badge:hover { cursor: pointer; - background-color: #9e9e9e; + background-color: @gray; } .color-bar.badge-group, .filter-badge.badge-group { - background-color: rgb(72, 72, 72); + background-color: @gray-dark; } From a8d487d5ae94047525ceb9e56d0b53c8cb86bcb2 Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Fri, 15 Nov 2019 14:08:49 -0800 Subject: [PATCH 17/28] deleting unused/deprecated css --- .../stylesheets/dashboard_deprecated.css | 199 ------------------ 1 file changed, 199 deletions(-) delete mode 100644 superset/assets/stylesheets/dashboard_deprecated.css diff --git a/superset/assets/stylesheets/dashboard_deprecated.css b/superset/assets/stylesheets/dashboard_deprecated.css deleted file mode 100644 index 57d0f4fbb9d55..0000000000000 --- a/superset/assets/stylesheets/dashboard_deprecated.css +++ /dev/null @@ -1,199 +0,0 @@ -/** - * Licensed to the Apache Software Foundation (ASF) under one - * or more contributor license agreements. See the NOTICE file - * distributed with this work for additional information - * regarding copyright ownership. The ASF licenses this file - * to you under the Apache License, Version 2.0 (the - * "License"); you may not use this file except in compliance - * with the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ -/* header has mysterious extra margin */ -header.top { - margin-bottom: -20px; -} -h1.outer-container { - display: flex; - flex-direction: row; - align-items: center; -} -.v2-preview-badge { - margin-left: 8px; - text-transform: uppercase; - font-size: 12px; - font-weight: 400; - background: linear-gradient(to bottom right, #E32364, #2C2261); - color: white; - padding: 4px 8px; - line-height: 1em; - cursor: pointer; - opacity: 0.9; -} - -.v2-preview-badge:hover { - opacity: 1; -} - -.dashboard a i { - cursor: pointer; -} -.dashboard i.drag { - cursor: move !important; -} -.dashboard .slice-grid .preview-holder { - z-index: 1; - position: absolute; - background-color: #AAA; - border-color: #AAA; - opacity: 0.3; -} -div.widget .chart-controls { - background-clip: content-box; - position: absolute; - z-index: 100; - right: 0; - top: 5px; - padding: 5px 5px; - opacity: 0; - transition: opacity 0.5s ease-in-out; -} -div.widget:hover .chart-controls { - opacity: 0.75; - transition: opacity 0.5s ease-in-out; -} -.slice-grid div.widget { - border-radius: 0; - border: 0; - box-shadow: none; - background-color: #fff; - overflow: visible; -} - -.slice-grid .slice_container { - background-color: #fff; -} - -.dashboard .slice-grid .dragging, -.dashboard .slice-grid .resizing { - opacity: 0.5; -} -.dashboard img.loading { - width: 20px; - margin: 5px; - position: absolute; -} - -.dashboard .slice_title { - text-align: center; - font-weight: bold; - font-size: 14px; - padding: 5px; -} -.dashboard div.slice_content { - width: 100%; - height: 100%; -} - -.modal img.loading { - width: 50px; - margin: 0; - position: relative; -} - -.react-bs-container-body { - max-height: 400px; - overflow-y: auto; -} - -.hidden, #pageDropDown { - display: none; -} - -.slice-grid div.separator.widget { - border: 1px solid transparent; - box-shadow: none; - z-index: 1; -} -.slice-grid div.separator.widget:hover { - border: 1px solid #EEE; -} -.slice-grid div.separator.widget .chart-header { - background-color: transparent; - color: transparent; -} -.slice-grid div.separator.widget h1,h2,h3,h4 { - margin-top: 0px; -} - -.slice-cell { - box-shadow: 0px 0px 20px 5px rgba(0,0,0,0); - transition: box-shadow 1s ease-in; - height: 100%; -} - -.slice-cell-highlight { - box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.2); - height: 100%; -} - -.slice-cell .editable-title input[type="button"] { - font-weight: bold; -} - -.dashboard .separator.widget .slice_container { - padding: 0; - overflow: visible; -} -.dashboard .separator.widget .slice_container hr { - margin-top: 5px; - margin-bottom: 5px; -} -.separator .chart-container { - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; -} - -.dashboard .title { - margin: 0 20px; -} - -.dashboard .title .favstar { - font-size: 20px; - position: relative; -} - -.chart-header .header { - font-size: 16px; - margin: 0 -10px; -} -.ace_gutter { - z-index: 0; -} -.ace_content { - z-index: 0; -} -.ace_scrollbar { - z-index: 0; -} -.slice_container .alert { - margin: 10px; -} - -i.danger { - color: red; -} - -i.warning { - color: orange; -} From 8fe7378f8711019315030e5118050457d9647bbc Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Fri, 15 Nov 2019 14:22:23 -0800 Subject: [PATCH 18/28] welcome.css -> welcome.less (is this even being used?) --- superset/assets/stylesheets/{welcome.css => welcome.less} | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) rename superset/assets/stylesheets/{welcome.css => welcome.less} (93%) diff --git a/superset/assets/stylesheets/welcome.css b/superset/assets/stylesheets/welcome.less similarity index 93% rename from superset/assets/stylesheets/welcome.css rename to superset/assets/stylesheets/welcome.less index 3a86cf9e4fcb0..cb51649d39fda 100644 --- a/superset/assets/stylesheets/welcome.css +++ b/superset/assets/stylesheets/welcome.less @@ -16,6 +16,8 @@ * specific language governing permissions and limitations * under the License. */ +@import "../stylesheets/less/variables.less"; + .table i { padding-top: 6px; } @@ -40,7 +42,7 @@ input { .cal-heatmap-panel { padding: 20px; - background-color: #fff; + background-color: @lightest; } .search input { width: 400px; From 99eb364c93fd2990d35bb1146b7dcce845fd3b2f Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Fri, 15 Nov 2019 14:28:53 -0800 Subject: [PATCH 19/28] main.css -> main.less, standardized --- superset/assets/src/datasource/DatasourceEditor.jsx | 2 +- superset/assets/src/datasource/{main.css => main.less} | 4 +++- superset/assets/src/explore/App.jsx | 2 +- superset/assets/src/profile/App.jsx | 2 +- 4 files changed, 6 insertions(+), 4 deletions(-) rename superset/assets/src/datasource/{main.css => main.less} (93%) diff --git a/superset/assets/src/datasource/DatasourceEditor.jsx b/superset/assets/src/datasource/DatasourceEditor.jsx index 4ef034c6f19c6..7e48075517971 100644 --- a/superset/assets/src/datasource/DatasourceEditor.jsx +++ b/superset/assets/src/datasource/DatasourceEditor.jsx @@ -40,7 +40,7 @@ import Field from '../CRUD/Field'; import withToasts from '../messageToasts/enhancers/withToasts'; -import './main.css'; +import './main.less'; const checkboxGenerator = (d, onChange) => ; const DATA_TYPES = ['STRING', 'NUMERIC', 'DATETIME']; diff --git a/superset/assets/src/datasource/main.css b/superset/assets/src/datasource/main.less similarity index 93% rename from superset/assets/src/datasource/main.css rename to superset/assets/src/datasource/main.less index 608143377a95c..604d3fd4289d5 100644 --- a/superset/assets/src/datasource/main.css +++ b/superset/assets/src/datasource/main.less @@ -16,6 +16,8 @@ * specific language governing permissions and limitations * under the License. */ +@import "../../stylesheets/less/variables.less"; + .Datasource .tab-content { height: 600px; overflow: auto; @@ -23,7 +25,7 @@ .Datasource .change-warning { margin: 16px 10px 0; - color: #FE4A49; + color: @warning; } .Datasource .change-warning .bold { diff --git a/superset/assets/src/explore/App.jsx b/superset/assets/src/explore/App.jsx index 8496329f2e5f3..23922c652ee48 100644 --- a/superset/assets/src/explore/App.jsx +++ b/superset/assets/src/explore/App.jsx @@ -32,7 +32,7 @@ import rootReducer from './reducers/index'; import setupApp from '../setup/setupApp'; import setupPlugins from '../setup/setupPlugins'; -import './main.css'; +import './main.less'; import '../../stylesheets/reactable-pagination.less'; setupApp(); diff --git a/superset/assets/src/profile/App.jsx b/superset/assets/src/profile/App.jsx index 878a07711ceb6..1e3d6dd93db5d 100644 --- a/superset/assets/src/profile/App.jsx +++ b/superset/assets/src/profile/App.jsx @@ -27,7 +27,7 @@ import messageToastReducer from '../messageToasts/reducers'; import { initEnhancer } from '../reduxUtils'; import setupApp from '../setup/setupApp'; -import './main.css'; +import './main.less'; setupApp(); From 638146e075ec3f39d7199aa4a6142f7d6a5189bc Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Fri, 15 Nov 2019 14:40:29 -0800 Subject: [PATCH 20/28] there were two main.css files - this should have been in the last commit. --- .../assets/src/explore/{main.css => main.less} | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) rename superset/assets/src/explore/{main.css => main.less} (95%) diff --git a/superset/assets/src/explore/main.css b/superset/assets/src/explore/main.less similarity index 95% rename from superset/assets/src/explore/main.css rename to superset/assets/src/explore/main.less index 3688e854446f4..3d254134f8692 100644 --- a/superset/assets/src/explore/main.css +++ b/superset/assets/src/explore/main.less @@ -16,6 +16,8 @@ * specific language governing permissions and limitations * under the License. */ +@import "../../stylesheets/less/variables.less"; + .scrollbar-container { position: relative; overflow: hidden; @@ -185,18 +187,18 @@ } .adhoc-filter-sql-editor { - border: rgb(187, 187, 187) solid thin; + border: @gray-light solid thin; } .label-default { - background-color: #808e95; + background-color: @gray; font-weight: normal; } .btn.label-btn { - background-color: #808e95; + background-color: @gray; font-weight: normal; - color: #fff; + color: @lightest; padding: 5px 4px 4px; border:0; } @@ -209,8 +211,8 @@ } .label-btn:hover, .label-btn-label:hover { - background-color: #667177; - color: #fff; + background-color: @gray-dark; + color: @lightest; } .label-btn-label { @@ -236,7 +238,7 @@ } .custom-sql-disabled-message { - color: gray; + color: @gray; font-size: 11px; text-align: center; margin-top: 60px; From 71bf150880491f5456fc87f50a4927dd454ff825 Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Fri, 15 Nov 2019 14:40:45 -0800 Subject: [PATCH 21/28] explore.css -> explore.less (not used anywhere?) --- superset/assets/stylesheets/{explore.css => explore.less} | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) rename superset/assets/stylesheets/{explore.css => explore.less} (93%) diff --git a/superset/assets/stylesheets/explore.css b/superset/assets/stylesheets/explore.less similarity index 93% rename from superset/assets/stylesheets/explore.css rename to superset/assets/stylesheets/explore.less index f1131a1a24d0a..de48b898973a7 100644 --- a/superset/assets/stylesheets/explore.css +++ b/superset/assets/stylesheets/explore.less @@ -16,6 +16,8 @@ * specific language governing permissions and limitations * under the License. */ +@import "../stylesheets/less/variables.less"; + .widget { position: relative; } @@ -24,7 +26,7 @@ position: absolute; left: 0; top: 0; - background-color: #fff; + background-color: @lightest; } .navbar { From 3fb251af3fc82506f228499a2adb6c5b361ecde0 Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Fri, 15 Nov 2019 14:44:27 -0800 Subject: [PATCH 22/28] sql.css -> sql.less (also not used anywhere?) --- superset/assets/stylesheets/{sql.css => sql.less} | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) rename superset/assets/stylesheets/{sql.css => sql.less} (92%) diff --git a/superset/assets/stylesheets/sql.css b/superset/assets/stylesheets/sql.less similarity index 92% rename from superset/assets/stylesheets/sql.css rename to superset/assets/stylesheets/sql.less index ab3f83aa7c8ae..ca7e56b2dac69 100644 --- a/superset/assets/stylesheets/sql.css +++ b/superset/assets/stylesheets/sql.less @@ -16,6 +16,8 @@ * specific language governing permissions and limitations * under the License. */ +@import "../stylesheets/less/variables.less"; + .topsql { height: 250px; } @@ -25,9 +27,9 @@ } .bordered { padding: 0px 0px; - border: 1px solid grey; + border: 1px solid @gray; border-radius: 5px; - background-color: #EEE; + background-color: @gray-bg; } div.alert { padding: 5px; From f71a4c37290cb9dfb2887d23b5c3819e1b592dde Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Fri, 15 Nov 2019 14:50:59 -0800 Subject: [PATCH 23/28] another main.css -> main.less, standardized on colors --- superset/assets/src/profile/{main.css => main.less} | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) rename superset/assets/src/profile/{main.css => main.less} (89%) diff --git a/superset/assets/src/profile/main.css b/superset/assets/src/profile/main.less similarity index 89% rename from superset/assets/src/profile/main.css rename to superset/assets/src/profile/main.less index 264185c26da94..a6bdbc7a55e48 100644 --- a/superset/assets/src/profile/main.css +++ b/superset/assets/src/profile/main.less @@ -16,10 +16,12 @@ * specific language governing permissions and limitations * under the License. */ +@import "../../stylesheets/less/variables.less"; + .tab-pane { min-height: 400px; - background: white; - border: 1px solid #bbb; + background: @lightest; + border: 1px solid @gray-light; border-top: 0px; } From 925913de862f1a03f7337c38b38bcc6132c3ec03 Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Fri, 15 Nov 2019 15:16:16 -0800 Subject: [PATCH 24/28] time to add shades and tints! --- .../stylesheets/components/tabs.less | 2 +- .../assets/stylesheets/less/variables.less | 25 +++++++++++++++---- 2 files changed, 21 insertions(+), 6 deletions(-) diff --git a/superset/assets/src/dashboard/stylesheets/components/tabs.less b/superset/assets/src/dashboard/stylesheets/components/tabs.less index f2a8029f52117..6bf636c205007 100644 --- a/superset/assets/src/dashboard/stylesheets/components/tabs.less +++ b/superset/assets/src/dashboard/stylesheets/components/tabs.less @@ -90,7 +90,7 @@ height: 3px; width: 100%; bottom: 0; - background: linear-gradient(to right, #e32464, #2c2261); + background: linear-gradient(to right, @indicator-color, shade(@indicator-color, @colorstop-two)); } } diff --git a/superset/assets/stylesheets/less/variables.less b/superset/assets/stylesheets/less/variables.less index 73251745274b0..5b35ca18b7074 100644 --- a/superset/assets/stylesheets/less/variables.less +++ b/superset/assets/stylesheets/less/variables.less @@ -36,9 +36,6 @@ @lightest: #ffffff; @darkest: #000000; -/* builder component pane */ -@builder-pane-width: 374px; - /* toasts */ @pink: #E32364; @purple: #2C2261; @@ -91,7 +88,6 @@ } .badge-loop(@iterations); - /************************************************************************/ /* OPACITIES */ /* Used in LESS filters, e.g. fade(@someColorVar, @someOpacityBelow) */ @@ -99,4 +95,23 @@ @opacity-light: 10%; @opacity-medium-light: 35%; @opacity-medium-heavy: 60%; -@opacity-heavy: 80%; \ No newline at end of file +@opacity-heavy: 80%; + +/************************************************************************/ +/* SHADES & TINTS */ +/* Used in LESS filters for shadint/tinting, */ +/* e.g. shade(@someColorVar, @colorstop-one) to darken */ +/* or tint(@someColorVar, @colorstop-one) to lighten */ +/************************************************************************/ +@colorstop-one: 20%; +@colorstop-two: 40%; +@colorstop-three: 60%; +@colorstop-four: 80%; + +/************************************************************************/ +/* LAYOUT */ +/* Widths and heights of things, that might be referred to often */ +/************************************************************************/ + +/* builder component pane */ +@builder-pane-width: 374px; \ No newline at end of file From 95ca55a62d993ee67c32bc1d931f499377965ccf Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Fri, 15 Nov 2019 15:44:31 -0800 Subject: [PATCH 25/28] caught some colors in SVG that should be in LESS. --- superset/assets/src/components/FilterBadgeIcon.jsx | 2 +- superset/assets/src/components/FilterBadgeIcon.less | 3 +++ superset/assets/src/components/FilterEditIcon.jsx | 4 ++-- .../components/{FilterEditIcon.css => FilterEditIcon.less} | 5 +++++ 4 files changed, 11 insertions(+), 3 deletions(-) rename superset/assets/src/components/{FilterEditIcon.css => FilterEditIcon.less} (90%) diff --git a/superset/assets/src/components/FilterBadgeIcon.jsx b/superset/assets/src/components/FilterBadgeIcon.jsx index f99644ea66299..5ad60514b9c32 100644 --- a/superset/assets/src/components/FilterBadgeIcon.jsx +++ b/superset/assets/src/components/FilterBadgeIcon.jsx @@ -28,7 +28,7 @@ const propTypes = { export default function FilterBadgeIcon({ colorCode = '' }) { return ( - + ); } diff --git a/superset/assets/src/components/FilterBadgeIcon.less b/superset/assets/src/components/FilterBadgeIcon.less index 2866a900a2c33..a4c8e290fd7fa 100644 --- a/superset/assets/src/components/FilterBadgeIcon.less +++ b/superset/assets/src/components/FilterBadgeIcon.less @@ -24,6 +24,9 @@ background-color: @gray-light; border-radius: 2px; z-index: 10; + path { + fill: @lightest; + } } .filter-badge:hover { cursor: pointer; diff --git a/superset/assets/src/components/FilterEditIcon.jsx b/superset/assets/src/components/FilterEditIcon.jsx index 91ac04ccca723..1daa89524375d 100644 --- a/superset/assets/src/components/FilterEditIcon.jsx +++ b/superset/assets/src/components/FilterEditIcon.jsx @@ -19,7 +19,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import './FilterEditIcon.css'; +import './FilterEditIcon.less'; const propTypes = { clickIconHandler: PropTypes.func, @@ -34,7 +34,7 @@ export default function FilterEditIcon({ clickIconHandler = () => {} }) { className="filter-edit" viewBox="0 0 12 12" > - + ); } diff --git a/superset/assets/src/components/FilterEditIcon.css b/superset/assets/src/components/FilterEditIcon.less similarity index 90% rename from superset/assets/src/components/FilterEditIcon.css rename to superset/assets/src/components/FilterEditIcon.less index d3eef85466a87..973d4cf046e0d 100644 --- a/superset/assets/src/components/FilterEditIcon.css +++ b/superset/assets/src/components/FilterEditIcon.less @@ -16,6 +16,11 @@ * specific language governing permissions and limitations * under the License. */ +@import "../../stylesheets/less/variables.less"; + .filter-edit { cursor: pointer; + path { + fill: @lightest; + } } From 0ef2ad6364d326357dcc8b34212637b5fc280b17 Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Sat, 16 Nov 2019 21:31:03 -0800 Subject: [PATCH 26/28] nixing commented css --- superset/assets/src/SqlLab/main.less | 38 ---------------------------- 1 file changed, 38 deletions(-) diff --git a/superset/assets/src/SqlLab/main.less b/superset/assets/src/SqlLab/main.less index 24ff8a250d533..8145399fb5a7f 100644 --- a/superset/assets/src/SqlLab/main.less +++ b/superset/assets/src/SqlLab/main.less @@ -236,11 +236,6 @@ div.Workspace { height: 100%; padding: 10px; - // .clock { - // background-color: @warning; - // padding: 5px; - // } - .schemaPane { flex: 0 0 300px; max-width: 300px; @@ -252,39 +247,6 @@ div.Workspace { padding-left: 10px; } - // .schemaPane-enter-done, .schemaPane-exit { - // transform: translateX(0); - // } - - // .schemaPane-exit-active { - // transform: translateX(-120%); - // } - - // .schemaPane-enter-active { - // transform: translateX(0); - // max-width: 300px; - // } - - // .schemaPane-enter, .schemaPane-exit-done { - // max-width: 0; - // transform: translateX(-120%); - // overflow: hidden; - // } - - // .schemaPane-exit-done + .queryPane { - // margin-left: 0; - // } - - // .gutter { - // border-top: 1px solid @gray-light; - // border-bottom: 1px solid @gray-light; - // width: 3%; - // margin: 3px 47%; - // } - - // .gutter.gutter-vertical { - // cursor: row-resize; - // } } .SqlEditorLeftBar { From 5fb60ef766b41652f6cc5c5cd898cc478081affd Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Tue, 19 Nov 2019 10:33:15 -0800 Subject: [PATCH 27/28] deleting commented code --- superset/assets/stylesheets/superset.less | 26 ----------------------- 1 file changed, 26 deletions(-) diff --git a/superset/assets/stylesheets/superset.less b/superset/assets/stylesheets/superset.less index 43a62d82345f5..bf6bdd4e4bf7a 100644 --- a/superset/assets/stylesheets/superset.less +++ b/superset/assets/stylesheets/superset.less @@ -172,12 +172,6 @@ li.widget:hover { z-index: 1000; } -// div.widget .chart-header { -// padding-top: 8px; -// color: @almost-black; -// margin: 0 10px; -// } - .chart-header .header-text { font-size: 20px; line-height: 22px; @@ -197,26 +191,6 @@ li.widget:hover { opacity: .2; } -// div.widget { -// .slice_container { -// overflow: hidden; -// } - -// .stack-trace-container.has-trace { -// .alert-warning:hover { -// cursor: pointer; -// } -// } - -// .is-loading { -// .stack-trace-container, -// .slice_container { -// opacity: 0.5; -// position: relative; -// } -// } -// } - .navbar .alert { padding: 5px 10px; margin-top: 8px; From 8939161eb48fdd3dbd5967f6c328c5ef8b2f37b7 Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Wed, 20 Nov 2019 08:33:16 -0800 Subject: [PATCH 28/28] pulling in z-index vars lost in a conflict resolution --- superset/assets/stylesheets/less/variables.less | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/superset/assets/stylesheets/less/variables.less b/superset/assets/stylesheets/less/variables.less index 5b35ca18b7074..6cb3ba9136aa8 100644 --- a/superset/assets/stylesheets/less/variables.less +++ b/superset/assets/stylesheets/less/variables.less @@ -114,4 +114,12 @@ /************************************************************************/ /* builder component pane */ -@builder-pane-width: 374px; \ No newline at end of file +@builder-pane-width: 374px; + +/************************************************************************/ +/* Z-INDEX */ +/* Think of the site as "layers" rather than an arms race of numbers */ +/* Try to keep these to a minimum */ +/************************************************************************/ +@z-index-max: 1000; +@z-index-dropdown: 11; \ No newline at end of file