<!-- Comments start -->
<div class="c-comments__container o-stack--sm">
    <div class="c-comments__header">
        <h5 class="c-comments__title">
            <svg class="o-icon" aria-hidden="true"> <use href="#comments"></use></svg> Comments
        </h5>
        <button class="c-btn c-btn--outline c-btn--xs">Add Comment</button>
    </div>
    <ul class="c-comments__list">
        <!-- Single comment starts -->
        <li class="c-comments__single o-stack--xs">
            <header class="c-comments__single-header">
                <h6 class="c-comments__single-username">Toño</h6> <span class="c-comments__single-date">4 minutes ago</span>
                <button class="c-btn c-btn--xs c-btn--destructive c-comments__single-delete">Delete comment</button>
            </header>
            <p class="c-comments__single-body">This is an example comment</p>
        </li>
        <!-- Single comment ends -->
        <!-- Single comment starts -->
        <li class="c-comments__single o-stack--xs">
            <header class="c-comments__single-header">
                <h6 class="c-comments__single-username">Billy</h6> <span class="c-comments__single-date">Sep 12 2019</span>
                <button class="c-btn c-btn--xs c-btn--destructive c-comments__single-delete">Delete comment</button>
            </header>
            <p class="c-comments__single-body">These comments look way better</p>
        </li>
        <!-- Single comment ends -->
        <!-- Single comment starts -->
        <li class="c-comments__single o-stack--xs">
            <header class="c-comments__single-header">
                <h6 class="c-comments__single-username">Nahum</h6> <span class="c-comments__single-date">Sep 9 2019</span>
                <button class="c-btn c-btn--xs c-btn--destructive c-comments__single-delete">Delete comment</button>
            </header>
            <p class="c-comments__single-body">You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don&#x27;t know exactly when we turned
                on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I&#x27;m breaking now. We said we&#x27;d say it was the snow that killed the other two, but it wasn&#x27;t. Nature is
                lethal but it doesn&#x27;t hold a candle to man.</p>
        </li>
        <!-- Single comment ends -->
</div>
</ul>
<!-- Comments end -->
<!-- Comments start -->
<div class="c-comments__container o-stack--sm">
  <div class="c-comments__header">
    <h5 class="c-comments__title">
      <svg class="o-icon" aria-hidden="true"> <use href="#comments"></use></svg>
      Comments
    </h5>
    <button class="c-btn c-btn--outline c-btn--xs">Add Comment</button>
  </div>
  {{#if comments }}
  <ul class="c-comments__list">
    {{#each comments}}
      {{> '@comments--single'}}
    {{/each}}
  </div>
  {{/if}}
</ul>
<!-- Comments end -->
{
  "comments": [
    {
      "comment": {
        "userName": "Toño",
        "date": "4 minutes ago",
        "body": "This is an example comment"
      }
    },
    {
      "comment": {
        "userName": "Billy",
        "date": "Sep 12 2019",
        "body": "These comments look way better"
      }
    },
    {
      "comment": {
        "userName": "Nahum",
        "date": "Sep 9 2019",
        "body": "You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man."
      }
    }
  ]
}
  • Content:
    .c-comments__container {
      padding-top: $space-unit;
      border-top: rem(1.5) solid $color-grey-400;
    }
    
      .c-comments__header {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    
        .c-comments__title {
          font-weight: 600;
          font-size: $text-size-7;
          color: $color-grey-600;
        }
    
    // Single comment
    
      .c-comments__single {
        max-width: 90ch;
        list-style-type: none;
    
        & + & {
          margin-top: $space-sm;
          padding-top: $space-unit;
          border-top: rem(1) solid $color-grey-300;
        }
    
        @include hocus {
    
          .c-comments__single-delete {
            opacity: 1;
          }
        }
      }
    
        .c-comments__single-header {
          display: flex;
          align-items: center;
          font-size: $text-size-7;
        }
    
          .c-comments__single-date {
            color: $color-grey-600;
            margin-left: $space-xs;
          }
    
          .c-comments__single-delete {
            border: 0;
            box-shadow: none;
            opacity: 0;
            transition: $global-transition;
            padding: 0;
            margin-left: auto;
            min-height: auto;
    
            @include acthocus() {
              padding: 0;
              background-color: transparent;
              color: $color-danger-800;
              box-shadow: none;
            }
    
            @media (hover: none) {
              opacity: 1;
            }
          }
    
    
    main + .c-comments__container {
      margin-top: $space-md;
    }
    
  • URL: /components/raw/comments/_comments.scss
  • Filesystem Path: components/_code-components/comments/_comments.scss
  • Size: 1.4 KB

There are no notes for this item.