edx-platform/cms/static/sass/views/_group-configuration.scss

// studio - views - group-configurations
// ====================
.view-group-configurations {

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

  .content-primary {
    @include margin-right(flex-gutter());
    width: flex-grid(9, 12);

    .notice-moduledisabled {
      @extend %ui-well;
      @extend %t-copy-base;
      background-color: $white;
      padding: ($baseline*1.5) $baseline;
      text-align: center;
    }

    .no-content {
      @extend %no-content;
      color: $gray-d1;
    }

    .wrapper-groups {
      margin-bottom: ($baseline*1.5);

      .title {
        @extend %t-title4;
        @extend %t-strong;
        margin-bottom: ($baseline/2);
      }

      .copy {
        @extend %t-copy-sub1;
      }
    }

    .wrapper-collection {
      @extend %ui-window;
      position: relative;
      outline: none;

      &:hover .collection .actions {
        opacity: 1.0;
      }

      .collection-details {
        padding: $baseline ($baseline*1.5);
      }

      .collection-header {
        margin-bottom: 0;
        border-bottom: 0;
        padding-bottom: 0;

        .title {
          @extend %cont-truncated;
          @extend %t-title5;
          @extend %t-strong;
          @include margin-right($baseline*14);
          color: $black;

          .toggle {
            @include padding-left($baseline);
            display: inline-block;
            color: $black;

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

            .ui-toggle-expansion {
              @include transition(rotate .15s ease-in-out .25s);
              @extend %t-action1;
              @include margin-left(-$baseline);
              display: inline-block;
              width: ($baseline*0.75);
              vertical-align: baseline;

              &.fa-caret-right:before {
                @include rtl {
                  // Flip to fa-caret-left on RTL
                  content: "\f0d9";
                }
              }
            }

            &.is-selectable {
              @extend %ui-fake-link;

              &:hover {
                color: $blue;

                .ui-toggle-expansion {
                  color: $blue;
                }
              }
            }
          }
        }
      }

      .collection-info {
        @extend %t-copy-sub1;
        @include margin-left($baseline);
        color: $gray-l1;

        &.group-configuration-info-inline {
          @include margin($baseline/4, 0, $baseline/2, $baseline);
          display: table;
          width: 70%;

          li {
            @include box-sizing(border-box);
            @include margin-right(1%);
            display: table-cell;

            &.group-configuration-usage-count {
              font-style: italic;
            }
          }
        }

        &.group-configuration-info-block {
          li {
            padding: ($baseline/4) 0;
          }
        }

        &.collection-info-inline {
          @include margin($baseline/4, 0, $baseline/2, $baseline);
          display: table;
          width: 70%;

          li {
            @include box-sizing(border-box);
            @include margin-right(1%);
            display: table-cell;
            padding: ($baseline/4) 0;

            &.collection-usage-count {
              font-style: italic;
            }
          }
        }

        .collection-label {
          text-transform: uppercase;
        }

        .collection-description {
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      .collection-items {
        @include margin-left($baseline);
        margin-bottom: ($baseline*0.75);

        .item {
          @extend %t-copy-lead1;
          padding: ($baseline/7) 0 ($baseline/4);
          border-top: 1px solid $gray-l4;
          white-space: nowrap;

          &:first-child {
            border-top: none;
          }

          .name {
            @include margin-right(5%);
            overflow: hidden;
            text-overflow: ellipsis;
            display: inline-block;
            vertical-align: middle;
            width: 75%;
          }
        }
      }

      .collection-details {

        .actions {
          @include transition(opacity .15s .25s ease-in-out);
          @include right($baseline);
          position: absolute;
          top: $baseline;
          opacity: 0.0;

          .action {
            @include margin-right($baseline/4);
            display: inline-block;
            vertical-align: middle;

            .edit {
              @extend %ui-btn-non-blue;
            }

            .delete {
              @extend %ui-btn-non;

              &.is-disabled {
                background-color: $gray-l3;
                color: $gray-l6;
              }
            }
          }
        }
      }

      .collection-references {
        @extend %t-copy-sub1;
        @include padding($baseline, $baseline*1.5, $baseline, $baseline*2.5);
        box-shadow: 0 2px 2px 0 $shadow inset;
        color: $gray-l1;

        .usage {
          margin-left: $baseline;

          .usage-unit {
            padding: ($baseline/4) 0;

            a {
              @extend %t-strong;
            }

            .fa-warning {
              @include margin($baseline/4, $baseline/2, 0, $baseline*1.5);
              color: $orange;
            }

            .fa-times-circle {
              @include margin($baseline/4, $baseline/2, 0, $baseline*1.5);
              color: $red-l2;
            }
          }
        }
      }

      .usage-validation {
        @extend %t-copy-sub1;
        @include padding($baseline, $baseline*1.5, $baseline, $baseline*1.5);
        background-color: $gray-l6;
        margin-top: $baseline;

        .fa-warning {
          @include margin($baseline/2, $baseline, 0, 0);
          @include float(left);
          color: $orange;
        }

        .collection-validation-text {
          overflow: auto;
        }
      }

      .collection-edit {
        @include box-sizing(border-box);
        border-radius: 2px;
        width: 100%;
        background: $white;

        .message {
          margin-bottom: 0;
        }

        .wrapper-form {
          padding: $baseline ($baseline*1.5);
        }

        .tip {
          @extend %t-copy-sub2;
          @include transition(color, 0.15s, ease-in-out);
          display: block;
          margin-top: ($baseline/4);
          color: $gray-d1;
        }

        .is-focused .tip {
          color: $gray-d2;
        }


        .collection-fields {
          @extend %cont-no-list;
          margin-bottom: $baseline;
        }

        .field {
          @include margin(0, 0, $baseline*0.75, 0);

          &:last-child {
            @extend %wipe-last-child;
          }

          &.required {

            label {
              @extend %t-strong;
            }

            label:after {
              @include margin-left($baseline/4);
              content: "*";
            }
          }

          label, input, textarea {
            display: block;
          }

          textarea {
            resize: vertical;
          }

          label {
            @extend %t-copy-sub1;
            @include transition(color, 0.15s, ease-in-out);
            @include margin(0, 0, $baseline/4, 0);

            &.is-focused {
              color: $blue;
            }
          }

          //this section is borrowed from _account.scss - we should clean up and unify later
          input, textarea {
            @extend %t-copy-base;
            height: 100%;
            width: 100%;
            padding: ($baseline/2);

            &.long {
              width: 100%;
            }

            &.short {
              width: 25%;
            }

            ::-webkit-input-placeholder {
               color: $gray-l4;
            }

            :-moz-placeholder {
               color: $gray-l3;
            }

            ::-moz-placeholder {
               color: $gray-l3;
            }

            :-ms-input-placeholder {
               color: $gray-l3;
            }

            &:focus {
              + .tip {
                color: $gray-d1;
              }
            }
          }

          &.error {
              label {
                color: $red;
              }

              input {
                border-color: $red;
              }
          }
        }

        label.required {
          @extend %t-strong;

          &:after {
            @include margin-left($baseline/4);
            content: "*";
          }
        }

        .field.add-collection-name {

          label {
            width: 50%;
            @extend %t-title5;
            display: inline-block;
            vertical-align: bottom;
          }

          .group-configuration-id {
            @include text-align(right);
            display: inline-block;
            width: 45%;
            vertical-align: top;
            color: $gray-l1;

            .group-configuration-value {
              @extend %t-strong;
              @include margin-left($baseline*0.5);
              white-space: nowrap;
            }
          }
        }


        .actions {
          box-shadow: inset 0 1px 2px $shadow;
          border-top: 1px solid $gray-l1;
          padding: ($baseline*0.75) $baseline;
          background: $gray-l6;

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

            &:last-child {
              @include margin-right(0);
            }
          }

          // add a group is below with groups styling
          .action-primary {
            @extend %btn-primary-blue;
            padding: ($baseline/4) $baseline;
          }

          .action-secondary {
            @extend %btn-secondary-gray;
            padding: ($baseline/4) $baseline;
          }

          .wrapper-delete-button {
            @include float(right);
            padding: ($baseline/4) ($baseline/2);

            .is-disabled {
              color: $gray-l3;
            }
          }
        }

        .copy {
          @extend %t-copy-sub2;
          @include margin($baseline, 0, $baseline/2, 0);
          color: $gray;

          strong {
            @extend %t-strong;
          }
        }
      }

      .action-add-item {
        @extend %ui-btn-flat-outline;
        @extend %t-action2;
        @extend %t-strong;
        @include margin($baseline*1.5, 0, 0, 0);
        display: block;
        width: 100%;
        padding: ($baseline/2);
      }
    }

    // add/new collection
    .action-add {
      @extend %ui-btn-flat-outline;
      display: block;
      width: 100%;
      margin-top: ($baseline*0.75);
      padding: ($baseline/2) $baseline;

      &.is-hidden {
        display: none;
      }

      .icon {
        @include margin-right($baseline/2);
        display: inline-block;
        vertical-align: middle;
      }
    }

    // specific group-type styles
    .content-groups {

      .collection-header{

         .title {
            margin-bottom: 0;
        }
      }
    }

    .experiment-groups {

      .group-configuration-details {

        .group-configuration-info {
          @extend %t-copy-sub1;
          @include margin-left($baseline);
          color: $gray-l1;

          .group-configuration-label {
            text-transform: uppercase;
          }

          .group-configuration-description {
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }

        .groups {
          @include margin-left($baseline);
          margin-bottom: ($baseline*0.75);

          .group {
            @extend %t-copy-lead1;
            padding: ($baseline/7) 0 ($baseline/4);
            border-top: 1px solid $gray-l4;
            white-space: nowrap;

            &:first-child {
              border-top: none;
            }

            .group-name {
              @include margin-right(5%);
              overflow: hidden;
              text-overflow: ellipsis;
              display: inline-block;
              vertical-align: middle;
              width: 75%;
            }

            .group-allocation {
              @include text-align(right);
              display: inline-block;
              vertical-align: middle;
              width: 20%;
              color: $gray-l1;
            }
          }
        }
      }

      .group-configuration-edit {

        .add-collection-name label {
          @include padding-right(5%);
          overflow: hidden;
          text-overflow: ellipsis;
          vertical-align: bottom;
        }

        .field-group {
          @include clearfix();
          @include margin(0, 0, $baseline/2, 0);
          @include padding($baseline/4, 0, 0, 0);

          .group-allocation,
          .field {
            @include margin(0, 3%, 0, 0);
            display: inline-block;
            vertical-align: middle;
          }

          .group-allocation {
            max-width: 10%;
            min-width: 5%;
            color: $gray-l1;
          }

          .field {
            position: relative;

            &.long {
              width: 80%;
            }

            &.short {
              width: 10%;
            }
          }

          .action-close {
            @include transition(color $tmg-f2 ease-in-out);
            @extend %t-action1;
            display: inline-block;
            border: 0;
            padding: 0;
            background: transparent;
            color: $blue-l3;
            vertical-align: middle;

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

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