frontend-app-discussions/src/index.scss

@import "@edx/brand/paragon/fonts.scss";
@import "@edx/brand/paragon/variables.scss";
@import "@edx/paragon/scss/core/core.scss";
@import "@edx/brand/paragon/overrides.scss";

@import "~@edx/frontend-component-footer/dist/footer";
@import "~@edx/frontend-component-header/dist/index";

$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome";

#post,
#comment,
#reply,
.discussion-comments,
.text-editor,
.post-preview {
  img {
    height: auto;
    max-width: 100%;
  }
}

.text-staff-color {
  color: #998200;
}

.outline-staff-color {
  outline: #998200 solid 2px;
}

.text-TA-color {
  color: #175B3C;
}

.outline-TA-color {
  outline: #175B3C solid 2px;
}

.outline-anonymous {
  outline: #EAE6E5 solid 2px;
}

.font-size-16 {
  font-size: 16px;
}

.font-size-14 {
  font-size: 14px;
}

.font-size-12 {
  font-size: 12px;
}

.font-size-8 {
  font-size: 8px;
}

.font-weight-500 {
  font-weight: 500;
}

.font-style-normal {
  font-style: normal;
}

.font-family-inter {
  font-family: "Inter";
}

.post-footer-icon-dimentions {
  width: 32px !important;
  height: 32px !important;
}

.like-icon-dimentions {
  width: 21px !important;
  height: 23px !important;
}

.follow-icon-dimentions {
  width: 21px !important;
  height: 24px !important;
}

.dropdown-icon-dimentions {
  width: 20px !important;
  height: 21px !important;
}

.post-summary-icons-dimensions {
  height: 16px !important;
  width: 16px !important;
}

.post-summary-comment-count-dimensions {
  height: 15.39px;
  width: 15.5px
}

.post-summary-like-dimensions {
  height: 16px;
  width: 17px
}

.post-summary-timestamp {
  font-size: 12px !important;
  line-height: 20px !important;
}

.post-summary-card-selected {
  border-right-width: 4px;
  border-right-style: solid;
}

.my-14px {
  margin-top: 14px;
  margin-bottom: 14px;
}

.my-10px {
  margin-top: 10px;
  margin-bottom: 10px;
}

.mb-14px {
  margin-bottom: 14px;
}

.mr-0\.5 {
  margin-right: 2px;
}

.mb-0\.5 {
  margin-bottom: 2px;
}

.mt-0\.5 {
  margin-top: 2px;
}

.ml-0\.5 {
  margin-left: 2px;
}

.mx-3px {
  margin-left: 3px;
  margin-right: 3px;
}

.mt-14px {
  margin-top: 14px;
}

.mb-10px {
  margin-bottom: 10px;
}

.mt-10px {
  margin-top: 10px;
}

.mt-17px {
  margin-top: 17px !important;
}

.mr-36px {
  margin-right: 36.6px;
}

.badge-padding {
  padding-top: 1px;
  padding-bottom: 1px
}

.discussion-post:hover {
  background-color: unset !important;
}

.learner>a:hover {
  background-color: #F2F0EF;
}

.py-10px {
  padding-top: 10px;
  padding-bottom: 10px;
}

.py-8px {
  padding-top: 8px;
  padding-bottom: 8px;
}

.pb-10px {
  padding-bottom: 10px;
}

.pt-10px {
  padding-top: 10px !important;
}

.px-10px {
  padding-left: 10px;
  padding-right: 10px;
}

.py-2px {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

.question-icon-size {
  width: 1.5rem;
  height: 1.5rem;
}

.question-icon-position {
  top: 12px;
  left: 14px;
}

.avarat-img-position {
  margin-top: 17px;
  margin-left: 17px;
}

header {
  .logo {
    margin-right: 1rem;

    img {
      height: 1.75rem;
    }
  }
}

#learner-posts-link {
  color: inherit;

  span[role=heading]:hover {
    text-decoration: underline;
  }
}

.sidebar-desktop-width {
  min-width: 29rem;
}

.sidebar-XL-width {
  min-width: 29rem;
}

.filter-menu:focus-within {
  background-color: #e9e6e4 !important;
}

.border-2 {
  border-width: 2px;
}

.post-form {
  input[type=checkbox] {
    width: 18px;
    height: 18px;
  }
}

.pointer-cursor-hover :hover {
  cursor: pointer;
}

.filter-bar:focus-visible,
.filter-bar:focus {
  outline: none;
}

header {
  line-height: 28px;
  font-family: Inter, Helvetica Neue, Arial, sans-serif;
  font-size: 18px;
  height: 60px;

  .user-dropdown {
    button {
      height: 44px !important;
      font-size: 18px;
      font-weight: 400;
      line-height: 28px;
    };

    span {
      font-weight: 500;
      line-height: 24px;
    };
  };

  .container-xl {
    .course-title-lockup {
      font-size: 1.125rem;
    };

    .logo {
      margin-top: 2px;
    };
  };

  span:first-child {
    font-size: 14px;
    margin-top: 1px !important;
    margin-bottom: -1px !important;
  };
}

#courseTabsNavigation {
  font-size: 18px;
  font-family: Inter, Helvetica Neue, Arial, sans-serif;

  .container-xl {
    padding-left: 31px;
    font-size: 1.125rem;

    .nav {
      line-height: 28px;
    }

    .nav-item {
      padding-bottom: 8px;
    }
  };
}

.min-content-height {
  min-height: 80vh;
}

.header-action-bar {
  background-color: #fff;
  z-index: 2;
  box-shadow: 0px 2px 4px rgb(0 0 0 / 15%), 0px 2px 8px rgb(0 0 0 / 15%);
  position: sticky;
  top: 0;
}

.breadcrumb-menu {
  z-index: 1;
}

.actions-dropdown {
  z-index: 1;
}

.discussion-topic-group:last-of-type .divider {
  display: none;
}

.zindex-5000 {
  z-index: 5000;
}

#paragon-portal-root .pgn__modal-layer {
  z-index: 5000 !important;
}

#iconbutton-tooltip-top {
  z-index: 0;
}

.btn-icon.btn-icon-primary:hover {
  background-color: #F2F0EF !important;
  color: #00262B !important
}


@media only screen and (max-width: 767px) {
  body:not(.tox-force-desktop) .tox .tox-dialog {
    align-self: center;
  }
}

.tox .tox-editor-header {
  z-index: 0 !important;
}

.badge {
  padding: 1px 5px !important;
}

.pgn__checkpoint {
  max-width: 340px !important;
}

.post-card-padding {
  padding: 24px 24px 10px 24px;
}

.post-card-margin {
  margin: 24px 24px 0px 24px;
}

.hover-card {
  height: 36px;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15), 0px 4px 10px rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  background: #FFFFFF;
  max-width: fit-content;
  margin-left: auto;
  margin-top: -2.063rem;
  z-index: 1;
  right: 32px;
}

.response-editor-position {
  margin-top: 50px !important;
}

.hover-button:hover {
  background-color: #F2F0EF !important;
  height: 36px;
  border: none;
}

.btn-tertiary:hover {
  background-color: #F2F0EF;
}

.btn-tertiary:disabled {
  color: #454545;
  background-color: transparent;
}

.disable-div {
  pointer-events: none;
}

.on-focus:focus-within {
  outline: 2px solid black;
}

.html-loader p:last-child {
  margin-bottom: 0px;
}

.post-card-comment {
  outline: none;

  &:not(:hover),
  &:not(:focus) {
    .hover-card {
      display: none;
    }
  }

  &:hover,
  &:focus-within {
    .hover-card {
      display: flex;
    }
  }
}

.spinner-dimentions {
  height: 24px;
  width: 24px;
}

.MJX-TEX {
  white-space: normal;
}

.font-style {
  font-family: "Inter";
  font-style: normal;
}

.in-context-navbar {
  line-height: 44px;
}

.line-height-24 {
  line-height: 24px;
}

.comments-sort {
  margin-bottom: -44px;
  z-index: 1;
}

.post-preview,
.discussion-comments {
  blockquote {
    border-left: 2px solid #ccc;
    margin-left: 1.5rem;
    padding-left: 1rem;
  }
}