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

// studio - views - container
// ==========================
// The container view renders xblocks at three levels: 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 {
  @extend %two-col-1;

  .wrapper-mast {

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

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

      .xblock-title .xblock-field-input {
        @extend %t-title4;
        background: none repeat scroll 0 0 white;
        border: 0;
        box-shadow: 0 0 2px 2px $shadow inset;
        font-weight: 600;
      }

      &.has-actions {

        .nav-actions {

          .button {
            @extend %t-action3;
            padding: ($baseline/4) ($baseline*.75);
            font-weight: 400;
          }
        }
      }
    }
  }

  .content-primary {

    .no-container-content {
      @extend %no-content;

      // custom rules to reuse xblock validation styling in ui-well context
      .icon-warning-sign {
        display: none;
      }

      .edit-button {
        @include green-button;
        @extend %t-action4;
        padding: 8px 20px 10px;
        text-align: center;
        margin: ($baseline/2) 0 ($baseline/2) $baseline;
      }
    }

    .container-message {

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

    // dragging bits
    .ui-sortable-helper {

      article {
        display: none;
      }
    }

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

  .content-supplementary {

    label {
      @extend %t-title8;
    }

    .bit-publishing {
      @extend %bar-module;

      &.published,
      &.is-published {
        @extend %bar-module-green;
      }

      &.draft ,
      &.is-draft {
        @extend %bar-module-yellow;
      }

      &.staff-only,
      &.is-staff-only {
        @extend %bar-module-black;
      }

      .bar-mod-content {
        border: 0;
        padding: ($baseline/2) ($baseline*.75) ($baseline*.75) ($baseline*.75);

        .title {
          margin-bottom: ($baseline/10);
        }
      }

      .wrapper-last-draft {
        padding: ($baseline*.75) ($baseline*.75) ($baseline/4) ($baseline*.75);

        .date,
        .user {
          font-weight: 600;
        }
      }

      .wrapper-release {

        .release-date {
          font-weight: 600;
        }
      }

      .wrapper-visibility {

        .copy {
          margin-bottom: ($baseline/10);
          font-weight: 600;
        }

        .action-inline [class^="icon-"] {
          margin: 0 ($baseline/4);

        }
      }

      .wrapper-pub-actions {
        padding: ($baseline*.75);

        .action-publish {
          @extend %btn-primary-blue;
          display: block;
          padding: ($baseline/4) ($baseline/2) ($baseline/3) ($baseline/2);
        }

        .action-discard {
          @extend %t-copy-sub1;
          display: block;
          margin-top: ($baseline/2);
          text-align: right;

          &.is-disabled {
            pointer-events: none;
            color: $gray-l1;
          }
        }
      }

    }

    // versioning widget
    .unit-publish-history {

      .wrapper-last-publish {
        margin-bottom: $baseline;
        padding: ($baseline*.75);
        background-color: $white;

        .copy {
          @extend %t-copy-sub2;
          color: $gray;
        }

        .date,
        .user {
          font-weight: 600;
        }
      }
    }

    // location widget
    .unit-location {
      @extend %bar-module;

      .wrapper-unit-id {

        .unit-id-value {
          @extend %t-copy-sub1;
          display: inline-block;
        }

        .tip {
          @extend %t-copy-sub2;
          display: inline-block;
          margin: ($baseline/4) 0;
          color: $gray-l2;
        }
      }

      .wrapper-unit-tree-location {

        .draggable-drop-indicator {
          display: none;
        }

        // need to explicitly set this since the html structure is different than the others
        .section-name:hover {
          background: $blue-l5;
          color: $blue;
        }

        .subsection,
        .courseware-unit {
          margin: ($baseline/4) 0 0 ($baseline*.75);
        }

        .courseware-unit .section-item {
          background-color: transparent;
        }

        .section-item {
          @include transition(background $tmg-avg ease-in-out 0);
          @include box-sizing(border-box);
          @extend %t-copy-sub2;
          width: 100%;
          display: inline-block;
          vertical-align: top;
          overflow: hidden;
          padding: 6px 8px 8px 16px;
          background: $gray-l5;
          white-space: nowrap;
          text-overflow: ellipsis;
          color: $gray;

          &:hover {
            background: $blue-l5;
            color: $blue;
          }

          &.editing {
            background-color: $orange-l3;
          }

          // TODO: update these once we have different pub states
          .public-item {
            color: $black;
          }

          .private-item {
            color: $gray-l1;
          }

          .draft-item {
            color: $yellow-d1;
          }

          .public-item:hover,
          .private-item:hover,
          .draft-item:hover {
            color: $blue;
          }

          .draft-item:after,
          .public-item:after,
          .private-item:after {
            @include font-size(9);
            margin-left: 3px;
            font-weight: 600;
            text-transform: uppercase;
          }

          .draft-item:after {
            content: "- draft";
          }

          .private-item:after {
            content: "- private";
          }
        }

        .subsection > .section-item:hover {
          background-color: $gray-l5;
          color: inherit;
        }

        .new-unit-item {
          @extend %ui-btn-flat-outline;
          @extend %t-action4;
          width: 90%;
          margin: 0 0 ($baseline/2) ($baseline/4);
          border: 1px solid transparent;
          padding: ($baseline/4) ($baseline/2);
          font-weight: normal;
          color: $gray-l2;
          text-align: left;

          &:hover {
            box-shadow: none;
            background-image: none;
          }
        }
      }
    }
  }
}