Browse Source

Adds comment view

pull/13/head
Jack Lukic 12 years ago
parent
commit
999aac89cc
24 changed files with 716 additions and 80 deletions
  1. 2
      build/minified/collections/form.min.css
  2. 2
      build/minified/collections/grid.min.css
  3. 2
      build/minified/collections/menu.min.css
  4. 2
      build/minified/elements/button.min.css
  5. 1
      build/minified/views/comment.min.css
  6. 2
      build/packaged/semantic.min.css
  7. 1
      build/uncompressed/collections/form.css
  8. 34
      build/uncompressed/collections/grid.css
  9. 20
      build/uncompressed/collections/menu.css
  10. 1
      build/uncompressed/elements/button.css
  11. 129
      build/uncompressed/views/comment.css
  12. 190
      node/src/documents/views/comment.html
  13. 1
      node/src/files/components/semantic/collections/form.css
  14. 34
      node/src/files/components/semantic/collections/grid.css
  15. 20
      node/src/files/components/semantic/collections/menu.css
  16. 1
      node/src/files/components/semantic/elements/button.css
  17. 129
      node/src/files/components/semantic/views/comment.css
  18. BIN
      node/src/files/images/demo/dog.jpg
  19. 2
      node/src/layouts/default.html.eco
  20. 1
      src/collections/form.less
  21. 37
      src/collections/grid.less
  22. 22
      src/collections/menu.less
  23. 1
      src/elements/button.less
  24. 162
      src/views/comment.less

2
build/minified/collections/form.min.css

@ -1 +1 @@
.ui.form{position:relative;width:35em;max-width:100%}.ui.form :first-child{margin-top:0}.ui.form>p{margin:1em 0}.ui.form .field{clear:both;margin:0 0 1em}.ui.form .field>label{margin:0 0 .3em;display:block;color:#555;font-size:.875em;line-height:1.2}.ui.form textarea,.ui.form input[type=text],.ui.form input[type=date],.ui.form input[type=password],.ui.textarea,.ui.input{width:100%;padding:.53em .7em;font-size:.825em;background-color:#FFF;border:1px solid rgba(0,0,0,.15);outline:0;color:#555;-webkit-border-radius:.3125em;-moz-border-radius:.3125em;border-radius:.3125em;-webkit-transition:background-color .3s ease-out;-moz-transition:background-color .3s ease-out;-o-transition:background-color .3s ease-out;-ms-transition:background-color .3s ease-out;transition:background-color .3s ease-out;-webkit-tap-highlight-color:rgba(255,255,255,0);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.textarea,.ui.form textarea{line-height:1.33;min-height:8em;height:12em;max-height:24em;resize:vertical}.ui.form select{-webkit-tap-highlight-color:rgba(255,255,255,0)}.ui.form textarea,.ui.form input[type=checkbox]{vertical-align:top}.ui.form .divider{clear:both;margin:1em 0}.ui.form .info.message,.ui.form .warning.message,.ui.form .error.message{display:none}.ui.form .message:first-child{margin-top:0}.ui.form input:focus,.ui.form textarea:focus{color:rgba(20,20,20,.9);border-color:rgba(0,0,0,.3)}.ui.form.warning .warning.message{display:block}.ui.form.error .error.message{display:block}.ui.form .fields.error .field label,.ui.form .field.error label{font-weight:700;color:#EF3F49}.ui.form .fields.error .field textarea,.ui.form .fields.error .field input[type=text],.ui.form .fields.error .field input[type=date],.ui.form .fields.error .field input[type=password],.ui.form .field.error textarea,.ui.form .field.error input[type=text],.ui.form .field.error input[type=date],.ui.form .field.error input[type=password]{background-color:#FFFAFA;border-color:rgba(255,80,80,.7);color:rgba(255,80,80,.7)}.ui.form .field.error textarea:focus,.ui.form .field.error input:focus{border-color:#ff5050;color:#ff5050}.ui.form ::-webkit-input-placeholder{color:#E0E0E0}.ui.form ::-moz-placeholder{color:#E0E0E0}.ui.form :focus::-webkit-input-placeholder{color:#AAA}.ui.form :focus::-moz-placeholder{color:#AAA}.ui.form textarea.empty,.ui.form input.empty{color:#E0E0E0}.ui.form .error ::-webkit-input-placeholder{color:rgba(255,80,80,.4)}.ui.form .error ::-moz-placeholder{color:rgba(255,80,80,.4)}.ui.form .error :focus::-webkit-input-placeholder{color:rgba(255,80,80,.7)}.ui.form .error :focus::-moz-placeholder{color:rgba(255,80,80,.7)}.ui.form .field :disabled,.ui.form .field.disabled{opacity:.5}.ui.form .field.disabled :disabled{opacity:1}.ui.form.loading{position:relative}.ui.form.loading:after{position:absolute;top:0;left:0;content:'';width:100%;height:100%;background:rgba(255,255,255,.8) url(../images/throbber-large.gif) no-repeat 50% 50%}.ui.form.fluid{width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.form input.attached{width:auto}.ui.form .date.field>label{position:relative}.ui.form .date.field>label:after{position:absolute;top:1.2em;right:.4em;font-family:Icons;content:'📅';font-size:1.5em;font-weight:400;color:#CCC}.ui.inverted.form label{color:#FFF}.ui.inverted.form .field.error textarea,.ui.inverted.form .field.error input[type=text]{background-color:#FCC}.ui.form .fields{clear:both}.ui.form .fields:after{content:' ';display:block;clear:both;visibility:hidden;line-height:0;height:0}.ui.form .fields .field{clear:none;float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.form .fields .field:first-child{border-left:0;box-shadow:none}.ui.form .fields .field,.ui.form .two.fields .field{width:50%;padding-left:1%;padding-right:1%}.ui.form .three.fields .field{width:33.333%;padding-left:1%;padding-right:1%}.ui.form .four.fields .field{width:25%;padding-left:1%;padding-right:1%}.ui.form .five.fields .field{width:20%;padding-left:1%;padding-right:1%}.ui.form .fields .field:first-child{padding-left:0}.ui.form .fields .field:last-child{padding-right:0}.ui.form .inline.fields .field>label,.ui.form .inline.fields .field>p,.ui.form .inline.fields .field>input,.ui.form .inline.fields .field>select,.ui.form .inline.field>label,.ui.form .inline.field>p,.ui.form .inline.field>input,.ui.form .inline.field>select{display:inline-block;width:auto;margin-top:0;margin-bottom:0;vertical-align:middle;font-size:1em}.ui.form .inline.fields .field>:first-child,.ui.form .inline.field>:first-child{margin:0 .5em 0 0}.ui.small.form{font-size:.875em}.ui.small.form textarea,.ui.small.form input[type=text],.ui.small.form input[type=password],.ui.small.form label{font-size:1em}.ui.large.form{font-size:1.125em}.ui.large.form label{font-weight:700}
.ui.form{position:relative;max-width:100%}.ui.form :first-child{margin-top:0}.ui.form>p{margin:1em 0}.ui.form .field{clear:both;margin:0 0 1em}.ui.form .field>label{margin:0 0 .3em;display:block;color:#555;font-size:.875em;line-height:1.2}.ui.form textarea,.ui.form input[type=text],.ui.form input[type=date],.ui.form input[type=password],.ui.textarea,.ui.input{width:100%;padding:.53em .7em;font-size:.825em;background-color:#FFF;border:1px solid rgba(0,0,0,.15);outline:0;color:#555;-webkit-border-radius:.3125em;-moz-border-radius:.3125em;border-radius:.3125em;-webkit-transition:background-color .3s ease-out;-moz-transition:background-color .3s ease-out;-o-transition:background-color .3s ease-out;-ms-transition:background-color .3s ease-out;transition:background-color .3s ease-out;-webkit-tap-highlight-color:rgba(255,255,255,0);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.textarea,.ui.form textarea{line-height:1.33;min-height:8em;height:12em;max-height:24em;resize:vertical}.ui.form select{-webkit-tap-highlight-color:rgba(255,255,255,0)}.ui.form textarea,.ui.form input[type=checkbox]{vertical-align:top}.ui.form .divider{clear:both;margin:1em 0}.ui.form .info.message,.ui.form .warning.message,.ui.form .error.message{display:none}.ui.form .message:first-child{margin-top:0}.ui.form input:focus,.ui.form textarea:focus{color:rgba(20,20,20,.9);border-color:rgba(0,0,0,.3)}.ui.form.warning .warning.message{display:block}.ui.form.error .error.message{display:block}.ui.form .fields.error .field label,.ui.form .field.error label{font-weight:700;color:#EF3F49}.ui.form .fields.error .field textarea,.ui.form .fields.error .field input[type=text],.ui.form .fields.error .field input[type=date],.ui.form .fields.error .field input[type=password],.ui.form .field.error textarea,.ui.form .field.error input[type=text],.ui.form .field.error input[type=date],.ui.form .field.error input[type=password]{background-color:#FFFAFA;border-color:rgba(255,80,80,.7);color:rgba(255,80,80,.7)}.ui.form .field.error textarea:focus,.ui.form .field.error input:focus{border-color:#ff5050;color:#ff5050}.ui.form ::-webkit-input-placeholder{color:#E0E0E0}.ui.form ::-moz-placeholder{color:#E0E0E0}.ui.form :focus::-webkit-input-placeholder{color:#AAA}.ui.form :focus::-moz-placeholder{color:#AAA}.ui.form textarea.empty,.ui.form input.empty{color:#E0E0E0}.ui.form .error ::-webkit-input-placeholder{color:rgba(255,80,80,.4)}.ui.form .error ::-moz-placeholder{color:rgba(255,80,80,.4)}.ui.form .error :focus::-webkit-input-placeholder{color:rgba(255,80,80,.7)}.ui.form .error :focus::-moz-placeholder{color:rgba(255,80,80,.7)}.ui.form .field :disabled,.ui.form .field.disabled{opacity:.5}.ui.form .field.disabled :disabled{opacity:1}.ui.form.loading{position:relative}.ui.form.loading:after{position:absolute;top:0;left:0;content:'';width:100%;height:100%;background:rgba(255,255,255,.8) url(../images/throbber-large.gif) no-repeat 50% 50%}.ui.form.fluid{width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.form input.attached{width:auto}.ui.form .date.field>label{position:relative}.ui.form .date.field>label:after{position:absolute;top:1.2em;right:.4em;font-family:Icons;content:'📅';font-size:1.5em;font-weight:400;color:#CCC}.ui.inverted.form label{color:#FFF}.ui.inverted.form .field.error textarea,.ui.inverted.form .field.error input[type=text]{background-color:#FCC}.ui.form .fields{clear:both}.ui.form .fields:after{content:' ';display:block;clear:both;visibility:hidden;line-height:0;height:0}.ui.form .fields .field{clear:none;float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.form .fields .field:first-child{border-left:0;box-shadow:none}.ui.form .fields .field,.ui.form .two.fields .field{width:50%;padding-left:1%;padding-right:1%}.ui.form .three.fields .field{width:33.333%;padding-left:1%;padding-right:1%}.ui.form .four.fields .field{width:25%;padding-left:1%;padding-right:1%}.ui.form .five.fields .field{width:20%;padding-left:1%;padding-right:1%}.ui.form .fields .field:first-child{padding-left:0}.ui.form .fields .field:last-child{padding-right:0}.ui.form .inline.fields .field>label,.ui.form .inline.fields .field>p,.ui.form .inline.fields .field>input,.ui.form .inline.fields .field>select,.ui.form .inline.field>label,.ui.form .inline.field>p,.ui.form .inline.field>input,.ui.form .inline.field>select{display:inline-block;width:auto;margin-top:0;margin-bottom:0;vertical-align:middle;font-size:1em}.ui.form .inline.fields .field>:first-child,.ui.form .inline.field>:first-child{margin:0 .5em 0 0}.ui.small.form{font-size:.875em}.ui.small.form textarea,.ui.small.form input[type=text],.ui.small.form input[type=password],.ui.small.form label{font-size:1em}.ui.large.form{font-size:1.125em}.ui.large.form label{font-weight:700}

2
build/minified/collections/grid.min.css

@ -1 +1 @@
.ui.grid{width:100%;display:block;text-align:center;font-size:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.grid:after,.ui.row:after{content:".";display:block;height:0;clear:both;visibility:hidden}.ui.grid>.column,.ui.grid>.row>.column{display:inline-block;text-align:left;font-size:1rem;padding-left:2%;padding-right:2%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;vertical-align:top}.ui.grid>.row{display:block;width:100%}.ui.grid>.row{margin-top:2%;padding-top:2%}.ui.grid>.row:first-child{padding-top:0rem;margin-top:0rem}.ui.grid>.row>img,.ui.grid>.row>.column>img{max-width:100%}.ui.grid .column>.ui.segment:only-child{margin:0}.ui.grid .column>.grid{margin-left:-1.333%;margin-right:-1.333%}.ui.page.grid{padding:0 5%}@media only screen and (max-width:1000px){.ui.responsive.grid{padding:0 5.55%}}@media only screen and (min-width:1000px){.ui.responsive.grid{padding:0 8%}}@media only screen and (min-width:1500px){.ui.responsive.grid{padding:0 13%}}@media only screen and (min-width:1750px){.ui.responsive.grid{padding:0 18%}}@media only screen and (min-width:2000px){.ui.responsive.grid{padding:0 20%}}.ui.grid .one.wide.column{width:8.3333%}.ui.grid .two.wide.column{width:16.66667%}.ui.grid .three.wide.column{width:25%}.ui.grid .four.wide.column{width:33.3333%}.ui.grid .five.wide.column{width:41.6666%}.ui.grid .six.wide.column{width:50%}.ui.grid .seven.wide.column{width:58.3333%}.ui.grid .eight.wide.column{width:66.6666%}.ui.grid .nine.wide.column{width:75%}.ui.grid .ten.wide.column{width:83.3333%}.ui.grid .eleven.wide.column{width:91.666%}.ui.grid .twelve.wide.column{width:100%}.ui.grid>.column,.ui.grid>.row>.column{width:8.3333%}.ui.grid>.column:only-child,.ui.grid>.row>.column:only-child{width:100%}.ui.two.column.grid .column{width:50%}.ui.three.column.grid .column{width:33.3333%}.ui.four.column.grid .column{width:25%}.ui.five.column.grid .column{width:20%}.ui.six.column.grid .column{width:16.66667%}.ui.seven.column.grid .column{width:14.2857%}.ui.eight.column.grid .column{width:12.5%}.ui.nine.column.grid .column{width:11.1111%}.ui.ten.column.grid .column{width:10%}.ui.eleven.column.grid .column{width:9.0909%}.ui.fitted.grid{padding:0}.ui.fitted.row{padding-top:0}.ui.fitted.grid .column,.ui.grid .fitted.column{padding-left:0;padding-right:0}.ui.grid .left.floated.column{float:left}.ui.grid .right.floated.column{float:right}.ui.divided.grid>.row{display:table}.ui.divided.grid>.column,.ui.divided.grid>.row>.column{display:table-cell;-webkit-box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.9);-moz-box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.9);box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.9)}.ui.divided.grid>.column:first-child,.ui.divided.grid>.row>.column:first-child{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.celled.grid{-webkit-box-shadow:0 0 0 1px #DFDFDF;-moz-box-shadow:0 0 0 1px #DFDFDF;box-shadow:0 0 0 1px #DFDFDF}.ui.celled.grid>.row{display:table;margin-top:0;padding-top:0;-webkit-box-shadow:0 -1px 0 0 #dfdfdf;-moz-box-shadow:0 -1px 0 0 #dfdfdf;box-shadow:0 -1px 0 0 #dfdfdf}.ui.celled.grid>.column,.ui.celled.grid>.row>.column{display:table-cell;padding:2%;-webkit-box-shadow:-1px 0 0 0 #dfdfdf;-moz-box-shadow:-1px 0 0 0 #dfdfdf;box-shadow:-1px 0 0 0 #dfdfdf}.ui.celled.grid>.column:first-child,.ui.celled.grid>.row>.column:first-child{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.left.aligned.grid .column,.ui.grid .left.aligned.column,.ui.grid>.left.aligned.row .column{text-align:left}.ui.center.aligned.grid .column,.ui.grid .center.aligned.column,.ui.grid>.center.aligned.row .column{text-align:center}.ui.right.aligned.grid .column,.ui.grid .right.aligned.column,.ui.grid>.right.aligned.row .column{text-align:right}.ui.top.aligned.grid .column,.ui.grid .top.aligned.column,.ui.grid>.top.aligned.row .column{vertical-align:top}.ui.middle.aligned.grid .column,.ui.grid .middle.aligned.column,.ui.grid>.middle.aligned.row .column{vertical-align:middle}.ui.bottom.aligned.grid .column,.ui.grid .bottom.aligned.column,.ui.grid>.bottom.aligned.row .column{vertical-align:bottom}.ui.grid .equal.row .column{display:table-cell}.ui.fitted.grid{margin-left:-1.333%;margin-right:-1.333%}@media only screen and (max-width:1000px){.ui.folding.grid{display:block!important}.ui.folding.grid .column{display:block!important;width:100%!important;padding:0!important}}
.ui.grid{width:100%;display:block;text-align:center;font-size:0;margin:0 -1.33%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.grid:after,.ui.row:after{content:".";display:block;height:0;clear:both;visibility:hidden}.ui.grid>.column,.ui.grid>.row>.column{display:inline-block;text-align:left;font-size:1rem;padding-left:1.33%;padding-right:1.33%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;vertical-align:top}.ui.grid>.row{display:block;width:100%}.ui.grid>.row{margin-top:2%;padding-top:2%}.ui.grid>.row:first-child{padding-top:0rem;margin-top:0rem}.ui.grid>.row>img,.ui.grid>.row>.column>img{max-width:100%}.ui.grid .column>.ui.segment:only-child{margin:0}.ui.grid .column>.grid{margin-left:-1.333%;margin-right:-1.333%}.ui.page.grid{margin:0:padding:0 5%}.ui.responsive.grid{margin:0}@media only screen and (max-width:1000px){.ui.responsive.grid{padding:0 5.55%}}@media only screen and (min-width:1000px){.ui.responsive.grid{padding:0 8%}}@media only screen and (min-width:1500px){.ui.responsive.grid{padding:0 13%}}@media only screen and (min-width:1750px){.ui.responsive.grid{padding:0 18%}}@media only screen and (min-width:2000px){.ui.responsive.grid{padding:0 20%}}.ui.grid .one.wide.column{width:8.3333%}.ui.grid .two.wide.column{width:16.66667%}.ui.grid .three.wide.column{width:25%}.ui.grid .four.wide.column{width:33.3333%}.ui.grid .five.wide.column{width:41.6666%}.ui.grid .six.wide.column{width:50%}.ui.grid .seven.wide.column{width:58.3333%}.ui.grid .eight.wide.column{width:66.6666%}.ui.grid .nine.wide.column{width:75%}.ui.grid .ten.wide.column{width:83.3333%}.ui.grid .eleven.wide.column{width:91.666%}.ui.grid .twelve.wide.column{width:100%}.ui.grid>.column,.ui.grid>.row>.column{width:8.3333%}.ui.grid>.column:only-child,.ui.grid>.row>.column:only-child{width:100%}.ui.two.column.grid .column{width:50%}.ui.three.column.grid .column{width:33.3333%}.ui.four.column.grid .column{width:25%}.ui.five.column.grid .column{width:20%}.ui.six.column.grid .column{width:16.66667%}.ui.seven.column.grid .column{width:14.2857%}.ui.eight.column.grid .column{width:12.5%}.ui.nine.column.grid .column{width:11.1111%}.ui.ten.column.grid .column{width:10%}.ui.eleven.column.grid .column{width:9.0909%}.ui.padded.grid{margin-left:0;margin-right:0}.ui.grid .left.floated.column{float:left}.ui.grid .right.floated.column{float:right}.ui.divided.grid>.row{display:table}.ui.divided.grid>.column,.ui.divided.grid>.row>.column{display:table-cell;-webkit-box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.9);-moz-box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.9);box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.9)}.ui.divided.grid>.column:first-child,.ui.divided.grid>.row>.column:first-child{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.celled.grid{-webkit-box-shadow:0 0 0 1px #DFDFDF;-moz-box-shadow:0 0 0 1px #DFDFDF;box-shadow:0 0 0 1px #DFDFDF}.ui.celled.grid>.row{display:table;margin-top:0;padding-top:0;-webkit-box-shadow:0 -1px 0 0 #dfdfdf;-moz-box-shadow:0 -1px 0 0 #dfdfdf;box-shadow:0 -1px 0 0 #dfdfdf}.ui.celled.grid>.column,.ui.celled.grid>.row>.column{display:table-cell;padding:2%;-webkit-box-shadow:-1px 0 0 0 #dfdfdf;-moz-box-shadow:-1px 0 0 0 #dfdfdf;box-shadow:-1px 0 0 0 #dfdfdf}.ui.celled.grid>.column:first-child,.ui.celled.grid>.row>.column:first-child{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.left.aligned.grid,.ui.left.aligned.grid .column,.ui.grid .left.aligned.column,.ui.grid>.left.aligned.row .column{text-align:left}.ui.center.aligned.grid,.ui.center.aligned.grid .column,.ui.grid .center.aligned.column,.ui.grid>.center.aligned.row .column{text-align:center}.ui.right.aligned.grid,.ui.right.aligned.grid .column,.ui.grid .right.aligned.column,.ui.grid>.right.aligned.row .column{text-align:right}.ui.top.aligned.grid .column,.ui.grid .top.aligned.column,.ui.grid>.top.aligned.row .column{vertical-align:top}.ui.middle.aligned.grid .column,.ui.grid .middle.aligned.column,.ui.grid>.middle.aligned.row .column{vertical-align:middle}.ui.bottom.aligned.grid .column,.ui.grid .bottom.aligned.column,.ui.grid>.bottom.aligned.row .column{vertical-align:bottom}.ui.grid .equal.row .column{display:table-cell}@media only screen and (max-width:1000px){.ui.folding.grid{display:block!important}.ui.folding.grid .column{display:block!important;width:100%!important;padding:0!important}}

2
build/minified/collections/menu.min.css
File diff suppressed because it is too large
View File

2
build/minified/elements/button.min.css
File diff suppressed because it is too large
View File

1
build/minified/views/comment.min.css

@ -0,0 +1 @@
.ui.comments a{cursor:pointer}.ui.comments .comment{position:relative;margin-top:.75em;padding-top:.75em;width:100%}.ui.comments .comment:first-child{margin-top:0;padding-top:0}.ui.comments .comment .avatar{display:block;float:left}.ui.comments .comment .avatar,.ui.comments .comment .avatar img{width:3em}.ui.comments .comment .avatar img{height:3em;border-radius:500px}.ui.comments .comment>.content,.ui.comments .comment>.avatar{display:block}.ui.comments .comment .avatar~.content{padding:0 1em}.ui.comments .comment>.avatar~.content{margin-left:3em}.ui.comments .comment .metadata{display:inline-block;margin-left:.3em;color:rgba(0,0,0,.4)}.ui.comments .comment .metadata *{display:inline-block;margin:0 .3em 0 0}.ui.comments .comment .text{margin:0 0 .5em}.ui.comments .comment .actions{font-size:.9em}.ui.comments .comment .actions a{display:inline-block;margin:0 .3em 0 0;color:rgba(0,0,0,.3)}.ui.comments .comment .actions a:hover{color:rgba(0,0,0,.6)}.ui.comments .comment .comments{margin-top:1em;padding-top:1em}.ui.comments .comment .comments:before{position:absolute;top:0;left:0}.ui.comments>.comment .comments{margin-left:2em}.ui.comments>.comment>.comments>.comment>.comments{margin-left:1.75em}.ui.comments>.comment>.comments>.comment>.comments>.comment>.comments{margin-left:1.5em}.ui.comments>.comment>.comments>.comment>.comments>.comment>.comments>.comment .comments{margin-left:.5em}.ui.threaded.comments .comment .comments{margin-left:1.5em!important;padding-left:1.5em!important;-webkit-box-shadow:-1px 0 0 rgba(0,0,0,.05);-moz-box-shadow:-1px 0 0 rgba(0,0,0,.05);box-shadow:-1px 0 0 rgba(0,0,0,.05)}

2
build/packaged/semantic.min.css
File diff suppressed because it is too large
View File

1
build/uncompressed/collections/form.css

@ -17,7 +17,6 @@
---------------------*/
.ui.form {
position: relative;
width: 35em;
max-width: 100%;
}
.ui.form :first-child {

34
build/uncompressed/collections/grid.css

@ -17,6 +17,7 @@
display: block;
text-align: center;
font-size: 0em;
margin: 0% -1.33%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
@ -38,8 +39,8 @@
display: inline-block;
text-align: left;
font-size: 1rem;
padding-left: 2%;
padding-right: 2%;
padding-left: 1.33%;
padding-right: 1.33%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
@ -85,11 +86,15 @@
Page
--------------------*/
.ui.page.grid {
margin: 0%:
padding: 0% 5%;
}
/*-------------------
Responsive
--------------------*/
.ui.responsive.grid {
margin: 0%;
}
@media only screen and (max-width: 1000px) {
.ui.responsive.grid {
padding: 0% 5.55%;
@ -199,18 +204,11 @@
width: 9.0909%;
}
/*-------------------
Fitted
Padded
--------------------*/
.ui.fitted.grid {
padding: 0%;
}
.ui.fitted.row {
padding-top: 0%;
}
.ui.fitted.grid .column,
.ui.grid .fitted.column {
padding-left: 0%;
padding-right: 0%;
.ui.padded.grid {
margin-left: 0%;
margin-right: 0%;
}
/*----------------------
"Floated"
@ -274,16 +272,19 @@
Horizontally Centered
-----------------------*/
/* Vertical Centered */
.ui.left.aligned.grid,
.ui.left.aligned.grid .column,
.ui.grid .left.aligned.column,
.ui.grid > .left.aligned.row .column {
text-align: left;
}
.ui.center.aligned.grid,
.ui.center.aligned.grid .column,
.ui.grid .center.aligned.column,
.ui.grid > .center.aligned.row .column {
text-align: center;
}
.ui.right.aligned.grid,
.ui.right.aligned.grid .column,
.ui.grid .right.aligned.column,
.ui.grid > .right.aligned.row .column {
@ -314,13 +315,6 @@
.ui.grid .equal.row .column {
display: table-cell;
}
/*----------------------
Fitted
-----------------------*/
.ui.fitted.grid {
margin-left: -1.333%;
margin-right: -1.333%;
}
/*-------------------
Folding
--------------------*/

20
build/uncompressed/collections/menu.css

@ -629,7 +629,7 @@
}
.ui.text.menu .header.item {
background-color: transparent;
margin: 0em 0.5em 0em 0em;
margin: 0em;
padding: 0.35em 0.5em;
opacity: 1;
color: rgba(50, 50, 50, 0.8);
@ -637,11 +637,17 @@
text-transform: uppercase;
font-weight: bold;
}
.ui.text.menu .header.item > a {
background-color: transparent;
}
/*--- fluid text ---*/
.ui.fluid.text.menu {
margin: 0em;
}
/*--- vertical text ---*/
.ui.vertical.text.menu {
margin: 1rem 0em;
}
.ui.vertical.text.menu .item {
float: left;
clear: left;
@ -983,6 +989,18 @@
/*--------------
Sizes
---------------*/
.ui.tiny.menu .item {
font-size: 0.875rem;
padding: 0.35em 0.5em;
}
.ui.tiny.menu .item > a {
display: block;
margin: -0.35em -0.5em;
padding: 0.35em 0.5em;
}
.ui.tiny.vertical.menu {
width: 9rem;
}
.ui.small.menu .item {
font-size: 0.875rem;
min-height: 1.2em;

1
build/uncompressed/elements/button.css

@ -27,6 +27,7 @@
font-weight: bold;
font-style: normal;
text-align: center;
text-shadow: none;
-webkit-border-radius: 0.3125em;
-moz-border-radius: 0.3125em;
border-radius: 0.3125em;

129
build/uncompressed/views/comment.css

@ -0,0 +1,129 @@
/*
* # Semantic Comment View
* http://github.com/quirkyinc/semantic
*
*
* Copyright 2013 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
* Released: April 17 2013
*/
/*******************************
Standard
*******************************/
/*--------------
Comments
---------------*/
.ui.comments a {
cursor: pointer;
}
/*--------------
Comment
---------------*/
.ui.comments .comment {
position: relative;
margin-top: 0.75em;
padding-top: 0.75em;
width: 100%;
}
.ui.comments .comment:first-child {
margin-top: 0em;
padding-top: 0em;
}
/*--------------------
Avatar (Optional)
---------------------*/
.ui.comments .comment .avatar {
display: block;
float: left;
}
.ui.comments .comment .avatar,
.ui.comments .comment .avatar img {
width: 3em;
}
.ui.comments .comment .avatar img {
height: 3em;
border-radius: 500px;
}
/*--------------
Content
---------------*/
.ui.comments .comment > .content,
.ui.comments .comment > .avatar {
display: block;
}
.ui.comments .comment .avatar ~ .content {
padding: 0em 1em;
}
/* If there is an avatar move content over */
.ui.comments .comment > .avatar ~ .content {
margin-left: 3em;
}
.ui.comments .comment .metadata {
display: inline-block;
margin-left: 0.3em;
color: rgba(0, 0, 0, 0.4);
}
.ui.comments .comment .metadata * {
display: inline-block;
margin: 0em 0.3em 0em 0em;
}
/*--------------------
Comment Text
---------------------*/
.ui.comments .comment .text {
margin: 0em 0em 0.5em;
}
/*--------------------
User Actions
---------------------*/
.ui.comments .comment .actions {
font-size: 0.9em;
}
.ui.comments .comment .actions a {
display: inline-block;
margin: 0em 0.3em 0em 0em;
color: rgba(0, 0, 0, 0.3);
}
.ui.comments .comment .actions a:hover {
color: rgba(0, 0, 0, 0.6);
}
/*--------------------
Nested Comments
---------------------*/
.ui.comments .comment .comments {
margin-top: 1em;
padding-top: 1em;
}
.ui.comments .comment .comments:before {
position: absolute;
top: 0px;
left: 0px;
}
/* One Deep */
.ui.comments > .comment .comments {
margin-left: 2em;
}
/* Two Deep */
.ui.comments > .comment > .comments > .comment > .comments {
margin-left: 1.75em;
}
/* Three Deep */
.ui.comments > .comment > .comments > .comment > .comments > .comment > .comments {
margin-left: 1.5em;
}
/* Four Deep or more */
.ui.comments > .comment > .comments > .comment > .comments > .comment > .comments > .comment .comments {
margin-left: 0.5em;
}
/*******************************
Variations
*******************************/
.ui.threaded.comments .comment .comments {
margin-left: 1.5em !important;
padding-left: 1.5em !important;
-webkit-box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.05);
-moz-box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.05);
box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.05);
}

190
node/src/documents/views/comment.html

@ -15,21 +15,201 @@ type : 'UI View'
<div class="peek">
<div class="ui vertical pointing menu">
<a class="active item">Standard</a>
<a class="active item">Example</a>
<a class="item">Content</a>
<a class="item">Variations</a>
</div>
</div>
<h2>Standard</h2>
<div class="example">
<h4>Comments:</h4>
<p>All comment</p>
<h4>Comments</h4>
<p>A basic comment with only required sections</p>
<div class="ui comments">
<div class="comment">
<a class="author">Dog Doggington</a>
<div class="text">
I think this is a great idea and i am voting on it
</div>
</div>
</div>
</div>
<h2>Content</h2>
<h3>Comment</h3>
<div class="example">
<h4>Avatar</h4>
<p>A comment can optionally contain an image or avatar</p>
<div class="ui comments">
<div class="comment">
<a class="avatar">
<img src="/images/demo/dog.jpg">
</a>
<div class="content">
<a class="author">Dog Doggington</a>
<div class="text">
I think this is a great idea and i am voting on it
</div>
</div>
</div>
</div>
<div class="example">
<h4>Avatar</h4>
<p>A comment can optionally contain metadata about the comment</p>
<div class="ui comments">
<div class="comment">
<a class="avatar">
<img src="/images/demo/dog.jpg">
</a>
<div class="content">
<a class="author">Dog Doggington</a>
<div class="text">
I think this is a great idea and i am voting on it
</div>
</div>
</div>
</div>
<h2>Variations</h2>
<div class="example">
<h4>Threaded</h4>
<p>A comment list can be threaded to showing the relationship between conversations</p>
<div class="ui threaded comments">
<div class="comment">
<a class="avatar">
<img src="/images/demo/dog.jpg">
</a>
<div class="content">
<a class="author">Dog Doggington</a>
<div class="metadata">
<span class="date">2 days ago</span>
</div>
<div class="text">
I think this is a great idea and i am voting on it
</div>
<div class="actions">
<a class="reply">Reply</a>
<a class="delete">Delete</a>
</div>
</div>
<div class="comments">
<div class="comment">
<a class="avatar">
<img src="/images/demo/dog2.jpg">
</a>
<div class="content">
<a class="author">Pawfin Dog</a>
<div class="metadata">
<span class="date">1 day ago</span>
</div>
<div class="text">
I think this is a great idea and i am voting on it
</div>
<div class="actions">
<a class="reply">Reply</a>
<a class="delete">Delete</a>
</div>
</div>
<div class="comments">
<div class="comment">
<a class="avatar">
<img src="/images/demo/dog.jpg">
</a>
<div class="content">
<a class="author">Dog Doggington</a>
<div class="metadata">
<span class="date">20 minutes ago</span>
</div>
<div class="text">
I think this is a great idea and i am voting on it
</div>
<div class="actions">
<a class="reply">Reply</a>
<a class="delete">Delete</a>
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src="/images/demo/dog.jpg">
</a>
<div class="content">
<a class="author">Dog Doggington</a>
<div class="metadata">
<span class="date">20 minutes ago</span>
</div>
<div class="text">
Also pizza.
</div>
<div class="actions">
<a class="reply">Reply</a>
<a class="delete">Delete</a>
</div>
</div>
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src="/images/demo/dog.jpg">
</a>
<div class="content">
<a class="author">Dog Doggington</a>
<div class="metadata">
<span class="date">2 days ago</span>
</div>
<div class="text">
I think this is a great idea and i am voting on it
</div>
<div class="actions">
<a class="reply">Reply</a>
<a class="delete">Delete</a>
</div>
</div>
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src="/images/demo/dog.jpg">
</a>
<div class="content">
<a class="author">Dog Doggington</a>
<div class="metadata">
<span class="date">20 hours ago</span>
</div>
<div class="text">
I think this is a great idea and i am voting on it
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src="/images/demo/dog2.jpg">
</a>
<div class="content">
<a class="author">Pawfin Dog</a>
<div class="metadata">
<span class="date">15 hours ago</span>
</div>
<div class="text">
I think this is a great idea and i am voting on it
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
</div>
</div>
</div>
</div>

1
node/src/files/components/semantic/collections/form.css

@ -17,7 +17,6 @@
---------------------*/
.ui.form {
position: relative;
width: 35em;
max-width: 100%;
}
.ui.form :first-child {

34
node/src/files/components/semantic/collections/grid.css

@ -17,6 +17,7 @@
display: block;
text-align: center;
font-size: 0em;
margin: 0% -1.33%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
@ -38,8 +39,8 @@
display: inline-block;
text-align: left;
font-size: 1rem;
padding-left: 2%;
padding-right: 2%;
padding-left: 1.33%;
padding-right: 1.33%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
@ -85,11 +86,15 @@
Page
--------------------*/
.ui.page.grid {
margin: 0%:
padding: 0% 5%;
}
/*-------------------
Responsive
--------------------*/
.ui.responsive.grid {
margin: 0%;
}
@media only screen and (max-width: 1000px) {
.ui.responsive.grid {
padding: 0% 5.55%;
@ -199,18 +204,11 @@
width: 9.0909%;
}
/*-------------------
Fitted
Padded
--------------------*/
.ui.fitted.grid {
padding: 0%;
}
.ui.fitted.row {
padding-top: 0%;
}
.ui.fitted.grid .column,
.ui.grid .fitted.column {
padding-left: 0%;
padding-right: 0%;
.ui.padded.grid {
margin-left: 0%;
margin-right: 0%;
}
/*----------------------
"Floated"
@ -274,16 +272,19 @@
Horizontally Centered
-----------------------*/
/* Vertical Centered */
.ui.left.aligned.grid,
.ui.left.aligned.grid .column,
.ui.grid .left.aligned.column,
.ui.grid > .left.aligned.row .column {
text-align: left;
}
.ui.center.aligned.grid,
.ui.center.aligned.grid .column,
.ui.grid .center.aligned.column,
.ui.grid > .center.aligned.row .column {
text-align: center;
}
.ui.right.aligned.grid,
.ui.right.aligned.grid .column,
.ui.grid .right.aligned.column,
.ui.grid > .right.aligned.row .column {
@ -314,13 +315,6 @@
.ui.grid .equal.row .column {
display: table-cell;
}
/*----------------------
Fitted
-----------------------*/
.ui.fitted.grid {
margin-left: -1.333%;
margin-right: -1.333%;
}
/*-------------------
Folding
--------------------*/

20
node/src/files/components/semantic/collections/menu.css

@ -629,7 +629,7 @@
}
.ui.text.menu .header.item {
background-color: transparent;
margin: 0em 0.5em 0em 0em;
margin: 0em;
padding: 0.35em 0.5em;
opacity: 1;
color: rgba(50, 50, 50, 0.8);
@ -637,11 +637,17 @@
text-transform: uppercase;
font-weight: bold;
}
.ui.text.menu .header.item > a {
background-color: transparent;
}
/*--- fluid text ---*/
.ui.fluid.text.menu {
margin: 0em;
}
/*--- vertical text ---*/
.ui.vertical.text.menu {
margin: 1rem 0em;
}
.ui.vertical.text.menu .item {
float: left;
clear: left;
@ -983,6 +989,18 @@
/*--------------
Sizes
---------------*/
.ui.tiny.menu .item {
font-size: 0.875rem;
padding: 0.35em 0.5em;
}
.ui.tiny.menu .item > a {
display: block;
margin: -0.35em -0.5em;
padding: 0.35em 0.5em;
}
.ui.tiny.vertical.menu {
width: 9rem;
}
.ui.small.menu .item {
font-size: 0.875rem;
min-height: 1.2em;

1
node/src/files/components/semantic/elements/button.css

@ -27,6 +27,7 @@
font-weight: bold;
font-style: normal;
text-align: center;
text-shadow: none;
-webkit-border-radius: 0.3125em;
-moz-border-radius: 0.3125em;
border-radius: 0.3125em;

129
node/src/files/components/semantic/views/comment.css

@ -0,0 +1,129 @@
/*
* # Semantic Comment View
* http://github.com/quirkyinc/semantic
*
*
* Copyright 2013 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
* Released: April 17 2013
*/
/*******************************
Standard
*******************************/
/*--------------
Comments
---------------*/
.ui.comments a {
cursor: pointer;
}
/*--------------
Comment
---------------*/
.ui.comments .comment {
position: relative;
margin-top: 0.75em;
padding-top: 0.75em;
width: 100%;
}
.ui.comments .comment:first-child {
margin-top: 0em;
padding-top: 0em;
}
/*--------------------
Avatar (Optional)
---------------------*/
.ui.comments .comment .avatar {
display: block;
float: left;
}
.ui.comments .comment .avatar,
.ui.comments .comment .avatar img {
width: 3em;
}
.ui.comments .comment .avatar img {
height: 3em;
border-radius: 500px;
}
/*--------------
Content
---------------*/
.ui.comments .comment > .content,
.ui.comments .comment > .avatar {
display: block;
}
.ui.comments .comment .avatar ~ .content {
padding: 0em 1em;
}
/* If there is an avatar move content over */
.ui.comments .comment > .avatar ~ .content {
margin-left: 3em;
}
.ui.comments .comment .metadata {
display: inline-block;
margin-left: 0.3em;
color: rgba(0, 0, 0, 0.4);
}
.ui.comments .comment .metadata * {
display: inline-block;
margin: 0em 0.3em 0em 0em;
}
/*--------------------
Comment Text
---------------------*/
.ui.comments .comment .text {
margin: 0em 0em 0.5em;
}
/*--------------------
User Actions
---------------------*/
.ui.comments .comment .actions {
font-size: 0.9em;
}
.ui.comments .comment .actions a {
display: inline-block;
margin: 0em 0.3em 0em 0em;
color: rgba(0, 0, 0, 0.3);
}
.ui.comments .comment .actions a:hover {
color: rgba(0, 0, 0, 0.6);
}
/*--------------------
Nested Comments
---------------------*/
.ui.comments .comment .comments {
margin-top: 1em;
padding-top: 1em;
}
.ui.comments .comment .comments:before {
position: absolute;
top: 0px;
left: 0px;
}
/* One Deep */
.ui.comments > .comment .comments {
margin-left: 2em;
}
/* Two Deep */
.ui.comments > .comment > .comments > .comment > .comments {
margin-left: 1.75em;
}
/* Three Deep */
.ui.comments > .comment > .comments > .comment > .comments > .comment > .comments {
margin-left: 1.5em;
}
/* Four Deep or more */
.ui.comments > .comment > .comments > .comment > .comments > .comment > .comments > .comment .comments {
margin-left: 0.5em;
}
/*******************************
Variations
*******************************/
.ui.threaded.comments .comment .comments {
margin-left: 1.5em !important;
padding-left: 1.5em !important;
-webkit-box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.05);
-moz-box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.05);
box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.05);
}

BIN
node/src/files/images/demo/dog.jpg

Before After
Width: 100  |  Height: 100  |  Size: 19 KiB

2
node/src/layouts/default.html.eco

@ -40,7 +40,7 @@
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/collections/form.css">
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/collections/menu.css">
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/collections/comment.css">
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/views/comment.css">
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/modules/shape.css">
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/modules/popup.css">

1
src/collections/form.less

@ -21,7 +21,6 @@
.ui.form {
position: relative;
width: 35em;
max-width: 100%;
}
.ui.form :first-child {

37
src/collections/grid.less

@ -20,6 +20,7 @@
text-align: center;
font-size: 0em;
margin: 0% -1.33%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
@ -46,8 +47,8 @@
text-align: left;
font-size: 1rem;
padding-left: 2%;
padding-right: 2%;
padding-left: 1.33%;
padding-right: 1.33%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
@ -110,6 +111,7 @@
--------------------*/
.ui.page.grid {
margin: 0%:
padding: 0% 5%;
}
@ -118,6 +120,9 @@
Responsive
--------------------*/
.ui.responsive.grid {
margin: 0%;
}
@media only screen and (max-width : 1000px) {
.ui.responsive.grid {
@ -261,21 +266,12 @@
/*-------------------
Fitted
Padded
--------------------*/
.ui.fitted.grid {
padding: 0%;
}
.ui.fitted.row {
padding-top: 0%
}
.ui.fitted.grid .column,
.ui.grid .fitted.column {
padding-left: 0%;
padding-right: 0%;
.ui.padded.grid {
margin-left: 0%;
margin-right: 0%;
}
@ -358,16 +354,19 @@
-----------------------*/
/* Vertical Centered */
.ui.left.aligned.grid,
.ui.left.aligned.grid .column,
.ui.grid .left.aligned.column,
.ui.grid > .left.aligned.row .column {
text-align: left;
}
.ui.center.aligned.grid,
.ui.center.aligned.grid .column,
.ui.grid .center.aligned.column,
.ui.grid > .center.aligned.row .column {
text-align: center;
}
.ui.right.aligned.grid,
.ui.right.aligned.grid .column,
.ui.grid .right.aligned.column,
.ui.grid > .right.aligned.row .column {
@ -404,14 +403,6 @@
display: table-cell;
}
/*----------------------
Fitted
-----------------------*/
.ui.fitted.grid {
margin-left: -1.333%;
margin-right: -1.333%;
}
/*-------------------
Folding

22
src/collections/menu.less

@ -844,7 +844,7 @@
}
.ui.text.menu .header.item {
background-color: transparent;
margin: 0em 0.5em 0em 0em;
margin: 0em;
padding: 0.35em 0.5em;
opacity: 1;
@ -853,6 +853,9 @@
text-transform: uppercase;
font-weight: bold;
}
.ui.text.menu .header.item > a {
background-color: transparent;
}
/*--- fluid text ---*/
.ui.fluid.text.menu {
@ -860,6 +863,9 @@
}
/*--- vertical text ---*/
.ui.vertical.text.menu {
margin: 1rem 0em;
}
.ui.vertical.text.menu .item {
float: left;
clear: left;
@ -1259,6 +1265,20 @@
Sizes
---------------*/
.ui.tiny.menu .item {
font-size: 0.875rem;
padding: 0.35em 0.5em;
}
.ui.tiny.menu .item > a {
display: block;
margin: -0.35em -0.5em;
padding: 0.35em 0.5em;
}
.ui.tiny.vertical.menu {
width: 9rem;
}
.ui.small.menu .item {
font-size: 0.875rem;
min-height: 1.2em;

1
src/elements/button.less

@ -35,6 +35,7 @@
font-weight: bold;
font-style: normal;
text-align: center;
text-shadow: none;
-webkit-border-radius: 0.3125em;

162
src/views/comment.less

@ -0,0 +1,162 @@
/*
* # Semantic Comment View
* http://github.com/quirkyinc/semantic
*
*
* Copyright 2013 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
* Released: April 17 2013
*/
/*******************************
Standard
*******************************/
/*--------------
Comments
---------------*/
.ui.comments {
}
.ui.comments a {
cursor: pointer;
}
/*--------------
Comment
---------------*/
.ui.comments .comment {
position: relative;
margin-top: 0.75em;
padding-top: 0.75em;
width: 100%;
}
.ui.comments .comment:first-child {
margin-top: 0em;
padding-top: 0em;
}
/*--------------------
Avatar (Optional)
---------------------*/
.ui.comments .comment .avatar {
display: block;
float: left;
}
.ui.comments .comment .avatar,
.ui.comments .comment .avatar img {
width: 3em;
}
.ui.comments .comment .avatar img {
height: 3em;
border-radius: 500px;
}
/*--------------
Content
---------------*/
.ui.comments .comment > .content,
.ui.comments .comment > .avatar {
display: block;
}
.ui.comments .comment .avatar ~ .content {
padding: 0em 1em;
}
/* If there is an avatar move content over */
.ui.comments .comment > .avatar ~ .content {
margin-left: 3em;
}
.ui.comments .comment .metadata {
display: inline-block;
margin-left: 0.3em;
color: rgba(0, 0, 0, 0.4);
}
.ui.comments .comment .metadata * {
display: inline-block;
margin: 0em 0.3em 0em 0em;
}
/*--------------------
Comment Text
---------------------*/
.ui.comments .comment .text {
margin: 0em 0em 0.5em;
}
/*--------------------
User Actions
---------------------*/
.ui.comments .comment .actions {
font-size: 0.9em;
}
.ui.comments .comment .actions a {
display: inline-block;
margin: 0em 0.3em 0em 0em;
color: rgba(0, 0, 0, 0.3);
}
.ui.comments .comment .actions a:hover {
color: rgba(0, 0, 0, 0.6);
}
/*--------------------
Nested Comments
---------------------*/
.ui.comments .comment .comments {
margin-top: 1em;
padding-top: 1em;
}
.ui.comments .comment .comments:before{
position: absolute;
top: 0px;
left: 0px;
}
/* One Deep */
.ui.comments > .comment .comments {
margin-left: 2em;
}
/* Two Deep */
.ui.comments > .comment > .comments > .comment > .comments {
margin-left: 1.75em;
}
/* Three Deep */
.ui.comments > .comment > .comments > .comment > .comments > .comment > .comments {
margin-left: 1.5em;
}
/* Four Deep or more */
.ui.comments > .comment > .comments > .comment > .comments > .comment > .comments > .comment .comments {
margin-left: 0.5em;
}
/*******************************
Variations
*******************************/
.ui.threaded.comments .comment .comments {
margin-left: 1.5em !important;
padding-left: 1.5em !important;
-webkit-box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.05);
-moz-box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.05);
box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.05);
}
Loading…
Cancel
Save