<!-- 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 -->
/* No context defined for this component. */
  • 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.