<commit_before>@import 'stylr/base';

$stylr-form-label-width: 150px !default;
$stylr-form-label-padding: 5px !default;
$stylr-form-label-full-width: $stylr-form-label-width + ($stylr-form-label-padding * 2) !default;
$stylr-form-error-text-color: desaturate(darken(#ff0000, 10%), 25%);
$stylr-form-error-background-color: lighten(#ff0000, 40%);

@mixin stylr-form {
  @include leader(1);
  @include trailer(1);

  // defaults
  label, input, select, textarea {
    font-family: $stylr-font-family;
    font-size: $stylr-font-size;
    font-weight: normal;
    line-height: $stylr-line-height;
    color: $stylr-text-color;
    @include inline-block();
  }

  input[type=text],
  input[type=password],
  textarea,
  select {
    @include border-radius(3px);
    width: 210px;
    margin: 0;
    padding: 5px;
    border: 1px solid $stylr-gray-color;

    &.normal {
      width: 210px;
    }

    &.large {
      width: 260px;
    }

    &.xlarge {
      width: 390px;
    }

    &.small {
      width: 100px;
    }

    &.xsmall {
      width: 50px;
    }

    &.xxsmall {
      width: 25px;
    }
  }

  textarea {
    height: auto;
  }

  div.input {
    @include trailer(.5);
    padding-left: $stylr-form-label-full-width;

    &.disabled {
      label {
        color: $stylr-muted-text-color;
      }
    }
  }

  label {
    font-size: $stylr-font-size;
    line-height: $stylr-line-height;
    width: $stylr-form-label-width;
    padding: $stylr-form-label-padding;
    text-align: right;
    margin: 0;
    margin-left: -$stylr-form-label-full-width;
  }

  // validation errors
  .field_with_errors {
    background: $stylr-form-error-background-color;
    padding: 5px;
    @include border-radius(4px);

    .error {
      color: $stylr-form-error-text-color;
      display: block;
      line-height: $stylr-line-height;
      font-size: 90%;
    }

    > label {
      color: $stylr-form-error-text-color;
    }
  }

  // hints
  .hint {
    color: $stylr-muted-text-color;
    line-height: $stylr-line-height;
    font-size: 90%;
    display: block;
  }

  // actions (the buttons)
  .actions {
    @include leader(1);
    @include trailer(1);
    @include border-radius(0 0 3px 3px);

    background: $stylr-light-gray-color;
    padding: ($stylr-line-height - 1) 20px $stylr-line-height $stylr-form-label-full-width;
    border-top: 1px solid $stylr-gray-color;

    // a {
    //   @include inline-block();
    //   vertical-align: baseline;
    //   padding: 4px 0;
    //   line-height: $stylr-line-height;
    //   text-decoration: none;
    //   &:hover {
    //     text-decoration: underline;
    //   }
    // }

    // * {
    //   margin-right: 5px;
    // }

    // :last-child {
    //   margin-right: 0;
    // }
  }

  // placeholder text gets special styles; can't be bundled together though for some reason
  input:-moz-placeholder {
    color: $stylr-muted-text-color;
  }

  input::-webkit-input-placeholder {
    color: $stylr-muted-text-color;
  }

  // input is disabled or read-only
  input[readonly],
  input[disabled] {
    background: $stylr-light-gray-color;
  }

  // focus states
  input[type=text],
  input[type=password],
  select,
  textarea {
    @include transition(border .2s linear, box-shadow .2s linear);
    @include box-shadow(rgba(0, 0, 0, .1) 0 1px 3px inset);
  }

  input[type=text]:focus,
  input[type=password]:focus,
  select:focus,
  textarea:focus {
    outline: none;
    border-color: rgba($stylr-primary-color, 0.7);
    @include box-shadow(
      rgba($stylr-primary-color, 0.1) 0 1px 3px inset,
      rgba($stylr-primary-color, 0.6) 0 0 8px
    );
  }
  .field_with_errors {
    input[type=text]:focus,
    input[type=password]:focus,
    select:focus,
    textarea:focus {
      outline: none;
      border-color: rgba($stylr-form-error-text-color, 0.7);
      @include box-shadow(
        rgba($stylr-form-error-text-color, 0.1) 0 1px 3px inset,
        rgba($stylr-form-error-text-color, 0.6) 0 0 8px
      );
    }
  }

  // Checkboxes & Radio
  div.check_boxes,
  div.radio {
    span {
      @include inline-block();
      margin-right: 5px;
    }
    span:last-child {
      margin-right: 0;
    }

    input.check_boxes,
    input.radio {
      margin-left: 3px;
    }

    label.collection_check_boxes,
    label.collection_radio {
      width: auto;
      margin: 0;
      margin-left: 2px;
      padding: 0;
    }
  }

  // Inline inputs
  div.input.inline {
    div.input {
      @include inline-block();
      margin: 0;
      padding-left: 0;

      &.field_with_errors {
        padding: 5px;
      }

      label {
        width: auto;
        margin-left: 0;
        padding-left: 0;
      }
    }
  }
}
<commit_msg>Added support for email text fields.<commit_after>@import 'stylr/base';

$stylr-form-label-width: 150px !default;
$stylr-form-label-padding: 5px !default;
$stylr-form-label-full-width: $stylr-form-label-width + ($stylr-form-label-padding * 2) !default;
$stylr-form-error-text-color: desaturate(darken(#ff0000, 10%), 25%);
$stylr-form-error-background-color: lighten(#ff0000, 40%);

@mixin stylr-form {
  @include leader(1);
  @include trailer(1);

  // defaults
  label, input, select, textarea {
    font-family: $stylr-font-family;
    font-size: $stylr-font-size;
    font-weight: normal;
    line-height: $stylr-line-height;
    color: $stylr-text-color;
    @include inline-block();
  }

  input[type="text"],
  input[type="password"],
  input[type="email"],
  textarea,
  select {
    @include border-radius(3px);
    width: 210px;
    margin: 0;
    padding: 5px;
    border: 1px solid $stylr-gray-color;

    &.normal {
      width: 210px;
    }

    &.large {
      width: 260px;
    }

    &.xlarge {
      width: 390px;
    }

    &.small {
      width: 100px;
    }

    &.xsmall {
      width: 50px;
    }

    &.xxsmall {
      width: 25px;
    }
  }

  textarea {
    height: auto;
  }

  div.input {
    @include trailer(.5);
    padding-left: $stylr-form-label-full-width;

    &.disabled {
      label {
        color: $stylr-muted-text-color;
      }
    }
  }

  label {
    font-size: $stylr-font-size;
    line-height: $stylr-line-height;
    width: $stylr-form-label-width;
    padding: $stylr-form-label-padding;
    text-align: right;
    margin: 0;
    margin-left: -$stylr-form-label-full-width;
  }

  // validation errors
  .field_with_errors {
    background: $stylr-form-error-background-color;
    padding: 5px;
    @include border-radius(4px);

    .error {
      color: $stylr-form-error-text-color;
      display: block;
      line-height: $stylr-line-height;
      font-size: 90%;
    }

    > label {
      color: $stylr-form-error-text-color;
    }
  }

  // hints
  .hint {
    color: $stylr-muted-text-color;
    line-height: $stylr-line-height;
    font-size: 90%;
    display: block;
  }

  // actions (the buttons)
  .actions {
    @include leader(1);
    @include trailer(1);
    @include border-radius(0 0 3px 3px);

    background: $stylr-light-gray-color;
    padding: ($stylr-line-height - 1) 20px $stylr-line-height $stylr-form-label-full-width;
    border-top: 1px solid $stylr-gray-color;

    // a {
    //   @include inline-block();
    //   vertical-align: baseline;
    //   padding: 4px 0;
    //   line-height: $stylr-line-height;
    //   text-decoration: none;
    //   &:hover {
    //     text-decoration: underline;
    //   }
    // }

    // * {
    //   margin-right: 5px;
    // }

    // :last-child {
    //   margin-right: 0;
    // }
  }

  // placeholder text gets special styles; can't be bundled together though for some reason
  input:-moz-placeholder {
    color: $stylr-muted-text-color;
  }

  input::-webkit-input-placeholder {
    color: $stylr-muted-text-color;
  }

  // input is disabled or read-only
  input[readonly],
  input[disabled] {
    background: $stylr-light-gray-color;
  }

  // focus states
  input[type="text"],
  input[type="password"],
  input[type="email"],
  select,
  textarea {
    @include transition(border .2s linear, box-shadow .2s linear);
    @include box-shadow(rgba(0, 0, 0, .1) 0 1px 3px inset);
  }

  input[type="text"]:focus,
  input[type="password"]:focus,
  input[type="email"]:focus,
  select:focus,
  textarea:focus {
    outline: none;
    border-color: rgba($stylr-primary-color, 0.7);
    @include box-shadow(
      rgba($stylr-primary-color, 0.1) 0 1px 3px inset,
      rgba($stylr-primary-color, 0.6) 0 0 8px
    );
  }
  .field_with_errors {
    input[type=text]:focus,
    input[type=password]:focus,
    select:focus,
    textarea:focus {
      outline: none;
      border-color: rgba($stylr-form-error-text-color, 0.7);
      @include box-shadow(
        rgba($stylr-form-error-text-color, 0.1) 0 1px 3px inset,
        rgba($stylr-form-error-text-color, 0.6) 0 0 8px
      );
    }
  }

  // Checkboxes & Radio
  div.check_boxes,
  div.radio {
    span {
      @include inline-block();
      margin-right: 5px;
    }
    span:last-child {
      margin-right: 0;
    }

    input.check_boxes,
    input.radio {
      margin-left: 3px;
    }

    label.collection_check_boxes,
    label.collection_radio {
      width: auto;
      margin: 0;
      margin-left: 2px;
      padding: 0;
    }
  }

  // Inline inputs
  div.input.inline {
    div.input {
      @include inline-block();
      margin: 0;
      padding-left: 0;

      &.field_with_errors {
        padding: 5px;
      }

      label {
        width: auto;
        margin-left: 0;
        padding-left: 0;
      }
    }
  }
}

{'fraction_non_alphanumeric': 0.15282741223460164, 'fraction_numerical': 0.02312381753205802, 'mean_word_length': 2.1908115358819584, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7136732', 'n_tokens_mistral': 3833, 'n_tokens_neox': 3534, 'n_words': 650}