converted all less to scss and changed exports (#36)

DimitarChristoff · May 16, 2018 · e6c1291 · e6c1291
1 parent 3569629
commit e6c1291
Show file tree

Hide file tree

Showing 15 changed files with 94 additions and 94 deletions.
diff --git a/config/webpack.dev.js b/config/webpack.dev.js
@@ -49,8 +49,8 @@ module.exports = {
         presets: ['react', 'es2015', 'stage-0']
       }
     }, {
-      test: /\.(less|css)$/,
-      loader: 'style-loader!css-loader!less-loader'
+      test: /\.(scss|css)$/,
+      loader: 'style-loader!css-loader!sass-loader'
     }, {
       test: /\.(jpe?g|png|gif|svg)$/i,
       loaders: [

diff --git a/config/webpack.prod.js b/config/webpack.prod.js
@@ -55,8 +55,8 @@ module.exports = {
         presets: ['es2015', 'stage-0']
       }
     }, {
-      test: /\.(less|css)$/,
-      loader: 'style-loader!css-loader!less-loader'
+      test: /\.(scss|css)$/,
+      loader: 'style-loader!css-loader!scss-loader'
     }, {
       test: /\.(jpe?g|png|gif|svg)$/i,
       loaders: [
@@ -87,7 +87,7 @@ module.exports = {
     new CopyWebpackPlugin([
       {
         flatten: true,
-        from: `${__INPUT__}/*.less`
+        from: `${__INPUT__}/*.scss`
       },
       {
         from: `${__PLUGINS__}/**/*.css`,

diff --git a/dist/slick-default-theme.less → dist/slick-default-theme.scss b/dist/slick-default-theme.less → dist/slick-default-theme.scss
@@ -8,30 +8,30 @@
 .slickgrid-container {
   .slick-header-columns,
   .slick-header-column {
-    background: @grid-header-background;
+    background: $grid-header-background;
     // background-color: #EBECEE;
   }
 
   .slick-header-columns {
-    border-bottom: 1px solid @grid-border-color;
+    border-bottom: 1px solid $grid-border-color;
     //background: linear-gradient(rgba(0,0,0,0) 60%, rgba(0,0,0,.1));
   }
 
   .slick-header-column {
-    border-right: 1px solid @grid-border-color;
-    border-bottom: 1px solid @grid-border-color;
+    border-right: 1px solid $grid-border-color;
+    border-bottom: 1px solid $grid-border-color;
   }
 
   .slick-header-column:hover {
-    background: darken(@grid-header-background, 2%);
+    background: darken($grid-header-background, 2%);
   }
 
   .slick-header-column-active {
-    background: darken(@grid-header-background, 5%) !important;
+    background: darken($grid-header-background, 5%) !important;
   }
 
   .slick-headerrow {
-    background: @grid-header-background;
+    background: $grid-header-background;
   }
 
   .slick-headerrow-column {
@@ -51,10 +51,10 @@
     .slick-cell {
       background: white;
 
-      padding-top: @cell-padding-top;
-      padding-bottom: @cell-padding-bottom;
-      padding-left: @cell-padding-left;
-      padding-right: @cell-padding-right;
+      padding-top: $cell-padding-top;
+      padding-bottom: $cell-padding-bottom;
+      padding-left: $cell-padding-left;
+      padding-right: $cell-padding-right;
       box-sizing: border-box;
 
       &.invalid {
@@ -66,7 +66,7 @@
       }
 
       &.selected {
-        background-color: @grid-cell-selected-color;
+        background-color: $grid-cell-selected-color;
       }
 
       &.active {
@@ -93,11 +93,11 @@
     }
 
     &.odd .slick-cell {
-      background: darken(@grid-cell-color, 2%);
+      background: darken($grid-cell-color, 2%);
 
       // make sure we override the regular background color:
       &.selected {
-        background-color: @grid-cell-selected-color;
+        background-color: $grid-cell-selected-color;
       }
     }
 
@@ -106,7 +106,7 @@
 
       // make sure we override the regular background color:
       &.selected {
-        background-color: @grid-cell-selected-color;
+        background-color: $grid-cell-selected-color;
       }
     }
 
@@ -181,7 +181,7 @@
     display: inline-block;
     position: absolute;
 
-    // The next few items are already defined in the slick-headermenu.less file and it should stay that way, *unless* you also replace the button image included there.
+    // The next few items are already defined in the slick-headermenu.scss file and it should stay that way, *unless* you also replace the button image included there.
     //bottom: 0;
     //right: 0;
     //top: 0;
@@ -295,7 +295,7 @@
 div.slick-large-editor-text {
   z-index: 10000;
   position: absolute;
-  background: @grid-cell-color;
+  background: $grid-cell-color;
   padding: 5px;
   border: 1px solid rgba(0, 0, 0, .5);
   box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .3);
@@ -309,8 +309,8 @@ div.slick-large-editor-text {
   div {
     text-align: right;
     button {
-      background-color: darken(@grid-cell-color, 10%);
-      border: 1px solid @grid-border-color;
+      background-color: darken($grid-cell-color, 10%);
+      border: 1px solid $grid-border-color;
       cursor: pointer;
       justify-content: center;
       padding-left: 0.75em;

diff --git a/dist/slick.es6.min.js.map b/dist/slick.es6.min.js.map
diff --git a/dist/slick.grid.less → dist/slick.grid.scss b/dist/slick.grid.less → dist/slick.grid.scss
@@ -34,7 +34,7 @@
     line-height: 16px;
     margin: 0;
     padding: 4px;
-    border: 1px solid @grid-border-color;
+    border: 1px solid $grid-border-color;
     order-left: 0px;
     border-top: 0px;
     border-bottom: 0px;
@@ -48,7 +48,7 @@
   .slick-footerrow {
     position: relative;
     width: 100%;
-    border: 1px solid @grid-border-color;
+    border: 1px solid $grid-border-color;
     border-right-color: transparent;
     border-bottom-color: transparent;
     border-right-width: 0;
@@ -58,10 +58,10 @@
   }
   .slick-viewport {
     overflow: auto;
-    &&::-webkit-scrollbar {
+    &::-webkit-scrollbar {
       -webkit-appearance: none;
     }
-    &&::-webkit-scrollbar-thumb {
+    &::-webkit-scrollbar-thumb {
       border-radius: 4px;
       border: 2px solid white; /* should match background, can't be transparent */
       background-color: rgba(0, 0, 0, .5);
@@ -99,7 +99,7 @@
     top: 0;
     bottom: 0;
 
-    border: 1px solid @grid-border-color;
+    border: 1px solid $grid-border-color;
     border-top-color: transparent;
     border-left-color: transparent;
     border-top-width: 0;
@@ -133,7 +133,7 @@
     line-height: 16px;
     margin: 0;
     padding: 4px;
-    border-right: 1px solid @grid-border-color;
+    border-right: 1px solid $grid-border-color;
     border-left: 0px !important;
     border-top: 0px !important;
     border-bottom: 0px !important;
@@ -143,12 +143,12 @@
 
   .slick-cell {
     box-sizing: border-box;
-    border-style: @grid-border-style;
+    border-style: $grid-border-style;
     padding: 1px 2px 1px 2px;
   }
 
   .slick-header-column {
-    padding: @cell-padding-top @cell-padding-right @cell-padding-bottom @cell-padding-left;
+    padding: $cell-padding-top $cell-padding-right $cell-padding-bottom $cell-padding-left;
   }
 
   .grid-canvas {

diff --git a/dist/slick.grid.variables.less b/dist/slick.grid.variables.less
diff --git a/dist/slick.grid.variables.scss b/dist/slick.grid.variables.scss
@@ -0,0 +1,13 @@
+$grid-border-color: #D6D7D6;
+$grid-border-style: solid;
+
+//$grid-header-background: url('../images/header-columns-bg.gif') repeat-x center bottom;
+$grid-header-background: #F7F7F6;
+
+$grid-cell-color: rgb(255, 255, 255);
+$grid-cell-selected-color: darken($grid-cell-color, 5%);
+
+$cell-padding-top: 4px;
+$cell-padding-right: 4px;
+$cell-padding-bottom: 4px;
+$cell-padding-left: 4px;
diff --git a/examples/examples.less → examples/examples.scss b/examples/examples.less → examples/examples.scss
@@ -1,6 +1,6 @@
-@import '../src/slick.grid.variables.less';
-@import '../src/slick.grid.less';
-@import '../src/slick-default-theme.less';
+@import '../src/slick.grid.variables.scss';
+@import '../src/slick.grid.scss';
+@import '../src/slick-default-theme.scss';
 @import '~flatpickr/dist/flatpickr.min.css';
 
 .container {
@@ -10,7 +10,7 @@
 #myGrid {
   background: white;
   outline: 0;
-  border: 1px solid @grid-border-color;
+  border: 1px solid $grid-border-color;
 }
 
 .grid-header label {

diff --git a/examples/index.js b/examples/index.js
@@ -1,4 +1,4 @@
-import './examples.less';
+import './examples.scss';
 import React from 'react';
 import ReactDOM from 'react-dom';
 

diff --git a/package.json b/package.json
@@ -40,8 +40,8 @@
     "history": "^4.6.0",
     "html-loader": "^0.4.3",
     "image-webpack-loader": "^3.2.0",
-    "less": "^2.7.1",
-    "less-loader": "^3.0.0",
+    "node-sass": "^4.9.0",
+    "sass-loader": "^7.0.1",
     "react": "^15.4.2",
     "react-dom": "^15.4.2",
     "rimraf": "^2.5.3",

diff --git a/src/index.js b/src/index.js
@@ -14,4 +14,4 @@ export {
   Grid,
   FrozenGrid,
   Plugins
-}
+};
diff --git a/src/slick-default-theme.less → src/slick-default-theme.scss b/src/slick-default-theme.less → src/slick-default-theme.scss
@@ -8,30 +8,30 @@
 .slickgrid-container {
   .slick-header-columns,
   .slick-header-column {
-    background: @grid-header-background;
+    background: $grid-header-background;
     // background-color: #EBECEE;
   }
 
   .slick-header-columns {
-    border-bottom: 1px solid @grid-border-color;
+    border-bottom: 1px solid $grid-border-color;
     //background: linear-gradient(rgba(0,0,0,0) 60%, rgba(0,0,0,.1));
   }
 
   .slick-header-column {
-    border-right: 1px solid @grid-border-color;
-    border-bottom: 1px solid @grid-border-color;
+    border-right: 1px solid $grid-border-color;
+    border-bottom: 1px solid $grid-border-color;
   }
 
   .slick-header-column:hover {
-    background: darken(@grid-header-background, 2%);
+    background: darken($grid-header-background, 2%);
   }
 
   .slick-header-column-active {
-    background: darken(@grid-header-background, 5%) !important;
+    background: darken($grid-header-background, 5%) !important;
   }
 
   .slick-headerrow {
-    background: @grid-header-background;
+    background: $grid-header-background;
   }
 
   .slick-headerrow-column {
@@ -51,10 +51,10 @@
     .slick-cell {
       background: white;
 
-      padding-top: @cell-padding-top;
-      padding-bottom: @cell-padding-bottom;
-      padding-left: @cell-padding-left;
-      padding-right: @cell-padding-right;
+      padding-top: $cell-padding-top;
+      padding-bottom: $cell-padding-bottom;
+      padding-left: $cell-padding-left;
+      padding-right: $cell-padding-right;
       box-sizing: border-box;
 
       &.invalid {
@@ -66,7 +66,7 @@
       }
 
       &.selected {
-        background-color: @grid-cell-selected-color;
+        background-color: $grid-cell-selected-color;
       }
 
       &.active {
@@ -93,11 +93,11 @@
     }
 
     &.odd .slick-cell {
-      background: darken(@grid-cell-color, 2%);
+      background: darken($grid-cell-color, 2%);
 
       // make sure we override the regular background color:
       &.selected {
-        background-color: @grid-cell-selected-color;
+        background-color: $grid-cell-selected-color;
       }
     }
 
@@ -106,7 +106,7 @@
 
       // make sure we override the regular background color:
       &.selected {
-        background-color: @grid-cell-selected-color;
+        background-color: $grid-cell-selected-color;
       }
     }
 
@@ -181,7 +181,7 @@
     display: inline-block;
     position: absolute;
 
-    // The next few items are already defined in the slick-headermenu.less file and it should stay that way, *unless* you also replace the button image included there.
+    // The next few items are already defined in the slick-headermenu.scss file and it should stay that way, *unless* you also replace the button image included there.
     //bottom: 0;
     //right: 0;
     //top: 0;
@@ -295,7 +295,7 @@
 div.slick-large-editor-text {
   z-index: 10000;
   position: absolute;
-  background: @grid-cell-color;
+  background: $grid-cell-color;
   padding: 5px;
   border: 1px solid rgba(0, 0, 0, .5);
   box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .3);
@@ -309,8 +309,8 @@ div.slick-large-editor-text {
   div {
     text-align: right;
     button {
-      background-color: darken(@grid-cell-color, 10%);
-      border: 1px solid @grid-border-color;
+      background-color: darken($grid-cell-color, 10%);
+      border: 1px solid $grid-border-color;
       cursor: pointer;
       justify-content: center;
       padding-left: 0.75em;
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,4 +14,4 @@ export { @@
       Grid,
       FrozenGrid,
       Plugins
-    }
+    };