edx-platform/cms/static/sass/elements/_xblocks.scss

// studio - elements - xblock rendering
// ==========================

// extends - UI archetypes - xblock rendering
%wrap-xblock {
  margin: ($baseline/2);
  border: 1px solid $gray-l4;
  border-radius: ($baseline/5);
  background: $white;
  box-shadow: 0px 1px 1px $shadow-l1;


  &:hover {
    box-shadow: 0 0 1px $shadow;
  }

  // UI: xblock header
  .xblock-header-primary {
    @include box-sizing(border-box);
    border-bottom: 1px solid $gray-l4;
    border-radius: ($baseline/5) ($baseline/5) 0 0;
    min-height: ($baseline*2.5);
    background-color: $gray-l6;
    padding: ($baseline/2) ($baseline/2) ($baseline/2) ($baseline);

    .header-details {
      @extend %cont-truncated;
      display: inline-block;
      width: 50%;
      vertical-align: middle;
    }

    .header-actions {
      display: inline-block;
      width: 49%;
      vertical-align: middle;
      text-align: right;
    }
  }

  .xblock-header-secondary {
    overflow: hidden;
    border-top: 1px solid $gray-l3;
    background-color: $gray-l5;
    padding: ($baseline/2) $baseline;

    .meta-info {
      display: inline-block;
      vertical-align: middle;
      width: 65%;
      font-style: italic;
      color: $gray;
    }

    .actions-list {
      width: 34%;
      display: inline-block;
      vertical-align: middle;
      text-align: right;

      .action-item {
        display: inline-block;

        .action-button {
          @include transition(all $tmg-f3 linear 0s);
          display: block;
          width: auto;
          height: ($baseline*1.5);
          border-radius: 3px;
          padding: 3px ($baseline/2) 0 ($baseline/2);
          color: $gray-l1;

          &:hover {
            background-color: $blue;
            color: $gray-l6;
          }

          .action-button-text {
            display: inline-block;
            vertical-align: middle;
            padding: 0 1px;
            text-transform: uppercase;
          }

          &.delete-button:hover {
            background-color: $gray-l1;
          }
        }

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

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

// UI: xblocks - calls-to-action
.wrapper-xblock .header-actions {
  @extend %actions-header;

  .action-button [class^="icon-"] {
    font-style: normal;
  }
}

// UI: xblock is collapsible
.wrapper-xblock.is-collapsible,
.wrapper-xblock.xblock-type-container {

  [class^="icon-"] {
    font-style: normal;
  }

  .expand-collapse {
    @extend %expand-collapse;
    margin: 0 ($baseline/4);
    height: ($baseline*1.25);
    width: $baseline;

    &:focus {
      outline: 0;
    }
  }

  .action-view {

    .action-button {
      transition: none;
    }

    .action-button-text {
      padding-right: ($baseline/5);
      padding-left: 0;
    }
  }
}

.wrapper-xblock-message {

  .xblock-message {
    @extend %t-copy-sub1;
    background-color: $gray-d2;
    padding: ($baseline/2) ($baseline*.75);
    color: $white;

    .message-text {
      display: inline-block;
      width: 93%;
      vertical-align: top;
    }

    [class^="icon-"] {
      font-style: normal;
    }

    &.information {
      background-color: $gray-l5;
      color: $gray-d2;
    }

    &.warning {
      background-color: $gray-d2;
      padding: ($baseline/2) $baseline;
      color: $white;

      .icon-warning-sign {
        margin-right: ($baseline/2);
        color: $orange;
      }

      .message-text {
        display: inline-block;
        width: 93%;
        vertical-align: top;
      }
    }

    &.error {
      background-color: $gray-d2;
      padding: ($baseline/2) $baseline;
      color: $white;

      .icon-exclamation-sign {
        margin-right: ($baseline/2);
        color: $red-l2;
      }
    }
  }
}