/**
 * form.
 *
 * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
 * @version 0.1.0.0, Oct 11, 2017
 */

.pipe-form {
  table {
    width: 100%;
  }

  input[type=text],
  input[type=datetime],
  input[type=datetime-local],
  input[type=password],
  input[type=number],
  select,
  textarea {
    border: 1px solid #d1d5da;
    background-color: #FAFAFA;
    border-radius: 3px;
    box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075);
    padding: 7px 8px;
    width: 100%;
    line-height: 17px;
    box-sizing: border-box;
  }

  input[type=text]:focus,
  input[type=datetime]:focus,
  input[type=datetime-local]:focus,
  input[type=password]:focus,
  input[type=number]:focus,
  select:focus,
  textarea:focus {
    background-color: #FFF;
    box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075), 0 0 0 0.2em #dbedff;
    border: 1px solid $blue;
  }

  label {
    color: $black-light;
    font-size: 15px;
    margin: 10px 0 5px;
    float: left;
  }
}

// button
.pipe-btn {
  cursor: pointer;
  color: $black;
  border-radius: 3px;
  padding: 6px 12px;
  background-color: rgba(0, 0, 0, .02);
  border: 1px solid #D5D5D5;
  border-bottom-color: #E1E1E1;
  box-sizing: border-box;
  line-height: 19px;
  white-space: nowrap;

  svg {
    margin-top: 2px;
  }

  &:disabled {
    opacity: 0.3;
  }

  &:hover {
    text-decoration: none;
    border-color: $fade;
    background-color: #eee;
  }

  &:active {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) inset;
  }

  &--success {
    color: #fff;
    background-color: #60b044;
    border-color: #60b044;
    &:hover {
      border-color: $green;
      background-color: $green;
    }
  }

  &--danger {
    color: $red;
    &:hover {
      color: #FFF;
      border-color: $red;
      background-color: $red;
    }
  }

  &--space {
    margin-left: 10px;
  }
}