Merge pull request #609 from BY00565233/SURF-1884

Table: convert Light DOM LESS to SCSS

Author: 100stacks

src/less/components.less

@@ -36,7 +36,6 @@
 @import 'components/popover/index';
 @import 'components/radio/index';
 @import 'components/search/index';
-@import 'components/table/index';
 @import 'components/tabset/index';
 @import 'components/text-input/index';
 @import 'components/textarea/index';

src/scss/components/_index.scss

@@ -15,5 +15,6 @@
 @import "reveal/index";
 @import "selector-strip/index";
 @import "toast/index";
+@import "table/index";
 @import "tooltip/index";
 @import "typography/index";

src/less/components/table/index.less renamed to src/scss/components/table/_index.scss

@@ -1,4 +1,4 @@
-@import (reference) "vars";
+@import "vars";
 
 // Table style resets
 .hxTable {
@@ -48,30 +48,28 @@
 }
 
 // ===== States =====
-@state-selected-bg: @cyan-50;
+$state-selected-bg: $cyan-50;
 
 // ===== Tables =====
-@table-border-color: @gray-300;
-
-/* ========== Tables ========== */
-
-/*
-  ---------
-  | thead |
-      +
-  ---------
-  | tbody |
-  ---------
-      +
-  | tfoot |
-  ---------
-*/
+$table-border-color: $gray-300;
+
+// ========== Tables ==========
+
+///  ---------
+///  | thead |
+///      +
+///  ---------
+///  | tbody |
+///  ---------
+///      +
+///  | tfoot |
+///  ---------
 
 .hxTable {
   margin: 1.5rem 0;
 
   caption {
-    color: @gray-800;
+    color: $gray-800;
     font-size: 0.875rem;
     font-weight: 300;
   }
@@ -95,13 +93,13 @@
   }//thead
 
   tbody {
-    border-color: @table-border-color transparent;
+    border-color: $table-border-color transparent;
     border-style: solid;
     border-width: 1px;
 
     tr {
       + tr {
-        border-top: 1px solid @table-border-color;
+        border-top: 1px solid $table-border-color;
       }
 
       th,
@@ -113,7 +111,7 @@
       &.hxSelected {
         td,
         th {
-          background-color: @state-selected-bg;
+          background-color: $state-selected-bg;
         }
       }
     }
@@ -137,15 +135,15 @@
   td,
   th {
     &.hxControl {
-      color: @gray-700;
+      color: $gray-700;
       width: 1rem;
     }
   }
 
   // VARIANTS
   &.hxBound {
     tbody {
-      border-color: @table-border-color;
+      border-color: $table-border-color;
     }
   }//.hxBound
 
@@ -155,7 +153,7 @@
         &:hover {
           td,
           th {
-            background-color: @gray-50;
+            background-color: $gray-50;
           }
         }
       }
@@ -181,16 +179,16 @@
 
 // Use .hxTable.hxBound instead
 .hxTable--bordered {
-  &:extend(.hxTable.hxBound all);
+  @extend .hxTable.hxBound;
 }
 
 // Use .hxTable.hxHoverable instead
 .hxTable--hover {
-  &:extend(.hxTable.hxHoverable all);
+  @extend .hxTable.hxHoverable;
 }
 
 // Use (th,td).hxControl instead
 .hxTable__control-col {
-  color: @gray-700;
+  color: $gray-700;
   width: 1rem;
 }