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

// studio - elements - forms
// ====================

// Table of Contents
// * +Forms - General
// * +Field - Is Editable
// * +Field - With Error
// * +Forms - Additional UI
// * +Form - Create New
// * +Form - Inline Name Edit
// * +Form - Create New Wrapper
// * +Form - Grandfathered

// +Forms - General
// ====================
// element-specific utilities
// --------------------
// UI: checkbox/radio inputs
%input-tickable {

  ~ label {
    color: $color-copy-base;
  }

  // STATE: checked/selected
  &:checked ~ label {
    @extend %t-strong;
    color: $ui-action-primary-color-focus;
  }
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea.text {
  @include box-sizing(border-box);
  @include linear-gradient($gray-l5, $white);
  @extend %t-copy-sub2;
  @extend %t-demi-strong;
  padding: 6px 8px 8px;
  border: 1px solid $gray-l2;
  border-radius: 2px;
  background-color: $gray-l5;
  box-shadow: inset 0 1px 2px $shadow-l1;
  font-family: 'Open Sans', sans-serif;
  color: $color-copy-emphasized;
  outline: 0;

  &::-webkit-input-placeholder,
  &:-moz-placeholder,
  &:-ms-input-placeholder {
      color: $gray-l2;
  }

  &:focus {
    @include linear-gradient($paleYellow, tint($paleYellow, 90%));
    outline: 0;
  }
}

// +Fields - Not Editable
// ====================
.field.is-not-editable {

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

  label, input, textarea {
    pointer-events: none;
  }
}

// +Fields - With Error
// ====================
.field.error {

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

// +Forms - Additional UI
// ====================
form {

  // CASE: cosmetic checkbox input
  .checkbox-cosmetic {

    .input-checkbox-checked, .input-checkbox-unchecked, .label {
      display: inline-block;
      vertical-align: middle;
    }

    .input-checkbox-checked, .input-checkbox-unchecked {
      width: ($baseline*0.75);
    }

    .input-checkbox {
      @extend %cont-text-sr;

      // CASE: unchecked
      ~ label .input-checkbox-checked {
        display: none;
      }

      ~ label .input-checkbox-unchecked {
        display: inline-block;
      }

      // CASE: checked
      &:checked {

        ~ label .input-checkbox-checked {
          display: inline-block;
        }

        ~ label .input-checkbox-unchecked {
          display: none;
        }
      }

    }
  }

  // CASE: checkbox input
  .field-checkbox .input-checkbox {
    @extend %input-tickable;
  }

  // CASE: radio input
  .field-radio .input-radio {
    @extend %input-tickable;
  }

  // CASE: file input
  input[type="file"] {
    @extend %t-copy-sub1;
  }

  .note {
    @include box-sizing(border-box);

    .title {

    }

    .copy {

    }

    // note with actions
    &.has-actions {
      @include clearfix();

      .title {

      }

      .copy {

      }

      .list-actions {

      }
    }
  }

  .note-promotion {

  }
}

// +Form - Create New
// ====================
// form styling for creating a new content item (course, user, textbook)
// TODO: refactor this into a placeholder to extend.
.form-create {
  @extend %ui-window;

  .title {
    @extend %t-title4;
    @extend %t-strong;
    padding: $baseline ($baseline*1.5) 0 ($baseline*1.5);
  }

  fieldset {
    padding: $baseline ($baseline*1.5);
  }


  .list-input {
    @extend %cont-no-list;

    .field {
      margin: 0 0 ($baseline*0.75) 0;

      &:last-child {
        margin-bottom: 0;
      }

      &.required {

        label {
          @extend %t-strong;
        }

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

      label, input, textarea {
        display: block;
      }

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

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


      input, textarea {
        @extend %t-copy-base;
        @include transition(all $tmg-f2 ease-in-out 0s);
        height: 100%;
        width: 100%;
        padding: ($baseline/2);

        &.long {
          width: 100%;
        }

        &.short {
          width: 25%;
        }

        /*@include placeholder {
          color: $gray-l3;
        }*/

        &:focus {

          + .tip {
            color: $gray;
          }
        }
      }

      textarea.long {
        height: ($baseline*5);
      }

      input[type="checkbox"] {
        display: inline-block;
        margin-right: ($baseline/4);
        width: auto;
        height: auto;

        & + label {
          display: inline-block;
        }
      }

      .tip {
        @extend %t-copy-sub2;
        @include transition(color 0.15s ease-in-out);


        display: block;
        margin-top: ($baseline/4);
        color: $gray-l3;
      }

      .tip-note {
        display: block;
        margin-top: ($baseline/4);
      }

      .tip-error {
        display: none;
        float: none;
      }

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

        .is-showing {
            @extend %anim-fadeIn;
        }

        .is-hiding {
            @extend %anim-fadeOut;
        }

        .tip-error {
          display: block;
          color: $red;
        }

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

    .field-inline {

      input, textarea, select {
        width: 62%;
        display: inline-block;
      }

      .tip-stacked {
        display: inline-block;
        float: right;
        width: 35%;
        margin-top: 0;
      }

      &.error {
        .tip-error {
        }
      }

    }

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

      .field {
        display: block;
        width: 47%;
        border-bottom: none;
        margin: 0 ($baseline*0.75) 0 0;
        padding: ($baseline/4) 0 0 0;
        float: left;
        position: relative;

        &:nth-child(odd) {
          float: left;
        }

        &:nth-child(even) {
          float: right;
          margin-right: 0;
        }

        input, textarea {
          width: 100%;
        }
      }
    }
  }

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

    .action {
      @include transition(all $tmg-f2 linear 0s);
      @extend %t-strong;
      display: inline-block;
      padding: ($baseline/5) $baseline;
      text-transform: uppercase;
    }

    .action-primary {
      @include blue-button;
      @extend %t-action2;
    }

    .action-secondary {
      @include grey-button;
      @extend %t-action2;
    }
  }
}

// +Form - Inline Name Edit
// ====================
// form - inline xblock name edit on unit, container, outline
// TODO: abstract this out into a Sass placeholder
.incontext-editor.is-editable {

  .incontext-editor-value,
  .incontext-editor-action-wrapper {
    @extend %cont-truncated;
    display: inline-block;
    vertical-align: middle;
    max-width: 80%;
  }

  .incontext-editor-open-action {
    @extend %ui-btn-non-blue;
    @extend %t-copy-base;
    padding-top: ($baseline/10);

    .icon.icon {
      vertical-align: baseline;
    }
  }

  .incontext-editor-form {
    display: none;
  }

  &.is-editing {

    .incontext-editor-value,
    .incontext-editor-action-wrapper {
      display: none;
    }

    .incontext-editor-form {
      display: inline-block;
    }
  }
}

// +Form - Create New Wrapper
// ====================
.wrapper-create-element {
  height: auto;
  opacity: 1.0;
  pointer-events: auto;
  overflow: hidden;
  display: none;

  &.animate {
    @include transition(opacity $tmg-f1 ease-in-out 0s, height $tmg-f1 ease-in-out 0s);
  }

  &.is-shown {
    display: block;
  }
}

// +Form - Grandfathered
// ====================
input.search {
  padding: 6px 15px 8px 30px;
  @include box-sizing(border-box);
  border: 1px solid $darkGrey;
  border-radius: 20px;
  background: url(../images/search-icon.png) no-repeat 8px 7px #edf1f5;
  font-family: 'Open Sans', sans-serif;
  color: $baseFontColor;
  outline: 0;

  &::-webkit-input-placeholder {
      color: #979faf;
  }
}

label {
  @extend %t-copy-sub2;
}

code {
  padding: 0 4px;
  border-radius: 3px;
  background: #eee;
  font-family: Monaco, monospace;
}

.CodeMirror {
  @extend %t-copy-sub1;
  background: $white;
  font-family: $f-monospace;
}

.text-editor {
  width: 100%;
  min-height: 80px;
  padding: 10px;
  @include box-sizing(border-box);
  border: 1px solid $mediumGrey;
  @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3));
  background-color:  #edf1f5;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
  font-family: Monaco, monospace;
}