adding more needed styles to segment

12 years ago · f95246d20d
12 changed files with 287 additions and 84 deletions
--- a/build/minified/collections/table.min.css
+++ b/build/minified/collections/table.min.css
@ -1 +1 @@
-.ui.table{width:100%;background-color:#FFF;border-collapse:collapse;color:#444;color:rgba(0,0,0,.75);border:1px solid #DDD}.ui.table tr,.ui.table td{border-collapse:collapse;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all .1s ease-out;-moz-transition:all .1s ease-out;-o-transition:all .1s ease-out;-ms-transition:all .1s ease-out;transition:all .1s ease-out}.ui.table thead{border-bottom:1px solid rgba(0,0,0,.1);background-color:rgba(50,50,50,.1)}.ui.table th{cursor:auto;text-align:left;font-weight:700;color:rgba(80,80,80,.85);padding:.5em .7em;vertical-align:middle}.ui.table tfoot th{font-weight:400;font-style:italic;color:rgba(0,0,0,.8)}.ui.table td{padding:.4em .7em;vertical-align:middle}.ui.table tfoot th{background-color:#FFF}.ui.table tfoot{border-top:1px dotted rgba(0,0,0,.1)}.ui.table tbody tr:nth-child(2n){background-color:rgba(0,0,0,.03)}.ui.table>.icon{vertical-align:baseline}.ui.table>.icon:only-child{margin:0}.ui.celled.table tr:hover td{background-color:rgba(0,0,0,.02);color:#000}.ui.sortable.table thead th:hover{background-image:none;background-color:rgba(0,0,0,.04);color:#333}.ui.sortable.table th.disabled:hover{cursor:auto;background-color:rgba(0,0,0,.1);text-align:left;font-weight:700;color:#333;color:rgba(0,0,0,.8)}.ui.table tr.positive td,.ui.table td.positive{background-color:#F2F8F0!important;color:#119000;-moz-box-shadow:0 0 1px 0 #3FF63B inset;-webkit-box-shadow:0 0 1px 0 #3FF63B inset;box-shadow:0 0 1px 0 #3FF63B inset}.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{background-color:#ECF5E9!important;color:#119000}.ui.table tr.negative td,.ui.table td.negative{background-color:#F9F4F4;color:#CD2929}.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{background-color:#F2E8E8!important;color:#CD2929}.ui.table tr.error td,.ui.table td.error,.ui.table th.error{background-color:#F9F4F4!important;color:#CD2929;-moz-box-shadow:0 0 1px 0 #F3A2A2 inset;-webkit-box-shadow:0 0 1px 0 #F3A2A2 inset;box-shadow:0 0 1px 0 #F3A2A2 inset}.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{background-color:#F2E8E8!important;color:#CD2929}.ui.table tr.warning td,.ui.table td.warning,.ui.table th.warning{background-color:#FBF6E9;color:#7D6C00;-moz-box-shadow:0 0 1px 0 #FFE569 inset;-webkit-box-shadow:0 0 1px 0 #FFE569 inset;box-shadow:0 0 1px 0 #FFE569 inset}.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{background-color:#F3EDDC!important;color:#7D6C00}.ui.table tr.active td,.ui.table tr td.active{background-color:#F0F0F0!important;color:rgba(50,50,50,.9)}.ui.table tr.disabled td,.ui.table tr td.disabled,.ui.table tr.disabled:hover td,.ui.table tr:hover td.disabled{background-color:#FAFAFA!important;color:rgba(150,150,150,.5)}.ui.celled.table{color:rgba(25,25,25,.9)}.ui.celled.table tbody tr,.ui.celled.table tfoot tr{border:0}.ui.celled.table th{border:1px solid #E0E0E0}.ui.celled.table tbody td{border:1px solid #E0E0E0}.ui.sortable.table thead th{cursor:pointer;color:#555;vertical-align:top}.ui.sortable.table thead th.sorted,.ui.sortable.table thead th.sorted:hover{background-color:rgba(0,0,0,.8);color:#EEE}.ui.sortable.table thead th:after{display:inline-block;content:'';width:1em;opacity:.5;margin:0 0 0 8px;font-size:18px;line-height:12px;font-family:Icons;font-style:normal;font-weight:400;text-decoration:inherit;vertical-align:middle;vertical-align:calc()}.ui.sortable.table thead th.ascending:after{content:'\25b4'}.ui.sortable.table thead th.descending:after{content:'\25be'}.ui.collapsing.table{width:auto}.ui.padded.table th,.ui.padded.table td{padding:.8em 1em}.ui.compact.table th{padding:.3em .5em}.ui.compact.table td{padding:.2em .5em}.ui.small.table{font-size:14px}.ui.table{font-size:16px}.ui.large.table{font-size:18px}
+.ui.table{width:100%;background-color:#FFF;border-collapse:collapse;color:#444;color:rgba(0,0,0,.75);border:1px solid #DDD}.ui.table tr,.ui.table td{border-collapse:collapse;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all .1s ease-out;-moz-transition:all .1s ease-out;-o-transition:all .1s ease-out;-ms-transition:all .1s ease-out;transition:all .1s ease-out}.ui.table thead{border-bottom:1px solid rgba(0,0,0,.1);background-color:rgba(50,50,50,.1)}.ui.table th{cursor:auto;text-align:left;font-weight:700;color:rgba(80,80,80,.85);padding:.5em .7em;vertical-align:middle}.ui.table tfoot th{font-weight:400;font-style:italic;color:rgba(0,0,0,.8)}.ui.table td{padding:.4em .7em;vertical-align:middle}.ui.table tfoot th{background-color:#FFF}.ui.table tfoot{border-top:1px dotted rgba(0,0,0,.1)}.ui.table tbody tr:nth-child(2n){background-color:rgba(0,0,0,.03)}.ui.table>.icon{vertical-align:baseline}.ui.table>.icon:only-child{margin:0}.ui.celled.table tr:hover td{background-color:rgba(0,0,0,.02);color:#000}.ui.sortable.table thead th:hover{background-image:none;background-color:rgba(0,0,0,.04);color:#333}.ui.sortable.table th.disabled:hover{cursor:auto;background-color:rgba(0,0,0,.1);text-align:left;font-weight:700;color:#333;color:rgba(0,0,0,.8)}.ui.table tr.positive td,.ui.table td.positive{background-color:#F2F8F0!important;color:#119000;-moz-box-shadow:0 0 1px 0 #3FF63B inset;-webkit-box-shadow:0 0 1px 0 #3FF63B inset;box-shadow:0 0 1px 0 #3FF63B inset}.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{background-color:#ECF5E9!important;color:#119000}.ui.table tr.negative td,.ui.table td.negative{background-color:#F9F4F4;color:#CD2929}.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{background-color:#F2E8E8!important;color:#CD2929}.ui.table tr.error td,.ui.table td.error,.ui.table th.error{background-color:#F9F4F4!important;color:#CD2929;-moz-box-shadow:0 0 1px 0 #F3A2A2 inset;-webkit-box-shadow:0 0 1px 0 #F3A2A2 inset;box-shadow:0 0 1px 0 #F3A2A2 inset}.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{background-color:#F2E8E8!important;color:#CD2929}.ui.table tr.warning td,.ui.table td.warning,.ui.table th.warning{background-color:#FBF6E9;color:#7D6C00;-moz-box-shadow:0 0 1px 0 #FFE569 inset;-webkit-box-shadow:0 0 1px 0 #FFE569 inset;box-shadow:0 0 1px 0 #FFE569 inset}.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{background-color:#F3EDDC!important;color:#7D6C00}.ui.table tr.active td,.ui.table tr td.active{background-color:#F0F0F0!important;color:rgba(50,50,50,.9)}.ui.table tr.disabled td,.ui.table tr td.disabled,.ui.table tr.disabled:hover td,.ui.table tr:hover td.disabled{color:rgba(150,150,150,.3)}.ui.celled.table{color:rgba(25,25,25,.9)}.ui.celled.table tbody tr,.ui.celled.table tfoot tr{border:0}.ui.celled.table th{border:1px solid #E0E0E0}.ui.celled.table tbody td{border:1px solid #E0E0E0}.ui.sortable.table thead th{cursor:pointer;color:#555;vertical-align:top}.ui.sortable.table thead th.sorted,.ui.sortable.table thead th.sorted:hover{background-color:rgba(0,0,0,.8);color:#EEE}.ui.sortable.table thead th:after{display:inline-block;content:'';width:1em;opacity:.5;margin:0 0 0 8px;font-size:18px;line-height:12px;font-family:Icons;font-style:normal;font-weight:400;text-decoration:inherit;vertical-align:middle;vertical-align:calc()}.ui.sortable.table thead th.ascending:after{content:'\25b4'}.ui.sortable.table thead th.descending:after{content:'\25be'}.ui.collapsing.table{width:auto}.ui.padded.table th,.ui.padded.table td{padding:.8em 1em}.ui.compact.table th{padding:.3em .5em}.ui.compact.table td{padding:.2em .5em}.ui.small.table{font-size:14px}.ui.table{font-size:16px}.ui.large.table{font-size:18px}
--- a/build/minified/elements/segment.min.css
+++ b/build/minified/elements/segment.min.css
@ -1 +1 @@
-.ui.segment{position:relative;background-color:#FFF;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1);margin:1em 0;padding:1.3em 1em;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.ui.segment>:first-child{margin-top:0}.ui.segment>:last-child{margin-bottom:0}.ui.segment>:only-child{margin:0}.ui.segment>.attached.label:first-child+*{margin-top:2em}.ui.segment>.bottom.attached.label:first-child+*{margin-top:0}.ui.disabled.segment{opacity:.5}.ui.basic.segment{position:relative;background-color:transparent;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.basic.segment:before{position:absolute;top:0;width:100%;content:'';height:1px;background-color:rgba(0,0,0,.05);border-top:1px solid rgba(255,255,255,.8)}.ui.blue.segment{color:#6ECFF5!important}.ui.green.segment{color:#A1CF64!important}.ui.red.segment{color:#EF4D6D!important}.ui.purple.segment{color:#564F8A!important}.ui.teal.segment{color:#00B5AD!important}.ui.left.aligned.segment{text-align:left}.ui.right.aligned.segment{text-align:right}.ui.center.aligned.segment{text-align:center}.ui.floated.segment,.ui.left.floated.segment{float:left}.ui.right.floated.segment{float:right}.ui.stacked.segment{padding-bottom:1.2em}.ui.stacked.segment:after,.ui.stacked.segment:before{content:'';position:absolute;bottom:-3px;left:0;border-top:1px solid rgba(0,0,0,.1);background-color:#F8F8F8;width:100%;height:5px}.ui.stacked.segment:before{bottom:0}.ui.raised.segment{-webkit-box-shadow:0 1px 2px 1px rgba(0,0,0,.1);-moz-box-shadow:0 1px 2px 1px rgba(0,0,0,.1);box-shadow:0 1px 2px 1px rgba(0,0,0,.1)}.ui.inverted.segment{background-color:#555;color:#FFF}.ui.primary.inverted.segment{background-color:#777;color:#F5F5F5}.ui.secondary.inverted.segment{background-color:#777;color:#F5F5F5}.ui.tertiary.inverted.segment{background-color:#B0B0B0;color:#EBEBEB}.ui.primary.segment{background-color:#FFF;color:#555}.ui.secondary.segment{background-color:#F5F5F5;color:#777}.ui.tertiary.segment{background-color:#EBEBEB;color:#B0B0B0}.ui.segment.attached{top:-1px;bottom:-1px;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;margin:0;-moz-box-shadow:0 0 0 1px #DDD;-webkit-box-shadow:0 0 0 1px #DDD;box-shadow:0 0 0 1px #DDD}.ui.top.attached.segment{top:0;bottom:-1px;margin-top:0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0}.ui.segment.bottom.attached{top:-1px;bottom:0;margin-bottom:0;-moz-border-radius:0 0 5px 5px;-webkit-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px}
+.ui.segment{position:relative;background-color:#FFF;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1);margin:1em 0;padding:1.3em 1em;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.ui.vertical.segment{margin:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.1),0 -1px 0 rgba(0,0,0,.1);-moz-box-shadow:0 1px 0 rgba(0,0,0,.1),0 -1px 0 rgba(0,0,0,.1);box-shadow:0 1px 0 rgba(0,0,0,.1),0 -1px 0 rgba(0,0,0,.1)}.ui.horizontal.segment{margin:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:1px 0 0 rgba(0,0,0,.1),-1px 0 0 rgba(0,0,0,.1);-moz-box-shadow:1px 0 0 rgba(0,0,0,.1),-1px 0 0 rgba(0,0,0,.1);box-shadow:1px 0 0 rgba(0,0,0,.1),-1px 0 0 rgba(0,0,0,.1)}.ui.segment>:first-child{margin-top:0}.ui.segment>:last-child{margin-bottom:0}.ui.segment>:only-child{margin:0}.ui.segment>.attached.label:first-child+*{margin-top:2em}.ui.segment>.bottom.attached.label:first-child+*{margin-top:0}.ui.disabled.segment{opacity:.8;color:#DDD}.ui.basic.segment{position:relative;background-color:transparent;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.basic.segment:before{position:absolute;top:0;width:100%;content:'';height:1px;background-color:rgba(0,0,0,.05);border-top:1px solid rgba(255,255,255,.8)}.ui.blue.segment{border-top:.2em solid #6ECFF5}.ui.green.segment{border-top:.2em solid #A1CF64}.ui.red.segment{border-top:.2em solid #EF4D6D}.ui.purple.segment{border-top:.2em solid #564F8A}.ui.teal.segment{border-top:.2em solid #00B5AD}.ui.inverted.black.segment{background-color:#5C6166!important;color:#FFF!important}.ui.inverted.blue.segment{background-color:#6ECFF5!important;color:#FFF!important}.ui.inverted.green.segment{background-color:#A1CF64!important;color:#FFF!important}.ui.inverted.red.segment{background-color:#EF4D6D!important;color:#FFF!important}.ui.inverted.purple.segment{background-color:#564F8A!important;color:#FFF!important}.ui.inverted.teal.segment{background-color:#00B5AD!important;color:#FFF!important}.ui.left.aligned.segment{text-align:left}.ui.right.aligned.segment{text-align:right}.ui.center.aligned.segment{text-align:center}.ui.floated.segment,.ui.left.floated.segment{float:left}.ui.right.floated.segment{float:right}.ui.stacked.segment{padding-bottom:1.2em}.ui.stacked.segment:after,.ui.stacked.segment:before{content:'';position:absolute;bottom:-3px;left:0;border-top:1px solid rgba(0,0,0,.1);background-color:#F8F8F8;width:100%;height:5px}.ui.stacked.segment:before{bottom:0}.ui.raised.segment{-webkit-box-shadow:0 1px 2px 1px rgba(0,0,0,.1);-moz-box-shadow:0 1px 2px 1px rgba(0,0,0,.1);box-shadow:0 1px 2px 1px rgba(0,0,0,.1)}.ui.inverted.segment{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.inverted.segment,.ui.primary.inverted.segment{background-color:#555;color:#FFF}.ui.secondary.inverted.segment{background-color:#777;color:#E2E2E2}.ui.tertiary.inverted.segment{background-color:#B0B0B0;color:#EBEBEB}.ui.primary.segment{background-color:#FFF;color:#555}.ui.secondary.segment{background-color:#F5F5F5;color:#777}.ui.tertiary.segment{background-color:#EBEBEB;color:#B0B0B0}.ui.segment.attached{top:-1px;bottom:-1px;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;margin:0;-moz-box-shadow:0 0 0 1px #DDD;-webkit-box-shadow:0 0 0 1px #DDD;box-shadow:0 0 0 1px #DDD}.ui.top.attached.segment{top:0;bottom:-1px;margin-top:0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0}.ui.segment.bottom.attached{top:-1px;bottom:0;margin-bottom:0;-moz-border-radius:0 0 5px 5px;-webkit-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px}
--- a/build/packaged/semantic.min.css
+++ b/build/packaged/semantic.min.css
--- a/build/uncompressed/collections/table.css
+++ b/build/uncompressed/collections/table.css
@ -193,8 +193,7 @@
 .ui.table tr td.disabled,
 .ui.table tr.disabled:hover td,
 .ui.table tr:hover td.disabled {
-  background-color: #FAFAFA !important;
-  color: rgba(150, 150, 150, 0.5);
+  color: rgba(150, 150, 150, 0.3);
 }
 /*******************************
             Variations
--- a/build/uncompressed/elements/segment.css
+++ b/build/uncompressed/elements/segment.css
@ -29,6 +29,24 @@
  box-sizing: border-box;
  overflow: hidden;
 }
+.ui.vertical.segment {
+  margin: 0em;
+  -webkit-border-radius: 0px;
+  -moz-border-radius: 0px;
+  border-radius: 0px;
+  -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1), 0px -1px 0px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1), 0px -1px 0px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1), 0px -1px 0px rgba(0, 0, 0, 0.1);
+}
+.ui.horizontal.segment {
+  margin: 0em;
+  -webkit-border-radius: 0px;
+  -moz-border-radius: 0px;
+  border-radius: 0px;
+  -webkit-box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.1), -1px 0px 0px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.1), -1px 0px 0px rgba(0, 0, 0, 0.1);
+  box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.1), -1px 0px 0px rgba(0, 0, 0, 0.1);
+}
 /*-------------------
    Loose Coupling
 --------------------*/
@ -53,7 +71,8 @@
            States
 *******************************/
 .ui.disabled.segment {
-  opacity: 0.5;
+  opacity: 0.8;
+  color: #DDDDDD;
 }
 /*******************************
           Variations
@ -81,19 +100,46 @@
       Colors
 --------------------*/
 .ui.blue.segment {
-  color: #6ECFF5 !important;
+  border-top: 0.2em solid #6ECFF5;
 }
 .ui.green.segment {
-  color: #A1CF64 !important;
+  border-top: 0.2em solid #A1CF64;
 }
 .ui.red.segment {
-  color: #EF4D6D !important;
+  border-top: 0.2em solid #EF4D6D;
 }
 .ui.purple.segment {
-  color: #564F8A !important;
+  border-top: 0.2em solid #564F8A;
 }
 .ui.teal.segment {
-  color: #00B5AD !important;
+  border-top: 0.2em solid #00B5AD;
+}
+/*-------------------
+   Inverted Colors
+--------------------*/
+.ui.inverted.black.segment {
+  background-color: #5C6166 !important;
+  color: #FFFFFF !important;
+}
+.ui.inverted.blue.segment {
+  background-color: #6ECFF5 !important;
+  color: #FFFFFF !important;
+}
+.ui.inverted.green.segment {
+  background-color: #A1CF64 !important;
+  color: #FFFFFF !important;
+}
+.ui.inverted.red.segment {
+  background-color: #EF4D6D !important;
+  color: #FFFFFF !important;
+}
+.ui.inverted.purple.segment {
+  background-color: #564F8A !important;
+  color: #FFFFFF !important;
+}
+.ui.inverted.teal.segment {
+  background-color: #00B5AD !important;
+  color: #FFFFFF !important;
 }
 /*-------------------
       Aligned
@ -149,16 +195,18 @@
      Inverted
 --------------------*/
 .ui.inverted.segment {
-  background-color: #555555;
-  color: #FFFFFF;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
 }
+.ui.inverted.segment,
 .ui.primary.inverted.segment {
-  background-color: #777777;
-  color: #F5F5F5;
+  background-color: #555555;
+  color: #FFFFFF;
 }
 .ui.secondary.inverted.segment {
  background-color: #777777;
-  color: #F5F5F5;
+  color: #E2E2E2;
 }
 .ui.tertiary.inverted.segment {
  background-color: #B0B0B0;
--- a/node/src/documents/collections/table.html
+++ b/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 celled table">
+    <table class="ui 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 celled table">
+    <table class="ui table">
      <thead>
        <th>Name</th>
        <th>Status</th>
@ -116,13 +116,13 @@ type   : 'UI Collection'
        </tr>
        <tr class="error">
          <td>Jimmy</td>
-          <td><i class="icon attention-circle"></i> Cannot pull data</td>
+          <td>Cannot pull data</td>
          <td>None</td>
        </tr>
        <tr>
          <td>Jamie</td>
          <td>Approved</td>
-          <td class="error"><i class="icon attention-circle"></i> Classified</td>
+          <td class="error"><i class="attention circle icon"></i> Classified</td>
        </tr>
        <tr>
          <td>Jill</td>
@ -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 celled table">
+    <table class="ui 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 celled table">
+    <table class="ui 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 celled table">
+    <table class="ui 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 celled table collapsing">
+    <table class="ui table collapsing">
      <thead>
        <th>Name</th>
        <th>Status</th>
@ -272,7 +272,7 @@ type   : 'UI Collection'
  
  <div class="example">
    <h4>Cells</h4>
-    <p>A table may be divided into cells to help segment content</p>
+    <p>A table may be divided each row into separate cells</p>
    <table class="ui celled table">
      <thead>
        <th>Name</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 celled table">
+    <table class="ui sortable 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 celled table">
+    <table class="ui padded 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 celled table">
+    <table class="ui compact table">
      <thead>
        <th>Name</th>
        <th>Status</th>
--- a/node/src/documents/elements/label.html
+++ b/node/src/documents/elements/label.html
@ -143,32 +143,12 @@ type   : 'UI Element'
  <div class="example">
    <h4>Attached Label</h4>
    <p>A label attached to a content segment</p>
-    <div class="ui two column grid">
-      <div class="column">
-        <div class="ui segment">
-          <div class="ui attached label">Top Left</div>
-          <div class="ui right attached label">Top Right</div>
-          <div class="ui bottom attached label">Bottom Left</div>
-          <div class="ui bottom right attached label">Bottom Right</div>
-          <p style="margin:40px 0px;">Hey let's look at labels.</p>
-        </div>
-      </div>
-      <div class="column">
-        <div class="ui segment">
-          <div class="ui black attached label">Existing Users</div>
-          <div class="ui fluid form">
-            <div class="field">
-              <label>E-mail</label>
-              <input type="text">
-            </div>
-            <div class="field">
-              <label>Password</label>
-              <input type="password">
-            </div>
-            <div class="ui button">Log in</div>
-          </div>
-        </div>
-      </div>
+    <div class="ui segment">
+      <div class="ui attached label">Top Left</div>
+      <div class="ui right attached label">Top Right</div>
+      <div class="ui bottom attached label">Bottom Left</div>
+      <div class="ui bottom right attached label">Bottom Right</div>
+      <p style="margin:40px 0px;">Hey let's look at labels.</p>
    </div>
  </div>

--- a/node/src/documents/elements/segment.html
+++ b/node/src/documents/elements/segment.html
@ -28,6 +28,27 @@ type   : 'UI Element'
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
    </div>
  </div>
+  <div class="example">
+    <h4>Vertical Segment</h4>
+    <p>A vertical segment divides content vertically</p>
+    <div class="ui vertical segment">
+      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
+    </div>
+  </div>
+  <div class="example">
+    <h4>Horizontal Segment</h4>
+    <p>A horizontal segment divides content horizontally</p>
+    <div class="ui horizontal segment">
+      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
+    </div>
+  </div>
+
+
+  <h2>States</h2>
+
+  <div class="ui disabled segment">
+    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
+  </div>
  
  <h2>Variations</h2>

@ -38,6 +59,44 @@ type   : 'UI Element'
      <p>I'm here to tell you something, and you will probably read me first.</p>
    </div>
  </div>
+
+  <div class="example">
+    <h4>Colored</h4>
+    <p>A segment can be colored</p>
+    <div class="ui blue segment">
+      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
+      <div class="ui green segment">
+        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
+        <div class="ui red segment">
+          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
+          <div class="ui purple segment">
+            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
+            <div class="ui teal segment">
+              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="another example">
+    <p>These colors can be inverted</p>
+    <div class="ui blue inverted segment">
+      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
+    </div>
+    <div class="ui green inverted segment">
+      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
+    </div>
+    <div class="ui red inverted segment">
+      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
+    </div>
+    <div class="ui purple inverted segment">
+      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
+    </div>
+    <div class="ui teal inverted segment">
+      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
+    </div>
+  </div>
  
  <div class="example">
    <h4>Ordinality</h4>
--- a/node/src/files/components/semantic/collections/table.css
+++ b/node/src/files/components/semantic/collections/table.css
@ -193,8 +193,7 @@
 .ui.table tr td.disabled,
 .ui.table tr.disabled:hover td,
 .ui.table tr:hover td.disabled {
-  background-color: #FAFAFA !important;
-  color: rgba(150, 150, 150, 0.5);
+  color: rgba(150, 150, 150, 0.3);
 }
 /*******************************
             Variations
--- a/node/src/files/components/semantic/elements/segment.css
+++ b/node/src/files/components/semantic/elements/segment.css
@ -29,6 +29,24 @@
  box-sizing: border-box;
  overflow: hidden;
 }
+.ui.vertical.segment {
+  margin: 0em;
+  -webkit-border-radius: 0px;
+  -moz-border-radius: 0px;
+  border-radius: 0px;
+  -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1), 0px -1px 0px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1), 0px -1px 0px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1), 0px -1px 0px rgba(0, 0, 0, 0.1);
+}
+.ui.horizontal.segment {
+  margin: 0em;
+  -webkit-border-radius: 0px;
+  -moz-border-radius: 0px;
+  border-radius: 0px;
+  -webkit-box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.1), -1px 0px 0px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.1), -1px 0px 0px rgba(0, 0, 0, 0.1);
+  box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.1), -1px 0px 0px rgba(0, 0, 0, 0.1);
+}
 /*-------------------
    Loose Coupling
 --------------------*/
@ -53,7 +71,8 @@
            States
 *******************************/
 .ui.disabled.segment {
-  opacity: 0.5;
+  opacity: 0.8;
+  color: #DDDDDD;
 }
 /*******************************
           Variations
@ -81,19 +100,46 @@
       Colors
 --------------------*/
 .ui.blue.segment {
-  color: #6ECFF5 !important;
+  border-top: 0.2em solid #6ECFF5;
 }
 .ui.green.segment {
-  color: #A1CF64 !important;
+  border-top: 0.2em solid #A1CF64;
 }
 .ui.red.segment {
-  color: #EF4D6D !important;
+  border-top: 0.2em solid #EF4D6D;
 }
 .ui.purple.segment {
-  color: #564F8A !important;
+  border-top: 0.2em solid #564F8A;
 }
 .ui.teal.segment {
-  color: #00B5AD !important;
+  border-top: 0.2em solid #00B5AD;
+}
+/*-------------------
+   Inverted Colors
+--------------------*/
+.ui.inverted.black.segment {
+  background-color: #5C6166 !important;
+  color: #FFFFFF !important;
+}
+.ui.inverted.blue.segment {
+  background-color: #6ECFF5 !important;
+  color: #FFFFFF !important;
+}
+.ui.inverted.green.segment {
+  background-color: #A1CF64 !important;
+  color: #FFFFFF !important;
+}
+.ui.inverted.red.segment {
+  background-color: #EF4D6D !important;
+  color: #FFFFFF !important;
+}
+.ui.inverted.purple.segment {
+  background-color: #564F8A !important;
+  color: #FFFFFF !important;
+}
+.ui.inverted.teal.segment {
+  background-color: #00B5AD !important;
+  color: #FFFFFF !important;
 }
 /*-------------------
       Aligned
@ -149,16 +195,18 @@
      Inverted
 --------------------*/
 .ui.inverted.segment {
-  background-color: #555555;
-  color: #FFFFFF;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
 }
+.ui.inverted.segment,
 .ui.primary.inverted.segment {
-  background-color: #777777;
-  color: #F5F5F5;
+  background-color: #555555;
+  color: #FFFFFF;
 }
 .ui.secondary.inverted.segment {
  background-color: #777777;
-  color: #F5F5F5;
+  color: #E2E2E2;
 }
 .ui.tertiary.inverted.segment {
  background-color: #B0B0B0;
--- a/src/collections/table.less
+++ b/src/collections/table.less
@ -221,8 +221,7 @@
 .ui.table tr td.disabled,
 .ui.table tr.disabled:hover td,
 .ui.table tr:hover td.disabled {
-  background-color: #FAFAFA !important;
-  color: rgba(150, 150, 150, 0.5);
+  color: rgba(150, 150, 150, 0.3);
 }

 /*******************************
--- a/src/elements/segment.less
+++ b/src/elements/segment.less
@ -38,12 +38,52 @@
  overflow: hidden;
 }

+.ui.vertical.segment {
+  margin: 0em;
+
+  -webkit-border-radius: 0px;
+  -moz-border-radius: 0px;
+  border-radius: 0px;
+
+  -webkit-box-shadow: 
+    0px 1px 0px rgba(0, 0, 0, 0.1),
+    0px -1px 0px rgba(0, 0, 0, 0.1)
+  ;
+  -moz-box-shadow: 
+    0px 1px 0px rgba(0, 0, 0, 0.1),
+    0px -1px 0px rgba(0, 0, 0, 0.1)
+  ;
+  box-shadow: 
+    0px 1px 0px rgba(0, 0, 0, 0.1),
+    0px -1px 0px rgba(0, 0, 0, 0.1)
+  ;
+}
+
+.ui.horizontal.segment {
+  margin: 0em;
+
+  -webkit-border-radius: 0px;
+  -moz-border-radius: 0px;
+  border-radius: 0px;
+
+  -webkit-box-shadow: 
+    1px 0px 0px rgba(0, 0, 0, 0.1),
+    -1px 0px 0px rgba(0, 0, 0, 0.1)
+  ;
+  -moz-box-shadow: 
+    1px 0px 0px rgba(0, 0, 0, 0.1),
+    -1px 0px 0px rgba(0, 0, 0, 0.1)
+  ;
+  box-shadow: 
+    1px 0px 0px rgba(0, 0, 0, 0.1),
+    -1px 0px 0px rgba(0, 0, 0, 0.1)
+  ;
+}
+
 /*-------------------
    Loose Coupling
 --------------------*/

-
-
 /* No padding on edge content */
 .ui.segment > :first-child {
  margin-top: 0em;
@ -68,7 +108,8 @@
 *******************************/

 .ui.disabled.segment {
-  opacity: 0.5;
+  opacity: 0.8;
+  color: #DDDDDD;
 }


@ -106,21 +147,51 @@
 --------------------*/

 .ui.blue.segment {
-  color: #6ECFF5 !important;
+  border-top: 0.2em solid #6ECFF5;
 }
 .ui.green.segment {
-  color: #A1CF64 !important;
+  border-top: 0.2em solid #A1CF64;
 }
 .ui.red.segment {
-  color: #EF4D6D !important;
+  border-top: 0.2em solid #EF4D6D;
 }
 .ui.purple.segment {
-  color: #564F8A !important;
+  border-top: 0.2em solid #564F8A;
 }
 .ui.teal.segment {
-  color: #00B5AD !important;
+  border-top: 0.2em solid #00B5AD;
 }

+/*-------------------
+   Inverted Colors
+--------------------*/
+
+.ui.inverted.black.segment {
+  background-color: #5C6166 !important;
+  color: #FFFFFF !important;
+}
+.ui.inverted.blue.segment {
+  background-color: #6ECFF5 !important;
+  color: #FFFFFF !important;
+}
+.ui.inverted.green.segment {
+  background-color: #A1CF64 !important;
+  color: #FFFFFF !important;
+}
+.ui.inverted.red.segment {
+  background-color: #EF4D6D !important;
+  color: #FFFFFF !important;
+}
+.ui.inverted.purple.segment {
+  background-color: #564F8A !important;
+  color: #FFFFFF !important;
+}
+.ui.inverted.teal.segment {
+  background-color: #00B5AD !important;
+  color: #FFFFFF !important;
+}
+
+
 /*-------------------
       Aligned
 --------------------*/
@ -186,19 +257,19 @@
 --------------------*/

 .ui.inverted.segment {
-  background-color: #555555;
-  color: #FFFFFF;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
 }
-
+.ui.inverted.segment,
 .ui.primary.inverted.segment {
-  background-color: #777777;
-  color: #F5F5F5;
+  background-color: #555555;
+  color: #FFFFFF;
 }
 .ui.secondary.inverted.segment {
  background-color: #777777;
-  color: #F5F5F5;
+  color: #E2E2E2;
 }
-
 .ui.tertiary.inverted.segment {
  background-color: #B0B0B0;
  color: #EBEBEB;