astuto/app/javascript/stylesheets/components/Board.scss

.boardContainer {
  @extend
    .d-flex,
    .justify-content-between,
    .align-items-start;

  flex-direction: row;

  .sidebar {
    position: sticky;
    top: 60px;

    .sidebarBox {
      width: 250px;
      margin-right: 16px;
    }
  }

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

    .sidebar {
      position: relative;
      width: 100%;
      top: 0;

      .sidebarBox { width: 100%; }
    }

    .postList { width: 100%; }
  }

  .newBoardContainer {
    background-color: $astuto-grey;
    text-align: center;

    .boardTitle {
      font-size: 25px;
      font-weight: 600;
    }
  }

  .sidebarBox {
    @extend
      .card,
      .d-flex,
      .flex-column,
      .justify-content-start,
      .align-items-center,
      .flex-grow-0,
      .flex-shrink-0,
      .my-3,
      .p-2;
  }

  .postStatusListItemContainer {
    @extend
      .d-flex,
      .align-self-stretch;
  }

  .postStatusListItemLink {
    @extend
      .flex-grow-1;
  }

  .postStatusListItem {
    @extend
      .p-1;

    height: 40px;

    &:hover {
      filter: brightness(90%);
      cursor: pointer;
    }

    span.badge {
      display: block; font-size: 15px;
    }
  }

  .resetFilter {
    @extend
      .flex-grow-0,
      .flex-shrink-0,
      .rounded-circle,
      .align-self-center,
      .p-0;

    width: 30px;
    height: 30px;
  }

  .postList {
    @extend
      .d-flex,
      .flex-column,
      .flex-grow-1;
  }

  .postLink {
    @extend .my-3;
    
    display: block;
    color: black;

    &:hover { text-decoration: none; }
  }

  .postListItem {
    @extend
      .card3D,
      .d-flex,
      .flex-column,
      .justify-content-between,
      .p-3;

    height: 140px;
  }

  .postTitle {
    @extend
      .font-weight-bold;
  }

  .postDetails {
    @extend
      .d-flex,
      .justify-content-start,
      .text-uppercase;

    .badge {
      @extend .mr-2;
    }
  }
}