overleaf/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss

/*
  CMS Generated Pages:
  /about/*, /contact, /legal, /blog/*, /for/*, /events/*
*/

@mixin section-row-custom-gap($spacing) {
  // only update the padding between columns
  // not the padding before the first column
  // or the padding after the last column
  // rows can be nested, so only select direct col in row

  > div[class*='col-'] {
    &:not(:first-child, :last-child) {
      padding-left: $spacing;
      padding-right: $spacing;
    }

    &:first-child {
      padding-right: $spacing;
    }

    &:last-child {
      padding-left: $spacing;
    }
  }
}

.cms-page {
  .sales-contact-form-left-column {
    .sales-contact-form-heading-title {
      font-size: 2.25rem;
      font-family: var(--font-family-san-serif);
      font-style: normal;
      font-weight: 600;
      line-height: 1.333;
      padding-top: 8px;
      padding-right: 50px;
    }

    @include media-breakpoint-up(sm) {
      .names-container {
        display: flex;
        gap: 21px;
      }
    }

    .checkbox-label {
      font-size: 16px;
      font-weight: 400;
    }
  }

  .p-no-text-nodes:has(.btn) {
    margin-top: var(--spacing-09);

    @include media-breakpoint-down(md) {
      .btn {
        width: 100%;
        margin-left: 0;
        margin-top: var(--spacing-05);
      }

      .btn:first-child {
        margin-top: 0;
      }
    }
  }

  .btn + .btn {
    margin-left: var(--spacing-06);
  }

  .card + .card {
    margin-top: var(--spacing-09);
  }

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

  section {
    padding: var(--spacing-16) 0 0 0;

    &.no-top-padding {
      /* opt out of padding via the CMS */
      padding-top: 0;
    }

    // TODO: confirm if we will still support this and if so what colors to use
    // &.color-block {
    //   &.green-dark {
    //     background-color: @ol-dark-green;
    //   }
    //   &.green {
    //     background-color: @ol-green;

    //     .no-card * {
    //       .btn-primary,
    //       .btn-success {
    //         // only correct button colors when green on green
    //         .btn-primary-on-primary-bg;
    //       }
    //     }
    //   }
    //   &.blue-gray-dark {
    //     background-color: @ol-blue-gray-5;
    //   }
    //   &.blue-gray-light {
    //     background-color: @ol-blue-gray-1;
    //   }

    //   &.green,
    //   &.green-dark,
    //   &.blue-gray-dark {
    //     .no-card * {
    //       &:not(.btn) {
    //         color: @white;
    //       }
    //       a {
    //         text-decoration: underline;
    //       }
    //       .btn {
    //         text-decoration: none;
    //       }

    //       .form-control {
    //         color: @input-color;
    //       }
    //     }
    //   }
    // }
  }

  .section-row {
    @extend .container;
  }

  padding-bottom: 0;

  img {
    height: auto;
    max-width: 100%;
  }

  /*
      Tabs
    */
  .tab-content {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
  }

  /*
      When on preview mode
    */
  .cms-preview {
    background-color: var(--blue-60);
    color: white;
    font-weight: bold;
    height: 30px;
    left: 0;
    line-height: 30px;
    opacity: 0.8;
    position: fixed;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 1000;

    &::after {
      content: 'Preview';
      width: 100%;
      top: 0;
      left: 0;
    }
  }

  .tab-pane {
    .row:first-child {
      margin-top: 0;
    }
  }

  /*
      Tables
    */
  .table-styled {
    overflow: hidden;
    overflow-x: auto;

    table {
      background: white;
      max-width: none;

      th,
      td {
        border: 1px solid var(--neutral-30);
        padding: var(--spacing-05);
        text-align: center;
        word-break: normal;
      }
    }
  }

  .table-styled,
  .features-table {
    .fa-check-square,
    .fa-check {
      color: var(--green-50);
    }
  }

  .features-table {
    max-width: none;

    th,
    td {
      border: 1px solid var(--neutral-30);
      hyphens: auto;
      padding: var(--spacing-05);
      text-align: center;
      width: 20%;
    }

    .btn {
      max-width: 100%;
      white-space: pre-wrap;
      word-wrap: break-word;
    }

    &.left-align-first-col {
      td,
      th {
        text-align: left;
      }

      td + td,
      th + th {
        text-align: center;
      }
    }

    .hidden-row-above-xs {
      display: none;
    }

    @include media-breakpoint-down(md) {
      tbody,
      thead {
        display: block;
      }

      tr {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-around;
      }

      td,
      th {
        display: block;
        width: 25%;
      }

      tr:first-child {
        th {
          width: 50%;
        }

        th:first-child {
          width: 100%;
        }
      }

      td:first-child {
        text-align: center;
        width: 100%;
      }

      .hidden-row-xs {
        display: none;
      }

      .hidden-row-above-xs {
        display: flex;
      }

      .table-header {
        text-align: center;
      }
    }
  }

  /*
      universities page
    */
  #universities-container {
    padding: var(--spacing-07);
    width: 100%;

    .row {
      border-bottom: 1px solid var(--neutral-10);

      div {
        padding: var(--spacing-07);
        vertical-align: middle;
      }
    }

    .row:first-child {
      // parent container contains padding

      div {
        padding-top: 0;
      }
    }

    .row:last-child {
      border: 0;

      // parent container contains padding
      div {
        border: 0;
        padding-bottom: 0;
      }
    }

    p {
      margin: 0 auto;
      width: 100%;
    }

    // Logos
    .uni-logo {
      margin: 0 auto;
      max-height: 55px;
      min-width: 55px;
    }

    .university-claim-btn {
      text-align: center;
    }

    @include media-breakpoint-up(sm) {
      display: table;
      table-layout: fixed;

      .row {
        display: table-row;

        div {
          border-bottom: 1px solid var(--neutral-10);
          display: table-cell;
          float: none;
        }
      }
    }
  }

  /*
      videos
    */
  video {
    height: auto;
    max-width: 100%;
    box-shadow:
      0 8px 16px 0 rgba(30 37 48 / 12%),
      0 4px 6px 0 rgba(30 37 48 / 12%);
  }

  /*
    cards
  */
  .card-body {
    // card-body all have div before the actual content
    // due to option to override font size
    > :first-child {
      > :first-child {
        margin-top: 0;
      }
    }

    > :last-child {
      > :last-child {
        margin-bottom: 0;
      }
    }
  }

  .card,
  .no-card {
    &.top-margin-sm {
      margin-top: var(--spacing-05);
    }

    &.top-margin-md {
      margin-top: var(--spacing-07);
    }

    &.top-margin-lg {
      margin-top: var(--spacing-09);
    }

    &.top-margin-xl {
      margin-top: var(--spacing-10);
    }

    &.top-margin-xxl {
      margin-top: var(--spacing-11);
    }
  }
}

.icon-with-content {
  display: flex;

  h2,
  h3,
  h4 {
    margin-top: 15px;
  }

  .icon-container {
    background-color: var(--green-10);
    padding: 7.5px;
    height: 56px;
    width: 56px;
    border-radius: 50%;
    margin-right: 24px;

    .icon-inner-container {
      align-items: center;
      border: var(--green-30) 3.5px solid;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      height: 42px;
      width: 42px;
    }

    i {
      color: var(--green-50);
      font-size: 21px;
    }
  }
}

.svg-arrow-icon {
  position: relative;
  left: 4px;
  bottom: 1px;
}

.vertically-center-col {
  div[class*='col-'] {
    align-self: center;
  }

  // remove margin to better vertically align
  // some elements need to be nested within a container, and others are directly within .no-card/.card
  .card:first-child,
  .no-card:first-child {
    .cms-element-container {
      > *:first-child {
        margin-top: 0;
      }
    }

    > *:first-child:not(.cms-element-container) {
      margin-top: 0;
    }
  }

  .card:last-child,
  .no-card:last-child {
    .cms-element-container {
      > *:last-child {
        margin-bottom: 0;
      }
    }

    > *:last-child:not(.cms-element-container) {
      margin-bottom: 0;
    }
  }
}

.row-within-card {
  .no-card {
    > :first-child {
      margin-top: 0;
    }

    > :last-child {
      margin-bottom: 0;
    }
  }
}

.sidebar-blog {
  .card-body {
    padding: var(--spacing-06) !important;

    h2 {
      @extend .h5;

      padding: var(--spacing-04) var(--spacing-05);
      margin-bottom: unset;
    }

    .tags-list {
      padding: 0 var(--spacing-05);
      margin-bottom: 0 !important;
    }

    .sidebar-register-container {
      margin-top: var(--spacing-05);

      a {
        margin-top: var(--spacing-02);
        margin-left: var(--spacing-05);
      }
    }
  }
}

.contact-form-error-container {
  padding-bottom: var(--spacing-08);
}

.row-top-padding-sm {
  padding-top: var(--spacing-05);
}

.row-top-padding-md {
  padding-top: var(--spacing-07);
}

.row-top-padding-lg {
  padding-top: var(--spacing-09);
}

.row-top-padding-xl {
  padding-top: var(--spacing-10);
}

.row-top-padding-xxl {
  padding-top: var(--spacing-11);
}

.row-bottom-padding-sm {
  padding-bottom: var(--spacing-05);
}

.row-bottom-padding-md {
  padding-bottom: var(--spacing-07);
}

.row-bottom-padding-lg {
  padding-bottom: var(--spacing-09);
}

.row-bottom-padding-xl {
  padding-bottom: var(--spacing-10);
}

.row-bottom-padding-xxl {
  padding-bottom: var(--spacing-11);
}

// Desktop layout options depdendent on mobile breakpoint
@include media-breakpoint-up(lg) {
  .row-equal-column-heights {
    div[class*='col-'] {
      .card,
      .no-card {
        height: 100%;
      }
    }
  }

  .section-row {
    &.section-row-max-800 {
      max-width: 800px !important;
    }

    &.section-row-max-900 {
      max-width: 900px !important;
    }

    &.section-row-max-1000 {
      max-width: 1000px !important;
    }

    &.section-row-max-unset {
      max-width: unset !important;
    }

    &.section-row-gap-spacing-16 {
      @include section-row-custom-gap(calc(var(--spacing-16) / 2));
    }

    &.section-row-gap-spacing-15 {
      @include section-row-custom-gap(calc(var(--spacing-15) / 2));
    }

    &.section-row-gap-spacing-14 {
      @include section-row-custom-gap(calc(var(--spacing-14) / 2));
    }

    &.section-row-gap-spacing-13 {
      @include section-row-custom-gap(calc(var(--spacing-13) / 2));
    }

    &.section-row-gap-spacing-12 {
      @include section-row-custom-gap(calc(var(--spacing-12) / 2));
    }

    &.section-row-gap-spacing-11 {
      @include section-row-custom-gap(calc(var(--spacing-11) / 2));
    }

    &.section-row-gap-spacing-10 {
      @include section-row-custom-gap(calc(var(--spacing-10) / 2));
    }

    &.section-row-gap-spacing-09 {
      @include section-row-custom-gap(calc(var(--spacing-09) / 2));
    }
  }
}

// Mobile layout options depdendent on mobile breakpoint
@include media-breakpoint-down(lg) {
  .cms-page {
    div.row {
      row-gap: var(--spacing-13);
    }

    .reverse-col-order-mobile {
      flex-direction: column-reverse;
    }

    .section-row {
      &.section-row-mobile-gap-spacing-16 {
        @include section-row-custom-gap(calc(var(--spacing-16) / 2));
      }

      &.section-row-mobile-gap-spacing-15 {
        @include section-row-custom-gap(calc(var(--spacing-15) / 2));
      }

      &.section-row-mobile-gap-spacing-14 {
        @include section-row-custom-gap(calc(var(--spacing-14) / 2));
      }

      &.section-row-mobile-gap-spacing-13 {
        @include section-row-custom-gap(calc(var(--spacing-13) / 2));
      }

      &.section-row-mobile-gap-spacing-12 {
        @include section-row-custom-gap(calc(var(--spacing-12) / 2));
      }

      &.section-row-mobile-gap-spacing-11 {
        @include section-row-custom-gap(calc(var(--spacing-11) / 2));
      }

      &.section-row-mobile-gap-spacing-10 {
        @include section-row-custom-gap(calc(var(--spacing-10) / 2));
      }

      &.section-row-mobile-gap-spacing-09 {
        @include section-row-custom-gap(calc(var(--spacing-09) / 2));
      }
    }
  }
}

.bottom-align-last-entry {
  &.no-card {
    display: flex;
    flex-direction: column;

    * {
      &:last-child {
        flex: 1;
        align-content: end;
      }
    }
  }

  &.card {
    .card-body {
      display: flex;
      flex-direction: column;

      * {
        &:last-child {
          flex: 1;
          align-content: end;
        }
      }
    }
  }
}