table: fixes namespace issue with grid

Former-commit-id: d7e9f1fed8
Former-commit-id: e01c5de83e

node/src/documents/collections/table.html

@@ -67,7 +67,7 @@ type   : 'UI Collection'
   <div class="example">
     <h4>Positive / Negative</h4>
     <p>A cell may let a user know whether a value is good or bad:</p>
-    <table class="ui grid table">
+    <table class="ui celled table">
       <thead>
         <th>Name</th>
         <th>Status</th>
@@ -102,7 +102,7 @@ type   : 'UI Collection'
   <div class="example">
     <h4>Error</h4>
     <p>A cell or row may alert the user to an error or a negative value:</p>
-    <table class="ui grid table">
+    <table class="ui celled table">
       <thead>
         <th>Name</th>
         <th>Status</th>
@@ -136,7 +136,7 @@ type   : 'UI Collection'
   <div class="example">
     <h4>Warning</h4>
     <p>A cell or row may warn a user:</p>
-    <table class="ui grid table">
+    <table class="ui celled table">
       <thead>
         <th>Name</th>
         <th>Status</th>
@@ -170,7 +170,7 @@ type   : 'UI Collection'
   <div class="example">
     <h4>Active</h4>
     <p>A cell or row can be active:</p>
-    <table class="ui grid table">
+    <table class="ui celled table">
       <thead>
         <th>Name</th>
         <th>Status</th>
@@ -202,7 +202,7 @@ type   : 'UI Collection'
   <div class="example">
     <h4>Disabled</h4>
     <p>A cell can be disabled:</p>
-    <table class="ui grid table">
+    <table class="ui celled table">
       <thead>
         <th>Name</th>
         <th>Status</th>
@@ -239,7 +239,7 @@ type   : 'UI Collection'
   <div class="example">
     <h4>Collapsing</h4>
     <p>By default tables take the size of their container. A collapsing takes up only as much space as its rows.</p>
-    <table class="ui grid table collapsing">
+    <table class="ui celled table collapsing">
       <thead>
         <th>Name</th>
         <th>Status</th>
@@ -271,9 +271,9 @@ type   : 'UI Collection'
   </div>
   
   <div class="example">
-    <h4>Grid</h4>
-    <p>A table may have a grid to help differentiate cells</p>
-    <table class="ui grid table">
+    <h4>Cells</h4>
+    <p>A table may be divided into cells to help segment content</p>
+    <table class="ui celled table">
       <thead>
         <th>Name</th>
         <th>Status</th>
@@ -310,7 +310,7 @@ type   : 'UI Collection'
     
     <p>Adding a classname of ascending or descending, will show the user the direction of sort. This example uses a modified version of the kylefox's <a href="library/tablesort.js">tablesort plugin</a> to provide the proper class names.</p>
     
-    <table class="ui sortable grid table">
+    <table class="ui sortable celled table">
       <thead>
         <th>Name</th>
         <th>Status</th>
@@ -343,7 +343,7 @@ type   : 'UI Collection'
   <div class="example">
     <h4>Padded</h4>
     <p>A table may sometimes need to be more padded for legibility</p>
-    <table class="ui padded grid table">
+    <table class="ui padded celled table">
       <thead>
         <th>Name</th>
         <th>Status</th>
@@ -366,7 +366,7 @@ type   : 'UI Collection'
   <div class="example">
     <h4>Compact</h4>
     <p>A table may sometimes need to be more compact to make more rows visible at a time</p>
-    <table class="ui compact grid table">
+    <table class="ui compact celled table">
       <thead>
         <th>Name</th>
         <th>Status</th>

node/src/files/components/semantic/src/collections/table.css

@@ -95,7 +95,7 @@
 ---------------*/
 
 /* Grid */
-.ui.grid.table tr:hover td {
+.ui.celled.table tr:hover td {
   background-color: rgba(0, 0, 0, 0.02);
   color: rgba(0, 0, 0, 1);
 }
@@ -130,8 +130,8 @@
   box-shadow: 0px 0px 1px 0px #3FF63B inset;
   /* border-color: #2FCB05 !important; */
 }
-.ui.grid.table tr.positive:hover td,
-.ui.grid.table tr:hover td.positive,
+.ui.celled.table tr.positive:hover td,
+.ui.celled.table tr:hover td.positive,
 .ui.table tr.positive:hover td,
 .ui.table td:hover.positive,
 .ui.table th:hover.positive {
@@ -148,8 +148,8 @@
   background-color: #F9F4F4;
   color: #CD2929;
 }
-.ui.grid.table tr.negative:hover td,
-.ui.grid.table tr:hover td.negative,
+.ui.celled.table tr.negative:hover td,
+.ui.celled.table tr:hover td.negative,
 .ui.table tr.negative:hover td,
 .ui.table td:hover.negative,
 .ui.table th:hover.negative {
@@ -170,8 +170,8 @@
   -webkit-box-shadow: 0px 0px 1px 0px #F3A2A2 inset;
   box-shadow: 0px 0px 1px 0px #F3A2A2 inset;
 }
-.ui.grid.table tr.error:hover td,
-.ui.grid.table tr:hover td.error,
+.ui.celled.table tr.error:hover td,
+.ui.celled.table tr:hover td.error,
 .ui.table tr.error:hover td,
 .ui.table td:hover.error,
 .ui.table th:hover.error {
@@ -193,8 +193,8 @@
   -webkit-box-shadow: 0px 0px 1px 0px #FFE569 inset;
   box-shadow: 0px 0px 1px 0px #FFE569 inset;
 }
-.ui.grid.table tr.warning:hover td,
-.ui.grid.table tr:hover td.warning,
+.ui.celled.table tr.warning:hover td,
+.ui.celled.table tr:hover td.warning,
 .ui.table tr.warning:hover td,
 .ui.table td:hover.warning,
 .ui.table th:hover.warning {
@@ -234,17 +234,17 @@
       Grid
 ---------------*/
 
-.ui.grid.table {
+.ui.celled.table {
   color: rgba(0, 0, 0, 0.55);
 }
-.ui.grid.table tbody tr,
-.ui.grid.table tfoot tr {
+.ui.celled.table tbody tr,
+.ui.celled.table tfoot tr {
   border: none;
 }
-.ui.grid.table th {
+.ui.celled.table th {
   border: 1px solid #E0E0E0;
 }
-.ui.grid.table tbody td {
+.ui.celled.table tbody td {
   border: 1px solid #E0E0E0;
 }
 

src/collections/table.css

@@ -95,7 +95,7 @@
 ---------------*/
 
 /* Grid */
-.ui.grid.table tr:hover td {
+.ui.celled.table tr:hover td {
   background-color: rgba(0, 0, 0, 0.02);
   color: rgba(0, 0, 0, 1);
 }
@@ -130,8 +130,8 @@
   box-shadow: 0px 0px 1px 0px #3FF63B inset;
   /* border-color: #2FCB05 !important; */
 }
-.ui.grid.table tr.positive:hover td,
-.ui.grid.table tr:hover td.positive,
+.ui.celled.table tr.positive:hover td,
+.ui.celled.table tr:hover td.positive,
 .ui.table tr.positive:hover td,
 .ui.table td:hover.positive,
 .ui.table th:hover.positive {
@@ -148,8 +148,8 @@
   background-color: #F9F4F4;
   color: #CD2929;
 }
-.ui.grid.table tr.negative:hover td,
-.ui.grid.table tr:hover td.negative,
+.ui.celled.table tr.negative:hover td,
+.ui.celled.table tr:hover td.negative,
 .ui.table tr.negative:hover td,
 .ui.table td:hover.negative,
 .ui.table th:hover.negative {
@@ -170,8 +170,8 @@
   -webkit-box-shadow: 0px 0px 1px 0px #F3A2A2 inset;
   box-shadow: 0px 0px 1px 0px #F3A2A2 inset;
 }
-.ui.grid.table tr.error:hover td,
-.ui.grid.table tr:hover td.error,
+.ui.celled.table tr.error:hover td,
+.ui.celled.table tr:hover td.error,
 .ui.table tr.error:hover td,
 .ui.table td:hover.error,
 .ui.table th:hover.error {
@@ -193,8 +193,8 @@
   -webkit-box-shadow: 0px 0px 1px 0px #FFE569 inset;
   box-shadow: 0px 0px 1px 0px #FFE569 inset;
 }
-.ui.grid.table tr.warning:hover td,
-.ui.grid.table tr:hover td.warning,
+.ui.celled.table tr.warning:hover td,
+.ui.celled.table tr:hover td.warning,
 .ui.table tr.warning:hover td,
 .ui.table td:hover.warning,
 .ui.table th:hover.warning {
@@ -234,17 +234,17 @@
       Grid
 ---------------*/
 
-.ui.grid.table {
+.ui.celled.table {
   color: rgba(0, 0, 0, 0.55);
 }
-.ui.grid.table tbody tr,
-.ui.grid.table tfoot tr {
+.ui.celled.table tbody tr,
+.ui.celled.table tfoot tr {
   border: none;
 }
-.ui.grid.table th {
+.ui.celled.table th {
   border: 1px solid #E0E0E0;
 }
-.ui.grid.table tbody td {
+.ui.celled.table tbody td {
   border: 1px solid #E0E0E0;
 }