Farmbot-Web-App/frontend/css/sequences.scss

.farmware-input-panel,
.sequence-editor-panel,
.regimen-editor-panel {
  margin: -3rem -1.5rem -3rem;
  height: calc(100vh - 5rem);
  background: $light_gray;
  @media screen and (max-width: 767px) {
    display: none;
    &.open {
      display: block;
      &.farmware-info-open,
      &.inserting-item,
      &.inserting-step {
        display: none;
      }
    }
    margin-bottom: 3rem;
  }
  padding: 3rem 1.5rem 8rem;
  overflow: hidden;
  .bp3-popover-target .saucer {
    float: left;
    margin-top: 0.4rem;
  }
  @media screen and (max-width: 767px) {
    h3,
    p {
      margin-left: 15px;
      margin-right: 15px;
    }
    h3 {
      margin-bottom: 2.5rem;
    }
    .button-group {
      margin-right: 15px;
      margin-top: -1rem;
    }
    .title-help-text {
      padding-left: 15px;
      padding-right: 15px;
    }
  }
}

.farmware-input-panel {
  padding-left: 0;
  padding-right: 0;
  h3 {
    padding-left: 15px;
  }
  .title-help-text {
    padding-left: 15px;
    padding-right: 15px;
  }
  @media screen and (max-width: 767px) {
    .title-help-text {
      padding-left: 3rem;
      padding-right: 3rem;
    }
  }
}

.farmware-input-panel-contents,
.sequence-editor-content,
.regimen-editor-content {
  margin-right: -15px;
  @media screen and (max-width: 767px) {
    margin-left: 15px;
    margin-right: 0;
  }
}

.sequence-editor-content {
  hr {
    margin-right: 15px;
  }
}

.sequence-editor-tools,
.regimen-editor-tools {
  margin-right: 15px;
  @media screen and (max-width: 767px) {
    margin-right: 10px;
  }
  .locals-list {
    margin-top: 1rem;
    max-height: 25rem;
    overflow-y: auto;
    overflow-x: hidden;
  }
}

.locals-list {
  >.location-form {
    margin: auto;
    margin-top: 1rem;
    width: 80%;
    max-width: 40rem;
    background: $off_white;
    label {
      margin-top: 0;
    }
    >.location-form-header {
      width: 100%;
      background: darken($off_white, 5%);
      padding: 1rem;
      i {
        float: right;
        font-size: 2rem;
        color: $dark_gray;
      }
    }
    >.location-form-content {
      padding: 1rem;
    }
  }
}

.sequence,
.regimen {
  width: 100%;
  height: calc(100vh - 25rem);
  overflow-y: auto;
  overflow-x: hidden;
  margin-top: 15px;
}

.farmware-input-panel-contents {
  padding: 15px;
  width: 100%;
  height: calc(100vh - 18rem);
  overflow-y: auto;
  overflow-x: hidden;
  margin-top: 15px;
}

.sequence-steps {
  margin-right: 25px;
  margin-left: 10px;
}

.step-button-cluster,
.sequence-list,
.regimen-list {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100vh - 21rem);
}

.step-button-cluster,
.sequence-list {
  margin-right: -15px;
}

.farmware-info-panel,
.step-button-cluster-panel {
  @media screen and (max-width: 767px) {
    display: none;
    &.farmware-info-open,
    &.inserting-step {
      display: block;
    }
    margin-left: 15px;
    margin-right: 15px;
  }
}

.step-button-cluster {
  @media screen and (max-width: 767px) {
    width: 40rem;
  }
}

.farmware-info-panel button {
  margin-bottom: 3rem;
}

.step-button-cluster {
  @media screen and (max-width: 767px) {
    margin-left: 0;
    margin-right: 0;
  }
}

.farmware-list-items,
.sequence-list-items,
.regimen-list {
  button {
    text-align: left;
    label {
      width: 90%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      margin-top: 0.5rem;
      float: left;
    }
  }
  i {
    float: right;
    margin-top: 0.75rem;
  }
}

.sequence-list-items {
  margin-right: 15px;
}

.farmware-list-panel,
.sequence-list-panel,
.regimen-list-panel {
  padding-top: 0.4rem;
  margin-bottom: 3rem;
  margin-right: 5px;
  @media screen and (max-width: 1075px) {
    margin-left: 15px;
  }
  .empty-state {
    display: none;
    .empty-state-graphic {
      margin-top: 25%;
    }
  }
  @media screen and (max-width: 767px) {
    &.open {
      display: none;
    }
    margin-left: 15px;
    margin-right: 15px;
    .empty-state {
      display: block;
    }
  }
  .panel-top {
    margin: 0;
    .text-input-wrapper {
      margin: 0.1rem;
      margin-right: 1rem;
    }
  }
}

.farmware-list-panel {
  margin-bottom: 5rem;
  label {
    font-weight: bold;
    font-size: 1.4rem;
  }
  p {
    font-size: 1.2rem;
  }
}

.farmware-list-items {
  margin-left: -15px;
}

.farmware-input-panel-contents {
  @media screen and (max-width: 767px) {
    margin-left: 15px;
    margin-right: 15px;
    padding-right: 5rem;
  }
}

.back-to-regimens,
.back-to-sequences {
  display: none;
  &.open {
    @media screen and (max-width: 767px) {
      display: block;
      margin-top: -2rem;
      float: left !important;
      height: 6rem;
      width: 4rem;
      font-size: 2rem;
      text-align: center;
      line-height: 6rem;
      margin-left: 15px;
      &.inserting-step,
      &.inserting-item {
        margin-left: 0;
      }
    }
  }
}

.back-to-farmware {
  display: none;
  &.open {
    @media screen and (max-width: 767px) {
      display: block;
      margin: 4rem;
      margin-top: 0;
      margin-left: 2rem;
      float: left !important;
      i {
        margin-right: 1rem;
      }
    }
  }
}

.drag-drop-area {
  @media screen and (max-width: 767px) {
    display: none;
  }
}

.add-command-button-container {
  display: none;
  @media screen and (max-width: 767px) {
    display: block;
    min-height: 3rem;
    .add-command {
      display: block;
      margin: auto;
      margin-top: 1rem;
      float: none !important;
    }
  }
}

.farmware-info-button {
  display: none;
  @media screen and (max-width: 767px) {
    &.open {
      display: block;
      margin: 4rem;
      margin-top: 0;
      margin-left: 2rem;
    }
    &.farmware-info-open {
      display: none;
    }
  }
}