<commit_before>@import "bourbon/bourbon"
@import "util/exports"
@import "placeholder/no-select"
@import "colors/default"
@import "vars/input"
@import "vars/component"
@import "vars/validation-messages"

+exports("input/input")

  $label:               #{$prefix}label
  $length-label:        #{$prefix}#{$input-length-indicator-class}
  $validation-messages: #{$prefix}#{$validation-msg-ul-class}
  $validation-hint:     #{$prefix}#{$validation-msg-hint-class}
  $validation-warning:  #{$prefix}#{$validation-msg-warning-class}
  $validation-error:    #{$prefix}#{$validation-msg-error-class}

  $input-padding-top: 0.4em

  =border-color($color)
    .#{$prefix}input-container
      border-bottom-color: $color
      &::after
        background-color: $color

  +keyframes(input-bump-shake)
    10%, 90%
      transform: translate3d(-1px, 0, 0)
    20%, 80%
      transform: translate3d(0, 0, 0)
    30%, 50%, 70%
      transform: translate3d(-2px, 0, 0)
    40%, 60%
      transform: translate3d(0, 0, 0)

  #{$prefix}#{$input-tag}
    display: none
    &[rendered]
      display: block

  .#{$prefix}#{$input-class}
    +transform(translate3d(0, 0, 0))
    margin-bottom: 2.5em

    .#{$label}, .#{$length-label}, .#{$validation-messages}
      @extend %no-select

    .#{$label}
      +transform-origin(top left)
      +transition-property(scale, transform, color)
      +transition-duration(230ms)
      +transition-timing-function($ease-in-out-cubic, $ease-in-out-cubic, linear)
      cursor: text
      display: block

    // When the input is empty, expand-down the label.
    &.#{$prefix}empty .#{$label}
      +transform(scale(1.176) translate(0.13em, 1.1em + $input-padding-top))
      +filter(blur(0))

    .#{$validation-messages}, .#{$length-label}
      position: absolute
      display: inline-block
      padding-top: 0.2em

    .#{$validation-messages}
      +transition(all 500ms)
      +transform(translateY(-0.4em))
      left: 0
      padding-left: 0.2em
      font-weight: 500
      opacity: 0
      margin: 0
      list-style: none

      li
        +transition(all 500ms)
        opacity: 0

        &.#{$validation-hint},
        &.#{$validation-warning},
        &.#{$validation-error}
          opacity: 1

    .#{$validation-warning}
      color: $validation-msg-warning-color

    .#{$validation-error}
      color: $validation-msg-error-color

    .#{$length-label}
      right: 0

    &.#{$prefix}max-length-warn .#{$length-label}
      color: $color-warn

    &.#{$prefix}max-length .#{$length-label}
      color: $color-danger

    .#{$prefix}input-container
      +transition(border-color $input-border-transition-time)
      border-bottom: 1px solid $input-border-color
      &::after
        +transition(all $input-border-transition-time)
        content: ''
        position: absolute
        width: 100%
        height: 1px
        bottom: -1px
        left: 0

    input
      +transform-origin(top right)
      +transition-property(color, transform)
      +transition-duration($bump-time, $bump-time)
      +transition-timing-function($ease-out-quint, linear)
      font-weight: 500
      display: block
      margin: 0
      padding: $input-padding-top 0.1em 0.2em
      border: none
      background: transparent
      width: 100%

    &, input, input:focus
      outline: none !important

    &.#{$prefix}#{$bump} input
      +animation(input-bump-shake $bump-time infinite)
      color: $input-bump-color


    &.#{$prefix}focus,
    &.#{$validation-error},
    &.#{$validation-warning}
      .#{$validation-messages}<commit_msg>Add font settings to input styles.<commit_after>@import "bourbon/bourbon"
@import "util/exports"
@import "placeholder/no-select"
@import "colors/default"
@import "typography/fonts"
@import "vars/input"
@import "vars/component"
@import "vars/validation-messages"

+exports("input/input")

  $label:               #{$prefix}label
  $length-label:        #{$prefix}#{$input-length-indicator-class}
  $validation-messages: #{$prefix}#{$validation-msg-ul-class}
  $validation-hint:     #{$prefix}#{$validation-msg-hint-class}
  $validation-warning:  #{$prefix}#{$validation-msg-warning-class}
  $validation-error:    #{$prefix}#{$validation-msg-error-class}

  $input-padding-top: 0.4em

  =border-color($color)
    .#{$prefix}input-container
      border-bottom-color: $color
      &::after
        background-color: $color

  +keyframes(input-bump-shake)
    10%, 90%
      transform: translate3d(-1px, 0, 0)
    20%, 80%
      transform: translate3d(0, 0, 0)
    30%, 50%, 70%
      transform: translate3d(-2px, 0, 0)
    40%, 60%
      transform: translate3d(0, 0, 0)

  #{$prefix}#{$input-tag}
    display: none
    &[rendered]
      display: block

  .#{$prefix}#{$input-class}
    +transform(translate3d(0, 0, 0))
    margin-bottom: 2.5em

    .#{$label}, .#{$length-label}, .#{$validation-messages}
      @extend %no-select
      +font-caption(delta, null, null, false)

    .#{$label}
      +transform-origin(top left)
      +transition-property(scale, transform, color)
      +transition-duration(230ms)
      +transition-timing-function($ease-in-out-cubic, $ease-in-out-cubic, linear)
      cursor: text
      display: block

    // When the input is empty, expand-down the label.
    &.#{$prefix}empty .#{$label}
      +transform(scale(1.176) translate(0.13em, 1.1em + $input-padding-top))
      +filter(blur(0))

    .#{$validation-messages}, .#{$length-label}
      position: absolute
      display: inline-block
      padding-top: 0.2em

    .#{$validation-messages}
      +transition(all 500ms)
      +transform(translateY(-0.4em))
      left: 0
      padding-left: 0.2em
      font-weight: 500
      opacity: 0
      margin: 0
      list-style: none

      li
        +transition(all 500ms)
        opacity: 0

        &.#{$validation-hint},
        &.#{$validation-warning},
        &.#{$validation-error}
          opacity: 1

    .#{$validation-warning}
      color: $validation-msg-warning-color

    .#{$validation-error}
      color: $validation-msg-error-color

    .#{$length-label}
      right: 0

    &.#{$prefix}max-length-warn .#{$length-label}
      color: $color-warn

    &.#{$prefix}max-length .#{$length-label}
      color: $color-danger

    .#{$prefix}input-container
      +transition(border-color $input-border-transition-time)
      border-bottom: 1px solid $input-border-color
      &::after
        +transition(all $input-border-transition-time)
        content: ''
        position: absolute
        width: 100%
        height: 1px
        bottom: -1px
        left: 0

    input
      +transform-origin(top right)
      +transition-property(color, transform)
      +transition-duration($bump-time, $bump-time)
      +transition-timing-function($ease-out-quint, linear)
      +font-body(gamma, null, null, false)
      font-weight: 500
      display: block
      margin: 0
      padding: $input-padding-top 0.1em 0.2em
      border: none
      background: transparent
      width: 100%

    &, input, input:focus
      outline: none !important

    &.#{$prefix}#{$bump} input
      +animation(input-bump-shake $bump-time infinite)
      color: $input-bump-color


    &.#{$prefix}focus,
    &.#{$validation-error},
    &.#{$validation-warning}
      .#{$validation-messages}
{'fraction_non_alphanumeric': 0.16183939601921757, 'fraction_numerical': 0.025806451612903226, 'mean_word_length': 2.6248756218905474, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, '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': '194714', 'n_tokens_mistral': 2578, 'n_tokens_neox': 2315, 'n_words': 456}