_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.

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

// view-specific utilities
// --------------------
%status-value-base {
  @extend %t-title7;
  @extend %t-strong;
}

%status-value-sub1 {
  @extend %t-title8;
  display: block;
}

// UI: container page view
// --------------------
.view-container {
  @extend %two-col-1;

  .wrapper-mast {

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

      .page-header {

        .page-header-title {
          @extend %t-title4;
          @extend %t-strong;
        }

        .is-editable {

          // TOOD: abstract this out into a Sass placeholder
          .incontext-editor-input {
            @include transition(box-shadow $tmg-f1 ease-in-out 0, color $tmg-f1 ease-in-out 0);
            @extend %t-title4;
            @extend %t-strong;
            width: 100%;
            background: none repeat scroll 0 0 $white;
            border: 0;
            box-shadow: 0 0 2px 2px $shadow inset;

            // STATE: focus
            &:focus {
              box-shadow: 0 0 2px 2px rgba($ui-action-primary-color-focus, 0.50) inset;
              color: $ui-action-primary-color-focus;
            }
          }
        }
      }

      &.has-actions {

        .nav-actions {

          .button {
            @extend %t-action3;
            @extend %t-regular;
            padding: ($baseline/4) ($baseline*0.75);
          }
        }
      }
    }
  }

  .content-primary {

    .no-container-content {
      @extend %no-content;
      padding: ($baseline*1.5) ($baseline*2);

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

    .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;
    }

    // UI: publishing details/summary
    .bit-publishing {
      @extend %bar-module;

      // CASE: content is ready to be made live
      &.is-ready {
        @extend %bar-module-green;
      }

      // CASE: content is live
      &.is-live {
        @extend %bar-module-blue;
      }

      // CASE: content has warnings
      &.has-warnings {
        @extend %bar-module-yellow;
      }

      // CASE: content has erors
      &.has-errors {
        @extend %bar-module-red;
      }

      // CASE: content is staff only
      &.staff-only,
      &.is-staff-only {
        @extend %bar-module-black;

        &.is-scheduled .wrapper-release .copy {
          text-decoration: line-through;
        }
      }

      // CASE: content is gated
      &.is-gated {
        @extend %bar-module-black;
      }

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

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

      .wrapper-last-draft {

        .date,
        .user {
          @extend %t-strong;
        }

        .user {
          @extend %cont-text-wrap;
        }
      }

      .wrapper-release {

        .release-date {
          @extend %status-value-base;
        }

        .release-with {
          @extend %status-value-sub1;
        }
      }

      .wrapper-visibility {

        .copy {
          @extend %status-value-base;
          margin-bottom: ($baseline/10);
        }

        .icon {
          color: $gray-d1;
        }

        .inherited-from {
          @extend %status-value-sub1;
        }

        // UI: note about specific access
        .note-visibility {
          @extend %status-value-sub1;

          .icon {
            @include margin-right($baseline/4);
          }
        }
      }

      .wrapper-pub-actions {
        border-top: 1px solid $gray-l4;
        margin-top: ($baseline/2);
        padding: $baseline ($baseline*0.75) ($baseline*0.75) ($baseline*0.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*0.75);
        background-color: $white;

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

        .date,
        .user {
          @extend %t-strong;
        }

        .user {
          @extend %cont-text-wrap;
        }
      }
    }

    // location widget
    .unit-location, .library-location {
      @extend %bar-module;
      border-top: none;

      .wrapper-unit-id, .wrapper-library-id {

        .unit-id-value, .library-id-value {
          @extend %status-value-base;
          display: inline-block;
          width: 100%;
        }

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

      .wrapper-unit-tree-location {

        .item-title {
          @extend %cont-text-wrap;

          a {
            color: $blue;

            &:hover {
              color: $orange-d1;
            }
          }
        }

        // CASE: is current item being edited/viewed
        .is-current {
          background: $gray-l4;

          .unit-title a {
            @extend %ui-disabled;
            @extend %t-strong;
            color: $color-heading-base;
          }
        }

        // typographical overrides (based off of outline-simple)
        .section-header, .subsection-header {
          line-height: 0;
          margin-bottom: ($baseline/2);
        }

        .section-header {
          border-bottom: 1px solid $gray-l4;
          padding-bottom: ($baseline/2);
        }

        // subsections overrides (based off of outline-simple)
        .outline-subsection {
          border: none;
          padding: 0;
        }

        // units overrides (based off of outline-simple)
        .outline-unit {
          padding: 3px 6px;
        }
      }
    }
  }
}


.move-xblock-modal {

  button {
    background: transparent;
    border-color: transparent;
    padding: 0;
    border: none;
  }

  .breadcrumb-container {
    margin-bottom: ($baseline/4);
    border: 1px solid $btn-lms-border;
    padding: ($baseline/2);
    background: $color-background-alternate;

    .breadcrumbs {

      .bc-container {
        @include font-size(14);
        display: inline-block;

        .breadcrumb-fa-icon {
          padding: 0 ($baseline/4);

          @include rtl {
            @include transform(rotate(180deg));
          }
        }

        &.last {
          .parent-displayname {
            @include font-size(18);
          }
        }
      }

      .bc-container:not(.last) {
        button, .parent-displayname {
          text-decoration: underline;
          color: $ui-link-color;
        }
      }
    }
  }

  .category-text {
    @include margin-left($baseline/2);
    @include font-size(14);
    color: $black;
  }

  .xblock-items-container {
    max-height: ($baseline*15);
    overflow-y: auto;

    .xblock-item {
      & > * {
        width: 100%;
        color: $uxpl-blue-hover-active;
      }

      .component {
        display: inline-block;
        color: $black;
        padding: ($baseline/4) ($baseline/2);
      }

      .xblock-displayname {
        @include float(left);
      }

      .button-forward, .component {
        border: none;
      }

      .button-forward {
        padding: ($baseline/2);
        .forward-sr-icon {
          @include float(right);

          @include rtl {
            @include transform(rotate(180deg));
          }
        }

        &:hover, &:focus {
          background: $color-background-alternate;
        }
      }
    }

    .xblock-no-child-message {
      @include text-align(center);
      display: block;
      padding: ($baseline*2);
    }
  }

  .truncate {
    max-width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .current-location {
    @include float(left);
    @include margin-left($baseline);
  }
}