jam-cloud/web/app/assets/stylesheets/client/react-components/ConfigureTracks.scss

@import "client/common";

.ConfigureTracks {

  .inputs-view {
    border-width:1px 0;
    border-color:$ColorText;
    border-style:solid;
    padding:20px 0;
    height:220px;

    .live-tracks {
      margin-bottom:5px;
      height:165px;
      overflow:auto;
      a {
        margin-left:3px;
      }
    }

    .live-input {
      display:inline-block;
      &:before {
        content: '('
      }
      &:after {
        content: ')'
      }
    }
    .live-track {
      margin-bottom:20px;
    }

    a.delete-live-track {
      margin-left:20px;
    }
    .assignment {
      display:inline-block;
      width:20px;
    }

    .input-track-info {
      @include border_box_sizing;
      width:60%;
      display:inline-block;

      &.one {
        .live-input {
          width:50%;
          @include border_box_sizing;
        }
      }

      &.two {
        .live-input {
          max-width:40%;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          @include border_box_sizing;
          &:nth-of-type(1) {
            padding-right:5px;
          }
          &:nth-of-type(2) {
            padding-left:5px;
          }
        }
      }
    }

    .track-type-label {
      display:inline-block;
      white-space:nowrap;
      padding-right:7px;
    }

    .plugin-info {
      @include border_box_sizing;
      width:30%;
      display:inline-block;
      white-space:nowrap;
      text-overflow: ellipsis;
      overflow:hidden;
    }

    .plugin-instrument {
      @include border_box_sizing;
      width:10%;
      display:inline-block;
      text-align:center;

      img {
        vertical-align:middle;
      }
    }
  }

  .outputs-view {
    border-width:0 0 1px;
    border-color:$ColorText;
    border-style:solid;
    padding:20px 0;

    .assignment {
      display:inline-block;
      width:20px;
    }


    .output-tracks {
      height:73px;
      overflow:auto;
      a {
        margin-left:3px;
      }
    }


    .output-track {
      margin-bottom: 20px;
    }

    .output-track-info {
      display:inline-block;
    }

    .output {
      display:inline-block;
      margin-bottom:0 !important;
      &:before {
        content: '('
      }
      &:after {
        content: ')'
      }
    }
  }
  h3 {
    display:inline-block;
    font-size:14px;
    margin:0 0 20px;
    @include border_box_sizing;
    &.session-audio-inputs-header {
      color:white;
      font-weight:bold;
      width:60%;
    }

    &.session-audio-outputs-header {
      color:white;
      font-weight:bold;
      width:60%;
    }

    &.plugin-header {
      width:30%;
    }
    &.instrument-header {
      width:10%;
      text-align:center;
    }
  }
  .live-track-actions {
    display:block;
    padding-left: 17px;
    margin-top: 5px;
    a {
      font-size:12px;
    }
  }
}