Merge pull request #2 from Brightspace/row-selection

Updated selection style. Update to use update typography.

bower.json

@@ -15,6 +15,6 @@
   ],
   "dependencies": {
     "vui-colors": "^0.2.0",
-    "vui-typography": "^1.0.11"
+    "vui-typography": "^2.0.0"
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vui-table",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Mixins and CSS for applying table styles",
   "scripts": {
     "autoprefix": "postcss -c postcss.config.json",

table.css.scss

@@ -2,4 +2,8 @@
 
 .vui-table {
 	@include vui-table;
+}
+
+.vui-table-row-selected {
+	@include vui-table-row-selected;
 }

table.scss

@@ -1,5 +1,5 @@
 @import 'bower_components/vui-colors/colors.scss';
-@import 'bower_components/vui-typography/typography.scss';
+@import 'bower_components/vui-typography/small-text.scss';
 @import 'bower_components/vui-typography/px-to-base-rem.scss';
 
 @mixin vui-table() {
@@ -15,7 +15,7 @@
 		display: table-header-group;
 
 		& th {
-			@include _vui-table-header-cell();
+			@include vui-table-header-cell();
 		}
 	}
 
@@ -40,7 +40,7 @@
 	& td,
 	  tbody th,
 	  tfoot th {
-		@include _vui-table-cell();
+		@include vui-table-cell();
 	}
 
 	& tr>:last-child {
@@ -123,13 +123,13 @@
 	}
 }
 
-@mixin _vui-table-header-cell() {
-	@include _vui-table-cell();
+@mixin vui-table-header-cell() {
+	@include vui-table-cell();
 	@include vui-typography-small-text();
 	background-color: $vui-color-regolith;
 }
 
-@mixin _vui-table-cell() {
+@mixin vui-table-cell() {
 	border-bottom: 1px solid $vui-color-titanius;
 	border-right: 1px solid $vui-color-titanius;
 	display: table-cell;
@@ -141,4 +141,9 @@
 	[dir='rtl'] & {
 		text-align: right;
 	}
+}
+
+@mixin vui-table-row-selected() {
+	outline: 1px solid $vui-color-celestine;
+	background-color: $vui-color-celestine-light-1;
 }

test/table.html

@@ -45,7 +45,7 @@ <h2>Class name</h2>
 					<td>of 10</td>
 					<td>-%</td>
 				</tr>
-				<tr>
+				<tr class="vui-table-row-selected">
 					<td>Lourdes</td>
 					<td>Beadle</td>
 					<td>of 10</td>
@@ -209,7 +209,7 @@ <h2>Mixins</h2>
 					<td>Row 2 Column 19</td>
 					<td>Row 2 Column 20</td>
 				</tr>
-				<tr>
+				<tr class="vui-table-row-selected">
 					<th>Row 3 Column 1</th>
 					<td>Row 3 Column 2</td>
 					<td>Row 3 Column 3</td>

test/test.scss

@@ -1,4 +1,6 @@
 @import '../table.css.scss';
+@import 'bower_components/vui-typography/typography.scss';
+
 
 body {
 	@include vui-typography;