You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by yj...@apache.org on 2020/06/17 18:00:39 UTC
[incubator-superset] 01/01: Update theme
This is an automated email from the ASF dual-hosted git repository.
yjc pushed a commit to branch cartel
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
commit 743b34eb8730a5915896b680e9ba08398b441db7
Author: Jesse Yang <je...@airbnb.com>
AuthorDate: Wed Jun 17 11:00:10 2020 -0700
Update theme
---
.../src/SqlLab/components/SqlEditor.jsx | 4 +-
superset-frontend/src/SqlLab/main.less | 3 ++
superset-frontend/src/components/Button.jsx | 2 +-
superset-frontend/stylesheets/less/index.less | 1 +
superset-frontend/stylesheets/less/variables.less | 26 ++++++++----
.../{less/index.less => superset-theme.less} | 47 ++++++++++------------
superset-frontend/stylesheets/superset.less | 3 ++
7 files changed, 51 insertions(+), 35 deletions(-)
diff --git a/superset-frontend/src/SqlLab/components/SqlEditor.jsx b/superset-frontend/src/SqlLab/components/SqlEditor.jsx
index 7f1123c..94b8276 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditor.jsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditor.jsx
@@ -509,13 +509,13 @@ class SqlEditor extends React.PureComponent {
</Form>
</div>
<div className="rightItems">
- <Button
+ <span
className="autocomplete"
onClick={this.handleToggleAutocompleteEnabled}
>
<Checkbox checked={this.state.autocompleteEnabled} />{' '}
{t('Autocomplete')}
- </Button>{' '}
+ </span>{' '}
<TemplateParamsEditor
language="json"
onChange={params => {
diff --git a/superset-frontend/src/SqlLab/main.less b/superset-frontend/src/SqlLab/main.less
index e8047b3..a435cdf 100644
--- a/superset-frontend/src/SqlLab/main.less
+++ b/superset-frontend/src/SqlLab/main.less
@@ -161,6 +161,9 @@ div.Workspace {
font-feature-settings: 'kern' 1, 'tnum' 1;
}
}
+ .autocomplete {
+ cursor: pointer;
+ }
}
}
diff --git a/superset-frontend/src/components/Button.jsx b/superset-frontend/src/components/Button.jsx
index 8cd7105..5e12a73 100644
--- a/superset-frontend/src/components/Button.jsx
+++ b/superset-frontend/src/components/Button.jsx
@@ -43,7 +43,7 @@ const defaultProps = {
const BUTTON_WRAPPER_STYLE = { display: 'inline-block', cursor: 'not-allowed' };
export default function Button(props) {
- const buttonProps = { ...props };
+ const buttonProps = { bsStyle: 'secondary', ...props };
const tooltip = props.tooltip;
const placement = props.placement;
delete buttonProps.tooltip;
diff --git a/superset-frontend/stylesheets/less/index.less b/superset-frontend/stylesheets/less/index.less
index 86a8989..85481c4 100644
--- a/superset-frontend/stylesheets/less/index.less
+++ b/superset-frontend/stylesheets/less/index.less
@@ -27,6 +27,7 @@ html,
body {
font-size: @font-size-base;
line-height: @line-height-base;
+ background-color: @brand-gray-lightest;
}
body {
diff --git a/superset-frontend/stylesheets/less/variables.less b/superset-frontend/stylesheets/less/variables.less
index e7ede59..fa1c617 100644
--- a/superset-frontend/stylesheets/less/variables.less
+++ b/superset-frontend/stylesheets/less/variables.less
@@ -16,6 +16,14 @@
* specific language governing permissions and limitations
* under the License.
*/
+/************************************************************************/
+/* BOOTSTRAP/BOOTSWATCH/COSMO */
+/* These are the legacy Cosmo theme overrides to Bootswatch's */
+/* overrides to Bootstrap. We should consolidate/deprecate these */
+/* in favor of custom/reusable CSS wherever possible */
+/************************************************************************/
+
+@import '../less/cosmo/variables.less';
/************************************************************************/
/* COLORS */
@@ -45,6 +53,13 @@
@brand-secondary-light4: #eceef2;
@brand-secondary-light5: #f5f5f8;
+@brand-text-default: #393939;
+@brand-text-secondary: #b2b2b2;
+@brand-gray-light: #f0f0f0;
+@brand-gray-lightest: #f7f7f7;
+@brand-gray-tinted: #ebedf2;
+@brand-gray-darkest: #656565;
+
@almost-black: #263238;
@gray-dark: #484848;
@gray-light: #cfd8dc;
@@ -56,7 +71,7 @@
@darkest: #000000;
/**************************** text-specific *****************************/
-@link: @brand-primary;
+@link: @brand-text-default;
@link-hover: darken(@link, @colorstop-one);
/***************************** status colors ****************************/
@@ -198,10 +213,7 @@
@border-radius-large: (@border-radius-normal * 2);
/************************************************************************/
-/* BOOTSTRAP/BOOTSWATCH/COSMO */
-/* These are the legacy Cosmo theme overrides to Bootswatch's */
-/* overrides to Bootstrap. We should consolidate/deprecate these */
-/* in favor of custom/reusable CSS wherever possible */
+/* SPACING */
/************************************************************************/
-
-@import '../less/cosmo/variables.less';
+// @padding-small-vertical: 0.4em;
+// @padding-small-horizontal: 3em;
\ No newline at end of file
diff --git a/superset-frontend/stylesheets/less/index.less b/superset-frontend/stylesheets/superset-theme.less
similarity index 58%
copy from superset-frontend/stylesheets/less/index.less
copy to superset-frontend/stylesheets/superset-theme.less
index 86a8989..50ca2ed 100644
--- a/superset-frontend/stylesheets/less/index.less
+++ b/superset-frontend/stylesheets/superset-theme.less
@@ -16,34 +16,31 @@
* specific language governing permissions and limitations
* under the License.
*/
-// Index .less, any imports here will be included in the final css build
+@import './less/variables.less';
-@import '~bootstrap/less/bootstrap.less';
-@import './fonts.less';
-@import './variables.less';
-@import './cosmo/bootswatch.less';
-
-html,
body {
- font-size: @font-size-base;
- line-height: @line-height-base;
+ background-color: @brand-gray-lightest;
}
-body {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- display: flex;
- flex-direction: column;
-}
-
-header {
- flex: 0 1 auto;
-}
+@btn-secondary-foreground: #1984a0;
+@btn-secondary-background: #e8f5f9;
+@btn-secondary-background-lighter: #f3f8fa;
+@btn-secondary-background-darker: #def1f7;
-#app {
- flex: 1 1 auto;
- position: relative;
+.btn-secondary {
+ &,
+ &:active,
+ &:hover,
+ &:focus {
+ color: @btn-secondary-foreground;
+ }
+ background-color: @btn-secondary-background;
+ &:hover {
+ background-color: @btn-secondary-background-lighter;
+ }
+ &:active, &:focus {
+ box-shadow: none;
+ outline: none;
+ background-color: @btn-secondary-background-darker;
+ }
}
diff --git a/superset-frontend/stylesheets/superset.less b/superset-frontend/stylesheets/superset.less
index b76d2d2..6801fe9 100644
--- a/superset-frontend/stylesheets/superset.less
+++ b/superset-frontend/stylesheets/superset.less
@@ -579,3 +579,6 @@ td.filtered {
.select2-container-multi {
width: 100% !important;
}
+
+// Import theme at the very end so it can override
+@import './superset-theme.less';