Semantic Boxes

by batrasoe

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.js"></script>
<div class="ui segments piled">
<div class="ui segment">
<form class="ui transparent icon input fluid">
<i class="icon edit"></i>
<input type="text" name="text" placeholder="Add List">
</form>
</div>
<div class="ui segment listitem list-selected">
<span class="text"> Text</span>
<span class="editList">
  <i class="fa fa-edit"></i>
</span>
<span>
<i class="icon delete ui red"></i>
  
</span>
</div>



form.new-list.ui.transparent.icon.input.fluid
                
      each lists
        .ui.segment.listitem.list-selected
          span.text #{text}
          if isOwner
            span#editlist
                i.fa.fa-edit
            span
                i.icon.delete.ui.red
            span.toggle-list-private
                if private
                    i.fa.fa-lock.private-lock
                else
                    i.fa.fa-unlock.public-lock
        .ui.teal.label
            span {{incompleteCount this._id}}



</div>