.boardContainer { display: flex; flex: 1 1 auto; justify-content: space-between; align-items: flex-start; flex-wrap: nowrap; .sidebar { top: 20px; position: sticky; .sidebar-box { flex: 0 0 auto; width: 250px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; } } .box { border: 1px solid black; border-radius: 4px; padding: 8px; margin: 8px; .smallTitle { font-size: 19px; font-weight: 600; } } .newBoardContainer { .boardName { font-size: 24px; font-weight: 600; text-align: center; } .boardDescription { color: grey; font-size: 17px; font-weight: 200; text-align: center; margin-bottom: 8px; } .submitBtn { margin-bottom: 8px; } .success { color: green; text-align: center; } .error { color: red; text-align: center; } } .postStatusFilterContainer { .postStatusListItemContainer { display: flex; flex: 1 1 auto; align-self: stretch; } .postStatusListItemLink { flex: 1 1 auto; } .postStatusListItem { height: 40px; display: flex; align-items: center; font-size: 17px; font-weight: 500; padding: 4px; } .postStatusListItem:hover { cursor: pointer; background-color: #f5f5f5; border-radius: 4px; } .resetFilter { flex: 0 0 auto; width: 30px; height: 30px; padding: 0; align-self: center; } } .postList { display: flex; flex-direction: column; flex: 1 1 auto; .postLink { text-decoration: none; border-radius: 4px; margin: 8px 0; } .postLink:hover { text-decoration: none; background-color: #f5f5f5; } .postListItem { display: flex; flex-direction: column; justify-content: space-between; height: 114px; margin: 0; padding: 8px 4px; .postTitle { color: black; font-weight: 500; font-size: 17px; } .postDescription { color: grey; font-weight: 400; font-size: 15px; } .postDetails { display: flex; color: black; font-size: 16px; font-weight: 300; text-transform: uppercase; .postDetailsComments { margin-right: 16px; } .postDetailsStatus { display: flex; } } } } } .dot { width: 16px; height: 16px; border-radius: 100%; margin-top: auto; margin-bottom: auto; margin-right: 4px; }