This is an automated email from the ASF dual-hosted git repository.
maximebeauchemin pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
The following commit(s) were added to refs/heads/master by this push:
new 03d5a82 Using Prettier for CSS (#8606)
03d5a82 is described below
commit 03d5a82137b67fd28557ec3914d32b7abf9653b4
Author: Evan Rusackas <[email protected]>
AuthorDate: Tue Nov 19 22:33:38 2019 -0800
Using Prettier for CSS (#8606)
* Adding clean-css npm script, and calling it in the lint-fix script for
good measure.
* resulting cleanup
---
superset/assets/package.json | 3 +-
superset/assets/src/CRUD/styles.css | 13 +-
superset/assets/src/SqlLab/main.less | 486 +++++++++++----------
.../src/components/BootstrapSliderWrapper.css | 5 +-
superset/assets/src/components/FilterBadgeIcon.css | 16 +-
superset/assets/src/components/FilterEditIcon.css | 2 +-
superset/assets/src/datasource/main.css | 10 +-
superset/assets/src/explore/main.css | 26 +-
superset/assets/src/profile/main.css | 14 +-
superset/assets/src/showSavedQuery/index.css | 8 +-
10 files changed, 298 insertions(+), 285 deletions(-)
diff --git a/superset/assets/package.json b/superset/assets/package.json
index 02bc906..359e44f 100644
--- a/superset/assets/package.json
+++ b/superset/assets/package.json
@@ -16,7 +16,8 @@
"prod": "node --max_old_space_size=4096 webpack --mode=production --colors
--progress",
"build": "cross-env NODE_OPTIONS=--max_old_space_size=8192
NODE_ENV=production webpack --mode=production --colors --progress",
"lint": "eslint --ignore-path=.eslintignore --ext .js,.jsx . && tslint -c
tslint.json ./{src,spec}/**/*.ts{,x}",
- "lint-fix": "eslint --fix --ignore-path=.eslintignore --ext .js,.jsx . &&
tslint -c tslint.json --fix ./{src,spec}/**/*.ts{,x}",
+ "lint-fix": "eslint --fix --ignore-path=.eslintignore --ext .js,.jsx . &&
tslint -c tslint.json --fix ./{src,spec}/**/*.ts{,x} && npm run clean-css",
+ "clean-css": "prettier --write src/**/*.{css,less,sass,scss}",
"cypress": "cypress",
"cypress-debug": "cypress open --config watchForFileChanges=true",
"install-cypress": "npm install [email protected]"
diff --git a/superset/assets/src/CRUD/styles.css
b/superset/assets/src/CRUD/styles.css
index bcb0f2c..6b0484b 100644
--- a/superset/assets/src/CRUD/styles.css
+++ b/superset/assets/src/CRUD/styles.css
@@ -16,16 +16,17 @@
* specific language governing permissions and limitations
* under the License.
*/
-.CRUD i.fa-caret-down, i.fa-caret-up {
- width: '5px';
+.CRUD i.fa-caret-down,
+i.fa-caret-up {
+ width: "5px";
}
.CRUD td.expanded {
- border-top: '0px';
- padding: '0px';
+ border-top: "0px";
+ padding: "0px";
}
.CRUD .frame {
- border: '1px solid #AAA';
+ border: "1px solid #AAA";
border-radius: 5;
padding: 10;
- background: '#F4F4F4';
+ background: "#F4F4F4";
}
diff --git a/superset/assets/src/SqlLab/main.less
b/superset/assets/src/SqlLab/main.less
index b85aad9..a6327a3 100644
--- a/superset/assets/src/SqlLab/main.less
+++ b/superset/assets/src/SqlLab/main.less
@@ -19,309 +19,311 @@
@import "../../stylesheets/less/cosmo/variables.less";
body {
- overflow: hidden;
+ overflow: hidden;
}
.inlineBlock {
- display: inline-block;
+ display: inline-block;
}
.valignTop {
- vertical-align: top;
+ vertical-align: top;
}
.inline {
- display: inline;
+ display: inline;
}
.nopadding {
- padding: 0px;
+ padding: 0px;
}
.loading {
- width: 50px;
- margin-top: 15px;
+ width: 50px;
+ margin-top: 15px;
}
.pane-cell {
- padding: 10px;
- overflow: auto;
- width: 100%;
- height: 100%;
+ padding: 10px;
+ overflow: auto;
+ width: 100%;
+ height: 100%;
}
.tab-content {
- height: 100%;
- position: relative;
- background-color: #fff;
-
- > .tab-pane {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- }
+ height: 100%;
+ position: relative;
+ background-color: #fff;
+
+ > .tab-pane {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ }
}
.Workspace .btn-sm {
- box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
- margin-top: 2px;
- padding: 4px;
+ box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
+ margin-top: 2px;
+ padding: 4px;
}
.Workspace hr {
- margin-top: 10px;
- margin-bottom: 10px;
+ margin-top: 10px;
+ margin-bottom: 10px;
}
div.Workspace {
- height: 100%;
- margin: 0px;
+ height: 100%;
+ margin: 0px;
}
.padded {
- padding: 10px;
+ padding: 10px;
}
.p-t-10 {
- padding-top: 10px;
+ padding-top: 10px;
}
.p-t-5 {
- padding-top: 5px;
+ padding-top: 5px;
}
.m-r-5 {
- margin-right: 5px;
+ margin-right: 5px;
}
.m-r-3 {
- margin-right: 3px;
+ margin-right: 3px;
}
.m-l-1 {
- margin-left: 1px;
+ margin-left: 1px;
}
.m-l-2 {
- margin-left: 2px;
+ margin-left: 2px;
}
.m-r-10 {
- margin-right: 10px;
+ margin-right: 10px;
}
.m-l-10 {
- margin-left: 10px;
+ margin-left: 10px;
}
.m-l-5 {
- margin-left: 5px;
+ margin-left: 5px;
}
.m-b-10 {
- margin-bottom: 10px;
+ margin-bottom: 10px;
}
.m-t-5 {
- margin-top: 5px;
+ margin-top: 5px;
}
.m-t-10 {
- margin-top: 10px;
+ margin-top: 10px;
}
.p-t-10 {
- padding-top: 10px;
+ padding-top: 10px;
}
.sql-toolbar {
- padding: 10px;
- background-color: #e8e8e8;
- display: flex;
- justify-content: space-between;
- border: 1px solid #ccc;
- border-top: 0;
+ padding: 10px;
+ background-color: #e8e8e8;
+ display: flex;
+ justify-content: space-between;
+ border: 1px solid #ccc;
+ border-top: 0;
- form {
- margin-block-end: 0;
- }
+ form {
+ margin-block-end: 0;
+ }
}
.no-shadow {
- box-shadow: none;
- background-color: transparent;
+ box-shadow: none;
+ background-color: transparent;
}
.pane-west {
- height: 100%;
- overflow: auto;
+ height: 100%;
+ overflow: auto;
}
.circle {
- border-radius: 50%;
- width: 10px;
- height: 10px;
- display: inline-block;
- background-color: #ccc;
- line-height: 8px;
- text-align: center;
- vertical-align: middle;
- font-size: 15px;
- margin-top: -3px;
- font-weight: bold;
+ border-radius: 50%;
+ width: 10px;
+ height: 10px;
+ display: inline-block;
+ background-color: #ccc;
+ line-height: 8px;
+ text-align: center;
+ vertical-align: middle;
+ font-size: 15px;
+ margin-top: -3px;
+ font-weight: bold;
}
.running {
- background-color: lime;
- color: black;
+ background-color: lime;
+ color: black;
}
.success {
- background-color: #4AC15F;
+ background-color: #4ac15f;
}
.failed {
- background-color: red;
+ background-color: red;
}
.handle {
- cursor: move;
+ cursor: move;
}
.window {
- z-index: 1000;
- position: absolute;
- width: 300px;
- opacity: 0.85;
- border: 1px solid #AAA;
- max-height: 600px;
- box-shadow: rgba(0, 0, 0, 0.8) 5px 5px 25px
+ z-index: 1000;
+ position: absolute;
+ width: 300px;
+ opacity: 0.85;
+ border: 1px solid #aaa;
+ max-height: 600px;
+ box-shadow: rgba(0, 0, 0, 0.8) 5px 5px 25px;
}
.SqlLab pre {
- padding: 0px !important;
- margin: 0px;
- border: none;
- font-size: 12px;
- background-color: transparent !important;
+ padding: 0px !important;
+ margin: 0px;
+ border: none;
+ font-size: 12px;
+ background-color: transparent !important;
}
#a11y-query-editor-tabs {
- height: 100%;
- display: flex;
- flex-direction: column;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
}
.SqlLab {
- position: absolute;
- top: 0px;
- right: 0px;
- bottom: 0px;
- left: 0px;
- padding: 0 10px;
-
- #brace-editor {
- height: calc(100% - 51px);
- }
-
- .ace_content {
- height: 100%;
- }
+ position: absolute;
+ top: 0px;
+ right: 0px;
+ bottom: 0px;
+ left: 0px;
+ padding: 0 10px;
+
+ #brace-editor {
+ height: calc(100% - 51px);
+ }
+
+ .ace_content {
+ height: 100%;
+ }
- .SouthPane {
- height: 100%;
- }
+ .SouthPane {
+ height: 100%;
+ }
- .scrollbar-container {
- overflow: auto;
- }
+ .scrollbar-container {
+ overflow: auto;
+ }
}
.SqlEditorTabs li {
- a:focus {
- outline: 0;
- }
+ a:focus {
+ outline: 0;
+ }
- .ddbtn-tab {
- font-size: inherit;
- font-weight: bold;
+ .ddbtn-tab {
+ font-size: inherit;
+ font-weight: bold;
- &:active {
- background: none;
- }
+ &:active {
+ background: none;
}
+ }
- .dropdown-toggle {
- padding-top: 2px;
- }
+ .dropdown-toggle {
+ padding-top: 2px;
+ }
}
.SqlEditor {
- display: flex;
- flex-direction: row;
- height: 100%;
- padding: 10px;
-
- .clock {
- background-color: orange;
- padding: 5px;
- }
-
- .schemaPane {
- flex: 0 0 300px;
- max-width: 300px;
- transition: transform .3s ease-in-out;
- }
-
- .queryPane {
- 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;
- }
+ display: flex;
+ flex-direction: row;
+ height: 100%;
+ padding: 10px;
+
+ .clock {
+ background-color: orange;
+ padding: 5px;
+ }
+
+ .schemaPane {
+ flex: 0 0 300px;
+ max-width: 300px;
+ transition: transform 0.3s ease-in-out;
+ }
+
+ .queryPane {
+ 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-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 #ccc;
- border-bottom: 1px solid #ccc;
- width: 3%;
- margin: 3px 47%;
- }
-
- .gutter.gutter-vertical {
- cursor: row-resize;
- }
+ .gutter.gutter-vertical {
+ cursor: row-resize;
+ }
}
.SqlEditorLeftBar {
- height: 100%;
- display: flex;
- flex-direction: column;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
- .divider {
- border-bottom: 1px solid #f2f2f2;
- margin: 15px 0;
- }
+ .divider {
+ border-bottom: 1px solid #f2f2f2;
+ margin: 15px 0;
+ }
- .scrollbar-container {
- flex: 1 1 auto;
- overflow: auto;
- }
+ .scrollbar-container {
+ flex: 1 1 auto;
+ overflow: auto;
+ }
}
.popover {
- max-width:400px;
+ max-width: 400px;
}
.table-label {
- margin-top: 5px;
- margin-right: 10px;
- float: left;
+ margin-top: 5px;
+ margin-right: 10px;
+ float: left;
}
div.tablePopover {
- opacity: 0.7 !important;
+ opacity: 0.7 !important;
}
div.tablePopover:hover {
- opacity: 1 !important;
+ opacity: 1 !important;
}
.ResultSetControls {
- padding: 8px 0;
+ padding: 8px 0;
}
.ace_editor {
@@ -329,113 +331,113 @@ div.tablePopover:hover {
}
.Select-menu-outer {
- min-width: 100%;
- width: inherit;
- z-index: 1000;
+ min-width: 100%;
+ width: inherit;
+ z-index: 1000;
}
.Select-clear {
- margin-top: -2px;
+ margin-top: -2px;
}
.Select-arrow {
- margin-top: 5px;
+ margin-top: 5px;
}
.ace_scroller {
- background-color: #f4f4f4;
+ background-color: #f4f4f4;
}
.TableElement {
- margin-right: 10px;
+ margin-right: 10px;
}
.TableElement .well {
- margin-top: 5px;
- margin-bottom: 5px;
- padding: 5px 10px;
+ margin-top: 5px;
+ margin-bottom: 5px;
+ padding: 5px 10px;
}
-.TableElement .ws-el-controls {
- margin-right: -.3em;
+.TableElement .ws-el-controls {
+ margin-right: -0.3em;
}
.QueryTable .label {
- display: inline-block;
+ display: inline-block;
}
.ResultsModal .modal-body {
- min-height: 600px;
+ min-height: 600px;
}
.modal-body {
- overflow: auto;
+ overflow: auto;
}
a.Link {
- cursor: pointer;
+ cursor: pointer;
}
.QueryTable .well {
- padding: 3px 5px;
- margin: 3px 5px;
+ padding: 3px 5px;
+ margin: 3px 5px;
}
.tooltip pre {
- background: transparent;
- border: none;
- text-align: left;
- color: white;
- font-size: 10px;
+ background: transparent;
+ border: none;
+ text-align: left;
+ color: white;
+ font-size: 10px;
}
.tooltip-inner {
- max-width: 500px;
- word-wrap: break-word;
+ max-width: 500px;
+ word-wrap: break-word;
}
.SouthPane {
- width: 100%;
+ width: 100%;
- .SouthPaneTabs {
- height: 100%;
- display: flex;
- flex-direction: column;
- }
- .tab-pane {
- overflow-y: auto; // scroll the query history pane
- }
+ .SouthPaneTabs {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ }
+ .tab-pane {
+ overflow-y: auto; // scroll the query history pane
+ }
}
.nav-tabs .ddbtn-tab {
- padding: 0;
- border: none;
- background: none;
-
- &:focus {
- outline: 0;
- }
- &:active {
- box-shadow: none;
- }
+ padding: 0;
+ border: none;
+ background: none;
+
+ &:focus {
+ outline: 0;
+ }
+ &:active {
+ box-shadow: none;
+ }
}
.icon-container {
- display: inline-block;
- width: 30px;
- text-align: center;
+ display: inline-block;
+ width: 30px;
+ text-align: center;
}
.search-date-filter-container {
- display: flex;
+ display: flex;
- .Select {
- margin-right: 3px;
- }
+ .Select {
+ margin-right: 3px;
+ }
}
.SouthPane .tab-content .alert {
- margin-top: 10px;
+ margin-top: 10px;
}
.SouthPane .tab-content button.fetch {
- margin-top: 10px;
+ margin-top: 10px;
}
.cost-estimate {
- font-size: 12px;
+ font-size: 12px;
}
diff --git a/superset/assets/src/components/BootstrapSliderWrapper.css
b/superset/assets/src/components/BootstrapSliderWrapper.css
index c5d83f2..dc54046 100644
--- a/superset/assets/src/components/BootstrapSliderWrapper.css
+++ b/superset/assets/src/components/BootstrapSliderWrapper.css
@@ -17,10 +17,9 @@
* under the License.
*/
.BootstrapSliderWrapper .slider-selection {
- background: #efefef;
+ background: #efefef;
}
.BootstrapSliderWrapper .slider-handle {
- background: #b3b3b3;
+ background: #b3b3b3;
}
-
diff --git a/superset/assets/src/components/FilterBadgeIcon.css
b/superset/assets/src/components/FilterBadgeIcon.css
index 2c13dc8..2ccbf2a 100644
--- a/superset/assets/src/components/FilterBadgeIcon.css
+++ b/superset/assets/src/components/FilterBadgeIcon.css
@@ -17,18 +17,18 @@
* under the License.
*/
.filter-badge {
- width: 20px;
- height: 20px;
- background-color: #bababa;
- border-radius: 2px;
- z-index: 10;
+ width: 20px;
+ height: 20px;
+ background-color: #bababa;
+ border-radius: 2px;
+ z-index: 10;
}
.filter-badge:hover {
- cursor: pointer;
- background-color: #9e9e9e;
+ cursor: pointer;
+ background-color: #9e9e9e;
}
.color-bar.badge-group,
.filter-badge.badge-group {
- background-color: rgb(72, 72, 72);
+ background-color: rgb(72, 72, 72);
}
diff --git a/superset/assets/src/components/FilterEditIcon.css
b/superset/assets/src/components/FilterEditIcon.css
index d3eef85..1bd5896 100644
--- a/superset/assets/src/components/FilterEditIcon.css
+++ b/superset/assets/src/components/FilterEditIcon.css
@@ -17,5 +17,5 @@
* under the License.
*/
.filter-edit {
- cursor: pointer;
+ cursor: pointer;
}
diff --git a/superset/assets/src/datasource/main.css
b/superset/assets/src/datasource/main.css
index 6081433..b9b78c4 100644
--- a/superset/assets/src/datasource/main.css
+++ b/superset/assets/src/datasource/main.css
@@ -17,15 +17,15 @@
* under the License.
*/
.Datasource .tab-content {
- height: 600px;
- overflow: auto;
+ height: 600px;
+ overflow: auto;
}
.Datasource .change-warning {
- margin: 16px 10px 0;
- color: #FE4A49;
+ margin: 16px 10px 0;
+ color: #fe4a49;
}
.Datasource .change-warning .bold {
- font-weight: bold;
+ font-weight: bold;
}
diff --git a/superset/assets/src/explore/main.css
b/superset/assets/src/explore/main.css
index 005bbfd..d93e755 100644
--- a/superset/assets/src/explore/main.css
+++ b/superset/assets/src/explore/main.css
@@ -34,15 +34,16 @@
margin-bottom: 40px;
}
-.fave-unfave-icon, .edit-desc-icon {
- padding: 0 0 0 .5em;
+.fave-unfave-icon,
+.edit-desc-icon {
+ padding: 0 0 0 0.5em;
font-size: 14px;
}
.checkbox {
- float: left;
- margin-top: 0px;
- margin-right: 3px;
+ float: left;
+ margin-top: 0px;
+ margin-right: 3px;
}
.control-panel-section {
@@ -51,13 +52,17 @@
}
.control-panel-section:last-child {
padding-bottom: 40px;
- }
+}
.control-panel-section .Select-multi-value-wrapper .Select-input > input {
width: 100px;
}
-.control-panel-section .metrics-select .Select-multi-value-wrapper
.Select-input > input {
+.control-panel-section
+ .metrics-select
+ .Select-multi-value-wrapper
+ .Select-input
+ > input {
width: 300px;
}
@@ -198,7 +203,7 @@
font-weight: normal;
color: #fff;
padding: 5px 4px 4px;
- border:0;
+ border: 0;
}
.label-dropdown ul.dropdown-menu {
@@ -208,7 +213,8 @@
margin: 20px 0 0;
}
-.label-btn:hover, .label-btn-label:hover {
+.label-btn:hover,
+.label-btn-label:hover {
background-color: #667177;
color: #fff;
}
@@ -259,7 +265,7 @@ h2.section-header {
padding-bottom: 5px;
}
-.panel-spreaded,
+.panel-spreaded,
.panel-spreaded .panel-body {
padding: 0;
margin: 0;
diff --git a/superset/assets/src/profile/main.css
b/superset/assets/src/profile/main.css
index 264185c..ce0c2d7 100644
--- a/superset/assets/src/profile/main.css
+++ b/superset/assets/src/profile/main.css
@@ -17,14 +17,14 @@
* under the License.
*/
.tab-pane {
- min-height: 400px;
- background: white;
- border: 1px solid #bbb;
- border-top: 0px;
+ min-height: 400px;
+ background: white;
+ border: 1px solid #bbb;
+ border-top: 0px;
}
.label {
- display: inline-block;
- margin-right: 5px;
- margin-bottom: 5px;
+ display: inline-block;
+ margin-right: 5px;
+ margin-bottom: 5px;
}
diff --git a/superset/assets/src/showSavedQuery/index.css
b/superset/assets/src/showSavedQuery/index.css
index 026dd78..bbe57c3 100644
--- a/superset/assets/src/showSavedQuery/index.css
+++ b/superset/assets/src/showSavedQuery/index.css
@@ -16,5 +16,9 @@
* specific language governing permissions and limitations
* under the License.
*/
-.btn-add { display: none; }
-.linkback { padding: 0 10px 20px 2px; }
+.btn-add {
+ display: none;
+}
+.linkback {
+ padding: 0 10px 20px 2px;
+}
