diff --git a/build/minified/collections/table.min.css b/build/minified/collections/table.min.css index eee4bd83b..8a9a51744 100644 --- 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} \ No newline at end of file +.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} \ No newline at end of file diff --git a/build/minified/elements/segment.min.css b/build/minified/elements/segment.min.css index 5fdff64bd..a28f242cf 100644 --- 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} \ No newline at end of file +.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} \ No newline at end of file diff --git a/build/packaged/semantic.min.css.REMOVED.git-id b/build/packaged/semantic.min.css.REMOVED.git-id index c37115c4d..3b240a99d 100644 --- a/build/packaged/semantic.min.css.REMOVED.git-id +++ b/build/packaged/semantic.min.css.REMOVED.git-id @@ -1 +1 @@ -dcef2b69ad1c2fb13cad19729d5cf209533484b8 \ No newline at end of file +e2b102b1dcdb02c34c10313fa2cadc9b95d4d059 \ No newline at end of file diff --git a/build/uncompressed/collections/table.css b/build/uncompressed/collections/table.css index 2cff0c260..951113e10 100644 --- 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 diff --git a/build/uncompressed/elements/segment.css b/build/uncompressed/elements/segment.css index 03c09f13a..30aab70a2 100644 --- 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; diff --git a/node/src/documents/collections/table.html b/node/src/documents/collections/table.html index c7391000c..b0831af65 100755 --- a/node/src/documents/collections/table.html +++ b/node/src/documents/collections/table.html @@ -67,7 +67,7 @@ type : 'UI Collection'

Positive / Negative

A cell may let a user know whether a value is good or bad:

- +
@@ -102,7 +102,7 @@ type : 'UI Collection'

Error

A cell or row may alert the user to an error or a negative value:

-
Name Status
+
@@ -116,13 +116,13 @@ type : 'UI Collection' - + - + @@ -136,7 +136,7 @@ type : 'UI Collection'

Warning

A cell or row may warn a user:

-
Name Status
Jimmy Cannot pull dataCannot pull data None
Jamie Approved Classified Classified
Jill
+
@@ -170,7 +170,7 @@ type : 'UI Collection'

Active

A cell or row can be active:

-
Name Status
+
@@ -202,7 +202,7 @@ type : 'UI Collection'

Disabled

A cell can be disabled:

-
Name Status
+
@@ -239,7 +239,7 @@ type : 'UI Collection'

Collapsing

By default tables take the size of their container. A collapsing takes up only as much space as its rows.

-
Name Status
+
@@ -272,7 +272,7 @@ type : 'UI Collection'

Cells

-

A table may be divided into cells to help segment content

+

A table may be divided each row into separate cells

Name Status
@@ -310,7 +310,7 @@ type : 'UI Collection'

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 tablesort plugin to provide the proper class names.

-
Name
+
@@ -343,7 +343,7 @@ type : 'UI Collection'

Padded

A table may sometimes need to be more padded for legibility

-
Name Status
+
@@ -366,7 +366,7 @@ type : 'UI Collection'

Compact

A table may sometimes need to be more compact to make more rows visible at a time

-
Name Status
+
diff --git a/node/src/documents/elements/label.html b/node/src/documents/elements/label.html index f7cc87131..ed17a72d7 100755 --- a/node/src/documents/elements/label.html +++ b/node/src/documents/elements/label.html @@ -143,32 +143,12 @@ type : 'UI Element'

Attached Label

A label attached to a content segment

-
-
-
-
Top Left
-
Top Right
-
Bottom Left
-
Bottom Right
-

Hey let's look at labels.

-
-
-
-
-
Existing Users
-
-
- - -
-
- - -
-
Log in
-
-
-
+
+
Top Left
+
Top Right
+
Bottom Left
+
Bottom Right
+

Hey let's look at labels.

diff --git a/node/src/documents/elements/segment.html b/node/src/documents/elements/segment.html index 80f95501f..76797dc0a 100755 --- a/node/src/documents/elements/segment.html +++ b/node/src/documents/elements/segment.html @@ -28,6 +28,27 @@ type : 'UI Element'

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.

+
+

Vertical Segment

+

A vertical segment divides content vertically

+
+

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.

+
+
+
+

Horizontal Segment

+

A horizontal segment divides content horizontally

+
+

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.

+
+
+ + +

States

+ +
+

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.

+

Variations

@@ -38,6 +59,44 @@ type : 'UI Element'

I'm here to tell you something, and you will probably read me first.

+ +
+

Colored

+

A segment can be colored

+
+

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.

+
+

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.

+
+

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.

+
+

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.

+
+

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.

+
+
+
+
+
+
+
+

These colors can be inverted

+
+

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.

+
+
+

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.

+
+
+

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.

+
+
+

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.

+
+
+

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.

+
+

Ordinality

diff --git a/node/src/files/components/semantic/collections/table.css b/node/src/files/components/semantic/collections/table.css index 2cff0c260..951113e10 100644 --- 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 diff --git a/node/src/files/components/semantic/elements/segment.css b/node/src/files/components/semantic/elements/segment.css index 03c09f13a..30aab70a2 100644 --- 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; diff --git a/src/collections/table.less b/src/collections/table.less index c30cb6019..01e0384eb 100755 --- 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); } /******************************* diff --git a/src/elements/segment.less b/src/elements/segment.less index 29b7b7829..c3cd5dabb 100755 --- 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;
Name Status