<commit_before>@import '../../stylus_lib'

.stacked-form
  max-width 100%
  margin 0 auto
  > h2
    margin 20px 0
    padding-bottom 10px
    garamond()
    font-size 20px
    border-bottom 1px solid gray-lighter-color
  > a
  > button
    text-align center
  > a
  > button
  > input
  > textarea
  > .bordered-select
  > .bordered-select > select
  > .bordered-multiple-select
  .stacked-form-cell
    display block
    width 100%
    margin 10px auto
    &:first-child
      margin-top 0
    &:last-child
      margin-bottom 0
  > a > i
  > button > i
    line-height 0
    margin-right 10px
    vertical-align middle
  > label
    margin 20px 0 5px 0
    &:first-child
      margin-top 0
  label + input,
  label + textarea,
  label + .bordered-select,
  label + .bordered-multiple-select
    margin-top 5px

// Placeholder mixins
bordered-input-placeholder()
  garamond()
  font-size default-garamond-font-size
  color gray-dark-color
  transition opacity 0.5s
bordered-input-placeholder--focus()
  opacity 0
bordered-input-placeholder--autofocus-focus()
  opacity 1

.avant-garde-form-label
  display block
  avant-garde-size('s-headline', true)
  & + input
    margin-top 5px
  > span
    garamond-size('l-caption', true)
    text-transform none
    letter-spacing 0
    color gray-darker-color

.bordered-input
  margin 0
  padding 10px
  border 2px solid gray-lighter-color
  border-radius 0
  box-shadow none
  garamond()
  font-size default-garamond-font-size
  background-color transparent
  transition border-color 0.25s
  placeholder(bordered-input-placeholder)
  &:focus, &:active
    border-color purple-color
    outline none
    transition border-color 0.5s
    placeholder(bordered-input-placeholder--focus)

  &:disabled
    border dotted 2px gray-lighter-color

  // Autofocused inputs should retain placeholders
  &[autofocus]:focus
  &.is-persistplaceholder:focus
    placeholder(bordered-input-placeholder--autofocus-focus)

  &[data-state='error']
  &.is-error
    border-color red-color

  &.is-block
    display block
    width 100%

.typed-bordered-input
  position relative
  display inline-block
  &.is-block
    &, & > .bordered-input
      display block
      width 100%
  > span
    position absolute
    display block
    top 50%
    left 15px
    transform translateY(-50%)
    color gray-dark-color
    pointer-events none
  > .bordered-input
    padding-left 30px

.bordered-input-with-button
  width 100%
  > input
    width calc('75% - 10px')
    margin-right 10px
  > a
  > button
    width 25%
    padding-right 0
    padding-left 0

bordered-select-caret-width = 8px
bordered-select-border-width = 2px
.bordered-select // label
  position relative
  display inline-block
  // Hides the default caret button in FF
  &:before
    display block
    position absolute
    content ''
    top bordered-select-border-width
    right @top
    bottom @top
    width (bordered-select-caret-width * 3)
    background-color white
    border-top 10px solid white // faux margins
    border-bottom @border-top
    border-left 1px solid gray-lighter-color
    pointer-events none
  &:after
    caret(gray-color)
    position absolute
    top 50%
    right (bordered-select-caret-width + (bordered-select-border-width / 2))
    margin-top -(bordered-select-border-width * 2)
  > select
    appearance none
    outline none
    display inline-block
    width 200px
    margin 0
    padding 0
    padding 8px 10px 7px
    garamond()
    font-size default-garamond-font-size
    border 2px solid gray-lighter-color
    border-radius 0
    box-shadow none
    background-color white

// select( multiple=multiple ) are very different from regular selects so require different styles
.bordered-multiple-select
  appearance none
  outline none
  garamond()
  font-size default-garamond-font-size
  border 2px solid gray-lighter-color
  border-radius 0
  box-shadow none
  background-color white
  > option
    padding 5px 5px
  &.is-block
    display block
    width 100%

// Textarea-specific
textarea.bordered-input
  resize none
  padding 10px
  appearance none

// On / Off Toggle Sliders
.artsy-toggle
  avant-garde()
  background-color white
  border 2px solid gray-lighter-color
  border-radius 15px
  color gray-color
  cursor pointer
  display inline-block
  line-height 17px
  text-decoration none
  transition 'color, border-color' 0.2s
  width 56px
  &:focus, &:hover
    & + .artsy-toggle-label
      color purple-color

  &::after
    content attr(data-state)
    display inline
    font-size 12px
    font-weight bold
    letter-spacing -1px
    margin-left 3px
    position relative
    transition margin-left 0.2s
    top -2px
    width 20px

  .artsy-toggle-dot
    display inline
    font-size 30px
    left 2px
    position relative
    top 2px
    transition left 0.2s
    &::after
      content "\25CF"

  &[data-state='on']
    background-color purple-color
    border-color purple-color
    .artsy-toggle-dot
      color white
      left 33px
    &::after
      color white
      content attr(data-state)
      margin-left -10px

.artsy-toggle-separator
.artsy-toggle-label
  display inline-block
  margin-left 10px

.artsy-toggle-separator
  &::after
    content '\2026'

.artsy-toggle-label:hover
  color purple-color
  cursor pointer

form.is-validated
  .bordered-input
    &:invalid
      @extends .bordered-input.is-error

checkbox-size = 20px

.artsy-checkbox
  display inline-block
  line-height checkbox-size
  &:hover .artsy-checkbox--checkbox > label:after
    opacity 0.1
.artsy-checkbox--checkbox
  display inline-block
  width checkbox-size
  height checkbox-size
  position relative
  background gray-lighter-color
  user-select none
  > label
    cursor pointer
    position absolute
    top 2px
    right @top
    bottom @top
    left @top
    background-color white
    // Check
    &:after
      content ''
      position absolute
      top 3px
      right 2px
      bottom 7px
      left 2px
      border 2px solid black
      border-top none
      border-right none
      opacity 0
      transform rotate(-45deg) translateZ(0)
      transition opacity 0.25s
  > input[type='checkbox']
    visibility hidden
    &:checked + label:after
      opacity 1 !important
.artsy-checkbox--label
  user-select none
  margin-left 10px
  cursor pointer

// Auto-complete
.autocomplete-input-container
  display inline-block
  position relative
  // Fix for Firefox
  line-height 0
  &[data-state='loading']
  &.is-loading
    > .autocomplete-loading-indicator
      display block
      > .loading-spinner-small
        background-color purple-color
  > .autocomplete-loading-indicator
    display none
    position absolute
    top 0
    right 0
    width 50px
    height 100%
  &.is-display-suggestions
    .autocomplete-feedback
      visibility visible
      transition opacity 0.25s, border-color 0.75s
      opacity 1
      border-color purple-color
  &.is-block
    display block
    &
    input
      width 100%

  // Dropdown
  .twitter-typeahead
    display block
    width 100%
    height 100%
  .tt-hint
    display none
  .tt-dropdown-menu
    width 100%
    background-color white
    border 2px solid purple-color
    border-top none
    text-align left
    z-index zindex-modal
  .tt-suggestion
    border-bottom 1px solid gray-lighter-color
    &:last-child
      border-bottom none
    &:hover
    &.tt-cursor
      background-color black
      *
        color white

.autocomplete-feedback
  display block
  visibility hidden
  position absolute
  top 100%
  left 0
  right 0
  padding 0 (home-logo-size / 2)
  line-height home-logo-size
  text-align left
  opacity 0
  border 2px solid gray-lighter-color
  border-top none
  background-color gray-lightest-color
  overflow ellipsis
  pointer-events none
  z-index zindex-modal

// Result lists
// (typically appended to from autocompletes)
.results-list
  margin 20px 0
.results-list-item
  display table
  width 100%
  border-bottom 1px solid gray-lighter-color
  &:first-child
    border-top @border-bottom
.results-list-item-cell
  display table-cell
  vertical-align middle
  // Account for Avant Garde baseline
  padding 11px 0 9px 0
  avant-garde()
  font-size 13px
  &:first-child
    text-align left
  &:last-child
    text-align right
<commit_msg>Kill the placeholder fade out on focus<commit_after>@import '../../stylus_lib'

.stacked-form
  max-width 100%
  margin 0 auto
  > h2
    margin 20px 0
    padding-bottom 10px
    garamond()
    font-size 20px
    border-bottom 1px solid gray-lighter-color
  > a
  > button
    text-align center
  > a
  > button
  > input
  > textarea
  > .bordered-select
  > .bordered-select > select
  > .bordered-multiple-select
  .stacked-form-cell
    display block
    width 100%
    margin 10px auto
    &:first-child
      margin-top 0
    &:last-child
      margin-bottom 0
  > a > i
  > button > i
    line-height 0
    margin-right 10px
    vertical-align middle
  > label
    margin 20px 0 5px 0
    &:first-child
      margin-top 0
  label + input,
  label + textarea,
  label + .bordered-select,
  label + .bordered-multiple-select
    margin-top 5px

// Placeholder mixins
bordered-input-placeholder()
  garamond()
  font-size default-garamond-font-size
  color gray-dark-color

.avant-garde-form-label
  display block
  avant-garde-size('s-headline', true)
  & + input
    margin-top 5px
  > span
    garamond-size('l-caption', true)
    text-transform none
    letter-spacing 0
    color gray-darker-color

.bordered-input
  margin 0
  padding 10px
  border 2px solid gray-lighter-color
  border-radius 0
  box-shadow none
  garamond()
  font-size default-garamond-font-size
  background-color transparent
  transition border-color 0.25s
  placeholder(bordered-input-placeholder)
  &:focus
  &:active
    border-color purple-color
    outline none
    transition border-color 0.5s

  &:disabled
    border dotted 2px gray-lighter-color

  &[data-state='error']
  &.is-error
    border-color red-color

  &.is-block
    display block
    width 100%

.typed-bordered-input
  position relative
  display inline-block
  &.is-block
    &, & > .bordered-input
      display block
      width 100%
  > span
    position absolute
    display block
    top 50%
    left 15px
    transform translateY(-50%)
    color gray-dark-color
    pointer-events none
  > .bordered-input
    padding-left 30px

.bordered-input-with-button
  width 100%
  > input
    width calc('75% - 10px')
    margin-right 10px
  > a
  > button
    width 25%
    padding-right 0
    padding-left 0

bordered-select-caret-width = 8px
bordered-select-border-width = 2px
.bordered-select // label
  position relative
  display inline-block
  // Hides the default caret button in FF
  &:before
    display block
    position absolute
    content ''
    top bordered-select-border-width
    right @top
    bottom @top
    width (bordered-select-caret-width * 3)
    background-color white
    border-top 10px solid white // faux margins
    border-bottom @border-top
    border-left 1px solid gray-lighter-color
    pointer-events none
  &:after
    caret(gray-color)
    position absolute
    top 50%
    right (bordered-select-caret-width + (bordered-select-border-width / 2))
    margin-top -(bordered-select-border-width * 2)
  > select
    appearance none
    outline none
    display inline-block
    width 200px
    margin 0
    padding 0
    padding 8px 10px 7px
    garamond()
    font-size default-garamond-font-size
    border 2px solid gray-lighter-color
    border-radius 0
    box-shadow none
    background-color white

// select( multiple=multiple ) are very different from regular selects so require different styles
.bordered-multiple-select
  appearance none
  outline none
  garamond()
  font-size default-garamond-font-size
  border 2px solid gray-lighter-color
  border-radius 0
  box-shadow none
  background-color white
  > option
    padding 5px 5px
  &.is-block
    display block
    width 100%

// Textarea-specific
textarea.bordered-input
  resize none
  padding 10px
  appearance none

// On / Off Toggle Sliders
.artsy-toggle
  avant-garde()
  background-color white
  border 2px solid gray-lighter-color
  border-radius 15px
  color gray-color
  cursor pointer
  display inline-block
  line-height 17px
  text-decoration none
  transition 'color, border-color' 0.2s
  width 56px
  &:focus, &:hover
    & + .artsy-toggle-label
      color purple-color

  &::after
    content attr(data-state)
    display inline
    font-size 12px
    font-weight bold
    letter-spacing -1px
    margin-left 3px
    position relative
    transition margin-left 0.2s
    top -2px
    width 20px

  .artsy-toggle-dot
    display inline
    font-size 30px
    left 2px
    position relative
    top 2px
    transition left 0.2s
    &::after
      content "\25CF"

  &[data-state='on']
    background-color purple-color
    border-color purple-color
    .artsy-toggle-dot
      color white
      left 33px
    &::after
      color white
      content attr(data-state)
      margin-left -10px

.artsy-toggle-separator
.artsy-toggle-label
  display inline-block
  margin-left 10px

.artsy-toggle-separator
  &::after
    content '\2026'

.artsy-toggle-label:hover
  color purple-color
  cursor pointer

form.is-validated
  .bordered-input
    &:invalid
      @extends .bordered-input.is-error

checkbox-size = 20px

.artsy-checkbox
  display inline-block
  line-height checkbox-size
  &:hover .artsy-checkbox--checkbox > label:after
    opacity 0.1
.artsy-checkbox--checkbox
  display inline-block
  width checkbox-size
  height checkbox-size
  position relative
  background gray-lighter-color
  user-select none
  > label
    cursor pointer
    position absolute
    top 2px
    right @top
    bottom @top
    left @top
    background-color white
    // Check
    &:after
      content ''
      position absolute
      top 3px
      right 2px
      bottom 7px
      left 2px
      border 2px solid black
      border-top none
      border-right none
      opacity 0
      transform rotate(-45deg) translateZ(0)
      transition opacity 0.25s
  > input[type='checkbox']
    visibility hidden
    &:checked + label:after
      opacity 1 !important
.artsy-checkbox--label
  user-select none
  margin-left 10px
  cursor pointer

// Auto-complete
.autocomplete-input-container
  display inline-block
  position relative
  // Fix for Firefox
  line-height 0
  &[data-state='loading']
  &.is-loading
    > .autocomplete-loading-indicator
      display block
      > .loading-spinner-small
        background-color purple-color
  > .autocomplete-loading-indicator
    display none
    position absolute
    top 0
    right 0
    width 50px
    height 100%
  &.is-display-suggestions
    .autocomplete-feedback
      visibility visible
      transition opacity 0.25s, border-color 0.75s
      opacity 1
      border-color purple-color
  &.is-block
    display block
    &
    input
      width 100%

  // Dropdown
  .twitter-typeahead
    display block
    width 100%
    height 100%
  .tt-hint
    display none
  .tt-dropdown-menu
    width 100%
    background-color white
    border 2px solid purple-color
    border-top none
    text-align left
    z-index zindex-modal
  .tt-suggestion
    border-bottom 1px solid gray-lighter-color
    &:last-child
      border-bottom none
    &:hover
    &.tt-cursor
      background-color black
      *
        color white

.autocomplete-feedback
  display block
  visibility hidden
  position absolute
  top 100%
  left 0
  right 0
  padding 0 (home-logo-size / 2)
  line-height home-logo-size
  text-align left
  opacity 0
  border 2px solid gray-lighter-color
  border-top none
  background-color gray-lightest-color
  overflow ellipsis
  pointer-events none
  z-index zindex-modal

// Result lists
// (typically appended to from autocompletes)
.results-list
  margin 20px 0
.results-list-item
  display table
  width 100%
  border-bottom 1px solid gray-lighter-color
  &:first-child
    border-top @border-bottom
.results-list-item-cell
  display table-cell
  vertical-align middle
  // Account for Avant Garde baseline
  padding 11px 0 9px 0
  avant-garde()
  font-size 13px
  &:first-child
    text-align left
  &:last-child
    text-align right

{'fraction_non_alphanumeric': 0.08156224973818764, 'fraction_numerical': 0.0258732212160414, 'mean_word_length': 2.4971994829814737, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 65, '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': '5522176', 'n_tokens_mistral': 5583, 'n_tokens_neox': 5129, 'n_words': 1424}