You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by ma...@apache.org on 2020/01/13 17:59:33 UTC
[incubator-superset] branch master updated: [css] Bringing
Bootswatch in line with external variables, and other CSS tweaks (#8781)
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 d9e7db6 [css] Bringing Bootswatch in line with external variables, and other CSS tweaks (#8781)
d9e7db6 is described below
commit d9e7db69febc2d319312c262716e188bed452c06
Author: Evan Rusackas <ev...@preset.io>
AuthorDate: Mon Jan 13 09:59:20 2020 -0800
[css] Bringing Bootswatch in line with external variables, and other CSS tweaks (#8781)
* Bumping less-loader
* moving/updating styles, with a bit of linting as I go.
* more whittling
* caught a couple more colors
* reverting plugin config changes I was hacking around with.
* toast messages now use status colors across the board.
* no more pink.
* expanding scope of linting
* a little more CSS linting
* fixing popover adhoc metric title height issue
* eslint: Ignoring nore modules in subfolders
---
superset/assets/.eslintignore | 1 +
superset/assets/package-lock.json | 14 +-
superset/assets/package.json | 4 +-
superset/assets/src/SqlLab/main.less | 3 +-
superset/assets/src/components/RefreshLabel.less | 2 +-
.../src/dashboard/stylesheets/dashboard.less | 4 +-
.../stylesheets/filter-scope-selector.less | 2 +-
.../components/AdhocMetricEditPopoverTitle.jsx | 3 +-
superset/assets/src/explore/main.less | 3 +
.../src/messageToasts/stylesheets/toast.less | 2 +-
.../assets/stylesheets/less/cosmo/bootswatch.less | 47 +-
.../assets/stylesheets/less/cosmo/variables.less | 804 ++++++++++-----------
superset/assets/stylesheets/less/index.less | 10 +-
superset/assets/stylesheets/less/variables.less | 88 +--
.../assets/stylesheets/react-select/select.less | 24 +-
.../assets/stylesheets/reactable-pagination.less | 8 +-
superset/assets/stylesheets/superset.less | 252 ++++---
17 files changed, 622 insertions(+), 649 deletions(-)
diff --git a/superset/assets/.eslintignore b/superset/assets/.eslintignore
index 33905fc..8d79f90 100644
--- a/superset/assets/.eslintignore
+++ b/superset/assets/.eslintignore
@@ -25,3 +25,4 @@ stylesheets/*
vendor/*
docs/*
src/dashboard/deprecated/*
+**/node_modules
\ No newline at end of file
diff --git a/superset/assets/package-lock.json b/superset/assets/package-lock.json
index 3824af5..66fcd3e 100644
--- a/superset/assets/package-lock.json
+++ b/superset/assets/package-lock.json
@@ -16027,20 +16027,20 @@
}
},
"less-loader": {
- "version": "4.1.0",
- "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-4.1.0.tgz",
- "integrity": "sha512-KNTsgCE9tMOM70+ddxp9yyt9iHqgmSs0yTZc5XH5Wo+g80RWRIYNqE58QJKm/yMud5wZEvz50ugRDuzVIkyahg==",
+ "version": "5.0.0",
+ "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-5.0.0.tgz",
+ "integrity": "sha512-bquCU89mO/yWLaUq0Clk7qCsKhsF/TZpJUzETRvJa9KSVEL9SO3ovCvdEHISBhrC81OwC8QSVX7E0bzElZj9cg==",
"dev": true,
"requires": {
"clone": "^2.1.1",
"loader-utils": "^1.1.0",
- "pify": "^3.0.0"
+ "pify": "^4.0.1"
},
"dependencies": {
"pify": {
- "version": "3.0.0",
- "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
- "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
+ "version": "4.0.1",
+ "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+ "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
"dev": true
}
}
diff --git a/superset/assets/package.json b/superset/assets/package.json
index e2cf2f2..2add582 100644
--- a/superset/assets/package.json
+++ b/superset/assets/package.json
@@ -17,7 +17,7 @@
"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} && npm run clean-css",
- "clean-css": "prettier --write 'src/**/*.{css,less,sass,scss}'"
+ "clean-css": "prettier --write '{src,stylesheets}/**/*.{css,less,sass,scss}'"
},
"repository": {
"type": "git",
@@ -193,7 +193,7 @@
"jest": "^24.8.0",
"jsdom": "9.12.0",
"less": "^3.9.0",
- "less-loader": "^4.1.0",
+ "less-loader": "^5.0.0",
"mini-css-extract-plugin": "^0.4.0",
"minimist": "^1.2.0",
"optimize-css-assets-webpack-plugin": "^5.0.1",
diff --git a/superset/assets/src/SqlLab/main.less b/superset/assets/src/SqlLab/main.less
index 5dd4aa2..d75f826 100644
--- a/superset/assets/src/SqlLab/main.less
+++ b/superset/assets/src/SqlLab/main.less
@@ -16,7 +16,6 @@
* specific language governing permissions and limitations
* under the License.
*/
-@import '../../stylesheets/less/cosmo/variables.less';
@import '../../stylesheets/less/variables.less';
body {
@@ -168,7 +167,7 @@ div.Workspace {
background-color: @success;
}
.failed {
- background-color: @error;
+ background-color: @danger;
}
.handle {
diff --git a/superset/assets/src/components/RefreshLabel.less b/superset/assets/src/components/RefreshLabel.less
index 4defab7..77c0701 100644
--- a/superset/assets/src/components/RefreshLabel.less
+++ b/superset/assets/src/components/RefreshLabel.less
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-@import '../../stylesheets/less/cosmo/variables.less';
+@import '../../stylesheets/less/variables.less';
.RefreshLabel:hover {
color: @brand-primary;
diff --git a/superset/assets/src/dashboard/stylesheets/dashboard.less b/superset/assets/src/dashboard/stylesheets/dashboard.less
index c926a51..7d9ce99 100644
--- a/superset/assets/src/dashboard/stylesheets/dashboard.less
+++ b/superset/assets/src/dashboard/stylesheets/dashboard.less
@@ -173,8 +173,8 @@ body {
.dashboard-modal.delete {
.btn.btn-primary {
- background: @pink;
- border-color: @pink;
+ background: @danger;
+ border-color: @danger;
}
}
}
diff --git a/superset/assets/src/dashboard/stylesheets/filter-scope-selector.less b/superset/assets/src/dashboard/stylesheets/filter-scope-selector.less
index 61daaf8..ba20bdb 100644
--- a/superset/assets/src/dashboard/stylesheets/filter-scope-selector.less
+++ b/superset/assets/src/dashboard/stylesheets/filter-scope-selector.less
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-@import '../../../stylesheets/less/cosmo/variables.less';
+@import '../../../stylesheets/less/variables.less';
.filter-scope-container {
display: flex;
diff --git a/superset/assets/src/explore/components/AdhocMetricEditPopoverTitle.jsx b/superset/assets/src/explore/components/AdhocMetricEditPopoverTitle.jsx
index 8d0c062..02f16f0 100644
--- a/superset/assets/src/explore/components/AdhocMetricEditPopoverTitle.jsx
+++ b/superset/assets/src/explore/components/AdhocMetricEditPopoverTitle.jsx
@@ -76,6 +76,7 @@ export default class AdhocMetricEditPopoverTitle extends React.Component {
onMouseOut={this.onMouseOut}
onClick={this.onClick}
onBlur={this.onBlur}
+ className="AdhocMetricEditPopoverTitle"
>
{this.state.isEditable ? (
<FormControl
@@ -87,7 +88,7 @@ export default class AdhocMetricEditPopoverTitle extends React.Component {
inputRef={this.refFunc}
/>
) : (
- <span>
+ <span className="inline-editable">
{adhocMetric.hasCustomLabel ? adhocMetric.label : 'My Metric'}
<i
diff --git a/superset/assets/src/explore/main.less b/superset/assets/src/explore/main.less
index 1ecf7e2..bf924d3 100644
--- a/superset/assets/src/explore/main.less
+++ b/superset/assets/src/explore/main.less
@@ -166,6 +166,9 @@
#metrics-edit-popover {
max-width: none;
+ .inline-editable {
+ line-height: 30px; // hand-tweaked to match the height of the input
+ }
}
#filter-edit-popover {
diff --git a/superset/assets/src/messageToasts/stylesheets/toast.less b/superset/assets/src/messageToasts/stylesheets/toast.less
index 08a8fa52..5ff6d68 100644
--- a/superset/assets/src/messageToasts/stylesheets/toast.less
+++ b/superset/assets/src/messageToasts/stylesheets/toast.less
@@ -62,7 +62,7 @@
}
.toast--info:after {
- background: linear-gradient(to bottom, @pink, @purple);
+ background: @info;
}
.toast--success:after {
diff --git a/superset/assets/stylesheets/less/cosmo/bootswatch.less b/superset/assets/stylesheets/less/cosmo/bootswatch.less
index a3eedcb..c00720c 100644
--- a/superset/assets/stylesheets/less/cosmo/bootswatch.less
+++ b/superset/assets/stylesheets/less/cosmo/bootswatch.less
@@ -30,9 +30,8 @@
}
&-inverse {
-
.badge {
- background-color: #fff;
+ background-color: @lightest;
color: @brand-primary;
}
}
@@ -68,8 +67,8 @@
// Buttons ====================================================================
.btn-default:hover {
- color: #555;
- background-color: #efefef;
+ color: @gray-dark;
+ background-color: @gray-bg;
}
.nav-tabs {
@@ -93,9 +92,9 @@
}
.caret:before {
- font-family: "FontAwesome";
+ font-family: 'FontAwesome';
font-size: @font-size-xs;
- content: "\f078";
+ content: '\f078';
}
.caret:hover {
@@ -115,7 +114,7 @@ body {
.text-success,
.text-success:hover {
- color: @brand-success;
+ color: @success;
}
.text-danger,
@@ -137,7 +136,6 @@ body {
table,
.table {
-
.dropdown-menu a {
text-decoration: none;
}
@@ -146,10 +144,10 @@ table,
.warning,
.danger,
.info {
- color: #fff;
+ color: @lightest;
a {
- color: #fff;
+ color: @lightest;
}
.btn-default {
@@ -160,7 +158,6 @@ table,
// Forms ======================================================================
-
.has-warning {
.help-block,
.control-label,
@@ -230,14 +227,12 @@ table,
// Navs =======================================================================
.nav-pills {
-
& > li > a {
border-radius: 2px;
}
}
.dropdown-menu {
-
& > li > a:hover,
& > li > a:focus {
background-image: none;
@@ -291,7 +286,7 @@ label {
.box-shadow(none);
.progress-bar {
font-size: @font-size-s;
- line-height: 12px;
+ line-height: @line-height-tight;
padding-top: 1px;
}
}
@@ -315,7 +310,12 @@ label {
color: @text-color;
padding-bottom: 5px;
border-bottom: 1px solid @gray-light;
- h1, h2, h3, h4, h5, h6 {
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
margin: 10px 0 0 0;
font-weight: @font-weight-bold;
}
@@ -333,7 +333,12 @@ label {
color: @text-color;
padding-bottom: 5px;
border-bottom: 1px solid @gray-light;
- h1, h2, h3, h4, h5, h6 {
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
margin: 10px 0 0 0;
font-weight: @font-weight-bold;
}
@@ -349,7 +354,6 @@ label {
}
a.list-group-item {
-
&-success {
&.active {
background-color: @state-success-bg;
@@ -400,8 +404,10 @@ a.list-group-item {
border-top: 3px solid transparent;
}
-.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
- background-color: #fff;
+.nav-tabs > li.active > a,
+.nav-tabs > li.active > a:hover,
+.nav-tabs > li.active > a:focus {
+ background-color: @lightest;
font-weight: @font-weight-bold;
border-top: 3px solid @brand-primary;
}
@@ -430,7 +436,7 @@ hr {
// generate space-n classes for vertical spacing
.space-loop(@counter) when (@counter > 0) {
- .space-loop((@counter - 1)); // next iteration
+ .space-loop((@counter - 1)); // next iteration
.space-@{counter} {
margin-bottom: (10px * @counter); // code for each iteration
}
@@ -440,4 +446,3 @@ hr {
a {
cursor: pointer;
}
-
diff --git a/superset/assets/stylesheets/less/cosmo/variables.less b/superset/assets/stylesheets/less/cosmo/variables.less
index 0b136b9..60ce95e 100644
--- a/superset/assets/stylesheets/less/cosmo/variables.less
+++ b/superset/assets/stylesheets/less/cosmo/variables.less
@@ -20,265 +20,252 @@
// Variables
// --------------------------------------------------
-
// == Colors
//
// ## Gray and brand colors for use across Bootstrap.
-@gray-base: #000;
-@gray-darker: lighten(@gray-base, 13.5%);
-@gray-dark: lighten(@gray-base, 20%);
-@bs-gray: lighten(@gray-base, 33.5%);
-@bs-gray-light: lighten(@gray-base, 70%);
-@gray-lighter: lighten(@gray-base, 95%);
+@gray-base: @darkest; // superset-var
+@gray-darker: lighten(@gray-base, 13.5%);
+@gray-dark: lighten(@gray-base, 20%);
+@bs-gray: lighten(@gray-base, 33.5%);
+@bs-gray-light: lighten(@gray-base, 70%);
+@gray-lighter: lighten(@gray-base, 95%);
-@brand-primary: #00A699;
-@brand-success: #4AC15F;
-@brand-info: lighten(#2AB7CA, 15%);
-@brand-warning: #FED766;
-@brand-danger: #FE4A49;
+@brand-primary: @primary-color; // superset-var
+@brand-success: @success; // superset-var
+@brand-info: @info; // superset-var
+@brand-warning: @warning; // superset-var
+@brand-danger: @danger; // superset-var
// == Scaffolding
//
// ## Settings for some of the most global styles.
// ** Background color for `<body>`.
-@body-bg: #f5f5f5;
+@body-bg: @gray-bg; // superset-var
// ** Global text color on `<body>`.
-@text-color: @gray-dark;
+@text-color: @gray-dark;
// ** Global textual link color.
-@link-color: @brand-primary;
+@link-color: @link;
// ** Link hover color set via `darken()` function.
-@link-hover-color: darken(@link-color, 15%);
+@link-hover-color: @link-hover;
// ** Link hover decoration.
@link-hover-decoration: underline;
-
// == Typography
//
// ## Font, line-height, and color for body text, headings, and more.
-@font-family-sans-serif: Helvetica, Arial;
-
-@font-family-serif: Georgia, "Times New Roman", Times, serif;
-// ** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
-@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
-@font-family-base: @font-family-sans-serif;
+@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
+@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
-@font-size-base: 14px;
-@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
-@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
+@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
+@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
+@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
+@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
+@font-size-h5: @font-size-base;
+@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
-@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
-@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
-@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
-@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
-@font-size-h5: @font-size-base;
-@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
-
-// ** Unit-less `line-height` for use in components like buttons.
-@line-height-base: 1.428571429; // 20/14
// ** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
-@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
+@line-height-computed: floor((@font-size-base * @line-height-base));
// ** By default, this inherits from the `<body>`.
-@headings-font-family: @font-family-base;
-@headings-font-weight: 300;
-@headings-line-height: 1.1;
-@headings-color: inherit;
-
+@headings-font-family: @font-family-base;
+@headings-font-weight: @font-weight-normal; // superset-var
+@headings-line-height: @line-height-tight;
+@headings-color: inherit;
// == Iconography
//
// ## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
// ** Load fonts from this directory.
-@icon-font-path: "../fonts/";
+@icon-font-path: '../fonts/';
// ** File name for all font files.
-@icon-font-name: "glyphicons-halflings-regular";
+@icon-font-name: 'glyphicons-halflings-regular';
// ** Element ID within SVG icon file.
-@icon-font-svg-id: "glyphicons_halflingsregular";
-
+@icon-font-svg-id: 'glyphicons_halflingsregular';
// == Components
//
// ## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
-@padding-base-vertical: 10px;
-@padding-base-horizontal: 18px;
+@padding-base-vertical: 10px;
+@padding-base-horizontal: 18px;
-@padding-large-vertical: 18px;
-@padding-large-horizontal: 30px;
+@padding-large-vertical: 18px;
+@padding-large-horizontal: 30px;
-@padding-small-vertical: 5px;
-@padding-small-horizontal: 10px;
+@padding-small-vertical: 5px;
+@padding-small-horizontal: 10px;
-@padding-xs-vertical: 1px;
-@padding-xs-horizontal: 5px;
+@padding-xs-vertical: 1px;
+@padding-xs-horizontal: 5px;
-@line-height-large: 1.3333333; // extra decimals for Win 8.1 Chrome
-@line-height-small: 1.5;
+@line-height-large: 1.3333333; // extra decimals for Win 8.1 Chrome
+@line-height-small: 1.5;
-@border-radius-base: 2px;
-@border-radius-large: 2px;
-@border-radius-small: 2px;
+@border-radius-base: 2px;
+@border-radius-large: 2px;
+@border-radius-small: 2px;
// ** Global color for active items (e.g., navs or dropdowns).
-@component-active-color: #fff;
+@component-active-color: @lightest; // superset-var
// ** Global background color for active items (e.g., navs or dropdowns).
-@component-active-bg: @brand-primary;
+@component-active-bg: @brand-primary;
// ** Width of the `border` for generating carets that indicate dropdowns.
-@caret-width-base: 4px;
+@caret-width-base: 4px;
// ** Carets increase slightly in size for larger components.
-@caret-width-large: 5px;
-
+@caret-width-large: 5px;
// == Tables
//
// ## Customizes the `.table` component with basic values, each used across all table variations.
// ** Padding for `<th>`s and `<td>`s.
-@table-cell-padding: 8px;
+@table-cell-padding: 8px;
// ** Padding for cells in `.table-condensed`.
-@table-condensed-cell-padding: 5px;
+@table-condensed-cell-padding: 5px;
// ** Default background color used for all tables.
-@table-bg: transparent;
+@table-bg: transparent;
// ** Background color used for `.table-striped`.
-@table-bg-accent: #f9f9f9;
+@table-bg-accent: fade(@gray-bg, @opacity-medium-light); // superset-var
// ** Background color used for `.table-hover`.
-@table-bg-hover: #f5f5f5;
-@table-bg-active: @table-bg-hover;
+@table-bg-hover: @gray-bg; // superset-var
+@table-bg-active: @table-bg-hover;
// ** Border color for table and cell borders.
-@table-border-color: #ddd;
-
+@table-border-color: @gray-light; // superset-var
// == Buttons
//
// ## For each of Bootstrap's buttons, define text, background and border color.
-@btn-font-weight: normal;
+@btn-font-weight: normal;
-@btn-primary-color: #fff;
-@btn-primary-bg: @brand-primary;
-@btn-primary-border: @brand-primary;
+@btn-primary-color: @lightest; // superset-var
+@btn-primary-bg: @brand-primary;
+@btn-primary-border: @brand-primary;
-@btn-default-color: @bs-gray;
-@btn-default-bg: #fff;
-@btn-default-border: @bs-gray-light;
+@btn-default-color: @bs-gray;
+@btn-default-bg: @lightest; // superset-var
+@btn-default-border: @bs-gray-light;
-@btn-success-color: @btn-primary-color;
-@btn-success-bg: @brand-success;
-@btn-success-border: @btn-success-bg;
+@btn-success-color: @btn-primary-color;
+@btn-success-bg: @brand-success;
+@btn-success-border: @btn-success-bg;
-@btn-info-color: @btn-primary-color;
-@btn-info-bg: @brand-info;
-@btn-info-border: @btn-info-bg;
+@btn-info-color: @btn-primary-color;
+@btn-info-bg: @brand-info;
+@btn-info-border: @btn-info-bg;
-@btn-warning-color: @btn-default-color;
-@btn-warning-bg: @brand-warning;
-@btn-warning-border: @btn-warning-bg;
+@btn-warning-color: @btn-default-color;
+@btn-warning-bg: @brand-warning;
+@btn-warning-border: @btn-warning-bg;
-@btn-danger-color: @btn-primary-color;
-@btn-danger-bg: @brand-danger;
-@btn-danger-border: @btn-danger-bg;
+@btn-danger-color: @btn-primary-color;
+@btn-danger-bg: @brand-danger;
+@btn-danger-border: @btn-danger-bg;
-@btn-link-disabled-color: @bs-gray-light;
+@btn-link-disabled-color: @bs-gray-light;
// Allows for customizing button radius independently from global border radius
-@btn-border-radius-base: @border-radius-base;
-@btn-border-radius-large: @border-radius-large;
-@btn-border-radius-small: @border-radius-small;
-
+@btn-border-radius-base: @border-radius-base;
+@btn-border-radius-large: @border-radius-large;
+@btn-border-radius-small: @border-radius-small;
// == Forms
//
// ##
// ** `<input>` background color
-@input-bg: #fff;
+@input-bg: @lightest; // superset-var
// ** `<input disabled>` background color
-@input-bg-disabled: @gray-lighter;
+@input-bg-disabled: @gray-lighter;
// ** Text color for `<input>`s
-@input-color: @text-color;
+@input-color: @text-color;
// ** `<input>` border color
-@input-border: #ccc;
+@input-border: @gray-light; // superset-var
// TODO: Rename `@input-border-radius` to `@input-border-radius-base` in v4
// ** Default `.form-control` border radius
// This has no effect on `<select>`s in some browsers, due to the limited stylability of `<select>`s in CSS.
-@input-border-radius: @border-radius-base;
+@input-border-radius: @border-radius-base;
// ** Large `.form-control` border radius
-@input-border-radius-large: @border-radius-large;
+@input-border-radius-large: @border-radius-large;
// ** Small `.form-control` border radius
-@input-border-radius-small: @border-radius-small;
+@input-border-radius-small: @border-radius-small;
// ** Border color for inputs on focus
-@input-border-focus: #66afe9;
+@input-border-focus: @indicator-color; // superset-var
// ** Placeholder text color
-@input-color-placeholder: @bs-gray-light;
+@input-color-placeholder: @bs-gray-light;
// ** Default `.form-control` height
-@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
+@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
// ** Large `.form-control` height
-@input-height-large: (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
+@input-height-large: (
+ ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) +
+ 2
+);
// ** Small `.form-control` height
-@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
+@input-height-small: (
+ floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) +
+ 2
+);
// ** `.form-group` margin
-@form-group-margin-bottom: 10px;
+@form-group-margin-bottom: 10px;
-@legend-color: @text-color;
-@legend-border-color: #e5e5e5;
+@legend-color: @text-color;
+@legend-border-color: @gray-bg;
// ** Background color for textual input addons
-@input-group-addon-bg: @gray-lighter;
+@input-group-addon-bg: @gray-lighter;
// ** Border color for textual input addons
@input-group-addon-border-color: @input-border;
// ** Disabled cursor for form controls and buttons.
-@cursor-disabled: not-allowed;
-
+@cursor-disabled: not-allowed;
// == Dropdowns
//
// ## Dropdown menu container and contents.
// ** Background for the dropdown menu.
-@dropdown-bg: #fff;
+@dropdown-bg: @lightest; // superset-var
// ** Dropdown menu `border-color`.
-@dropdown-border: rgba(0,0,0,.15);
+@dropdown-border: fade(@darkest, @opacity-light); // superset-var
// ** Dropdown menu `border-color` **for IE8**.
-@dropdown-fallback-border: #ccc;
+@dropdown-fallback-border: @gray-light; // superset-var
// ** Divider color for between dropdown items.
-@dropdown-divider-bg: #e5e5e5;
+@dropdown-divider-bg: @gray-bg; // superset-var
// ** Dropdown link text color.
-@dropdown-link-color: @gray-dark;
+@dropdown-link-color: @gray-dark;
// ** Hover color for dropdown links.
-@dropdown-link-hover-color: #fff;
+@dropdown-link-hover-color: @lightest; // superset-var
// ** Hover background for dropdown links.
-@dropdown-link-hover-bg: @component-active-bg;
+@dropdown-link-hover-bg: @component-active-bg;
// ** Active dropdown menu item text color.
-@dropdown-link-active-color: #fff;
+@dropdown-link-active-color: @lightest; // superset-var
// ** Active dropdown menu item background color.
-@dropdown-link-active-bg: @component-active-bg;
+@dropdown-link-active-bg: @component-active-bg;
// ** Disabled dropdown menu item background color.
-@dropdown-link-disabled-color: @bs-gray-light;
+@dropdown-link-disabled-color: @bs-gray-light;
// ** Text color for headers within dropdown menus.
-@dropdown-header-color: @bs-gray-light;
+@dropdown-header-color: @bs-gray-light;
// ** Deprecated `@dropdown-caret-color` as of v3.1.0
-@dropdown-caret-color: #000;
-
+@dropdown-caret-color: @darkest; // superset-var
//-- Z-index master list
//
@@ -287,14 +274,13 @@
//
// Note: These variables are not generated into the Customizer.
-@zindex-navbar: 1000;
-@zindex-dropdown: 1000;
-@zindex-popover: 1060;
-@zindex-tooltip: 1070;
-@zindex-navbar-fixed: 1030;
-@zindex-modal-background: 1040;
-@zindex-modal: 1050;
-
+@zindex-navbar: 1000;
+@zindex-dropdown: 1000;
+@zindex-popover: 1060;
+@zindex-tooltip: 1070;
+@zindex-navbar-fixed: 1030;
+@zindex-modal-background: 1040;
+@zindex-modal: 1050;
// == Media queries breakpoints
//
@@ -302,562 +288,540 @@
// Extra small screen / phone
// ** Deprecated `@screen-xs` as of v3.0.1
-@screen-xs: 480px;
+@screen-xs: 480px;
// ** Deprecated `@screen-xs-min` as of v3.2.0
-@screen-xs-min: @screen-xs;
+@screen-xs-min: @screen-xs;
// ** Deprecated `@screen-phone` as of v3.0.1
-@screen-phone: @screen-xs-min;
+@screen-phone: @screen-xs-min;
// Small screen / tablet
// ** Deprecated `@screen-sm` as of v3.0.1
-@screen-sm: 768px;
-@screen-sm-min: @screen-sm;
+@screen-sm: 768px;
+@screen-sm-min: @screen-sm;
// ** Deprecated `@screen-tablet` as of v3.0.1
-@screen-tablet: @screen-sm-min;
+@screen-tablet: @screen-sm-min;
// Medium screen / desktop
// ** Deprecated `@screen-md` as of v3.0.1
-@screen-md: 992px;
-@screen-md-min: @screen-md;
+@screen-md: 992px;
+@screen-md-min: @screen-md;
// ** Deprecated `@screen-desktop` as of v3.0.1
-@screen-desktop: @screen-md-min;
+@screen-desktop: @screen-md-min;
// Large screen / wide desktop
// ** Deprecated `@screen-lg` as of v3.0.1
-@screen-lg: 1200px;
-@screen-lg-min: @screen-lg;
+@screen-lg: 1200px;
+@screen-lg-min: @screen-lg;
// ** Deprecated `@screen-lg-desktop` as of v3.0.1
-@screen-lg-desktop: @screen-lg-min;
+@screen-lg-desktop: @screen-lg-min;
// So media queries don't overlap when required, provide a maximum
-@screen-xs-max: (@screen-sm-min - 1);
-@screen-sm-max: (@screen-md-min - 1);
-@screen-md-max: (@screen-lg-min - 1);
-
+@screen-xs-max: (@screen-sm-min - 1);
+@screen-sm-max: (@screen-md-min - 1);
+@screen-md-max: (@screen-lg-min - 1);
// == Grid system
//
// ## Define your custom responsive grid.
// ** Number of columns in the grid.
-@grid-columns: 12;
+@grid-columns: 12;
// ** Padding between columns. Gets divided in half for the left and right.
-@grid-gutter-width: 20px;
+@grid-gutter-width: 20px;
// Navbar collapse
// ** Point at which the navbar becomes uncollapsed.
-@grid-float-breakpoint: @screen-sm-min;
+@grid-float-breakpoint: @screen-sm-min;
// ** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
-
// == Container sizes
//
// ## Define the maximum width of `.container` for different screen sizes.
// Small screen / tablet
-@container-tablet: (720px + @grid-gutter-width);
+@container-tablet: (720px + @grid-gutter-width);
// ** For `@screen-sm-min` and up.
-@container-sm: @container-tablet;
+@container-sm: @container-tablet;
// Medium screen / desktop
-@container-desktop: (940px + @grid-gutter-width);
+@container-desktop: (940px + @grid-gutter-width);
// ** For `@screen-md-min` and up.
-@container-md: @container-desktop;
+@container-md: @container-desktop;
// Large screen / wide desktop
-@container-large-desktop: (1140px + @grid-gutter-width);
+@container-large-desktop: (1140px + @grid-gutter-width);
// ** For `@screen-lg-min` and up.
-@container-lg: @container-large-desktop;
-
+@container-lg: @container-large-desktop;
// == Navbar
//
// ##
// Basics of a navbar
-@navbar-height: 50px;
-@navbar-margin-bottom: @line-height-computed;
-@navbar-border-radius: @border-radius-base;
-@navbar-padding-horizontal: floor((@grid-gutter-width / 2));
-@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
-@navbar-collapse-max-height: 340px;
+@navbar-height: 50px;
+@navbar-margin-bottom: @line-height-computed;
+@navbar-border-radius: @border-radius-base;
+@navbar-padding-horizontal: floor((@grid-gutter-width / 2));
+@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
+@navbar-collapse-max-height: 340px;
-@navbar-default-color: #fff;
-@navbar-default-bg: @gray-darker;
-@navbar-default-border: darken(@navbar-default-bg, 6.5%);
+@navbar-default-color: @lightest; // superset-var
+@navbar-default-bg: @gray-darker;
+@navbar-default-border: darken(@navbar-default-bg, 6.5%);
// Navbar links
-@navbar-default-link-color: #fff;
-@navbar-default-link-hover-color: #fff;
-@navbar-default-link-hover-bg: darken(@navbar-default-bg, 10%);
-@navbar-default-link-active-color: @navbar-default-link-hover-color;
-@navbar-default-link-active-bg: @navbar-default-link-hover-bg;
-@navbar-default-link-disabled-color: #ccc;
-@navbar-default-link-disabled-bg: transparent;
+@navbar-default-link-color: @lightest; // superset-var
+@navbar-default-link-hover-color: @lightest; // superset-var
+@navbar-default-link-hover-bg: darken(@navbar-default-bg, 10%);
+@navbar-default-link-active-color: @navbar-default-link-hover-color;
+@navbar-default-link-active-bg: @navbar-default-link-hover-bg;
+@navbar-default-link-disabled-color: @gray-light; // superset-var
+@navbar-default-link-disabled-bg: transparent;
// Navbar brand label
-@navbar-default-brand-color: @navbar-default-link-color;
-@navbar-default-brand-hover-color: #fff;
-@navbar-default-brand-hover-bg: none;
+@navbar-default-brand-color: @navbar-default-link-color;
+@navbar-default-brand-hover-color: @lightest; // superset-var
+@navbar-default-brand-hover-bg: none;
// Navbar toggle
-@navbar-default-toggle-hover-bg: @navbar-default-link-hover-bg;
-@navbar-default-toggle-icon-bar-bg: #fff;
-@navbar-default-toggle-border-color: transparent;
-
+@navbar-default-toggle-hover-bg: @navbar-default-link-hover-bg;
+@navbar-default-toggle-icon-bar-bg: @lightest; // superset-var
+@navbar-default-toggle-border-color: transparent;
// === Inverted navbar
// Reset inverted navbar basics
-@navbar-inverse-color: @gray-dark;
-@navbar-inverse-bg: #fff;
-@navbar-inverse-border: transparent;
+@navbar-inverse-color: @gray-dark;
+@navbar-inverse-bg: @lightest; // superset-var
+@navbar-inverse-border: transparent;
// Inverted navbar links
-@navbar-inverse-link-color: @gray-dark;
-@navbar-inverse-link-hover-color: @gray-dark;
-@navbar-inverse-link-hover-bg: darken(@navbar-inverse-bg, 10%);
-@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color;
-@navbar-inverse-link-active-bg: @navbar-inverse-link-hover-bg;
-@navbar-inverse-link-disabled-color: @gray-lighter;
-@navbar-inverse-link-disabled-bg: transparent;
+@navbar-inverse-link-color: @gray-dark;
+@navbar-inverse-link-hover-color: @gray-dark;
+@navbar-inverse-link-hover-bg: darken(@navbar-inverse-bg, 10%);
+@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color;
+@navbar-inverse-link-active-bg: @navbar-inverse-link-hover-bg;
+@navbar-inverse-link-disabled-color: @gray-lighter;
+@navbar-inverse-link-disabled-bg: transparent;
// Inverted navbar brand label
-@navbar-inverse-brand-color: @navbar-inverse-link-color;
-@navbar-inverse-brand-hover-color: @gray-darker;
-@navbar-inverse-brand-hover-bg: none;
+@navbar-inverse-brand-color: @navbar-inverse-link-color;
+@navbar-inverse-brand-hover-color: @gray-darker;
+@navbar-inverse-brand-hover-bg: none;
// Inverted navbar toggle
-@navbar-inverse-toggle-hover-bg: @navbar-inverse-link-hover-bg;
-@navbar-inverse-toggle-icon-bar-bg: #fff;
-@navbar-inverse-toggle-border-color: transparent;
-
+@navbar-inverse-toggle-hover-bg: @navbar-inverse-link-hover-bg;
+@navbar-inverse-toggle-icon-bar-bg: @lightest; // superset-var
+@navbar-inverse-toggle-border-color: transparent;
// == Navs
//
// ##
// === Shared nav styles
-@nav-link-padding: 10px 15px;
-@nav-link-hover-bg: @gray-lighter;
+@nav-link-padding: 10px 15px;
+@nav-link-hover-bg: @gray-lighter;
-@nav-disabled-link-color: @bs-gray-light;
-@nav-disabled-link-hover-color: @bs-gray-light;
+@nav-disabled-link-color: @bs-gray-light;
+@nav-disabled-link-hover-color: @bs-gray-light;
// == Tabs
-@nav-tabs-border-color: #bbb;
+@nav-tabs-border-color: @gray-light; // superset-var
-@nav-tabs-link-hover-border-color: @gray-lighter;
+@nav-tabs-link-hover-border-color: @gray-lighter;
-@nav-tabs-active-link-hover-bg: @body-bg;
-@nav-tabs-active-link-hover-color: @bs-gray;
-@nav-tabs-active-link-hover-border-color: #bbb;
+@nav-tabs-active-link-hover-bg: @body-bg;
+@nav-tabs-active-link-hover-color: @bs-gray;
+@nav-tabs-active-link-hover-border-color: @gray-light; // superset-var
-@nav-tabs-justified-link-border-color: #bbb;
-@nav-tabs-justified-active-link-border-color: @body-bg;
+@nav-tabs-justified-link-border-color: @gray-light; // superset-var
+@nav-tabs-justified-active-link-border-color: @body-bg;
// == Pills
-@nav-pills-border-radius: @border-radius-base;
-@nav-pills-active-link-hover-bg: @component-active-bg;
-@nav-pills-active-link-hover-color: @component-active-color;
-
+@nav-pills-border-radius: @border-radius-base;
+@nav-pills-active-link-hover-bg: @component-active-bg;
+@nav-pills-active-link-hover-color: @component-active-color;
// == Pagination
//
// ##
-@pagination-color: @link-color;
-@pagination-bg: #fff;
-@pagination-border: #ddd;
-
-@pagination-hover-color: @link-hover-color;
-@pagination-hover-bg: @gray-lighter;
-@pagination-hover-border: #ddd;
+@pagination-color: @link-color;
+@pagination-bg: @lightest; // superset-var
+@pagination-border: @gray-light; // superset-var
-@pagination-active-color: @bs-gray-light;
-@pagination-active-bg: #f5f5f5;
-@pagination-active-border: #ddd;
+@pagination-hover-color: @link-hover-color;
+@pagination-hover-bg: @gray-lighter;
+@pagination-hover-border: @gray-light; // superset-var
-@pagination-disabled-color: @bs-gray-light;
-@pagination-disabled-bg: #fff;
-@pagination-disabled-border: #ddd;
+@pagination-active-color: @bs-gray-light;
+@pagination-active-bg: @gray-bg; // superset-var
+@pagination-active-border: @gray-light; // superset-var
+@pagination-disabled-color: @bs-gray-light;
+@pagination-disabled-bg: @lightest; // superset-var
+@pagination-disabled-border: @gray-light; // superset-var
// == Pager
//
// ##
-@pager-bg: @pagination-bg;
-@pager-border: @pagination-border;
-@pager-border-radius: @border-radius-base;
+@pager-bg: @pagination-bg;
+@pager-border: @pagination-border;
+@pager-border-radius: @border-radius-base;
-@pager-hover-bg: @pagination-hover-bg;
+@pager-hover-bg: @pagination-hover-bg;
-@pager-active-bg: @pagination-active-bg;
-@pager-active-color: @pagination-active-color;
-
-@pager-disabled-color: @bs-gray-light;
+@pager-active-bg: @pagination-active-bg;
+@pager-active-color: @pagination-active-color;
+@pager-disabled-color: @bs-gray-light;
// == Jumbotron
//
// ##
-@jumbotron-padding: 30px;
-@jumbotron-color: inherit;
-@jumbotron-bg: @gray-lighter;
-@jumbotron-heading-color: inherit;
-@jumbotron-font-size: ceil((@font-size-base * 1.5));
-@jumbotron-heading-font-size: ceil((@font-size-base * 4.5));
-
+@jumbotron-padding: 30px;
+@jumbotron-color: inherit;
+@jumbotron-bg: @gray-lighter;
+@jumbotron-heading-color: inherit;
+@jumbotron-font-size: ceil((@font-size-base * 1.5));
+@jumbotron-heading-font-size: ceil((@font-size-base * 4.5));
// == Form states and alerts
//
// ## Define colors for form feedback states and, by default, alerts.
-@state-success-text: darken(@brand-success, 20%);
-@state-success-bg: lighten(@brand-success, 35%);
-@state-success-border: darken(spin(@state-success-bg, -10), 5%);
-
-@state-info-text: darken(@brand-info, 22%);
-@state-info-bg: lighten(@brand-info, 20%);
-@state-info-border: darken(spin(@state-info-bg, -10), 7%);
+@state-success-text: darken(@brand-success, 20%);
+@state-success-bg: lighten(@brand-success, 35%);
+@state-success-border: darken(spin(@state-success-bg, -10), 5%);
-@state-warning-text: darken(@brand-warning, 30%);
-@state-warning-bg: lighten(@brand-warning, 20%);
-@state-warning-border: darken(spin(@state-warning-bg, -10), 3%);
+@state-info-text: darken(@brand-info, 22%);
+@state-info-bg: lighten(@brand-info, 20%);
+@state-info-border: darken(spin(@state-info-bg, -10), 7%);
-@state-danger-text: darken(@brand-danger, 25%);
-@state-danger-bg: lighten(@brand-danger, 22%);
-@state-danger-border: darken(spin(@state-danger-bg, -10), 3%);
+@state-warning-text: darken(@brand-warning, 30%);
+@state-warning-bg: lighten(@brand-warning, 20%);
+@state-warning-border: darken(spin(@state-warning-bg, -10), 3%);
+@state-danger-text: darken(@brand-danger, 25%);
+@state-danger-bg: lighten(@brand-danger, 22%);
+@state-danger-border: darken(spin(@state-danger-bg, -10), 3%);
// == Tooltips
//
// ##
// ** Tooltip max width
-@tooltip-max-width: 200px;
+@tooltip-max-width: 200px;
// ** Tooltip text color
-@tooltip-color: #fff;
+@tooltip-color: @lightest; // superset-var
// ** Tooltip background color
-@tooltip-bg: #000;
-@tooltip-opacity: .9;
+@tooltip-bg: @darkest; // superset-var
+@tooltip-opacity: 0.9;
// ** Tooltip arrow width
-@tooltip-arrow-width: 5px;
+@tooltip-arrow-width: 5px;
// ** Tooltip arrow color
-@tooltip-arrow-color: @tooltip-bg;
-
+@tooltip-arrow-color: @tooltip-bg;
// == Popovers
//
// ##
// ** Popover body background color
-@popover-bg: #fff;
+@popover-bg: @lightest; // superset-var
// ** Popover maximum width
-@popover-max-width: 276px;
+@popover-max-width: 276px;
// ** Popover border color
-@popover-border-color: rgba(0,0,0,.2);
+@popover-border-color: fade(@darkest, @opacity-light); // superset-var
// ** Popover fallback border color
-@popover-fallback-border-color: #ccc;
+@popover-fallback-border-color: @gray-light; // superset-var
// ** Popover title background color
-@popover-title-bg: darken(@popover-bg, 3%);
+@popover-title-bg: darken(@popover-bg, 3%);
// ** Popover arrow width
-@popover-arrow-width: 10px;
+@popover-arrow-width: 10px;
// ** Popover arrow color
-@popover-arrow-color: @popover-bg;
+@popover-arrow-color: @popover-bg;
// ** Popover outer arrow width
-@popover-arrow-outer-width: (@popover-arrow-width + 1);
+@popover-arrow-outer-width: (@popover-arrow-width + 1);
// ** Popover outer arrow color
-@popover-arrow-outer-color: fadein(@popover-border-color, 5%);
+@popover-arrow-outer-color: fadein(@popover-border-color, 5%);
// ** Popover outer arrow fallback color
-@popover-arrow-outer-fallback-color: darken(@popover-fallback-border-color, 20%);
-
+@popover-arrow-outer-fallback-color: darken(
+ @popover-fallback-border-color,
+ 20%
+);
// == Labels
//
// ##
// ** Default label background color
-@label-default-bg: @bs-gray-light;
+@label-default-bg: @bs-gray-light;
// ** Primary label background color
-@label-primary-bg: @brand-primary;
+@label-primary-bg: @brand-primary;
// ** Success label background color
-@label-success-bg: @brand-success;
+@label-success-bg: @brand-success;
// ** Info label background color
-@label-info-bg: @brand-info;
+@label-info-bg: @brand-info;
// ** Warning label background color
-@label-warning-bg: @brand-warning;
+@label-warning-bg: @brand-warning;
// ** Danger label background color
-@label-danger-bg: @brand-danger;
+@label-danger-bg: @brand-danger;
// ** Default label text color
-@label-color: #fff;
+@label-color: @lightest; // superset-var
// ** Default text color of a linked label
-@label-link-hover-color: #fff;
-
+@label-link-hover-color: @lightest; // superset-var
// == Modals
//
// ##
// ** Padding applied to the modal body
-@modal-inner-padding: 20px;
+@modal-inner-padding: 20px;
// ** Padding applied to the modal title
-@modal-title-padding: 15px;
+@modal-title-padding: 15px;
// ** Modal title line-height
-@modal-title-line-height: @line-height-base;
+@modal-title-line-height: @line-height-base;
// ** Background color of modal content area
-@modal-content-bg: #fff;
+@modal-content-bg: @lightest; // superset-var
// ** Modal content border color
-@modal-content-border-color: transparent;
+@modal-content-border-color: transparent;
// ** Modal content border color **for IE8**
-@modal-content-fallback-border-color: #999;
+@modal-content-fallback-border-color: @gray; // superset-var
// ** Modal backdrop background color
-@modal-backdrop-bg: #000;
+@modal-backdrop-bg: @darkest; // superset-var
// ** Modal backdrop opacity
-@modal-backdrop-opacity: .5;
+@modal-backdrop-opacity: 0.5;
// ** Modal header border color
-@modal-header-border-color: #e5e5e5;
+@modal-header-border-color: @gray-bg; // superset-var
// ** Modal footer border color
-@modal-footer-border-color: @modal-header-border-color;
-
-@modal-lg: 900px;
-@modal-md: 600px;
-@modal-sm: 300px;
+@modal-footer-border-color: @modal-header-border-color;
+@modal-lg: 900px;
+@modal-md: 600px;
+@modal-sm: 300px;
// == Alerts
//
// ## Define alert colors, border radius, and padding.
-@alert-padding: 15px;
-@alert-border-radius: @border-radius-base;
-@alert-link-font-weight: bold;
+@alert-padding: 15px;
+@alert-border-radius: @border-radius-base;
+@alert-link-font-weight: bold;
-@alert-success-bg: @state-success-bg;
-@alert-success-text: @state-success-text;
-@alert-success-border: @state-success-border;
+@alert-success-bg: @state-success-bg;
+@alert-success-text: @state-success-text;
+@alert-success-border: @state-success-border;
-@alert-info-bg: @state-info-bg;
-@alert-info-text: @state-info-text;
-@alert-info-border: @state-info-border;
+@alert-info-bg: @state-info-bg;
+@alert-info-text: @state-info-text;
+@alert-info-border: @state-info-border;
-@alert-warning-bg: @state-warning-bg;
-@alert-warning-text: @state-warning-text;
-@alert-warning-border: @state-warning-border;
-
-@alert-danger-bg: @state-danger-bg;
-@alert-danger-text: @state-danger-text;
-@alert-danger-border: @state-danger-border;
+@alert-warning-bg: @state-warning-bg;
+@alert-warning-text: @state-warning-text;
+@alert-warning-border: @state-warning-border;
+@alert-danger-bg: @state-danger-bg;
+@alert-danger-text: @state-danger-text;
+@alert-danger-border: @state-danger-border;
// == Progress bars
//
// ##
// ** Background color of the whole progress component
-@progress-bg: #ccc;
+@progress-bg: @gray-light; // superset-var
// ** Progress bar text color
-@progress-bar-color: #fff;
+@progress-bar-color: @lightest; // superset-var
// ** Variable for setting rounded corners on progress bar.
-@progress-border-radius: @border-radius-base;
+@progress-border-radius: @border-radius-base;
// ** Default progress bar color
-@progress-bar-bg: @brand-primary;
+@progress-bar-bg: @brand-primary;
// ** Success progress bar color
-@progress-bar-success-bg: @brand-success;
+@progress-bar-success-bg: @brand-success;
// ** Warning progress bar color
-@progress-bar-warning-bg: @brand-warning;
+@progress-bar-warning-bg: @brand-warning;
// ** Danger progress bar color
-@progress-bar-danger-bg: @brand-danger;
+@progress-bar-danger-bg: @brand-danger;
// ** Info progress bar color
-@progress-bar-info-bg: @brand-info;
-
+@progress-bar-info-bg: @brand-info;
// == List group
//
// ##
// ** Background color on `.list-group-item`
-@list-group-bg: #fff;
+@list-group-bg: @lightest; // superset-var
// ** `.list-group-item` border color
-@list-group-border: #ddd;
+@list-group-border: @gray-light; // superset-var
// ** List group border radius
-@list-group-border-radius: @border-radius-base;
+@list-group-border-radius: @border-radius-base;
// ** Background color of single list items on hover
-@list-group-hover-bg: #f5f5f5;
+@list-group-hover-bg: @gray-bg; // superset-var
// ** Text color of active list items
-@list-group-active-color: @component-active-color;
+@list-group-active-color: @component-active-color;
// ** Background color of active list items
-@list-group-active-bg: @component-active-bg;
+@list-group-active-bg: @component-active-bg;
// ** Border color of active list elements
-@list-group-active-border: @list-group-border;
+@list-group-active-border: @list-group-border;
// ** Text color for content within active list items
-@list-group-active-text-color: lighten(@list-group-active-bg, 40%);
+@list-group-active-text-color: lighten(@list-group-active-bg, 40%);
// ** Text color of disabled list items
-@list-group-disabled-color: @bs-gray-light;
+@list-group-disabled-color: @bs-gray-light;
// ** Background color of disabled list items
-@list-group-disabled-bg: @gray-lighter;
+@list-group-disabled-bg: @gray-lighter;
// ** Text color for content within disabled list items
@list-group-disabled-text-color: @list-group-disabled-color;
-@list-group-link-color: #555;
-@list-group-link-hover-color: @list-group-link-color;
-@list-group-link-heading-color: #333;
-
+@list-group-link-color: #555;
+@list-group-link-hover-color: @list-group-link-color;
+@list-group-link-heading-color: @almost-black; // superset-var
// == Panels
//
// ##
-@panel-bg: #fff;
-@panel-body-padding: 15px;
-@panel-heading-padding: 10px 15px;
-@panel-footer-padding: @panel-heading-padding;
-@panel-border-radius: @border-radius-base;
+@panel-bg: @lightest; // superset-var
+@panel-body-padding: 15px;
+@panel-heading-padding: 10px 15px;
+@panel-footer-padding: @panel-heading-padding;
+@panel-border-radius: @border-radius-base;
// ** Border color for elements within panels
-@panel-inner-border: #ddd;
-@panel-footer-bg: #f5f5f5;
-
-@panel-default-text: @gray-dark;
-@panel-default-border: transparent;
-@panel-default-heading-bg: #fff;
+@panel-inner-border: @gray-light; // superset-var
+@panel-footer-bg: @gray-bg; // superset-var
-@panel-primary-text: #fff;
-@panel-primary-border: transparent;
-@panel-primary-heading-bg: @brand-primary;
+@panel-default-text: @gray-dark;
+@panel-default-border: transparent;
+@panel-default-heading-bg: @lightest; // superset-var
-@panel-success-text: @state-success-text;
-@panel-success-border: transparent;
-@panel-success-heading-bg: @state-success-bg;
+@panel-primary-text: @lightest; // superset-var
+@panel-primary-border: transparent;
+@panel-primary-heading-bg: @brand-primary;
-@panel-info-text: @state-info-text;
-@panel-info-border: transparent;
-@panel-info-heading-bg: @state-info-bg;
+@panel-success-text: @state-success-text;
+@panel-success-border: transparent;
+@panel-success-heading-bg: @state-success-bg;
-@panel-warning-text: @state-warning-text;
-@panel-warning-border: transparent;
-@panel-warning-heading-bg: @state-warning-bg;
+@panel-info-text: @state-info-text;
+@panel-info-border: transparent;
+@panel-info-heading-bg: @state-info-bg;
-@panel-danger-text: @state-danger-text;
-@panel-danger-border: transparent;
-@panel-danger-heading-bg: @state-danger-bg;
+@panel-warning-text: @state-warning-text;
+@panel-warning-border: transparent;
+@panel-warning-heading-bg: @state-warning-bg;
+@panel-danger-text: @state-danger-text;
+@panel-danger-border: transparent;
+@panel-danger-heading-bg: @state-danger-bg;
// == Thumbnails
//
// ##
// ** Padding around the thumbnail image
-@thumbnail-padding: 4px;
+@thumbnail-padding: 4px;
// ** Thumbnail background color
-@thumbnail-bg: @body-bg;
+@thumbnail-bg: @body-bg;
// ** Thumbnail border color
-@thumbnail-border: #ddd;
+@thumbnail-border: @gray-light; // superset-var
// ** Thumbnail border radius
-@thumbnail-border-radius: @border-radius-base;
+@thumbnail-border-radius: @border-radius-base;
// ** Custom text color for thumbnail captions
-@thumbnail-caption-color: @text-color;
+@thumbnail-caption-color: @text-color;
// ** Padding around the thumbnail caption
-@thumbnail-caption-padding: 9px;
-
+@thumbnail-caption-padding: 9px;
// == Wells
//
// ##
-@well-bg: #f5f5f5;
-@well-border: darken(@well-bg, 7%);
-
+@well-bg: @gray-bg; // superset-var
+@well-border: darken(@well-bg, 7%);
// == Badges
//
// ##
-@badge-color: #fff;
+@badge-color: @lightest; // superset-var
// ** Linked badge text color on hover
-@badge-link-hover-color: #fff;
-@badge-bg: @brand-primary;
+@badge-link-hover-color: @lightest; // superset-var
+@badge-bg: @brand-primary;
// ** Badge text color in active nav link
-@badge-active-color: @link-color;
+@badge-active-color: @link-color;
// ** Badge background color in active nav link
-@badge-active-bg: #fff;
-
-@badge-font-weight: bold;
-@badge-line-height: 1;
-@badge-border-radius: 10px;
+@badge-active-bg: @lightest; // superset-var
+@badge-font-weight: bold;
+@badge-line-height: 1;
+@badge-border-radius: 10px;
// == Breadcrumbs
//
// ##
-@breadcrumb-padding-vertical: 8px;
+@breadcrumb-padding-vertical: 8px;
@breadcrumb-padding-horizontal: 15px;
// ** Breadcrumb background color
-@breadcrumb-bg: #f5f5f5;
+@breadcrumb-bg: @gray-bg; // superset-var
// ** Breadcrumb text color
-@breadcrumb-color: #ccc;
+@breadcrumb-color: @gray-light; // superset-var
// ** Text color of current page in the breadcrumb
-@breadcrumb-active-color: @bs-gray-light;
+@breadcrumb-active-color: @bs-gray-light;
// ** Textual separator for between breadcrumb elements
-@breadcrumb-separator: "/";
-
+@breadcrumb-separator: '/';
// == Carousel
//
// ##
-@carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6);
-
-@carousel-control-color: #fff;
-@carousel-control-width: 15%;
-@carousel-control-opacity: .5;
-@carousel-control-font-size: 20px;
+@carousel-text-shadow: 0 1px 2px fade(@darkest, @opacity-light); // superset-var
-@carousel-indicator-active-bg: #fff;
-@carousel-indicator-border-color: #fff;
+@carousel-control-color: @lightest; // superset-var
+@carousel-control-width: 15%;
+@carousel-control-opacity: 0.5;
+@carousel-control-font-size: 20px;
-@carousel-caption-color: #fff;
+@carousel-indicator-active-bg: @lightest; // superset-var
+@carousel-indicator-border-color: @lightest; // superset-var
+@carousel-caption-color: @lightest; // superset-var
// == Close
//
// ##
-@close-font-weight: bold;
-@close-color: #fff;
-@close-text-shadow: 0 1px 0 #fff;
-
+@close-font-weight: bold;
+@close-color: @lightest; // superset-var
+@close-text-shadow: 0 1px 0 @lightest; // superset-var
// == Code
//
// ##
-@code-color: #c7254e;
-@code-bg: #f9f2f4;
-
-@kbd-color: #fff;
-@kbd-bg: #333;
+@code-color: darken(@info, @colorstop-one);
+@code-bg: @gray-bg; // superset-var
-@pre-bg: #f5f5f5;
-@pre-color: @gray-dark;
-@pre-border-color: #ccc;
-@pre-scrollable-max-height: 340px;
+@kbd-color: @lightest; // superset-var
+@kbd-bg: @almost-black; // superset-var
+@pre-bg: @gray-bg; // superset-var
+@pre-color: @gray-dark;
+@pre-border-color: @gray-light; // superset-var
+@pre-scrollable-max-height: 340px;
// == Type
//
@@ -866,22 +830,22 @@
// ** Horizontal offset for forms and lists.
@component-offset-horizontal: 180px;
// ** Text muted color
-@text-muted: @bs-gray-light;
+@text-muted: @bs-gray-light;
// ** Abbreviations and acronyms border color
-@abbr-border-color: @bs-gray-light;
+@abbr-border-color: @bs-gray-light;
// ** Headings small color
-@headings-small-color: @bs-gray-light;
+@headings-small-color: @bs-gray-light;
// ** Blockquote small color
-@blockquote-small-color: @bs-gray-light;
+@blockquote-small-color: @bs-gray-light;
// ** Blockquote font size
-@blockquote-font-size: (@font-size-base * 1.25);
+@blockquote-font-size: (@font-size-base * 1.25);
// ** Blockquote border color
-@blockquote-border-color: @gray-lighter;
+@blockquote-border-color: @gray-lighter;
// ** Page header border color
-@page-header-border-color: @gray-lighter;
+@page-header-border-color: @gray-lighter;
// ** Width of horizontal description list titles
-@dl-horizontal-offset: @component-offset-horizontal;
+@dl-horizontal-offset: @component-offset-horizontal;
// ** Point at which .dl-horizontal becomes horizontal
-@dl-horizontal-breakpoint: @grid-float-breakpoint;
+@dl-horizontal-breakpoint: @grid-float-breakpoint;
// ** Horizontal line color.
-@hr-border: @gray-lighter;
+@hr-border: @gray-lighter;
diff --git a/superset/assets/stylesheets/less/index.less b/superset/assets/stylesheets/less/index.less
index dea21cd..adb01cd 100644
--- a/superset/assets/stylesheets/less/index.less
+++ b/superset/assets/stylesheets/less/index.less
@@ -18,12 +18,12 @@
*/
// Index .less, any imports here will be included in the final css build
-@import "~bootstrap/less/bootstrap.less";
-@import "./cosmo/variables.less";
-@import "./cosmo/bootswatch.less";
-@import "../../stylesheets/less/variables.less";
+@import '~bootstrap/less/bootstrap.less';
+@import './variables.less';
+@import './cosmo/bootswatch.less';
-html, body {
+html,
+body {
font-size: @font-size-base;
line-height: @line-height-base;
}
diff --git a/superset/assets/stylesheets/less/variables.less b/superset/assets/stylesheets/less/variables.less
index e6a1075..c84318a 100644
--- a/superset/assets/stylesheets/less/variables.less
+++ b/superset/assets/stylesheets/less/variables.less
@@ -24,56 +24,43 @@
/* component styles. This will allow us to more easily adjust theming */
/************************************************************************/
-@indicator-color: #44C0FF;
+@primary-color: #00a699;
+@indicator-color: #44c0ff;
@almost-black: #263238;
@gray-dark: #484848;
-@gray-light: #CFD8DC;
+@gray-light: #cfd8dc;
@gray: #879399;
@gray-bg: #f5f5f5;
-@gray-heading: #A3A3A3;
-@menu-hover: #F2F3F5;
+@gray-heading: #a3a3a3;
+@menu-hover: #f2f3f5;
@lightest: #ffffff;
@darkest: #000000;
-/* toasts */
-@pink: #E32364;
-@purple: #2C2261;
+/**************************** text-specific *****************************/
+@link: @brand-primary;
+@link-hover: darken(@link, @colorstop-one);
-/* status colors */
-@success: #00BFA5;
-@warning: #FFAB00;
-@error: #FF0000;
-@danger: @pink;
+/***************************** status colors ****************************/
+@success: #4ac15f;
+@info: lighten(#2ab7ca, 15%);
+@warning: mix(
+ #fed766,
+ #ffab00,
+ 50%
+); // mix of old superset warning color and cosmo warning color. Compromise!
+@danger: #fe4a49;
/* general component effects */
-@shadow-highlight: rgb(0, 166, 153);
+@shadow-highlight: @primary-color;
-/* filter indicators */
+/*************************** 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;
+@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) {
@@ -81,7 +68,7 @@
.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);
+ @value: extract(@badge-colors, @i);
background-color: @value;
}
.badge-loop(@i - 1);
@@ -130,25 +117,40 @@
/* core values used to build more complex styles for headers, etc. */
/************************************************************************/
-// Weights
+// *************************** Weights **********************************
@font-weight-light: 200;
@font-weight-normal: 400;
@font-weight-bold: 700;
-// Font Sizes
+// ***************************** Font Sizes *****************************
@font-size-base: 14px; // Base `rem` units on this, as needed.
-// Ranged Sizes
+
@font-size-xxs: 9px;
@font-size-xs: 10px;
-@font-size-s: 12px; // mapping 11px;
-@font-size-m: @font-size-base; // maps to @font-size-base; for now
+@font-size-s: 12px;
+@font-size-m: @font-size-base;
@font-size-l: 16px;
-@font-size-xl: 21px; // mapping 20px, 24px when there's a 32 aboves it
+@font-size-xl: 21px;
@font-size-xxl: 28px;
-// Line Heights
+// **************************** Line Heights ****************************
@line-height-base: 1.4;
// Ranged Sizes
@line-height-tight: 1;
@line-height-normal: @line-height-base;
@line-height-loose: 2;
+
+// ****************************** Families ******************************
+@font-family-sans-serif: Helvetica, Arial;
+@font-family-serif: Georgia, 'Times New Roman', Times, serif;
+@font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace;
+@font-family-base: @font-family-sans-serif;
+
+/************************************************************************/
+/* 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';
diff --git a/superset/assets/stylesheets/react-select/select.less b/superset/assets/stylesheets/react-select/select.less
index d2c2a02..dc8afef 100644
--- a/superset/assets/stylesheets/react-select/select.less
+++ b/superset/assets/stylesheets/react-select/select.less
@@ -16,18 +16,18 @@
* specific language governing permissions and limitations
* under the License.
*/
-@import "../../stylesheets/less/variables.less";
+@import '../../stylesheets/less/variables.less';
-@import "~react-select/less/select.less";
-@select-primary-color: @darkest;
-@select-input-height: 30px;
+@import '~react-select/less/select.less';
+@select-primary-color: @darkest;
+@select-input-height: 30px;
// imports
-@import "~react-select/less/control.less";
-@import "~react-select/less/menu.less";
-@import "~react-select/less/mixins.less";
-@import "~react-select/less/multi.less";
-@import "~react-select/less/spinner.less";
+@import '~react-select/less/control.less';
+@import '~react-select/less/menu.less';
+@import '~react-select/less/mixins.less';
+@import '~react-select/less/multi.less';
+@import '~react-select/less/spinner.less';
.Select--multi {
.Select-multi-value-wrapper {
@@ -52,9 +52,9 @@
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- padding: 0 .5rem;
+ -ms-flex-align: center;
+ align-items: center;
+ padding: 0 0.5rem;
}
.VirtualizedSelectFocusedOption {
background-color: fade(@darkest, @opacity-light);
diff --git a/superset/assets/stylesheets/reactable-pagination.less b/superset/assets/stylesheets/reactable-pagination.less
index 677b54d..2f4b02b 100644
--- a/superset/assets/stylesheets/reactable-pagination.less
+++ b/superset/assets/stylesheets/reactable-pagination.less
@@ -16,10 +16,10 @@
* specific language governing permissions and limitations
* under the License.
*/
-@import "../stylesheets/less/variables.less";
-
+@import '../stylesheets/less/variables.less';
+
.reactable-pagination td {
- padding: 15px 0 0 0!important;
+ padding: 15px 0 0 0 !important;
}
.reactable-pagination a:focus {
text-decoration: none;
@@ -31,7 +31,7 @@
.reactable-previous-page {
background: @lightest;
border-radius: 2px;
- border: 1px solid @gray-light ;
+ border: 1px solid @gray-light;
color: @gray-dark;
display: inline-block;
font-size: @font-size-s;
diff --git a/superset/assets/stylesheets/superset.less b/superset/assets/stylesheets/superset.less
index 2810ed4..32ebd8d 100644
--- a/superset/assets/stylesheets/superset.less
+++ b/superset/assets/stylesheets/superset.less
@@ -17,123 +17,122 @@
* under the License.
*/
@import './less/index.less';
-@import "./less/cosmo/variables.less";
+@import './less/variables.less';
@import './less/index.less';
-@import "./less/variables.less";
@datasource-sql-expression-width: 450px;
.alert.alert-danger > .debugger {
- color: @error;
+ color: @danger;
}
.modal-dialog {
- z-index: 1100;
+ z-index: 1100;
}
.label {
- font-size: 100%;
+ font-size: 100%;
}
.no-wrap {
- white-space: nowrap;
+ white-space: nowrap;
}
input.form-control {
- background-color: @lightest;
+ background-color: @lightest;
}
.chart-header a.danger {
- color: @error;
+ color: @danger;
}
.disabledButton {
- pointer-events: none;
+ pointer-events: none;
}
.col-left-fixed {
- width:350px;
- position: absolute;
- float: left;
+ width: 350px;
+ position: absolute;
+ float: left;
}
.col-offset {
- margin-left: 365px;
+ margin-left: 365px;
}
.slice_description {
- padding: 8px;
- margin: 5px 0;
- border: 1px solid @gray-light;
- background-color: @gray-bg;
- border-radius: 5px;
- font-size: @font-size-s;
+ padding: 8px;
+ margin: 5px 0;
+ border: 1px solid @gray-light;
+ background-color: @gray-bg;
+ border-radius: 5px;
+ font-size: @font-size-s;
}
.slice_info {
- cursor: pointer;
+ cursor: pointer;
}
.padded {
- padding: 10px;
+ padding: 10px;
}
.intable-longtext {
- max-height: 200px;
- overflow: auto;
+ max-height: 200px;
+ overflow: auto;
}
.container-fluid {
- text-align: left;
+ text-align: left;
}
-input[type="checkbox"] {
+input[type='checkbox'] {
display: inline-block;
width: 16px;
height: 16px;
}
.widget-is-cached {
- display: none;
+ display: none;
}
.header span.label {
- margin-left: 5px;
- margin-right: 5px;
+ margin-left: 5px;
+ margin-right: 5px;
}
#timer {
- width: 80px;
- text-align: right;
+ width: 80px;
+ text-align: right;
}
.notbtn {
- cursor: default;
- box-shadow: none;
- border: 1px solid @gray;
+ cursor: default;
+ box-shadow: none;
+ border: 1px solid @gray;
}
hr {
- margin-top: 15px;
- margin-bottom: 15px;
+ margin-top: 15px;
+ margin-bottom: 15px;
}
span.title-block {
- background-color: @gray-bg;
- border-radius: 4px;
- padding: 6px 12px;
- margin: 0px 10px;
- font-size: @font-size-xl;
+ background-color: @gray-bg;
+ border-radius: 4px;
+ padding: 6px 12px;
+ margin: 0px 10px;
+ font-size: @font-size-xl;
}
.nvtooltip {
- z-index: 888;
- transition: opacity 0ms linear;
- -moz-transition: opacity 0ms linear;
- -webkit-transition: opacity 0ms linear;
- transition-delay: 0ms;
- -moz-transition-delay: 0ms;
- -webkit-transition-delay: 0ms;
+ z-index: 888;
+ transition: opacity 0ms linear;
+ -moz-transition: opacity 0ms linear;
+ -webkit-transition: opacity 0ms linear;
+ transition-delay: 0ms;
+ -moz-transition-delay: 0ms;
+ -webkit-transition-delay: 0ms;
}
.nvtooltip table td {
- font-size: @font-size-s !important;
+ font-size: @font-size-s !important;
}
div.navbar {
z-index: 999;
@@ -163,16 +162,15 @@ img.loading {
margin: 10px;
}
img.viz-thumb-option {
- width: 100px;
- border: 1px solid @gray;
- margin-right: 5px;
- border-radius: 5px;
+ width: 100px;
+ border: 1px solid @gray;
+ margin-right: 5px;
+ border-radius: 5px;
}
.select2-drop.bigdrop .select2-results {
- max-height: 700px;
+ max-height: 700px;
}
-
li.widget:hover {
z-index: 1000;
}
@@ -187,31 +185,30 @@ li.widget:hover {
margin-right: 10px;
}
-
#is_cached {
display: none;
}
.slice_container.faded {
- opacity: .2;
+ opacity: 0.2;
}
.navbar .alert {
- padding: 5px 10px;
- margin-top: 8px;
- margin-bottom: 0;
+ padding: 5px 10px;
+ margin-top: 8px;
+ margin-bottom: 0;
}
.table-condensed {
- font-size: @font-size-s;
+ font-size: @font-size-s;
}
-.table-condensed input[type="checkbox"] {
- float: left;
+.table-condensed input[type='checkbox'] {
+ float: left;
}
table.table-no-hover tr:hover {
- background-color: initial;
+ background-color: initial;
}
.editable-title input {
@@ -232,7 +229,7 @@ table.table-no-hover tr:hover {
border-radius: 2px;
}
-.editable-title input[type="text"] {
+.editable-title input[type='text'] {
border: 1px solid @gray;
border-radius: 2px;
padding: 2px;
@@ -253,7 +250,7 @@ table.table-no-hover tr:hover {
width: 95%;
}
-.editable-title input[type="button"] {
+.editable-title input[type='button'] {
border-color: transparent;
background: transparent;
font-size: inherit;
@@ -262,11 +259,11 @@ table.table-no-hover tr:hover {
cursor: initial;
}
-.editable-title.editable-title--editable input[type="button"] {
+.editable-title.editable-title--editable input[type='button'] {
cursor: pointer;
}
-.editable-title.editable-title--editing input[type="button"] {
+.editable-title.editable-title--editing input[type='button'] {
cursor: text;
}
@@ -274,7 +271,8 @@ table.table-no-hover tr:hover {
position: absolute;
z-index: 5;
- .btn.btn-sm, .btn.btn-sm:active {
+ .btn.btn-sm,
+ .btn.btn-sm:active {
border: none;
padding-top: 0;
padding-bottom: 0;
@@ -331,102 +329,102 @@ table.table-no-hover tr:hover {
margin-top: 10px;
}
.m-b-10 {
- margin-bottom: 10px;
+ margin-bottom: 10px;
}
.m-l-5 {
- margin-left: 5px;
+ margin-left: 5px;
}
.m-l-10 {
- margin-left: 10px;
+ margin-left: 10px;
}
.m-l-25 {
- margin-left: 25px;
+ margin-left: 25px;
}
.p-l-0 {
- padding-left: 0;
+ padding-left: 0;
}
.p-t-8 {
- padding-top: 8;
+ padding-top: 8;
}
.p-r-2 {
- padding-right: 2;
+ padding-right: 2;
}
.Select-menu-outer {
- z-index: @z-index-dropdown !important;
+ z-index: @z-index-dropdown !important;
}
/** not found record **/
.panel b {
- display: inline-block;
- width: 98%;
- padding: 2rem;
- margin: 0 1% 20px 1%;
- background: @gray-bg;
+ display: inline-block;
+ width: 98%;
+ padding: 2rem;
+ margin: 0 1% 20px 1%;
+ background: @gray-bg;
}
/** table on both sides of the gap **/
.panel .table-responsive {
- padding: 0 1%;
+ padding: 0 1%;
}
@media screen and (max-width: 767px) {
- .panel .table-responsive {
- width: 98%;
- }
+ .panel .table-responsive {
+ width: 98%;
+ }
}
.list-container {
- position: relative;
+ position: relative;
}
.list-search-container {
- position: relative;
+ position: relative;
}
.list-search-container .dropdown-toggle {
- position: absolute;
- top: -43px;
- right: 25px;
- border: 0;
- padding: 0 18px;
+ position: absolute;
+ top: -43px;
+ right: 25px;
+ border: 0;
+ padding: 0 18px;
}
.list-search-container .fa-filter {
- position: relative;
- left: -8px;
+ position: relative;
+ left: -8px;
}
.list-search-container .dropdown-menu {
- top: -19px;
- right: 0;
- left: auto;
- float: none;
+ top: -19px;
+ right: 0;
+ left: auto;
+ float: none;
}
.list-container .pagination-container {
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- justify-content: center;
- align-items: center;
- padding-bottom: 20px;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+ padding-bottom: 20px;
}
.list-container .pagination-container .pagination {
- margin: 0 15px;
+ margin: 0 15px;
}
.list-container .pagination-container strong {
- margin-right: 5px;
+ margin-right: 5px;
}
.list-container .list-add-action {
- position: absolute;
- top: -30px;
- right: 15px;
+ position: absolute;
+ top: -30px;
+ right: 15px;
}
.list-container .form-actions-container {
- padding: 0 0 20px 10px;
- display: inline;
+ padding: 0 0 20px 10px;
+ display: inline;
}
.form-actions-container button {
@@ -437,8 +435,8 @@ table.table-no-hover tr:hover {
}
.list-container .filter-action {
- margin: 10px 10px 0 10px;
- padding-bottom: 15px;
+ margin: 10px 10px 0 10px;
+ padding-bottom: 15px;
}
// .list-container .filters-container table tr:first-child td {
@@ -457,11 +455,11 @@ table.table-no-hover tr:hover {
}
iframe {
- border: none;
- width: 100%;
+ border: none;
+ width: 100%;
}
.text-transparent {
- color: transparent;
+ color: transparent;
}
.dimmed {
@@ -498,25 +496,25 @@ g.annotation-container {
stroke: @brand-primary;
}
.reactable-header-sortable {
- position:relative;
- padding-right: 40px;
+ position: relative;
+ padding-right: 40px;
}
.reactable-header-sortable::after {
- font: normal normal normal 14px/1 FontAwesome;
- content: "\f0dc";
- margin-left: 10px;
- color: @brand-primary;
+ font: normal normal normal 14px/1 FontAwesome;
+ content: '\f0dc';
+ margin-left: 10px;
+ color: @brand-primary;
}
.reactable-header-sort-asc::after {
- content: "\f0de";
- color: @brand-primary;
+ content: '\f0de';
+ color: @brand-primary;
}
.reactable-header-sort-desc::after {
- content: "\f0dd";
- color: @brand-primary;
+ content: '\f0dd';
+ color: @brand-primary;
}
tr.reactable-column-header th.reactable-header-sortable {
- padding-right: 17px;
+ padding-right: 17px;
}
.explore-chart-overlay {