Fixes to table, fixes to labels, segment fixes, added button json spec

for playground. Former-commit-id: 0c6cb31cd2 Former-commit-id: db58fdbd06
12 years ago · d2eb8947d5
21 changed files with 390 additions and 66 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{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}
+.ui.table{width:100%;border-collapse:collapse}.ui.table thead{border-bottom:1px solid rgba(0,0,0,.1)}.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 th{cursor:auto;text-align:left;font-weight:700;padding:.5em .7em;vertical-align:middle}.ui.table tfoot th{font-weight:400;font-style:italic}.ui.table td{padding:.4em .7em;vertical-align:middle}.ui.table tfoot{border-top:1px solid 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.table.segment:after{display:none}.ui.table.segment.stacked:after{display:block}.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.inverted.table tbody tr:nth-child(2n){background-color:rgba(255,255,255,.06)}.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/label.min.css
+++ b/build/minified/elements/label.min.css
--- 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}.ui.segment:after{content:".";display:block;height:0;clear:both;visibility:hidden}.ui.vertical.segment{margin:0;padding-left:0;padding-right:0;background-color:transparent;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:0 -1px 0 rgba(0,0,0,.1);-moz-box-shadow:0 -1px 0 rgba(0,0,0,.1);box-shadow:0 -1px 0 rgba(0,0,0,.1)}.ui.horizontal.segment{margin:0;padding-top:0;padding-bottom:0;background-color:transparent;-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.fitted.segment{padding:0}.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.7em}.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:rgba(0,0,0,.02);width:100%;height:5px;visibility:visible}.ui.stacked.segment:before{bottom:0}.ui.stacked.inverted.segment:after,.ui.stacked.inverted.segment:before{background-color:rgba(255,255,255,.1);border-top:1px solid rgba(255,255,255,.35)}.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{border-top:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.inverted.segment,.ui.primary.inverted.segment{background-color:#555;color:#FFF}.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.secondary.inverted.segment{background-color:#555;background-image:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,.3)),to(rgba(255,255,255,.3)));background-image:-webkit-linear-gradient(rgba(255,255,255,.3) 0,rgba(255,255,255,.3) 100%);background-image:-moz-linear-gradient(rgba(255,255,255,.3) 0,rgba(255,255,255,.3) 100%);background-image:-o-linear-gradient(rgba(255,255,255,.3) 0,rgba(255,255,255,.3) 100%);background-image:linear-gradient(rgba(255,255,255,.3) 0,rgba(255,255,255,.3) 100%);color:#FAFAFA}.ui.tertiary.inverted.segment{background-color:#555;background-image:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,.6)),to(rgba(255,255,255,.6)));background-image:-webkit-linear-gradient(rgba(255,255,255,.6) 0,rgba(255,255,255,.6) 100%);background-image:-moz-linear-gradient(rgba(255,255,255,.6) 0,rgba(255,255,255,.6) 100%);background-image:-o-linear-gradient(rgba(255,255,255,.6) 0,rgba(255,255,255,.6) 100%);background-image:linear-gradient(rgba(255,255,255,.6) 0,rgba(255,255,255,.6) 100%);color:#EEE}.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}.ui.segment:after{content:".";display:block;height:0;clear:both;visibility:hidden}.ui.vertical.segment{margin:0;padding-left:0;padding-right:0;background-color:transparent;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:0 -1px 0 rgba(0,0,0,.1);-moz-box-shadow:0 -1px 0 rgba(0,0,0,.1);box-shadow:0 -1px 0 rgba(0,0,0,.1)}.ui.horizontal.segment{margin:0;padding-top:0;padding-bottom:0;background-color:transparent;-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.fitted.segment{padding:0}.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.7em}.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:rgba(0,0,0,.02);width:100%;height:5px;visibility:visible}.ui.stacked.segment:before{bottom:0}.ui.stacked.inverted.segment:after,.ui.stacked.inverted.segment:before{background-color:rgba(255,255,255,.1);border-top:1px solid rgba(255,255,255,.35)}.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{border:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.inverted.segment,.ui.primary.inverted.segment{background-color:#555;color:#FFF}.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.secondary.inverted.segment{background-color:#555;background-image:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,.3)),to(rgba(255,255,255,.3)));background-image:-webkit-linear-gradient(rgba(255,255,255,.3) 0,rgba(255,255,255,.3) 100%);background-image:-moz-linear-gradient(rgba(255,255,255,.3) 0,rgba(255,255,255,.3) 100%);background-image:-o-linear-gradient(rgba(255,255,255,.3) 0,rgba(255,255,255,.3) 100%);background-image:linear-gradient(rgba(255,255,255,.3) 0,rgba(255,255,255,.3) 100%);color:#FAFAFA}.ui.tertiary.inverted.segment{background-color:#555;background-image:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,.6)),to(rgba(255,255,255,.6)));background-image:-webkit-linear-gradient(rgba(255,255,255,.6) 0,rgba(255,255,255,.6) 100%);background-image:-moz-linear-gradient(rgba(255,255,255,.6) 0,rgba(255,255,255,.6) 100%);background-image:-o-linear-gradient(rgba(255,255,255,.6) 0,rgba(255,255,255,.6) 100%);background-image:linear-gradient(rgba(255,255,255,.6) 0,rgba(255,255,255,.6) 100%);color:#EEE}.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.REMOVED.git-id
+++ b/build/packaged/semantic.min.css.REMOVED.git-id
@ -1 +1 @@
-e834653b234462c72814083eb275fd5aaa8924cd
+6cf94be31bed8e8026b857cacec719ee0ca0f2ba
--- a/build/packaged/semantic.min.js.REMOVED.git-id
+++ b/build/packaged/semantic.min.js.REMOVED.git-id
@ -1 +1 @@
-1034f9a0d73c62eb9d153cd46760d1c1353742b3
+759e08aaffde4c9f6d626ef0fc02dd08c46afecd
--- a/build/uncompressed/collections/table.css
+++ b/build/uncompressed/collections/table.css
@ -15,11 +15,10 @@
 /* Prototype */
 .ui.table {
  width: 100%;
-  background-color: #FFFFFF;
  border-collapse: collapse;
-  color: #444444;
-  color: rgba(0, 0, 0, 0.75);
-  border: 1px solid #DDDDDD;
+}
+.ui.table thead {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
 .ui.table tr,
 .ui.table td {
@ -34,32 +33,23 @@
  -ms-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
 }
-.ui.table thead {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  background-color: rgba(50, 50, 50, 0.1);
-}
 .ui.table th {
  cursor: auto;
  text-align: left;
  font-weight: bold;
-  color: rgba(80, 80, 80, 0.85);
  padding: 0.5em 0.7em;
  vertical-align: middle;
 }
 .ui.table tfoot th {
  font-weight: normal;
  font-style: italic;
-  color: rgba(0, 0, 0, 0.8);
 }
 .ui.table td {
  padding: 0.40em 0.7em;
  vertical-align: middle;
 }
-.ui.table tfoot th {
-  background-color: #FFFFFF;
-}
 .ui.table tfoot {
-  border-top: 1px dotted rgba(0, 0, 0, 0.1);
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
 }
 /* Table Striping */
 .ui.table tbody tr:nth-child(2n) {
@ -72,6 +62,13 @@
 .ui.table > .icon:only-child {
  margin: 0em;
 }
+/* table segment */
+.ui.table.segment:after {
+  display: none;
+}
+.ui.table.segment.stacked:after {
+  display: block;
+}
 /*******************************
             States
 *******************************/
@ -246,6 +243,12 @@
 .ui.sortable.table thead th.descending:after {
  content: '\25be';
 }
+/*--------------
+    Inverted
+---------------*/
+.ui.inverted.table tbody tr:nth-child(2n) {
+  background-color: rgba(255, 255, 255, 0.06);
+}
 /*--------------
   Collapsing
 ---------------*/
--- a/build/uncompressed/elements/label.css
+++ b/build/uncompressed/elements/label.css
@ -41,7 +41,7 @@ a.ui.label {
 }
 .ui.label .detail {
  display: inline-block;
-  margin-left: 1em;
+  margin-left: 0.5em;
  font-weight: bold;
  opacity: 0.8;
 }
--- a/build/uncompressed/elements/segment.css
+++ b/build/uncompressed/elements/segment.css
@ -211,7 +211,7 @@
      Inverted
 --------------------*/
 .ui.inverted.segment {
-  border-top: none;
+  border: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
--- a/node/src/documents/collections/form.html
+++ b/node/src/documents/collections/form.html
@ -37,7 +37,7 @@ type   : 'UI Collection'
    <h4 class="ui header">Form:</h4>
    <p>A form is a collection of user input elements, and has no stylings of its own.</p>
    <div class="ui info message">
-      <p>This example uses a ui segment to add the padding and background color. This is not required.</p>
+      <p>This example uses a <a href="/elements/segment.html">ui segment</a> to add the padding and background color. This is not required.</p>
    </div>
    <div class="ui form segment">
      <p>Let's go ahead and get you signed up.</p>
--- a/node/src/documents/collections/table.html
+++ b/node/src/documents/collections/table.html
@ -30,7 +30,10 @@ type   : 'UI Collection'
  <div class="example">
    <h4 class="ui header">Table</h4>
    <p>A standard table</p>
-    <table class="ui table">
+    <div class="ui info message">
+      <p>This example uses a <a href="/elements/segment.html">ui segment</a> to add padding and a background color. This is not required.</p>
+    </div>
+    <table class="ui table segment">
      <thead>
        <th>Name</th>
        <th>Status</th>
@ -55,7 +58,7 @@ type   : 'UI Collection'
      </tbody>
      <tfoot>
        <th colspan="3">
-          <div class="ui blue button"><i class="icon add user"></i> Add User</div>
+          <div class="ui small blue labeled icon button"><i class="icon add user"></i> Add User</div>
        </th>
      </tfoot>
    </table>
@ -239,7 +242,42 @@ type   : 'UI Collection'
  <div class="example">
    <h4 class="ui header">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 table collapsing">
+    <table class="ui collapsing table">
+      <thead>
+        <th>Name</th>
+        <th>Status</th>
+        <th>Notes</th>
+      </thead>
+      <tbody>
+        <tr>
+          <td>John</td>
+          <td>Approved</td>
+          <td>None</td>
+        </tr>
+        <tr>
+          <td>Jamie</td>
+          <td>Approved</td>
+          <td>Requires call</td>
+        </tr>
+        <tr>
+          <td>Jill</td>
+          <td>Denied</td>
+          <td>None</td>
+        </tr>
+      </tbody>
+      <tfoot>
+        <th>3 People</th>
+        <th>2 Approved</th>
+        <th></th>
+      </tfoot>
+    </table>
+  </div>
+
+
+  <div class="example">
+    <h4 class="ui header">Inverted</h4>
+    <p>A tables colors can be inverted</p>
+    <table class="ui inverted segment table">
      <thead>
        <th>Name</th>
        <th>Status</th>
--- a/node/src/documents/modules/form.html
+++ b/node/src/documents/modules/form.html
@ -3,7 +3,7 @@ layout : 'default'
 css    : 'form'

 title  : 'Validate Form'
-type   : 'UI Module'
+type   : 'UI Behavior'
 ---

 <script src="/components/semantic/modules/behavior/form.js"></script>
--- a/node/src/documents/playground.html
+++ b/node/src/documents/playground.html
@ -0,0 +1,20 @@
+---
+layout : 'default'
+css    : 'download'
+
+title  : 'Playground'
+type   : 'Library'
+---
+<div class="segment">
+  <div class="container">
+    <h1 class="ui dividing header">Playground</h1>
+    <p>Try out creating interfaces</p>
+  </div>
+</div>
+<div class="main container">
+    
+  
+</div>
+</body>
+
+</html>
--- a/node/src/documents/specification/styleguide.html
+++ b/node/src/documents/specification/styleguide.html
@ -0,0 +1,219 @@
+  ---
+layout : 'default'
+css    : 'guide'
+
+title  : 'Style Guide'
+type   : 'UI Specification'
+---
+<div class="segment">
+  <div class="container">
+    <h1 class="ui dividing header">Project Roadmap</h1>
+  </div>
+</div>
+<div class="main container">
+  
+  <div class="ui icon info message">
+    <i class="icon heart"></i>
+    <div class="content">
+      <div class="header">
+        Progress Report
+      </div>
+      <p>Current status of work on Semantic UI</p>
+    </div>
+  </div>
+  
+  <div class="ui divider simple"></div>
+  
+  <div class="ui black top attached menu">
+    <div class="item">
+      <b>Redesign Timeline</b>
+    </div>
+    <div class="borderless item">
+      <div class="ui red label">6.5 <div class="detail">days left</div></div>
+    </div>
+  </div>
+  <div class="ui bottom attached segment">
+  <div class="ui message">
+    <div class="header">UI Elements</div>
+    <p>This is an estimate of total time left to compete reskin and docs for the following elements</p>
+  </div>
+  <table class="ui sortable table">
+    <thead>
+      <th>UI Element</th>
+      <th>Estimated</th>
+      <th>Spent</th>
+      <th>Status</th>
+      <th>Notes</th>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Button</td>
+        <td>1</td>
+        <td>1</td>
+        <td class="positive">Complete</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>Text Block</td>
+        <td>0.5</td>
+        <td>0.5</td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>Header</td>
+        <td>0.5</td>
+        <td>0</td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>Grid</td>
+        <td>1</td>
+        <td>0</td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>Divider</td>
+        <td>0.25</td>
+        <td>0</td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>Tags</td>
+        <td>0.25</td>
+        <td>0.25</td>
+        <td class="positive">Complete</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>Labels</td>
+        <td>0.5</td>
+        <td>0</td>
+        <td class="positive">Complete</td>
+        <td>
+          Changes:<br>
+          - Consolidated into tags 
+        </td>
+      </tr>
+      <tr>
+        <td>Icons</td>
+        <td>1</td>
+        <td>0</td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>Menu</td>
+        <td>3</td>
+        <td>1</td>
+        <td class="positive">Complete</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>Throbber</td>
+        <td>1</td>
+        <td>0</td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>Video</td>
+        <td>0.5</td>
+        <td>0</td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>Steps</td>
+        <td>0.5</td>
+        <td>0</td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>Segment</td>
+        <td>0.5</td>
+        <td>0.25</td>
+        <td class="warning">In Progress</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>Table</td>
+        <td>0.5</td>
+        <td>1</td>
+        <td class="negative">Complete</td>
+        <td></td>
+      </tr>
+      <tfoot>
+        <th>14 Elements</th>
+        <th>10.5 days</th>
+        <th>4 days</th>
+        <th></th>
+        <th></th>
+      </tfoot>
+    </tbody>
+  </table>
+  <div class="ui divider"></div>
+  <div class="ui message">
+    <div class="header">UI Collections</div>
+  </div>
+  <table class="ui sortable table">
+    <thead>
+      <th>Name</th>
+      <th>Estimated</th>
+      <th>Spent</th>
+      <th>Status</th>
+      <th>Notes</th>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Activity Feed</td>
+        <td>1</td>
+        <td>0</td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>Forms</td>
+        <td>2 days</td>
+        <td>1</td>
+        <td class="positive">Complete</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>List View</td>
+        <td>0.75</td>
+        <td>0</td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>Item View</td>
+        <td>1</td>
+        <td>0</td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>User List View</td>
+        <td>0.5</td>
+        <td>0</td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tfoot>
+        <th>5 Elements</th>
+        <th>5.25 days</th>
+        <th>1 days</th>
+        <th></th>
+        <th></th>
+      </tfoot>
+    </tbody>
+  </table>
+  </div>
+  
+  
+</div>
--- a/node/src/files/components/semantic/collections/table.css
+++ b/node/src/files/components/semantic/collections/table.css
@ -15,11 +15,10 @@
 /* Prototype */
 .ui.table {
  width: 100%;
-  background-color: #FFFFFF;
  border-collapse: collapse;
-  color: #444444;
-  color: rgba(0, 0, 0, 0.75);
-  border: 1px solid #DDDDDD;
+}
+.ui.table thead {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
 .ui.table tr,
 .ui.table td {
@ -34,32 +33,23 @@
  -ms-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
 }
-.ui.table thead {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  background-color: rgba(50, 50, 50, 0.1);
-}
 .ui.table th {
  cursor: auto;
  text-align: left;
  font-weight: bold;
-  color: rgba(80, 80, 80, 0.85);
  padding: 0.5em 0.7em;
  vertical-align: middle;
 }
 .ui.table tfoot th {
  font-weight: normal;
  font-style: italic;
-  color: rgba(0, 0, 0, 0.8);
 }
 .ui.table td {
  padding: 0.40em 0.7em;
  vertical-align: middle;
 }
-.ui.table tfoot th {
-  background-color: #FFFFFF;
-}
 .ui.table tfoot {
-  border-top: 1px dotted rgba(0, 0, 0, 0.1);
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
 }
 /* Table Striping */
 .ui.table tbody tr:nth-child(2n) {
@ -72,6 +62,13 @@
 .ui.table > .icon:only-child {
  margin: 0em;
 }
+/* table segment */
+.ui.table.segment:after {
+  display: none;
+}
+.ui.table.segment.stacked:after {
+  display: block;
+}
 /*******************************
             States
 *******************************/
@ -246,6 +243,12 @@
 .ui.sortable.table thead th.descending:after {
  content: '\25be';
 }
+/*--------------
+    Inverted
+---------------*/
+.ui.inverted.table tbody tr:nth-child(2n) {
+  background-color: rgba(255, 255, 255, 0.06);
+}
 /*--------------
   Collapsing
 ---------------*/
--- a/node/src/files/components/semantic/elements/label.css
+++ b/node/src/files/components/semantic/elements/label.css
@ -41,7 +41,7 @@ a.ui.label {
 }
 .ui.label .detail {
  display: inline-block;
-  margin-left: 1em;
+  margin-left: 0.5em;
  font-weight: bold;
  opacity: 0.8;
 }
--- a/node/src/files/components/semantic/elements/segment.css
+++ b/node/src/files/components/semantic/elements/segment.css
@ -211,7 +211,7 @@
      Inverted
 --------------------*/
 .ui.inverted.segment {
-  border-top: none;
+  border: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
--- a/node/src/layouts/default.html.eco
+++ b/node/src/layouts/default.html.eco
@ -4,6 +4,7 @@
 <% uiCollections     = @getCollection("documents").findAllLive({type: $in: ['UI Collection']},[{title: 1}]).toJSON() %>
 <% uiViews           = @getCollection("documents").findAllLive({type: $in: ['UI View']},[{title: 1}]).toJSON() %>
 <% uiModules         = @getCollection("documents").findAllLive({type: $in: ['UI Module']},[{title: 1}]).toJSON() %>
+<% uiBehavior        = @getCollection("documents").findAllLive({type: $in: ['UI Behavior']},[{title: 1}]).toJSON() %>
 <% uiSpecification   = @getCollection("documents").findAllLive({type: $in: ['UI Specification']},[{title: 1}]).toJSON() %>
 <% currentCollection = @getCollection("documents").findAllLive({type: $in: [@document.type]},[{title: 1}]).toJSON() %>
 <% pageCount         = @pageCount(currentCollection) %>
@ -69,10 +70,10 @@
 </head>
 <body id="example" class="<%= @document.css %>">
  <div class="ui large vertical inverted labeled icon menu" id="menu">
-    <div class="item"><a href="/index.html"><i class="inverted circular book icon"></i> <b>Introduction</b></a></div>
+    <div class="item"><a href="/playground.html"><i class="inverted circular lab icon"></i> <b>Playground</b></a></div>
    <div class="item"><a href="/download.html"><i class="inverted circular upload icon"></i> <b>Download</b></a></div>
    <div class="item">
-      <a href="/element.html"><b>UI Elements</b></a>
+      <a href="/element.html"><b>Elements</b></a>
      <div class="menu">
        <% for element in uiElements: %>
          <a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>"><%= element.title %></a>
@ -80,7 +81,7 @@
      </div>
    </div>
    <div class="item">
-      <a href="/collection.html"><b>UI Collections</b></a>
+      <a href="/collection.html"><b>Collections</b></a>
      <div class="menu">
        <% for element in uiCollections: %>
          <a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>"><%= element.title %></a>
@ -88,7 +89,7 @@
      </div>
    </div>
    <div class="item">
-      <a href="/module.html"><b>UI Modules</b></a>
+      <a href="/module.html"><b>Modules</b></a>
      <div class="menu">
        <% for element in uiModules: %>
          <a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>"><%= element.title %></a>
@ -96,7 +97,15 @@
      </div>
    </div>
    <div class="item">
-      <a href="/view.html"><b>UI Views</b></a>
+      <a href="/module.html"><b>Behavior</b></a>
+      <div class="menu">
+        <% for element in uiBehavior: %>
+          <a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>"><%= element.title %></a>
+        <% end %>
+      </div>
+    </div>
+    <div class="item">
+      <a href="/view.html"><b>Views</b></a>
      <div class="menu">
        <% for element in uiViews: %>
          <a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>"><%= element.title %></a>
@ -104,7 +113,7 @@
      </div>
    </div>
    <div class="item">
-      <a href="/specification.html"><i class="inverted circular asterisk icon"></i><b>Specification</b></a>
+      <a href="/specification.html"><b>Specification</b></a>
      <div class="menu">
        <% for element in uiSpecification: %>
          <a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>"><%= element.title %></a>
--- a/spec/json/button.js
+++ b/spec/json/button.js
@ -0,0 +1,28 @@
+window.ui.button = {
+  name     : 'Button',
+  group    : 'UI Element',
+  class    : 'ui button',
+  
+  singular : {
+    'standard'    : '<div class="ui button">{$text}</div>',
+    'icon'        : '<div class="ui button"><i class="icon {$icon}"></i></div>',
+    'labeledIcon' : '<div class="ui button"><i class="icon {$icon}"></i>{$text}</div>',
+    'dropdown'    : '<div class="ui button"><i class="icon dropdown"></i></div>'
+  },
+  plural: {
+    standard : '<div class="button">Save</div><div class="button">Cancel</div>',
+    icon : '<div class="button">Save</div><div class="button">Cancel</div>',
+    choice   : '<div class="button">Save</div><div class="or"></div><div class="button">Cancel</div'
+  },
+  states: [
+    'active',
+    'disabled',
+    'toggled',
+    'success',
+    'error',
+    'loading'
+  ],
+  variations: [
+  
+  ] 
+};
--- a/src/collections/table.less
+++ b/src/collections/table.less
@ -18,14 +18,11 @@
 /* Prototype */
 .ui.table {
  width: 100%;
-  background-color: #FFFFFF;
  border-collapse: collapse;
-  color: #444444;
-  color: rgba(0, 0, 0, 0.75);
-
-  border: 1px solid #DDDDDD;
 }
-
+.ui.table thead {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
 .ui.table tr,
 .ui.table td {
  border-collapse: collapse;
@ -41,22 +38,16 @@
  -ms-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
 }
-.ui.table thead {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  background-color: rgba(50, 50, 50, 0.1);
-}
 .ui.table th {
  cursor: auto;
  text-align: left;
  font-weight: bold;
-  color: rgba(80, 80, 80, 0.85);
  padding: 0.5em 0.7em;
  vertical-align: middle;
 }
 .ui.table tfoot th {
  font-weight: normal;
  font-style: italic;
-  color: rgba(0, 0, 0, 0.8);
 }

 .ui.table td {
@ -64,11 +55,8 @@
  vertical-align: middle;
 }

-.ui.table tfoot th {
-  background-color: #FFFFFF;
-}
 .ui.table tfoot {
-  border-top: 1px dotted rgba(0, 0, 0, 0.1);
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
 }

 /* Table Striping */
@ -84,6 +72,13 @@
  margin: 0em;
 }

+/* table segment */
+.ui.table.segment:after {
+  display: none;
+}
+.ui.table.segment.stacked:after {
+  display: block;
+}

 /*******************************
             States
@ -284,6 +279,15 @@
  content: '\25be';
 }

+/*--------------
+    Inverted
+---------------*/
+
+.ui.inverted.table tbody tr:nth-child(2n) {
+  background-color: rgba(255, 255, 255, 0.06);
+}
+
+
 /*--------------
   Collapsing
 ---------------*/
--- a/src/elements/label.less
+++ b/src/elements/label.less
@ -53,7 +53,7 @@ a.ui.label {

 .ui.label .detail {
  display: inline-block;
-  margin-left: 1em;
+  margin-left: 0.5em;
  font-weight: bold;
  opacity: 0.8;
 }
--- a/src/elements/segment.less
+++ b/src/elements/segment.less
@ -276,7 +276,7 @@
 --------------------*/

 .ui.inverted.segment {
-  border-top: none;
+  border: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;