strong-arc/client/less/build-deploy/build-deploy.less

A visual suite for the StrongLoop API Platform

.sl-build-deploy {
  @min-width: 1024px;
  padding: 0;
  margin-top: 4rem;
  min-width: @min-width;

  .sl-forms-toggler {
    display: block;
    text-align: center;
    width: 30rem;
    margin: auto;
    min-width: @min-width;
    margin-bottom: 4rem;
    position: relative;

    .ui-popover {
      position: absolute;
      left: 50%;
      margin-left: 13.75rem;
      top: .75rem;

      > .sl-icon {
        font-size: 21px;
      }
    }
  }

  .sl-forms-toggler-inline {
    width: 24rem;
    display: block;
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -12rem;
    height: 100%;
    bottom: 0;

    h4 {
      color: @gray-light;
      font-weight: 300;
      font-size: 2.1rem;
      text-align: left;
      margin-top: 0;
      margin-bottom: .75rem;
    }

    .sl-toggler {
      background: @gray-lighter;
      padding: 1.5rem 1rem 1rem;
      height: 90%;
    }
  }

  .sl-forms {
    .clearfix;
//    width: @min-width;
    margin: 0 auto;
    text-align: center;
    position: relative;
    height: 30.5rem;

    .pm-host-selector-container {
      display:inline-block;

      button.dropdown-toggle {
        min-width:24rem;
        border: 1px solid #cccccc;
        text-align: left;
        color:#444444;
        padding:.75rem 1rem;

      }
    }

    .sl-forms-left, .sl-forms-right {
      display: block;
      width: 38rem;
      //height: 30rem;
      text-align: left;
      position: absolute;
      left: 50%;

      &.sl-forms-left {
        margin-left: -51rem;
      }

      &.sl-forms-right {
        margin-left: 13rem;
      }

      form {
        width: 100%;
        min-height: 28rem;

        &.disabled {
          opacity: .4;
        }

        &[name=deploygit] {
          .ui-actions {
            margin-right:5rem;
          }
        }
        &[name=deployuniversal] {
          input[name=archive] {
            width: 31rem;
          }
        }

        //align action buttons
        &[name=builduniversal] {
          .ui-actions {
            margin-top: 10rem;

            button:active {
              background-color:@default-primary-active-color;
            }
          }
        }

        //align action buttons
        &[name=buildgit] {
          .ui-actions {

            margin-top: 1.53rem;

            button:active {
              background-color:@default-primary-active-color;
            }
          }
        }

        //align action buttons
        &[name=deployuniversal] {
          .ui-actions {
            margin-right:5rem;
            button:active {
              background-color:@default-primary-active-color;
            }
          }
        }


        fieldset {
          margin-bottom: 1rem;
        }

        .sl-server {
          label {
            display: inline-block;
            margin-right: 1rem;

            span {
              margin-bottom: 5px;
              display: block;
            }

            input {
              display: block;
            }

            &:nth-child(1){
              input {
                width: 16rem;
              }
            }

            &:nth-child(2) {
              input {
                width: 6rem;
              }
            }

            &:nth-child(3) {
              input {
                width: 7rem;
              }
            }
          }
        }

        .sl-actions {
          text-align: right;
        }
      }
    }
  }

  .ui-popover  > .sl-icon {
      color: #ccc;
  }
}

.sl-build-deploy-nav {
  color: @white;
  padding: 1rem;
}