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

// studio - elements - content modules
// ====================
// Patterns for pieces of content - modules - used throughout the app

// basic gray module with a strong top border and title, with related content box attached
%bar-module {
  margin-bottom: $baseline;
  border-top: 5px solid $gray-l1;
  background-color: $white;

  .bar-mod-title {
    @extend %t-title6;
    display: block;
    background-color: $gray-l4;
    padding: ($baseline/2) ($baseline*.75);
    font-weight: 600;
  }

  .bar-mod-content {
    @extend %t-copy-sub1;
    border-bottom: 1px solid $gray-l4;
    padding: ($baseline*.75) ($baseline*.75) $baseline ($baseline*.75);

    .title {
      @extend %t-title8;
      margin-bottom: ($baseline/4);
      font-weight: 600;
      color: $gray-l2;
      text-transform: uppercase;
    }

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

// blue bar and title bg version
%bar-module-blue {
  @extend %bar-module;
  border-top: 5px solid $blue;

  .bar-mod-title {
    background-color: $blue-t0;
  }
}

// green bar and title bg version
%bar-module-green {
  @extend %bar-module;
  border-top: 5px solid $green;

  .bar-mod-title {
    background-color: $green-l5;
  }
}

// yellow bar and title bg version
%bar-module-yellow {
  @extend %bar-module;
  border-top: 5px solid $orange-l2;

  .bar-mod-title {
    background-color: $orange-l5;
  }
}

// red bar and title bg version
%bar-module-red {
  @extend %bar-module;
  border-top: 5px solid $red-l2;

  .bar-mod-title {
    background-color: $red-l5;
  }
}

// black bar and title bg version
%bar-module-black {
  @extend %bar-module;
  border-top: 5px solid $black;

  .bar-mod-title {
    background-color: $gray-l4;
  }
}

// Add new component menu with big green buttons
// outermost wrapper for add a new component menu
.add-xblock-component {
  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);

  // add component menu inner wrapper
  .new-component {
    text-align: center;

    h5 {
      @extend %t-title5;
      margin-bottom: ($baseline*.75);
      color: $green-d1;
      font-weight: 600;
    }

    // add component - list of green buttons
    .new-component-type {
      @include clearfix;

      li {
        display: inline-block;
      }

      // green button
      .add-xblock-component-button {
        @extend %t-action3;
        position: relative;
        display: inline-block;
        width: ($baseline*5);
        height: ($baseline*5);
        margin-right: ($baseline*.75);
        margin-bottom: ($baseline/2);
        border: 1px solid $green-d2;
        border-radius: ($baseline/4);
        box-shadow: 0 1px 1px $shadow, 0 1px 0 rgba(255, 255, 255, .4) inset;
        background-color: $green-l1;
        text-align: center;
        color: $white;

        &:hover {
          background: $green-s1;
        }

        .name {
          @include box-sizing(border-box);
          display: block;
          color: $white;
        }
      }
    }
  }

  // outer most wrapper div for scroll up component picker menus
  // swaps in when a green button is clicked
  .new-component-templates {
    @include clearfix;
    display: none;
    margin: $baseline ($baseline*2);
    border-radius: 3px;
    border: 1px solid $mediumGrey;
    background-color: $white;
    box-shadow: 0 1px 1px $shadow, 0 1px 0 rgba(255, 255, 255, .4) inset;

    .cancel-button {
      @include white-button;
      margin: $baseline 0 ($baseline/2) ($baseline/2);
    }

    .problem-type-tabs {
      display: none;
    }

    // specific menu types
    &.new-component-problem {
      padding-bottom: ($baseline/2);

      .problem-type-tabs {
        display: inline-block;
      }
    }
  }

  // individual menus
  .new-component-template {
    @include clearfix;

    li {
      border: none;
      border-bottom: 1px dashed $lightGrey;

      &:first-child {
        border-radius: 3px 3px 0 0;
      }
    }

    a {
      @include clearfix();
      @include transition(none);
      display: block;
      border: 0px;
      padding: 7px $baseline;
      background: $white;
      color: $gray-d3;
      font-weight: 500;


      &:hover {
        @include transition(background-color $tmg-f2 linear 0s);
        background: tint($green,30%);
        color: $white;
      }
    }
  }

  // basic and advanced problem tabs - also handled by jquery-ui tabs
  .problem-type-tabs {
    @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
    list-style-type: none;
    width: 100%;
    border-radius: 0;
    background-color: $lightBluishGrey;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 $shadow inset;

    li:first-child {
      margin-left: $baseline;
    }

    li {
      @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
      opacity: 0.8;
      float: left;
      display: inline-block;
      width: auto;
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 $shadow inset;
      background-color: tint($lightBluishGrey, 10%);
      text-align: center;

      &:hover {
        opacity: 0.9;
        background-color: tint($lightBluishGrey, 20%);
      }

      &.ui-state-active {
        @include active;
        border: 0px;
        opacity: 1.0;
      }
    }

    a {
      @extend %t-action3;
      display: block;
      padding: ($baseline*.75) ($baseline*1.25);
      text-align: center;
      color: $gray-d3;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
    }
  }
}