Skip to content

Moving static colors over to Less vars #8563

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mistercrunch merged 35 commits into from
Nov 20, 2019
Merged

Moving static colors over to Less vars #8563

Show file tree
Hide file tree
Changes from 26 commits
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
9725606
Sweep #1
rusackas Nov 13, 2019
bb2fd7f
moving a few more colors, fixing an import issue.
rusackas Nov 13, 2019
3d86c81
another include, another color nabbed.
rusackas Nov 13, 2019
6b7ed5d
more whittling.
rusackas Nov 14, 2019
b9698b0
moving filterbox css to less, standardizing colors in there.
rusackas Nov 14, 2019
2ad6e64
nixing the css file I meant to nab in the last commit
rusackas Nov 14, 2019
a7fc0fc
Moving the variables file to a more global/sensible (I hope?) location.
rusackas Nov 14, 2019
d57103f
FilterableTable moved from CSS to LESS, using color vars now.
rusackas Nov 15, 2019
02fe251
more whittling
rusackas Nov 15, 2019
e4c08c3
standardizing opacity stops
rusackas Nov 15, 2019
79079ad
nails more colors, removes some old (seemingly unused) css
rusackas Nov 15, 2019
82dbc44
removing more dead css
rusackas Nov 15, 2019
94eec6a
DatasourceControl moved from CSS to LESS
rusackas Nov 15, 2019
c1afe02
BootstrapSliderWrapper CSS -> LESS
rusackas Nov 15, 2019
b84e38e
reactable-pagination CSS->LESS, color-conformed
rusackas Nov 15, 2019
25e9aa3
FilterBadgeIcon CSS->LESS, conformed
rusackas Nov 15, 2019
a8d487d
deleting unused/deprecated css
rusackas Nov 15, 2019
8fe7378
welcome.css -> welcome.less (is this even being used?)
rusackas Nov 15, 2019
99eb364
main.css -> main.less, standardized
rusackas Nov 15, 2019
638146e
there were two main.css files - this should have been in the last com…
rusackas Nov 15, 2019
71bf150
explore.css -> explore.less (not used anywhere?)
rusackas Nov 15, 2019
3fb251a
sql.css -> sql.less (also not used anywhere?)
rusackas Nov 15, 2019
f71a4c3
another main.css -> main.less, standardized on colors
rusackas Nov 15, 2019
925913d
time to add shades and tints!
rusackas Nov 15, 2019
95ca55a
caught some colors in SVG that should be in LESS.
rusackas Nov 15, 2019
1943918
Merge branch 'master' into color-cleanup
rusackas Nov 16, 2019
46e9f46
Merge branch 'master' into color-cleanup
rusackas Nov 17, 2019
0ef2ad6
nixing commented css
rusackas Nov 17, 2019
b77fcc7
Merge branch 'master' into color-cleanup
rusackas Nov 19, 2019
c638027
Merge branch 'master' into color-cleanup
rusackas Nov 19, 2019
5fb60ef
deleting commented code
rusackas Nov 19, 2019
2bd07fb
Merge branch 'master' into color-cleanup
rusackas Nov 20, 2019
4ec8b83
Merge branch 'master' into color-cleanup
rusackas Nov 20, 2019
5b2b671
Merge branch 'master' into color-cleanup
rusackas Nov 20, 2019
8939161
pulling in z-index vars lost in a conflict resolution
rusackas Nov 20, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions superset/assets/src/SqlLab/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand Down
93 changes: 47 additions & 46 deletions superset/assets/src/SqlLab/main.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
* under the License.
*/
@import "../../stylesheets/less/cosmo/variables.less";
@import "../../stylesheets/less/variables.less";

body {
overflow: hidden;
Expand Down Expand Up @@ -48,7 +49,7 @@ body {
.tab-content {
height: 100%;
position: relative;
background-color: #fff;
background-color: @lightest;

> .tab-pane {
position: absolute;
Expand All @@ -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;
}
Expand Down Expand Up @@ -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 {
Expand All @@ -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;
Expand All @@ -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 {
Expand All @@ -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;
Expand Down Expand Up @@ -235,10 +236,10 @@ div.Workspace {
height: 100%;
padding: 10px;

.clock {
background-color: orange;
padding: 5px;
}
// .clock {
// background-color: @warning;
// padding: 5px;
// }

.schemaPane {
flex: 0 0 300px;
Expand All @@ -251,39 +252,39 @@ div.Workspace {
padding-left: 10px;
}

.schemaPane-enter-done, .schemaPane-exit {
transform: translateX(0);
}
// .schemaPane-enter-done, .schemaPane-exit {
// transform: translateX(0);
// }

.schemaPane-exit-active {
transform: translateX(-120%);
}
// .schemaPane-exit-active {
// transform: translateX(-120%);
// }

.schemaPane-enter-active {
transform: translateX(0);
max-width: 300px;
}
// .schemaPane-enter-active {
// transform: translateX(0);
// max-width: 300px;
// }

.schemaPane-enter, .schemaPane-exit-done {
max-width: 0;
transform: translateX(-120%);
overflow: hidden;
}
// .schemaPane-enter, .schemaPane-exit-done {
// max-width: 0;
// transform: translateX(-120%);
// overflow: hidden;
// }

.schemaPane-exit-done + .queryPane {
margin-left: 0;
}
// .schemaPane-exit-done + .queryPane {
// margin-left: 0;
// }

.gutter {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
width: 3%;
margin: 3px 47%;
}
// .gutter {
// border-top: 1px solid @gray-light;
// border-bottom: 1px solid @gray-light;
// width: 3%;
// margin: 3px 47%;
// }

.gutter.gutter-vertical {
cursor: row-resize;
}
// .gutter.gutter-vertical {
// cursor: row-resize;
// }
}

.SqlEditorLeftBar {
Expand All @@ -292,7 +293,7 @@ div.Workspace {
flex-direction: column;

.divider {
border-bottom: 1px solid #f2f2f2;
border-bottom: 1px solid @gray-bg;
margin: 15px 0;
}

Expand Down Expand Up @@ -325,7 +326,7 @@ div.tablePopover:hover {
}

.ace_editor {
border: 1px solid #ccc;
border: 1px solid @gray-light;
}

.Select-menu-outer {
Expand All @@ -343,7 +344,7 @@ div.tablePopover:hover {
}

.ace_scroller {
background-color: #f4f4f4;
background-color: @gray-bg;
}

.TableElement {
Expand Down Expand Up @@ -383,7 +384,7 @@ a.Link {
background: transparent;
border: none;
text-align: left;
color: white;
color: @lightest;
font-size: 10px;
}
.tooltip-inner {
Expand Down
2 changes: 1 addition & 1 deletion superset/assets/src/components/BootstrapSliderWrapper.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down
6 changes: 4 additions & 2 deletions ...src/components/BootstrapSliderWrapper.css → ...rc/components/BootstrapSliderWrapper.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,13 @@
* specific language governing permissions and limitations
* under the License.
*/
@import "../../stylesheets/less/variables.less";

.BootstrapSliderWrapper .slider-selection {
background: #efefef;
background: @gray-bg;
}

.BootstrapSliderWrapper .slider-handle {
background: #b3b3b3;
background: @gray-light;
}

4 changes: 2 additions & 2 deletions superset/assets/src/components/FilterBadgeIcon.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
import React from 'react';
import PropTypes from 'prop-types';

import './FilterBadgeIcon.css';
import './FilterBadgeIcon.less';

const propTypes = {
colorCode: PropTypes.string,
Expand All @@ -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>
);
}
Expand Down
11 changes: 8 additions & 3 deletions ...assets/src/components/FilterBadgeIcon.css → ...ssets/src/components/FilterBadgeIcon.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
4 changes: 2 additions & 2 deletions superset/assets/src/components/FilterEditIcon.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
import React from 'react';
import PropTypes from 'prop-types';

import './FilterEditIcon.css';
import './FilterEditIcon.less';

const propTypes = {
clickIconHandler: PropTypes.func,
Expand All @@ -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>
);
}
Expand Down
5 changes: 5 additions & 0 deletions .../assets/src/components/FilterEditIcon.css → ...assets/src/components/FilterEditIcon.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
15 changes: 9 additions & 6 deletions ...FilterableTable/FilterableTableStyles.css → ...ilterableTable/FilterableTableStyles.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion superset/assets/src/components/TableLoader.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Loading