<commit_before>/*
  FORMS
  -----

  Our form styles include basic resets for text fields, select menus, and so on, along with some of our own custom components.

  Includes:
   - Text fields
   - Text areas
   - Select menus
   - Checkboxes and radio buttons
   - Range slider
   - Progress bars and meters
*/

/// @Foundation.settings
// Forms
// Basic form variables
$form-fontsize: 1rem !default;
$form-padding: 0.5rem !default;

// Text fields
$input-color: #000 !default;
$input-color-hover: $input-color !default;
$input-color-focus: $input-color !default;
$input-background: #fff !default;
$input-background-hover: $input-background !default;
$input-background-focus: $input-background !default;
$input-border: 1px solid #ccc !default;
$input-border-hover: 1px solid #bbb !default;
$input-border-focus: 1px solid #999 !default;

// Select menus
$select-color: #000 !default;
$select-background: #fafafa !default;
$select-background-hover: smartscale($select-background, 4%) !default;
$select-arrow: true !default;
$select-arrow-color: $select-color !default;

// Labels
$form-label-fontsize: 0.9rem !default;
$form-label-margin: 0.5rem !default;
$form-label-color: #333 !default;

// Inline labels
$inlinelabel-color: #333 !default;
$inlinelabel-background: #eee !default;
$inlinelabel-border: $input-border !default;

// Range slider
$slider-background: #ddd !default;
$slider-height: 1rem !default;
$slider-radius: 0px !default;
$slider-thumb-height: 1.5rem !default;
$slider-thumb-color: $primary-color !default;
$slider-thumb-radius: 0px !default;

// Progress and meter
$meter-height: 1.5rem !default;
$meter-background: #ccc !default;
$meter-fill: $primary-color !default;
$meter-fill-high: $success-color !default;
$meter-fill-medium: #e7cf00 !default;
$meter-fill-low: $alert-color !default;
$meter-radius: 0 !default;
///

// Disable OS-level styles
@mixin no-appearance {
  -webkit-appearance: none;
     -moz-appearance: none;
}

// Text fields
// - - - - - - - - - - - - - - - - - - - - - - - - -
#{$text-input-selectors} {
  @include no-appearance;
  display: block;
  width: 100%;
  padding: $form-padding;
  margin: 0 0 $global-padding 0;
  border: $input-border;
  border-radius: 0;
  background: $input-background;
  color: $input-color;
  font-size: $form-fontsize;
  line-height: 1;
  -webkit-font-smoothing: antialiased;

  &:hover {
    border: $input-border-hover;
    background: $input-background-hover;
    color: $input-color-hover;
  }
  &:focus {
    outline: 0;
    border: $input-border-focus;
    background: $input-background-focus;
    color: $input-color-focus;
  }

  label > & {
    margin-top: $form-label-margin;
  }
}

// Labels
// - - - - - - - - - - - - - - - - - - - - - - - - -
label {
  display: block;
  font-size: $form-label-fontsize;
  margin-bottom: $form-label-margin;
  color: $form-label-color;

  > input, > textarea {
    margin-top: $form-label-margin;
  }
}

// Checkbox/radio buttons
// - - - - - - - - - - - - - - - - - - - - - - - - -
input[type="checkbox"], input[type="radio"] {
  width: 1rem;
  height: 1rem;

  // Input inside of a label
  label > & {
    margin-right: $form-padding * 0.5;
  }

  // Input next to a label
  & + label {
    display: inline-block;
    margin-left: $form-padding;
    margin-right: $form-padding * 2;
    margin-bottom: 0;
    vertical-align: baseline;
  }
}

// Inline labels
// Inline labels allow you to prefix or postfix special labels to inputs
// - - - - - - - - - - - - - - - - - - - - - - - - -
.inline-label {
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
  margin-bottom: $global-padding;

  // Imitates the top margin on normal inputs
  label > & {
    margin-top: $form-label-margin;
  }

  // Inputs stretch all the way out
  > input, > select {
    flex: 1;
    margin: 0;
  }

  // Inline labels and buttons shrink
  > .form-label {
    flex: 0 0 auto;
    background: $inlinelabel-background;
    color: $inlinelabel-color;
    border: $inlinelabel-border;
    padding: 0 $form-padding;
    display: flex;
    align-items: center;

    &:first-child { border-right: 0; }
    &:last-child  { border-left: 0; }
  }
  // Buttons also shrink
  > a,
  > button,
  > input[type="button"],
  > input[type="submit"] {
    display: flex;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
    border-radius: 0;
  }
}

// Text areas
// - - - - - - - - - - - - - - - - - - - - - - - - -
textarea {
  height: auto;
  width: 100%;
  min-height: 50px;
}

// Select menus
// - - - - - - - - - - - - - - - - - - - - - - - - -
select {
  $color: isitlight($select-background);<commit_msg>Add missing flex property to inline label buttons #412<commit_after>/*
  FORMS
  -----

  Our form styles include basic resets for text fields, select menus, and so on, along with some of our own custom components.

  Includes:
   - Text fields
   - Text areas
   - Select menus
   - Checkboxes and radio buttons
   - Range slider
   - Progress bars and meters
*/

/// @Foundation.settings
// Forms
// Basic form variables
$form-fontsize: 1rem !default;
$form-padding: 0.5rem !default;

// Text fields
$input-color: #000 !default;
$input-color-hover: $input-color !default;
$input-color-focus: $input-color !default;
$input-background: #fff !default;
$input-background-hover: $input-background !default;
$input-background-focus: $input-background !default;
$input-border: 1px solid #ccc !default;
$input-border-hover: 1px solid #bbb !default;
$input-border-focus: 1px solid #999 !default;

// Select menus
$select-color: #000 !default;
$select-background: #fafafa !default;
$select-background-hover: smartscale($select-background, 4%) !default;
$select-arrow: true !default;
$select-arrow-color: $select-color !default;

// Labels
$form-label-fontsize: 0.9rem !default;
$form-label-margin: 0.5rem !default;
$form-label-color: #333 !default;

// Inline labels
$inlinelabel-color: #333 !default;
$inlinelabel-background: #eee !default;
$inlinelabel-border: $input-border !default;

// Range slider
$slider-background: #ddd !default;
$slider-height: 1rem !default;
$slider-radius: 0px !default;
$slider-thumb-height: 1.5rem !default;
$slider-thumb-color: $primary-color !default;
$slider-thumb-radius: 0px !default;

// Progress and meter
$meter-height: 1.5rem !default;
$meter-background: #ccc !default;
$meter-fill: $primary-color !default;
$meter-fill-high: $success-color !default;
$meter-fill-medium: #e7cf00 !default;
$meter-fill-low: $alert-color !default;
$meter-radius: 0 !default;
///

// Disable OS-level styles
@mixin no-appearance {
  -webkit-appearance: none;
     -moz-appearance: none;
}

// Text fields
// - - - - - - - - - - - - - - - - - - - - - - - - -
#{$text-input-selectors} {
  @include no-appearance;
  display: block;
  width: 100%;
  padding: $form-padding;
  margin: 0 0 $global-padding 0;
  border: $input-border;
  border-radius: 0;
  background: $input-background;
  color: $input-color;
  font-size: $form-fontsize;
  line-height: 1;
  -webkit-font-smoothing: antialiased;

  &:hover {
    border: $input-border-hover;
    background: $input-background-hover;
    color: $input-color-hover;
  }
  &:focus {
    outline: 0;
    border: $input-border-focus;
    background: $input-background-focus;
    color: $input-color-focus;
  }

  label > & {
    margin-top: $form-label-margin;
  }
}

// Labels
// - - - - - - - - - - - - - - - - - - - - - - - - -
label {
  display: block;
  font-size: $form-label-fontsize;
  margin-bottom: $form-label-margin;
  color: $form-label-color;

  > input, > textarea {
    margin-top: $form-label-margin;
  }
}

// Checkbox/radio buttons
// - - - - - - - - - - - - - - - - - - - - - - - - -
input[type="checkbox"], input[type="radio"] {
  width: 1rem;
  height: 1rem;

  // Input inside of a label
  label > & {
    margin-right: $form-padding * 0.5;
  }

  // Input next to a label
  & + label {
    display: inline-block;
    margin-left: $form-padding;
    margin-right: $form-padding * 2;
    margin-bottom: 0;
    vertical-align: baseline;
  }
}

// Inline labels
// Inline labels allow you to prefix or postfix special labels to inputs
// - - - - - - - - - - - - - - - - - - - - - - - - -
.inline-label {
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
  margin-bottom: $global-padding;

  // Imitates the top margin on normal inputs
  label > & {
    margin-top: $form-label-margin;
  }

  // Inputs stretch all the way out
  > input, > select {
    flex: 1;
    margin: 0;
  }

  // Inline labels and buttons shrink
  > .form-label {
    flex: 0 0 auto;
    background: $inlinelabel-background;
    color: $inlinelabel-color;
    border: $inlinelabel-border;
    padding: 0 $form-padding;
    display: flex;
    align-items: center;

    &:first-child { border-right: 0; }
    &:last-child  { border-left: 0; }
  }
  // Buttons also shrink
  > a,
  > button,
  > input[type="button"],
  > input[type="submit"] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
    border-radius: 0;
  }
}

// Text areas
// - - - - - - - - - - - - - - - - - - - - - - - - -
textarea {
  height: auto;
  width: 100%;
  min-height: 50px;
}

// Select menus
// - - - - - - - - - - - - - - - - - - - - - - - - -
select {
  $color: isitlight($select-background);
{'fraction_non_alphanumeric': 0.17281968967362227, 'fraction_numerical': 0.015088282504012842, 'mean_word_length': 2.5522614975294564, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 27, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 36, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6930990', 'n_tokens_mistral': 3524, 'n_tokens_neox': 3341, 'n_words': 779}