edx-platform/lms/static/certificates/sass/_layouts.scss

// ------------------------------
// // Open edX Certificates: Layouts

// About: styling for generic layouts and responsive support.

// #BASE
// #ACCOMPLISHMENT

// ------------------------------
// #BASE
// ------------------------------
%layout-wrapper {
  margin-bottom: map-get($spacing-vertical, base);
  padding: 0 5%;

  @include media-breakpoint-up(md) {
    padding: 0 2.5%;
  }
}

%layout {
  @include grid-container();
}

// app header
.wrapper-header {
  @extend %layout-wrapper;

  padding-top: map-get($spacing-vertical, small);
  padding-bottom: map-get($spacing-vertical, small);
}

.header-app {
  @extend %layout;

  .logo {
    display: block;

    @include size(rem(100), auto);

    margin: 0 auto;
  }

  .logo-img {
    display: block;
    width: 100%;
  }
}

.header-app-title {
  @include text-align(center);
  @include make-col(12);

  margin: 0;
}

// banner
.wrapper-banner {
  @extend %layout-wrapper;

  padding-top: map-get($spacing-vertical, small);
  padding-bottom: map-get($spacing-vertical, small);

  .banner {
    @extend %layout;
  }
}

// message to user-centric banner
.wrapper-banner-user {
  margin-top: -(map-get($spacing-vertical, base)); // abut the global header, plz
}

.banner-user {
  @include text-align(center);

  @include media-breakpoint-up(lg) {
    @include text-align(left);
  }

  .wrapper-copy-and-actions {
    @include grid-container();

    .message-copy {
      margin-bottom: map-get($spacing-vertical, small);
      margin-top: 0;
    }

    .message-actions {
      @include make-col(12);

      .action {
        display: block;
        width: 100%;
        margin: 0 auto map-get($spacing-vertical, small) auto;

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

        // CASE: icon display only
        &.icon-only {
          @include media-breakpoint-up(md) {
            padding: map-get($spacing-vertical, x-small) map-get($spacing-horizontal, base);

            .icon {
              @include margin-right(0);
            }
          }
        }

        @include media-breakpoint-up(md) {
          display: inline-block;
          vertical-align: middle;
          min-width: 130px;
          width: auto;
          margin-bottom: 0;
          margin-right: map-get($spacing-horizontal, mid-small);

          &:last-child {
            margin-right: 0;
          }
        }
      }
    }
  }
}

// app footer
.wrapper-footer {
  @extend %layout-wrapper;
}

.footer-app {
  @extend %layout;
}

.footer-app-copyright {
  @extend %copy-micro;

  @include media-breakpoint-up(md) {
    @include make-col(6);
    @include margin-left(0);

    margin-bottom: 0;
  }
}

.footer-app-nav {
  @include media-breakpoint-up(md) {
    @include make-col(6);
    @include margin-right(0);
  }

  .list {
    .nav-item {
      @extend %copy-meta;

      display: block;
      font-weight: 600;
      margin-bottom: map-get($spacing-vertical, x-small);

      @include media-breakpoint-up(md) {
        display: inline-block;
        vertical-align: middle;

        @include margin-right(map-get($spacing-horizontal, base));

        margin-bottom: 0;
      }
    }

    .action {
      @extend %link;
    }
  }

  .list-legal {
    @include media-breakpoint-up(md) {
      @include text-align(right);
    }
  }
}

// ------------------------------
// #ACCOMPLISHMENT
// ------------------------------
.layout-accomplishment {
  .wrapper-introduction {
    @extend %layout-wrapper;

    margin-bottom: map-get($spacing-vertical, large);

    .introduction {
      @extend %layout;
    }
  }

  .wrapper-accomplishment-rendering {
    @extend %layout-wrapper;

    margin-bottom: map-get($spacing-vertical, small);
  }

  .accomplishment-rendering {
    @extend %layout;

    position: relative;
    top: -(map-get($spacing-vertical, base));

    .accomplishment-course,
    .accomplishment-recipient,
    .accomplishment-type {
      @include make-col(12);
    }

    .accomplishment-summary,
    .accomplishment-statement-detail {
      @include make-col(12);
    }
  }

  .accomplishment-orgs {
    @include make-container();

    .wrapper-orgs {
      @include text-align(center);

      margin: 0;
      padding: 0;
    }

    .wrapper-organization {
      @include make-col(6);

      display: inline-block;
      vertical-align: middle;
      height: rem(100);
      width: calc(50% - 1rem);

      &:last-child {
        @include margin-right(0);
      }

      @include media-breakpoint-up(md) {
        @include make-col(3);
      }

      @include media-breakpoint-up(lg) {
        @include make-col(2);
      }

      @include media-breakpoint-up(xl) {
        @include make-col(2);
      }
    }

    .organization {
      @include size(100%);

      position: relative;
    }

    .organization-logo {
      max-width: 80%;
      position: absolute;
      top: 50%;

      @include left(50%);

      transform: translate(-50%, -50%);

      @include rtl {
        transform: translate(50%, -50%);
      }
    }
  }

  .accomplishment-signatories {
    .wrapper-signatories {
      @include text-align(center);
    }

    .signatory {
      display: inline-block;
      vertical-align: middle;
      width: calc(100% - 1rem);

      @include make-col(12);

      @include media-breakpoint-up(md) {
        @include make-col(4);
      }

      @include media-breakpoint-up(lg) {
        @include make-col(3);
      }

      @include media-breakpoint-up(xl) {
        @include make-col(3);
      }

      .signatory-signature {
        display: block;
        max-width: 100%;
        max-height: rem(100);
        padding: map-get($spacing-vertical, small) map-get($spacing-horizontal, small);
      }
    }
  }

  .wrapper-accomplishment-metadata {
    @extend %layout-wrapper;

    .accomplishment-metadata {
      @extend %layout;

      .accomplishment-metadata-title {
        @include make-col(12);
      }
    }

    .wrapper-metadata {
      @extend %layout;

      @include make-container();

      padding: 0;

      .metadata {
        @extend %divider-2;

        @include make-col(12);

        margin-bottom: map-get($spacing-vertical, small);
        border-bottom-color: $gray-x-back;
        padding-bottom: map-get($spacing-vertical, small);

        &:last-child {
          border-bottom: none;
          padding-bottom: 0;
        }

        @include media-breakpoint-up(md) {
          @include make-col(4);

          border-bottom: none;
          padding-bottom: 0;
        }
      }
    }
  }

  .wrapper-accomplishment-related {
    @extend %layout-wrapper;

    .accomplishment-related {
      @extend %layout;
    }

    .accomplishment-brief {
      margin-bottom: map-get($spacing-vertical, small);

      @include media-breakpoint-up(md) {
        @include make-col(6);
      }

      .accomplishment-type-symbol {
        @include size(rem(50));
        @include margin-right(map-get($spacing-horizontal, base));
      }
    }
  }

  .wrapper-about {
    @extend %layout-wrapper;

    .about {
      @extend %layout;
    }

    .about-item {
      margin-bottom: map-get($spacing-vertical, base);

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

      @include media-breakpoint-up(md) {
        @include make-col(6);

        margin-bottom: 0;
      }

      a {
        @extend %link;
      }

      .about-edx-title,
      .about-title {
        font-weight: 400;
        margin-top: 0;

        @include margin(0, rem(8), rem(10), rem(8));
      }

      .about-copy,
      .about-edx-copy {
        @extend %copy-meta;

        margin: 0 rem(8);

        p {
          margin-top: 0;
        }
      }
    }
  }
}