astuto/app/assets/stylesheets/components/Post.scss

.postContainer {
  @extend .twoColumnsContainer;

  @include media-breakpoint-down(sm) {
    flex-direction: column;

    .postAndCommentsContainer { width: 100%; }
  }

  .sidebar {
    .postUpdateListContainer {
      .postUpdateList {
        @extend
          .scroll-shadows,
          .w-100;

        max-height: 250px;
        overflow-y: scroll;

        .postUpdateListItem {
          @extend
            .d-flex,
            .flex-column,
            .p-2;

          &:after { // displays the little centered border under each post update
            content: "";
            display: block;
            margin: 0 auto;
            width: 25%;
            padding-top: 16px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
          }

          .postUpdateListItemHeader {
            @extend .d-flex;

            span {
              @extend
                .ml-2;

              font-weight: 600;
              vertical-align: middle;
            }
          }

          .postUpdateListItemBody {
            @extend .my-1;

            font-size: 15px;

            p { margin: 0; } // <p> tag generated by ReactMarkdown component
          }
        }
      }
    }

    .likeListContainer {
      .likeList {
        @extend
          .scroll-shadows,
          .w-100;

        max-height: 170px;
        overflow-y: scroll;

        .likeListItem {
          @extend
            .p-2,
            .my-1;
  
          .likeListItemName {
            @extend .ml-2;
          }
        }
      }
    }

    .actionBoxContainer {
      @extend .text-center;

      .checkboxSwitch {
        @extend
          .mt-1,
          .mb-2;
      }
    }
  }

  .postAndCommentsContainer {
    @extend
      .card,
      .flex-grow-1,
      .p-3,
      .mb-3;

    .postInfo {
      @extend .d-flex;

      span {
        @extend .mr-2;
      }
    }

    .postHeader {
      @extend
        .d-flex,
        .mb-3;

      a {
        @extend
          .ml-1;
        
        line-height: 1em;
      }
    }

    .postSettings {
      @extend
        .d-flex,
        .justify-content-between;
    }

    .postDescription {
      @extend
        .my-4;

      color: var(--astuto-black);

      p:last-child {
        @extend .mb-0;
      }
    }

    .postFooter {
      .postAuthor {
        @extend
          .mutedText,
          .mb-2;

        .postAuthorAvatar { @extend .gravatar; }
      }

      .postFooterActions { @extend .d-flex; }
    }

    .postEditForm {
      .form-control {
        @extend .my-3;
      }

      .postDescription {
        height: 150px;
        min-height: 150px;
        resize: vertical;
      }

      .postEditFormButtons {
        @extend .d-flex, .justify-content-end;
      }

      #selectPickerBoard { margin-right: 4px !important; }
      #selectPickerStatus { margin-left: 4px !important; }
    }
  }
}