Separate Bootstrap/Ant styling (#3279)

* Separate Ant less dependency tree * Change order between variables and ant imports * Remove inc/variables from ant.less * Update input-height-base for antd * Set same input-color for Ant and Bootstrap
getredash · Jan 15, 2019 · df23842 · df23842
1 parent d68a4dc
commit df23842
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 7 deletions.
diff --git a/client/app/assets/less/redash/ant.less → client/app/assets/less/ant.less b/client/app/assets/less/redash/ant.less → client/app/assets/less/ant.less
@@ -10,14 +10,20 @@
 @import '~antd/lib/time-picker/style/index.less';
 
 // Overwritting Ant Design defaults to fit into Redash current style
+@redash-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+
 @font-family-no-number  : @redash-font;
 @font-family            : @redash-font;
 @code-family            : @redash-font;
+@font-size-base         : 13px;
+@text-color             : #767676;
 
-@border-radius-base     : @redash-input-radius;
+@input-height-base      : 35px;
+@input-color            : #9E9E9E;
+@border-radius-base     : 2px;
 @border-color-base      : #e8e8e8;
 
-@primary-color          : @blue;
+@primary-color          : #2196F3;
 
 // Fix for disabled button styles inside Tooltip component.
 // Tooltip wraps disabled buttons with `<span>` and moves all styles

diff --git a/client/app/assets/less/inc/variables.less b/client/app/assets/less/inc/variables.less
@@ -55,6 +55,7 @@
 /* --------------------------------------------------------
     Form
 -----------------------------------------------------------*/
+@input-color:                           #9E9E9E;
 @input-color-placeholder:               #b4b4b4;
 @input-border:                          #e8e8e8;
 @input-border-radius:                   0;

diff --git a/client/app/assets/less/main.less b/client/app/assets/less/main.less
@@ -1,5 +1,3 @@
-@import 'redash/ant';
-
 /** LESS Plugins **/
 @import 'inc/less-plugins/for';
 

diff --git a/client/app/assets/less/redash/redash-newstyle.less b/client/app/assets/less/redash/redash-newstyle.less
@@ -811,11 +811,9 @@ page-header, .page-header--new {
 // Forms
 .form-control {
   border-radius: @redash-input-radius;
-  color: #9E9E9E;
 
   &:focus {
     box-shadow: none !important;
-    color: #111;
     border-color: @blue;
   }
 

diff --git a/webpack.config.js b/webpack.config.js
@@ -27,7 +27,11 @@ const extensionPath = fs.realpathSync(path.join(__dirname, extensionsRelativePat
 const config = {
   mode: isProduction ? "production" : "development",
   entry: {
-    app: ["./client/app/index.js", "./client/app/assets/less/main.less"],
+    app: [
+      "./client/app/index.js",
+      "./client/app/assets/less/main.less",
+      "./client/app/assets/less/ant.less"
+    ],
     server: ["./client/app/assets/less/server.less"]
   },
   output: {