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;