mirror of https://github.com/apache/superset.git
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
This commit is contained in:
Evan Rusackas
Maxime Beauchemin
parent
e490414484
commit
6919ee4ef4
|
|
@ -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();
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 (
|
||||
<svg className={`filter-badge ${colorCode}`} width="20" height="20" viewBox="0 0 20 20">
|
||||
<path d="M4 5H16V7H4V5ZM6 9H14V11H6V9ZM12 13H8V15H12V13Z" fill="#fff" />
|
||||
<path d="M4 5H16V7H4V5ZM6 9H14V11H6V9ZM12 13H8V15H12V13Z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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"
|
||||
>
|
||||
<path d="M11.8049 1.75476C12.0649 2.01472 12.0649 2.43466 11.8049 2.69463L10.5851 3.91446L8.08547 1.4148L9.3053 0.194973C9.56526 -0.064991 9.9852 -0.064991 10.2452 0.194973L11.8049 1.75476ZM0 12V9.50035L7.37231 2.12804L9.87196 4.62769L2.49965 12H0Z" fill="#fff" />
|
||||
<path d="M11.8049 1.75476C12.0649 2.01472 12.0649 2.43466 11.8049 2.69463L10.5851 3.91446L8.08547 1.4148L9.3053 0.194973C9.56526 -0.064991 9.9852 -0.064991 10.2452 0.194973L11.8049 1.75476ZM0 12V9.50035L7.37231 2.12804L9.87196 4.62769L2.49965 12H0Z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@
|
|||
|
||||
.drag-handle-dot:after {
|
||||
content: '';
|
||||
background: #aaa;
|
||||
background: @gray;
|
||||
float: left;
|
||||
height: 2px;
|
||||
margin: -1px;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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) => <CheckboxControl value={d} onChange={onChange} />;
|
||||
const DATA_TYPES = ['STRING', 'NUMERIC', 'DATETIME'];
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
Loading…
Reference in New Issue