From 6919ee4ef419ac9fd90d11313ddd9e0dc3cbfb45 Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Wed, 20 Nov 2019 09:33:29 -0800 Subject: [PATCH] Moving static colors over to Less vars (#8563) * Sweep #1 * moving a few more colors, fixing an import issue. * another include, another color nabbed. * more whittling. * moving filterbox css to less, standardizing colors in there. * nixing the css file I meant to nab in the last commit * Moving the variables file to a more global/sensible (I hope?) location. * FilterableTable moved from CSS to LESS, using color vars now. * more whittling * standardizing opacity stops * nails more colors, removes some old (seemingly unused) css * removing more dead css * DatasourceControl moved from CSS to LESS * BootstrapSliderWrapper CSS -> LESS * reactable-pagination CSS->LESS, color-conformed * FilterBadgeIcon CSS->LESS, conformed * deleting unused/deprecated css * welcome.css -> welcome.less (is this even being used?) * main.css -> main.less, standardized * there were two main.css files - this should have been in the last commit. * explore.css -> explore.less (not used anywhere?) * sql.css -> sql.less (also not used anywhere?) * another main.css -> main.less, standardized on colors * time to add shades and tints! * caught some colors in SVG that should be in LESS. * nixing commented css * deleting commented code * pulling in z-index vars lost in a conflict resolution --- superset/assets/src/SqlLab/App.jsx | 4 +- superset/assets/src/SqlLab/main.less | 72 ++----- .../src/components/BootstrapSliderWrapper.jsx | 2 +- ...rapper.css => BootstrapSliderWrapper.less} | 6 +- .../assets/src/components/FilterBadgeIcon.jsx | 4 +- ...lterBadgeIcon.css => FilterBadgeIcon.less} | 11 +- .../assets/src/components/FilterEditIcon.jsx | 4 +- ...FilterEditIcon.css => FilterEditIcon.less} | 5 + ...eStyles.css => FilterableTableStyles.less} | 15 +- .../assets/src/components/TableLoader.jsx | 2 +- .../stylesheets/builder-sidepane.less | 8 +- .../src/dashboard/stylesheets/builder.less | 10 +- .../stylesheets/components/chart.less | 4 +- .../stylesheets/components/new-component.less | 4 +- .../stylesheets/components/tabs.less | 6 +- .../src/dashboard/stylesheets/dashboard.less | 6 +- .../assets/src/dashboard/stylesheets/dnd.less | 2 +- .../stylesheets/filter-indicator-tooltip.less | 4 +- .../stylesheets/filter-indicator.less | 8 +- .../src/dashboard/stylesheets/grid.less | 4 +- .../src/dashboard/stylesheets/hover-menu.less | 4 +- .../src/dashboard/stylesheets/index.less | 2 +- .../dashboard/stylesheets/popover-menu.less | 6 +- .../src/dashboard/stylesheets/variables.less | 65 ------ .../src/datasource/DatasourceEditor.jsx | 2 +- .../src/datasource/{main.css => main.less} | 4 +- superset/assets/src/explore/App.jsx | 4 +- .../components/controls/DatasourceControl.jsx | 2 +- ...urceControl.css => DatasourceControl.less} | 4 +- .../src/explore/{main.css => main.less} | 16 +- .../src/messageToasts/stylesheets/toast.less | 6 +- superset/assets/src/profile/App.jsx | 2 +- .../src/profile/{main.css => main.less} | 6 +- .../visualizations/FilterBox/FilterBox.less | 14 +- .../assets/src/welcome/DashboardTable.jsx | 2 +- .../stylesheets/dashboard_deprecated.css | 199 ------------------ .../stylesheets/{explore.css => explore.less} | 4 +- .../assets/stylesheets/less/variables.less | 125 +++++++++++ .../stylesheets/react-select/select.less | 6 +- ...gination.css => reactable-pagination.less} | 20 +- .../assets/stylesheets/{sql.css => sql.less} | 6 +- superset/assets/stylesheets/superset.less | 70 ++---- .../stylesheets/{welcome.css => welcome.less} | 4 +- 43 files changed, 292 insertions(+), 462 deletions(-) rename superset/assets/src/components/{BootstrapSliderWrapper.css => BootstrapSliderWrapper.less} (89%) rename superset/assets/src/components/{FilterBadgeIcon.css => FilterBadgeIcon.less} (84%) rename superset/assets/src/components/{FilterEditIcon.css => FilterEditIcon.less} (90%) rename superset/assets/src/components/FilterableTable/{FilterableTableStyles.css => FilterableTableStyles.less} (90%) delete mode 100644 superset/assets/src/dashboard/stylesheets/variables.less rename superset/assets/src/datasource/{main.css => main.less} (93%) rename superset/assets/src/explore/components/controls/{DatasourceControl.css => DatasourceControl.less} (93%) rename superset/assets/src/explore/{main.css => main.less} (95%) rename superset/assets/src/profile/{main.css => main.less} (89%) delete mode 100644 superset/assets/stylesheets/dashboard_deprecated.css rename superset/assets/stylesheets/{explore.css => explore.less} (93%) create mode 100644 superset/assets/stylesheets/less/variables.less rename superset/assets/stylesheets/{reactable-pagination.css => reactable-pagination.less} (83%) rename superset/assets/stylesheets/{sql.css => sql.less} (92%) rename superset/assets/stylesheets/{welcome.css => welcome.less} (93%) diff --git a/superset/assets/src/SqlLab/App.jsx b/superset/assets/src/SqlLab/App.jsx index 59e40b6b26..058e17dd95 100644 --- a/superset/assets/src/SqlLab/App.jsx +++ b/superset/assets/src/SqlLab/App.jsx @@ -32,8 +32,8 @@ import { BYTES_PER_CHAR, KB_STORAGE } from './constants'; import setupApp from '../setup/setupApp'; import './main.less'; -import '../../stylesheets/reactable-pagination.css'; -import '../components/FilterableTable/FilterableTableStyles.css'; +import '../../stylesheets/reactable-pagination.less'; +import '../components/FilterableTable/FilterableTableStyles.less'; setupApp(); diff --git a/superset/assets/src/SqlLab/main.less b/superset/assets/src/SqlLab/main.less index a6327a34fe..670e254dc8 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 "../../stylesheets/less/variables.less"; body { overflow: hidden; @@ -48,7 +49,7 @@ body { .tab-content { height: 100%; position: relative; - background-color: #fff; + background-color: @lightest; > .tab-pane { position: absolute; @@ -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, @opacity-light); margin-top: 2px; padding: 4px; } @@ -117,10 +118,10 @@ div.Workspace { } .sql-toolbar { padding: 10px; - background-color: #e8e8e8; + background-color: @gray-bg; display: flex; justify-content: space-between; - border: 1px solid #ccc; + border: 1px solid @gray-light; border-top: 0; form { @@ -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; @@ -149,14 +150,14 @@ div.Workspace { font-weight: bold; } .running { - background-color: lime; - color: black; + background-color: fade(@success, @opacity-heavy); + color: @darkest; } .success { - background-color: #4ac15f; + background-color: @success; } .failed { - background-color: red; + background-color: @error; } .handle { @@ -167,9 +168,9 @@ div.Workspace { position: absolute; width: 300px; opacity: 0.85; - border: 1px solid #aaa; + border: 1px solid @gray-heading; max-height: 600px; - box-shadow: rgba(0, 0, 0, 0.8) 5px 5px 25px; + box-shadow: fade(@darkest, @opacity-heavy) 5px 5px 25px; } .SqlLab pre { padding: 0px !important; @@ -235,11 +236,6 @@ div.Workspace { height: 100%; padding: 10px; - .clock { - background-color: orange; - padding: 5px; - } - .schemaPane { flex: 0 0 300px; max-width: 300px; @@ -250,42 +246,6 @@ div.Workspace { flex: 1 1 auto; 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 #ccc; - border-bottom: 1px solid #ccc; - width: 3%; - margin: 3px 47%; - } - - .gutter.gutter-vertical { - cursor: row-resize; - } } .SqlEditorLeftBar { @@ -294,7 +254,7 @@ div.Workspace { flex-direction: column; .divider { - border-bottom: 1px solid #f2f2f2; + border-bottom: 1px solid @gray-bg; margin: 15px 0; } @@ -327,7 +287,7 @@ div.tablePopover:hover { } .ace_editor { - border: 1px solid #ccc; + border: 1px solid @gray-light; } .Select-menu-outer { @@ -345,7 +305,7 @@ div.tablePopover:hover { } .ace_scroller { - background-color: #f4f4f4; + background-color: @gray-bg; } .TableElement { @@ -385,7 +345,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/components/BootstrapSliderWrapper.jsx b/superset/assets/src/components/BootstrapSliderWrapper.jsx index 51698b5dfa..5d2a5c8da1 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 dc54046e4c..b103ff4da9 100644 --- a/superset/assets/src/components/BootstrapSliderWrapper.css +++ b/superset/assets/src/components/BootstrapSliderWrapper.less @@ -16,10 +16,12 @@ * 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; } diff --git a/superset/assets/src/components/FilterBadgeIcon.jsx b/superset/assets/src/components/FilterBadgeIcon.jsx index e523aa28df..5ad60514b9 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, @@ -28,7 +28,7 @@ const propTypes = { export default function FilterBadgeIcon({ colorCode = '' }) { return ( - + ); } diff --git a/superset/assets/src/components/FilterBadgeIcon.css b/superset/assets/src/components/FilterBadgeIcon.less similarity index 84% rename from superset/assets/src/components/FilterBadgeIcon.css rename to superset/assets/src/components/FilterBadgeIcon.less index 2ccbf2a2da..b31848ffd7 100644 --- a/superset/assets/src/components/FilterBadgeIcon.css +++ b/superset/assets/src/components/FilterBadgeIcon.less @@ -16,19 +16,24 @@ * 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; + path { + fill: @lightest; + } } .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; } diff --git a/superset/assets/src/components/FilterEditIcon.jsx b/superset/assets/src/components/FilterEditIcon.jsx index 91ac04ccca..1daa895243 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 1bd58960ef..dd8195c41c 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; + } } 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 4bf21072cf..dc567273e2 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; diff --git a/superset/assets/src/components/TableLoader.jsx b/superset/assets/src/components/TableLoader.jsx index 0545fef55a..d38be49d07 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/dashboard/stylesheets/builder-sidepane.less b/superset/assets/src/dashboard/stylesheets/builder-sidepane.less index 6bf6f6fafd..1ae4a6f992 100644 --- a/superset/assets/src/dashboard/stylesheets/builder-sidepane.less +++ b/superset/assets/src/dashboard/stylesheets/builder-sidepane.less @@ -50,12 +50,12 @@ 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, @opacity-light); } .slider-container { position: absolute; - background: white; + background: @lightest; width: @builder-pane-width * 2; height: 100vh; display: flex; @@ -97,7 +97,7 @@ margin: 0 16px 16px 16px; position: relative; cursor: move; - background: rgba(255, 255, 255, 0.4); + background: fade(@lightest, @opacity-medium-light); &:hover { background: @gray-bg; @@ -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 a4347df366..fbf0ab93fc 100644 --- a/superset/assets/src/dashboard/stylesheets/builder.less +++ b/superset/assets/src/dashboard/stylesheets/builder.less @@ -22,13 +22,13 @@ } .dashboard-header { - background: white; + background: @lightest; display: flex; flex-direction: row; 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, @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 rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 4px 0 fade(@darkest, @opacity-light); padding-left: 8px; /* note this is added to tab-level padding, to match header */ } @@ -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 f4df7819db..1d03578e72 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; @@ -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/components/new-component.less b/superset/assets/src/dashboard/stylesheets/components/new-component.less index 0695b9099a..bd33746a95 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 4db076d613..6bf636c205 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 { @@ -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/src/dashboard/stylesheets/dashboard.less b/superset/assets/src/dashboard/stylesheets/dashboard.less index cdf11f7488..3f3a300a62 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 { @@ -242,9 +242,9 @@ body { } i.danger { - color: red; + color: @danger; } i.warning { - color: orange; + color: @warning; } diff --git a/superset/assets/src/dashboard/stylesheets/dnd.less b/superset/assets/src/dashboard/stylesheets/dnd.less index 9c86abcaff..f234fda688 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 b5932415f9..bc8473ecda 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/filter-indicator.less b/superset/assets/src/dashboard/stylesheets/filter-indicator.less index 9285292250..462aae9798 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; @@ -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: @shadow-highlight -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/grid.less b/superset/assets/src/dashboard/stylesheets/grid.less index 270f8ae370..f03b4e4612 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/src/dashboard/stylesheets/hover-menu.less b/superset/assets/src/dashboard/stylesheets/hover-menu.less index 87e8592718..729bf1efa0 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/index.less b/superset/assets/src/dashboard/stylesheets/index.less index 8ebce2555b..80fbe061a7 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/dashboard/stylesheets/popover-menu.less b/superset/assets/src/dashboard/stylesheets/popover-menu.less index ab403acc72..ec15daf167 100644 --- a/superset/assets/src/dashboard/stylesheets/popover-menu.less +++ b/superset/assets/src/dashboard/stylesheets/popover-menu.less @@ -49,8 +49,8 @@ top: -42px; height: 40px; padding: 0 16px; - background: white; - box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2); + background: @lightest; + box-shadow: 0 1px 2px 1px fade(@darkest, @opacity-medium-light); font-size: 14px; cursor: default; z-index: 1000; @@ -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 deleted file mode 100644 index 8e3f82766e..0000000000 --- a/superset/assets/src/dashboard/stylesheets/variables.less +++ /dev/null @@ -1,65 +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. - */ -@indicator-color: #44c0ff; - -@almost-black: #263238; -@gray-dark: #484848; -@gray: #879399; -@gray-light: #cfd8dc; -@gray-bg: #f5f5f5; -@gray-heading: #a3a3a3; -@menu-hover: #f2f3f5; - -/* builder component pane */ -@builder-pane-width: 374px; - -/* toasts */ -@pink: #e32364; -@purple: #2c2261; - -@success: #00bfa5; -@warning: #ffab00; -@danger: @pink; - -/* filter indicators */ -/* make sure be consistent with FILTER_COLORS_COUNT in - dashboardFiltersColorMap.js -*/ -@badge-colors: #228be6, #40c057, #fab005, #f76707, #e64980, #15aabf, #7950f2, #fa5252, #74b816, - #12b886, #1864ab, #2b8a3e, #e67700, #d9480f, #a61e4d, #0b7285, #5f3dc4, #c92a2a, #5c940d, #087f5b; - -@iterations: length(@badge-colors); -.badge-loop (@i) when (@i > 0) { - .filter-badge.badge-@{i}, - .active .color-bar.badge-@{i}, - .dashboard-filter-indicators-container:hover .color-bar.badge-@{i}, - .dashboard-component-chart-holder:hover .color-bar.badge-@{i} { - @value: extract(@badge-colors, @i); - background-color: @value; - } - .badge-loop(@i - 1); -} -.badge-loop (@iterations); - - - -// z-index values: -// use these variables, over magic numbers, to specify the stack ordering of elements -@z-index-max: 1000; -@z-index-dropdown: 11; diff --git a/superset/assets/src/datasource/DatasourceEditor.jsx b/superset/assets/src/datasource/DatasourceEditor.jsx index 4ef034c6f1..7e48075517 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 b9b78c43ac..9959a92a68 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 c0fdcf5192..23922c652e 100644 --- a/superset/assets/src/explore/App.jsx +++ b/superset/assets/src/explore/App.jsx @@ -32,8 +32,8 @@ import rootReducer from './reducers/index'; import setupApp from '../setup/setupApp'; import setupPlugins from '../setup/setupPlugins'; -import './main.css'; -import '../../stylesheets/reactable-pagination.css'; +import './main.less'; +import '../../stylesheets/reactable-pagination.less'; setupApp(); setupPlugins(); diff --git a/superset/assets/src/explore/components/controls/DatasourceControl.jsx b/superset/assets/src/explore/components/controls/DatasourceControl.jsx index a2a35c2271..c9cb86679e 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 87ea089ef1..b1f8db0658 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; } 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 d93e755e7b..e915562ec0 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; @@ -190,18 +192,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; } @@ -215,8 +217,8 @@ .label-btn:hover, .label-btn-label:hover { - background-color: #667177; - color: #fff; + background-color: @gray-dark; + color: @lightest; } .label-btn-label { @@ -242,7 +244,7 @@ } .custom-sql-disabled-message { - color: gray; + color: @gray; font-size: 11px; text-align: center; margin-top: 60px; diff --git a/superset/assets/src/messageToasts/stylesheets/toast.less b/superset/assets/src/messageToasts/stylesheets/toast.less index bd1e80dacf..08a8fa5292 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; @@ -28,12 +28,12 @@ } .toast { - background: white; + background: @lightest; color: @almost-black; 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, @opacity-medium-light); will-change: transform, opacity; transform: translateY(-100%); transition: transform 0.3s, opacity 0.3s; diff --git a/superset/assets/src/profile/App.jsx b/superset/assets/src/profile/App.jsx index 878a07711c..1e3d6dd93d 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(); 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 ce0c2d7101..70a1721ae2 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; } diff --git a/superset/assets/src/visualizations/FilterBox/FilterBox.less b/superset/assets/src/visualizations/FilterBox/FilterBox.less index 9f332cf479..304ea0a8e6 100644 --- a/superset/assets/src/visualizations/FilterBox/FilterBox.less +++ b/superset/assets/src/visualizations/FilterBox/FilterBox.less @@ -16,11 +16,11 @@ * 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; - border: 1px superset black; + border: 1px superset @darkest; } .dashboard .filter_box .slice_container > div:not(.alert) { @@ -29,19 +29,19 @@ .input-inline { float: left; - display: inline-block; + // 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: black; + color: @darkest; border-width: 1px; border-style: solid; - border-color: #666; + border-color: @gray; } ul.select2-results div.filter_box { - color: black; + color: @darkest; border-style: solid; border-width: 1px; border-color: transparent; diff --git a/superset/assets/src/welcome/DashboardTable.jsx b/superset/assets/src/welcome/DashboardTable.jsx index a3d689aec9..d510730eb3 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/dashboard_deprecated.css b/superset/assets/stylesheets/dashboard_deprecated.css deleted file mode 100644 index 57d0f4fbb9..0000000000 --- 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; -} 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 f1131a1a24..de48b89897 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 { diff --git a/superset/assets/stylesheets/less/variables.less b/superset/assets/stylesheets/less/variables.less new file mode 100644 index 0000000000..6cb3ba9136 --- /dev/null +++ b/superset/assets/stylesheets/less/variables.less @@ -0,0 +1,125 @@ +/** + * 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. + */ + +/************************************************************************/ +/* 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; +@gray-dark: #484848; +@gray: #879399; +@gray-light: #CFD8DC; +@gray-bg: #f5f5f5; +@gray-heading: #A3A3A3; +@menu-hover: #F2F3F5; +@lightest: #ffffff; +@darkest: #000000; + +/* toasts */ +@pink: #E32364; +@purple: #2C2261; + +/* status colors */ +@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 +*/ +@badge-colors: + #228be6, + #40c057, + #fab005, + #f76707, + #e64980, + #15aabf, + #7950f2, + #fa5252, + #74b816, + #12b886, + #1864ab, + #2b8a3e, + #e67700, + #d9480f, + #a61e4d, + #0b7285, + #5f3dc4, + #c92a2a, + #5c940d, + #087f5b; + +@iterations: length(@badge-colors); +.badge-loop (@i) when (@i > 0) { + .filter-badge.badge-@{i}, + .active .color-bar.badge-@{i}, + .dashboard-filter-indicators-container:hover .color-bar.badge-@{i}, + .dashboard-component-chart-holder:hover .color-bar.badge-@{i} { + @value: extract(@badge-colors, @i); + background-color: @value; + } + .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%; + +/************************************************************************/ +/* 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; + +/************************************************************************/ +/* 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 diff --git a/superset/assets/stylesheets/react-select/select.less b/superset/assets/stylesheets/react-select/select.less index 4c947969dd..11e0199769 100644 --- a/superset/assets/stylesheets/react-select/select.less +++ b/superset/assets/stylesheets/react-select/select.less @@ -16,8 +16,10 @@ * specific language governing permissions and limitations * under the License. */ +@import "../../stylesheets/less/variables.less"; + @import "~react-select/less/select.less"; -@select-primary-color: black; +@select-primary-color: @darkest; @select-input-height: 30px; // imports @@ -55,7 +57,7 @@ padding: 0 .5rem; } .VirtualizedSelectFocusedOption { - background-color: rgba(0, 0, 0, 0.1); + background-color: fade(@darkest, @opacity-light); } .VirtualizedSelectFocusedOption:hover { cursor: pointer; 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 497b44a513..28244df35d 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; } 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 ab3f83aa7c..ca7e56b2da 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; diff --git a/superset/assets/stylesheets/superset.less b/superset/assets/stylesheets/superset.less index fd46ad561b..5c666fd190 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 "./less/variables.less"; @datasource-sql-expression-width: 450px; @@ -26,7 +28,7 @@ } .alert.alert-danger > .debugger { - color: red; + color: @error; } .modal-dialog { @@ -41,11 +43,11 @@ } input.form-control { - background-color: white; + background-color: @lightest; } .chart-header a.danger { - color: red; + color: @error; } .disabledButton { @@ -64,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; } @@ -109,7 +111,7 @@ input[type="checkbox"] { .notbtn { cursor: default; box-shadow: none; - border: 1px solid #ccc; + border: 1px solid @gray; } hr { @@ -118,7 +120,7 @@ hr { } span.title-block { - background-color: #EEE; + background-color: @gray-bg; border-radius: 4px; padding: 6px 12px; margin: 0px 10px; @@ -165,7 +167,7 @@ img.loading { } img.viz-thumb-option { width: 100px; - border: 1px solid gray; + border: 1px solid @gray; margin-right: 5px; border-radius: 5px; } @@ -178,17 +180,11 @@ li.widget:hover { z-index: 1000; } -div.widget .chart-header { - padding-top: 8px; - color: #333; - margin: 0 10px; -} - .chart-header .header-text { 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; @@ -203,26 +199,6 @@ 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; - } - } -} - .navbar .alert { padding: 5px 10px; margin-top: 8px; @@ -255,12 +231,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; } @@ -391,7 +367,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 **/ @@ -470,19 +446,19 @@ 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 #b3b3b3; -} +// .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; 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, @opacity-light); } iframe { @@ -564,7 +540,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; } @@ -575,7 +551,7 @@ tr.reactable-column-header th.reactable-header-sortable { &, &:hover, &:active { - color: #263238; + color: @almost-black; } } } 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 3a86cf9e4f..cb51649d39 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;