Mailspring/static/components/generated-form.less

@import "ui-variables";

@spacing-form: 22px;
@form-margin: 15px;

body.platform-win32 {
  .generated-form {
    .tokenizing-field {
      border-radius: 0;
      border: 0;
      border-radius: 0;
      box-shadow: 0 0 0 2px @input-border-color;

      &.focused {
        border: 0;
        border-radius: 0;
        box-shadow: 0 0 0 2px darken(@input-border-color, 20%);
      }
    }
  }
}

body.is-blurred, body.platform-win32.is-blurred {
  .generated-form {
    .tokenizing-field {
      &.focused {
        border: 1px solid @input-border-color;
        box-shadow: none;
      }
    }
    .form-item .input-area select:focus {
      box-shadow: none;
    }
    .btn:focus {
      box-shadow: none;
    }
  }
}

.generated-form {
  position: relative;

  fieldset {
    legend {
      color: fade(@black, 40%);
      font-size: 1.4em;
    }
    margin: 0;
    padding: 22px @spacing-form 22px @spacing-form;
    border: 0;
    border-top: 1px solid rgba(0,0,0,0.08);
    border-bottom: 1px solid rgba(0,0,0,0.03);
    &:first-child {
      border-top: 0;
    }
  }

  .prefilled-message {
    text-align: center;
    padding: @padding-base-vertical @padding-base-horizontal;
    background: @background-secondary;
    margin: 20px auto 0;
    width: 340px;
    border-radius: @border-radius-large;

    .highlighted {
      color: @color-success;
    }
  }

  .tokenizing-field {
    border: 1px solid @input-border-color;
    border-radius: @border-radius-base;

    &.focused {
      border: 1px solid @accent-primary;
      box-shadow: 0 0 1.5px @accent-primary;
    }
  }

  .form-item {
    display: flex;
    margin-top: @form-margin;
    &:first-child { margin-top: 0; }
    flex-direction: column;

    &.invalid {
      .label-area {
        color: @color-error;
      }
    }

    .label-area {
    }

    .required {
      color: @color-danger;
    }

    &.prefilled .input-area input {
      border: 1px solid @color-success;
    }

    .input-area {
      position: relative;
      margin-top: 0.3em;

      select {
        margin-top: 2px;
        &:focus {
          border: 1px solid @accent-primary;
          box-shadow: 0 0 1.5px @accent-primary;
        }
      }
    }

    .form-error {
      color: @color-error;
      font-size: @font-size-smaller;
      margin-top: 0.3em;
    }

    input, select[multiple], textarea {
      padding: 5px 8px;
    }
    .tokenizing-field-input {
      overflow: hidden;
      padding: 0 5px 5px 5px;
      margin-left: 0;
      .placeholder {
        font-size: 14px;
      }

      .token {
        padding: 0 20px 0 28px;
        margin: 5px 5px 0 0;

        &.selected {
          border: 0;
        }
      }

      input {
        margin: 5px 0 0 0;
        padding: 0;
        line-height: 26px;
      }
    }

    textarea {
      width: 100%;
      border: 1px solid @input-border-color;
    }
  }

  .menu .item {
    padding-left: 8px;
    padding-right: 8px;
  }

  .fieldset-form-items {
    .row {
      position: relative;
      display: flex;
      flex-direction: row;
      margin-top: @form-margin;
    }
    .column {
      flex: 1;
      &:last-child {
        margin-right: 0;
      }
    }
    .column-spacer {
      width: 22px;
    }
  }

  .form-footer {
    background: @background-off-primary;
    border-top: 1px solid darken(@background-off-primary, 7%);
    padding: 9px 22px;
  }

  .btn {
    &:focus {
      box-shadow: 0 0 6px @btn-emphasis-bg-color;
    }
  }

  .form-header-error {
    background: @color-error;
    color: @text-color-inverse;
    text-align: center;
    font-weight: @font-weight-semi-bold;
    margin-bottom: 5px;
    padding: 0.5em;
  }

  .last-fieldset {
    .content-container {
      position: relative;
    }
  }

  /* NOTE: We intentionally don't use the HTML :valid :invalid CSS pseudo
   * selectors since we can't set them declaratively with React.
  input, textarea {
    &:valid { }
    &:invalid { }
  }
  */
}