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: spacing-vertical(base);
  padding: 0 5%;

  @media(min-width: $bp-screen-md) {
    padding: 0 2.5%;
  }
}

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

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

  padding-top: spacing-vertical(small);
  padding-bottom: 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 span(12);

  margin: 0;
}

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

  padding-top: spacing-vertical(small);
  padding-bottom: spacing-vertical(small);

  .banner {
    @extend %layout;
  }
}

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

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

  @media(min-width: $bp-screen-lg) {
    @include text-align(left);
  }

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

    .message-copy {
      margin-bottom: spacing-vertical(small);
    }

    .message-actions {
      @include span(12);

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

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

        // CASE: icon display only
        &.icon-only {
          @media(min-width: $bp-screen-md) {
            padding: spacing-vertical(x-small) spacing-horizontal(base);

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

        @media(min-width: $bp-screen-md) {
          display: inline-block;
          vertical-align: middle;
          min-width: 130px;
          width: auto;
          margin-bottom: 0;
          margin-right: spacing-horizontal(mid-small);

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

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

.footer-app {
  @extend %layout;
}

.footer-app-copyright {
  @media(min-width: $bp-screen-md) {
    @include span(6, after);

    margin-bottom: 0;
  }
}

.footer-app-nav {
  @media(min-width: $bp-screen-md) {
    @include span(6, before);
  }

  .list {
    .nav-item {
      display: block;
      margin-bottom: spacing-vertical(x-small);

      @media(min-width: $bp-screen-md) {
        display: inline-block;
        vertical-align: middle;

        @include margin-right(spacing-horizontal(base));

        margin-bottom: 0;
      }
    }
  }

  .list-legal {
    @media(min-width: $bp-screen-md) {
      @include text-align(right);
    }
  }
}

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

    margin-bottom: spacing-vertical(large);

    .introduction {
      @extend %layout;
    }
  }

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

    margin-bottom: spacing-vertical(small);
  }

  .accomplishment-rendering {
    @extend %layout;

    position: relative;
    top: -(spacing-vertical(base));

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

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

  .accomplishment-orgs {
    @include grid-row;

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

    .wrapper-organization {
      @include span(6);
      @include margin-right(spacing-horizontal(base));

      display: inline-block;
      vertical-align: middle;
      height: rem(100);
      margin-bottom: spacing-vertical(small);

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

      @media(min-width: $bp-screen-md) {
        @include span(3);
      }

      @media(min-width: $bp-screen-lg) {
        @include span(2);
      }

      @media(min-width: $bp-screen-xl) {
        @include span(2);
      }
    }

    .organization {
      @include size(100%);

      position: relative;

    }

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

      @include left(50%);

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

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

    .signatory {
      display: inline-block;
      vertical-align: middle;

      @include span(12);

      @media(min-width: $bp-screen-md) {
        @include span(4);
      }

      @media(min-width: $bp-screen-lg) {
        @include span(3);
      }

      @media(min-width: $bp-screen-xl) {
        @include span(3);
      }

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

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

    .accomplishment-metadata {
      @extend %layout;

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

    .wrapper-metadata {
      @extend %layout;

      .metadata {
        @extend %divider-2;

        @include span(12);

        margin-bottom: spacing-vertical(small);
        border-bottom-color: palette(grayscale, x-back);
        padding-bottom: spacing-vertical(small);

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

        @media(min-width: $bp-screen-md) {
          @include span(4);

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

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

    .accomplishment-related {
      @extend %layout;
    }

    .accomplishment-brief {
      margin-bottom: spacing-vertical(small);

      @media(min-width: $bp-screen-md) {
        @include span(6);
      }

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

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

    .about {
      @extend %layout;
    }

    .about-item {
      margin-bottom: spacing-vertical(base);

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

      @media(min-width: $bp-screen-md) {
        @include span(6);

        margin-bottom: 0;
      }
    }
  }
}