jam-cloud/web/app/assets/stylesheets/client/teachers.scss

@import "client/common.scss";
@import "client/screen_common.scss";

.teacher-setup {
  font-family: Raleway, Arial, Helvetica, verdana, arial, sans-serif;

  .content-body-scroller {
    padding:20px;
    @include border_box_sizing;
  }
  .editable-scroller {
    width:265px
  }
  h2 {
    margin-bottom: 0.75em;
  }

  .TeacherSetupComponent {
    @include border_box_sizing;
    position: relative;
    height: 100%;

  }

  // introduction
  .teacher-setup-step-0 {
    .TeacherSetupNav {
      clear: both;
      margin-right:calc(5% - 20px);
      @include border_box_sizing;
      float: right;
    }
  }

  // basics
  .teacher-setup-step-1 {
    .TeacherSetupNav {
      clear: both;
      margin-right:3px;
      @include border_box_sizing;
      float: right;
    }
  }

  // experience
  .teacher-setup-step-2 {
    .TeacherSetupNav {
      clear: both;
      margin-right: calc(100% - 833px);
      @include border_box_sizing;
      float: right;
    }
  }


  // experience
  .teacher-setup-step-3 {
    .TeacherSetupNav {
      clear: both;
      margin-right: 22px;
      @include border_box_sizing;
      float: right;
    }

    .teacher-field {
      margin-bottom:10px !important;
      .icheckbox_minimal {
        display:inline-block;
        position:relative;
        top:4px;
        margin-right:4px;
      }

      &.pricing-field {
        margin-top:1px;
      }
    }
    .teacher-half-column {
      &.pricing-options {
        width:40% !important;
      }

      &.pricing-amounts {
        width:60% !important;
      }
    }

    .minute-label label {
      text-align:right;
    }

    .pricing-amount-text-prompt {
        margin-left:14%;
    }
  }

  .TeacherSetupBasics {
    .teacher-half-column {
      margin-top:20px;
    }

    .student-levels, .student-ages {
      margin-top:20px;
      margin-bottom:7px;
    }
    .icheckbox_minimal.student-level  {
      top: 3px;
      margin-right: 5px;
    }
    input.student-level {
      display:inline;
      margin-right:10px;
    }
    span.student-level {
      display:inline;
      margin-right:30px;
    }
    select {
      width:auto !important;
      display:inline !important;
    }
    .age-to-age {
      margin:0 10px;
      display:inline;
    }
  }

  .EditableList .list-item {
    position:relative;

    .actions {
      position:absolute;
      top:2px;
      right:0;
    }

    .display-value {
      margin:2px 10px 2px 2px;
    }
  }

  h3.margined {
    font-size:16px;
    margin-top: 20px;
    margin-bottom: 10px;
  }

  .inline {
    display: inline;
    //width: auto !important;
  }

  h3 {
    font-size:16px;
  }

  .teacher-setup-form {
    padding: 1em;
    .error-text {
      display: block;
      //background-color: #600;
      color: #f00;
    }
    .teacher-small-column {
      width:35%;
    }

    .teacher-big-column {
      width: 60%;
      margin-right:20px;
    }

    .teacher-quarter-column {
      @extend .w25;
      min-width:200px;
      @include border_box_sizing;
      float:left;
      padding: 0 10px;

      &:first-child {
        padding-left:0;
      }

      &:last-child {
        padding-right:0;
      }
    }

    .teacher-half-column {
      width:50%;
      @include border_box_sizing;
      float:left;
      padding: 0 10px;

      &:first-child {
        padding-left:0;
      }

      &:last-child {
        padding-right:0;
      }
    }

    .teacher-third-column {
      @include border_box_sizing;
      min-width: 1px;
      width: 33%;
      float: left;
      padding-right: 1em;

      &.per-lesson, &.per-month {
        input{
          float:right;
          width:calc(100% - 12px);
        }
      }
    }


    .money-type {
      position: relative;
      top: 4px;
    }


    table.form-table {
      width: 100%;
      margin-bottom: 1em;
      label, input, select {
        width: 100%;
        margin: 4px 4px 4px 0px;
      }

      .inline-fields {
        display: inline;
        label, input, select {
          display: inline;
          width: auto;          
        }
      }
    }

    .enter-url {
      font-size:12px;
      margin-top:4px;
    }

    .delete-list-item {
      color:$ColorTextTypical;
    }
    .TeacherSetupExperience {
      .year-range-cell {
        text-align:center;
        display:inline-block;
        width:165px;
      }
      select[name="start_year"] {
        float:left;
        margin:0 !important;
        display:inline-block;
        width:auto !important;
      }
      select[name="end_year"] {
        float:right;
        margin:0 !important;
        display:inline-block;
        width:auto !important;
      }
      label[for="end-year"] {
        vertical-align: middle;
        margin-top: 1px;
        display: inline-block;
      }
      .add-experience-btn {
        width:80px;
        font-size:12px;
        margin-right:0;
      }
      .teacher-third-column {
        width:280px;
      }
      .teacher-field {
        margin-bottom: 10px;
      }
    }

    .teacher-field {
      @include border_box_sizing;
      margin-bottom: 30px;

      &.title {
        label {
          width:100px;
          display:inline-block;
        }
        input {
          width:165px;
          display:inline-block;
        }
      }
      &.organization {
        label {
          width:100px;
          display:inline-block;
        }
        input {
          width:165px;
          display:inline-block;
        }
      }
      &.date {
        label {
          width:100px;
          display:inline-block;

          &[for="end-year"] {
            width:auto !important;
            height: 12px;
            vertical-align: middle;
            line-height: 12px;
          }
        }
        select {
          width:70px !important;
        }
      }
      input, select, textarea {
        @include border_box_sizing;
        overflow: hidden;
        width:100%;
      }

      input[type="number"] {
        height: 24px;
        width:45px;
      }

      input[type="checkbox"] {
        display: inline;
        width: auto;
        vertical-align: center;
        padding: 4px;
      }

      em {
        font-style: italic;
      }

      label {
        padding: 4px 0;
      }

      label.checkbox-label {
        display: inline;        
      }

      textarea {
        height: auto;
        overflow:hidden;
      }
    }
  }


  label.strong-label {
    font-weight: bold;
    font-size: 1.1em;
  }

  h3.sub-caption {
    font-weight: normal;
    font-size: 18px;
    margin: 8px 4px 8px 0px;
    text-transform: uppercase;
  }


  .test-drive-explain {
    margin-top:20px;
    line-height:125%;
  }

  .teacher-field.teaches_test_drive_container {
    select {
      margin:0 20px;
      width:auto;
      display:inline-block;
    }
  }
  .learn-more-about-test-drive {
    margin-left:50px;
  }
}