edx-platform/cms/static/sass/views/_container.scss

// studio - views - container
// ==========================
// The container view renders xblocks three levels deep: Page Level, Nesting Level, and Element Level.

// For containers rendered at the element level, the container is rendered in a way that allows the user to navigate to a separate container page for that container making its children populate the nesting and element levels.

// ====================

// UI: container page view
.view-container {

  .mast {
    border-bottom: none;
    padding-bottom: 0;

    .page-header {
      @extend %t-title;
      @include font-size(28);
      @include line-height(32);

      .subtitle .navigation-link {
        color: $gray;

        &:hover {
          color: $blue;
        }
      }
    }
  }

  .wrapper-mast .mast.has-navigation .nav-actions {

    .nav-item {

      .edit-button {
        @include blue-button;
        @extend %t-action4;
        padding: ($baseline/4) ($baseline/2);
        text-align: center;

        .action-button-text {
          display: inline-block;
          vertical-align: baseline;
        }

        [class^="icon-"] {
          display: inline-block;
          vertical-align: baseline;
        }
      }
    }
  }

  .content-primary, .content-supplementary {
    @include box-sizing(border-box);
    float: left;
  }

  .content-primary {
    margin-right: flex-gutter();
    width: flex-grid(9,12);
    box-shadow: none;
    border: 0;

    .no-container-content {
      @extend %ui-well;
      padding: ($baseline*2);
      background-color: $gray-l4;
      text-align: center;
      color: $gray;

      .icon-warning-sign {
        display: none;
      }

      .edit-button {
        @include green-button;
        @extend %t-action4;
        padding: 8px 20px 10px;
        text-align: center;
        margin-left: $baseline;

        [class^="icon-"] {
          margin-right: ($baseline/2);
        }
      }
    }
  }

  .content-supplementary {
    width: flex-grid(3,12);

    label {
      @extend %t-title8;
    }

    .bit-publishing {
      margin-bottom: $baseline;
      border-top: 5px solid $blue;
      background-color: $white;

      .pub-status {
        @extend %t-title6;
        display: block;
        background-color: $blue-l2;
        padding: ($baseline/2) ($baseline*.75);
        font-weight: 600;
      }

      &.published {
        border-top: 5px solid $blue;

        .pub-status {
          background-color: $blue-t0;
        }

      }

      &.draft {
        border-top: 5px solid $gray-l1;

        .pub-status {
          background-color: $gray-l4;
        }
      }

      .copy {
        @extend %t-copy-sub1;
        padding: ($baseline*.75) ($baseline*.75) ($baseline) ($baseline*.75);
      }
    }
  }
}

// UI: xblock rendering
body.view-container .content-primary {

  // dragging bits
  .ui-sortable-helper {

    article {
      display: none;
    }
  }

  .component-placeholder {
    height: ($baseline*2.5);
    opacity: .5;
    margin: $baseline;
    background-color: $gray-l5;
    border-radius: ($baseline/2);
    border: 2px dashed $gray-l2;
  }

  .wrapper-xblock {
    @extend %wrap-xblock;

    // CASE: page level xblock rendering
    &.level-page {
      margin: 0;

      .xblock-header {
        display: none;
      }

      .xblock-message {
        border-radius: 3px 3px 0 0;

        &.information {
          @extend %t-copy-base;
          margin-bottom: $baseline;
          border-bottom: 1px solid $gray-l4;
          padding: ($baseline/2) ($baseline*.75);
          background-color: $gray-l5;
          color: $gray-d1;
        }
      }
    }

    // CASE: nesting level xblock rendering
    &.level-nesting {
      @include transition(all $tmg-f2 linear 0s);
      border: 1px solid $gray-l3;
      padding-bottom: $baseline;

      // min-height to allow drop when empty
      .reorderable-container {
        min-height: $baseline;
      }

      .xblock-header {
        display: block;
      }

      .xblock-header-primary {
        @include ui-flexbox();
        margin-bottom: 0;
        border-bottom: none;
        background: none;
      }

      .xblock-render {
        margin: ($baseline/2);
      }

      // STATE: nesting level xblock is collapsed
      &.collapsed {
        padding-bottom: 0;
        background-color: $gray-l7;
        box-shadow: 0 0 1px $shadow-d2 inset;
      }
    }

    // CASE: element level xblock rendering
    &.level-element {
      @include transition(all $tmg-f2 linear 0s);
      box-shadow: none;

      &:hover {
        border-color: $blue;
      }

      .xblock-header {
        display: block;
      }

      .xblock-header-primary {
        display: flex;
        margin-bottom: 0;
        border-bottom: 1px solid $gray-l4;
        background-color: $gray-l6;
        font-weight: 300;
      }

      .xblock-render {
        margin: ($baseline/2);
        padding: ($baseline/2);
      }

      // STATE: xBlock containers styled as rows.
      &.xblock-type-container {

        .xblock-header-primary {
          margin-bottom: 0;
          border-bottom: 0;
          border-radius: ($baseline/5);
        }

        .xblock-render {
          display: none;
        }
      }
    }
  }

  // add a new component menu override - most styles currently live in _unit.scss
  .new-component-item {
    margin: $baseline ($baseline/2);
    border: 1px solid $gray-l3;
    border-radius: ($baseline/4);
    box-shadow: 0 1px 3px $shadow inset;
    background-color: $gray-l5;
    padding: ($baseline/2);

    h5 {
      margin-bottom: ($baseline*.75);
    }

    .new-component-type a {
      margin-bottom: ($baseline/2);
    }
  }
}

// ====================

// UI: xblocks - internal styling

// In order to ensure visual consistency across the unit and container pages, certain styles need to be applied to render on the container page until they are also cleaned up and applied differently on the unit page.
.wrapper-xblock {

    // UI: xblocks - internal headings for problems and video components
    h2 {
    margin: 30px 40px 30px 0;
    color: #646464;
    font-size: 19px;
    font-weight: 300;
    letter-spacing: 1px;
    text-transform: uppercase;
  }
}