<commit_before>/* ==========================================================
 * forms.scss
 * Global form elements styles
 *
 * Author: <NAME>, <EMAIL>
 * Date:   2014-04-29 09:44:02
 *
 * Copyright 2014 Federal Chancellery of Switzerland
 * Licensed under MIT
 ========================================================== */

@charset "UTF-8";

 /*doc
---
title: Forms
name: b-forms
category: Base Layout - Forms Elements
---

<span class="label label-admin">FLEX</span>

You can use `.form-horizontal` on `<form>` to display the label aligned at the left of the input. `.form-group` then behaves like a `.row`.

Input boxes allow the user to input content (e.g. name).
For inputting dates, an HTML5 solution is available. With browsers that do not support HTML5 the date has to be input manually.
The following has to be taken into account for barrier-free accessibility:
The name of the form and the form box must be linked to a label. A label ID may only appear once on a page. Required fields must have sensible names or, preferably, use WAI.

You can use the `.has-error`, `.has-warning` or `.has-success` classes to send feedback to the user.

HTML5 input types: `text`, `password`, `datetime`, `datetime-local`, `date`, `month`, `time`, `week`, `number`, `email`, `url`, `search`, `tel`, and `color`

<br>
<div class="alert alert-warning">
**2.1.8**
  - added **IDs** to label and help text, `aria-labelledby` and `role` to buttons for a better accessibility
  - added `<fieldset>` and `<legend class="hidden">` around `.form-group` for a better accessibility
</div>

```html_example
<form class="form-horizontal" role="form">

  <!-- email input -->
  <fieldset>
    <legend class="hidden-legend">Email</legend>
    <div class="form-group">
      <label for="inputEmail3" class="col-sm-2 control-label" id="email">Email</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="inputEmail3" placeholder="Email" aria-labelledby="email">
      </div>
    </div>
  </fieldset>

  <!-- password input -->
  <fieldset>
    <legend class="hidden-legend">Password</legend>
    <div class="form-group has-warning">
      <label for="inputPassword3" class="col-sm-2 control-label" id="password">Password</label>
      <div class="col-sm-10">
        <input type="password" class="form-control" id="inputPassword3" placeholder="Password" aria-labelledby="password error-password" aria-invalid="true">
        <span class="help-block" id="error-password" role="alert">Warning, this is not a correct info!</span>
      </div>
    </div>
  </fieldset>

  <!-- URL input -->
  <fieldset>
    <legend class="hidden-legend">Website</legend>
    <div class="form-group">
      <label for="inputURL" class="col-sm-2 control-label" id="website">Website</label>
      <div class="col-sm-10">
        <input type="url" class="form-control" id="inputURL" placeholder="URL" aria-labelledby="website url-format">
        <span class="help-block" id="url-format">Use format "http://www.example.com"</span>
      </div>
    </div>
  </fieldset>

  <!-- file input -->
  <fieldset>
    <legend class="hidden-legend">Document</legend>
    <div class="form-group">
      <label for="file" class="col-sm-2 control-label" id="document">Document</label>
      <div class="col-sm-10">
        <input type="file" class="form-control" id="file" placeholder="URL" aria-labelledby="document">
      </div>
    </div>
  </fieldset>

  <!-- Checkboxes Vertical -->
  <fieldset>
    <legend class="hidden-legend">Terms</legend>
    <div class="form-group">
      <label class="col-sm-2 control-label" id="check-group-1">Terms</label>
      <div class="col-sm-10">
        <div class="checkbox checkbox--left">
          <input id="checkboxform" type="checkbox" aria-labelledby="check-group-1 checkbox-label-1">
          <label id="checkbox-label-1" for="checkboxform">Remember me</label>
        </div>
        <div class="checkbox checkbox--left">
          <input id="checkboxform2" type="checkbox" aria-labelledby="check-group-1 checkbox-label-2">
          <label id="checkbox-label-2" for="checkboxform2">Accept terms</label>
        </div>
      </div>
    </div>
  </fieldset>

  <!-- Checkboxes Horizontal -->
  <fieldset>
    <legend class="hidden-legend">Terms</legend>
    <div class="form-group">
      <label class="col-sm-2 control-label" id="check-group-2">Terms</label>
      <div class="col-sm-10">
        <label class="checkbox-inline">
          <div class="checkbox checkbox--left">
            <input id="checkboxform3" type="checkbox" aria-labelledby="check-group-2 checkbox-label-3">
            <label id="checkbox-label-3" for="checkboxform3">Remember me</label>
          </div>
        </label>
        <label class="checkbox-inline">
          <div class="checkbox checkbox--left">
            <input id="checkboxform4" type="checkbox" aria-labelledby="check-group-2 checkbox-label-4">
            <label id="checkbox-label-4" for="checkboxform4">Accept terms</label>
          </div>
        </label>
      </div>
    </div>
  </fieldset>

 <!-- Radio buttons horizontal -->
  <fieldset>
    <legend class="hidden-legend">Terms</legend>
    <div class="form-group">
      <label class="col-sm-2 control-label" id="radio-group-1">Terms</label>
      <div class="col-sm-10">
        <div class="radio radio--left">
          <input id="radioform" type="radio" name="radio-h" aria-labelledby="radio-group-1 radio-label-1">
          <label for="radioform" id="radio-label-1">Remember me</label>
        </div>
        <div class="radio radio--left">
          <input id="radioform2" type="radio" name="radio-h" aria-labelledby="radio-group-1 radio-label-2">
          <label for="radioform2" id="radio-label-2">Don't remember me</label>
        </div>
      </div>
    </div>
  </fieldset>

  <!-- Radio buttons vertical -->
  <fieldset>
    <legend class="hidden-legend">Terms</legend>
    <div class="form-group">
      <label class="col-sm-2 control-label" id="radio-group-2">Terms</label>
      <div class="col-sm-10">
        <label class="radio-inline">
          <div class="radio radio--left">
            <input id="radioform" type="radio" name="radio-h" aria-labelledby="radio-group-2 radio-label-3">
            <label for="radioform" id="radio-label-3">Remember me</label>
          </div>
        </label>
        <label class="radio-inline">
          <div class="radio radio--left">
            <input id="radioform" type="radio" name="radio-h" aria-labelledby="radio-group-2 radio-label-4">
            <label for="radioform" id="radio-label-4">Remember me</label>
          </div>
        </label>
      </div>
    </div>
  </fieldset>

  <!-- Dropdown -->
  <fieldset>
    <legend class="hidden-legend">Dropdown</legend>
    <div class="form-group">
      <label class="col-sm-2 control-label" for="dropdown">Dropdown</label>
      <div class="col-sm-10">
        <select id="dropdown" class="form-control">
          <option>Option 1</option>
          <option>Option 2</option>
        </select>
      </div>
    </div>
  </fieldset>

    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" role="button" class="btn btn-default">Sign in</button>
      </div>
    </div>
  </fieldset>

</form>
```

*/

legend {
  font-size: 1.1em;
}

.hidden-legend {
  display: inline-block;
  position: absolute;
  top: -6000px;
  left: -6000px;
  width: 0;
  height: 0;
  overflow: hidden;
}

.form-horizontal .form-group {
  margin-left: 0;
  margin-right: 0;
}

.form-group {
  .control-label {
    padding-top: 4px;
  }
}

.form-control {
  border-color: $empress;
  padding: 0.4em 0.3076em;
  line-height: 1.2;
  height: auto;
  &[type=file] {
    border: none;
    box-shadow: none;
  }
}

label {
  font-weight: normal;
}

.help-block {
  font-size: 0.9em;
  color: $coal;
}

.has-warning {
  background: $state-warning-bg;
  padding: 6px 0;
  .control-label {
    color: $coal;
  }
  .help-block {
    color: $venetian-red;
  }
}

.has-success {
  background: $state-success-bg;
  padding: 6px 0;
  .control-label {
    color: $coal;
  }
  .form-control {
    border-color: $coal;
    @extend .form-control;
  }
}

.has-error {
  background: $state-danger-bg;
  padding: 6px 0;
  .control-label {
    color: $coal;
  }
  .form-control {
    border-color: $coal;
    @extend .form-control;
  }
}

.form-inline {
  margin-top: 1em;
  padding-bottom: 1.3em;
  border-bottom: 2px solid $silver;
  .control-label {
    padding-top: 3px;
    padding-bottom: 3px;
  }
  label {
    margin-right: 1.6em;
  }
  input[type="number"] {
    width: 50px;
  }
  .form-control {
    @media only screen and (min-width: $screen-sm-min) {
      width: 150px;
    }
  }
}

// Override Bootstrap behavior
.radio-inline,
.checkbox-inline {
  padding-right: 20px;
  padding-left: 0;
}
.form-horizontal{
  .radio-inline,
  .checkbox-inline {
    margin-top: -10px;
  }
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
  margin-right: 10px; // space out consecutive inline controls
  margin-left: 0;
}<commit_msg>Change input type to date to have at least native datepicker selector #286<commit_after>/* ==========================================================
 * forms.scss
 * Global form elements styles
 *
 * Author: <NAME>, <EMAIL>
 * Date:   2014-04-29 09:44:02
 *
 * Copyright 2014 Federal Chancellery of Switzerland
 * Licensed under MIT
 ========================================================== */

@charset "UTF-8";

 /*doc
---
title: Forms
name: b-forms
category: Base Layout - Forms Elements
---

<span class="label label-admin">FLEX</span>

You can use `.form-horizontal` on `<form>` to display the label aligned at the left of the input. `.form-group` then behaves like a `.row`.

Input boxes allow the user to input content (e.g. name).
For inputting dates, an HTML5 solution is available. With browsers that do not support HTML5 the date has to be input manually.
The following has to be taken into account for barrier-free accessibility:
The name of the form and the form box must be linked to a label. A label ID may only appear once on a page. Required fields must have sensible names or, preferably, use WAI.

You can use the `.has-error`, `.has-warning` or `.has-success` classes to send feedback to the user.

HTML5 input types: `text`, `password`, `datetime`, `datetime-local`, `date`, `month`, `time`, `week`, `number`, `email`, `url`, `search`, `tel`, and `color`

<br>
<div class="alert alert-warning">
**2.1.8**
  - added **IDs** to label and help text, `aria-labelledby` and `role` to buttons for a better accessibility
  - added `<fieldset>` and `<legend class="hidden">` around `.form-group` for a better accessibility
</div>

```html_example
<form class="form-horizontal" role="form">

  <!-- email input -->
  <fieldset>
    <legend class="hidden-legend">Email</legend>
    <div class="form-group">
      <label for="inputEmail3" class="col-sm-2 control-label" id="email">Email</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="inputEmail3" placeholder="Email" aria-labelledby="email">
      </div>
    </div>
  </fieldset>

  <!-- password input -->
  <fieldset>
    <legend class="hidden-legend">Password</legend>
    <div class="form-group has-warning">
      <label for="inputPassword3" class="col-sm-2 control-label" id="password">Password</label>
      <div class="col-sm-10">
        <input type="password" class="form-control" id="inputPassword3" placeholder="Password" aria-labelledby="password error-password" aria-invalid="true">
        <span class="help-block" id="error-password" role="alert">Warning, this is not a correct info!</span>
      </div>
    </div>
  </fieldset>

<!-- URL input -->
  <fieldset>
    <legend class="hidden-legend">Select date</legend>
    <div class="form-group">
      <label for="select-date" class="col-sm-2 control-label" id="date">Date</label>
      <div class="col-sm-10">
        <input type="date" class="form-control" id="select-date" aria-labelledby="Date DD/MM/YYYY">
      </div>
    </div>
  </fieldset>

  <!-- URL input -->
  <fieldset>
    <legend class="hidden-legend">Website</legend>
    <div class="form-group">
      <label for="inputURL" class="col-sm-2 control-label" id="website">Website</label>
      <div class="col-sm-10">
        <input type="url" class="form-control" id="inputURL" placeholder="URL" aria-labelledby="website url-format">
        <span class="help-block" id="url-format">Use format "http://www.example.com"</span>
      </div>
    </div>
  </fieldset>

  <!-- file input -->
  <fieldset>
    <legend class="hidden-legend">Document</legend>
    <div class="form-group">
      <label for="file" class="col-sm-2 control-label" id="document">Document</label>
      <div class="col-sm-10">
        <input type="file" class="form-control" id="file" placeholder="URL" aria-labelledby="document">
      </div>
    </div>
  </fieldset>

  <!-- Checkboxes Vertical -->
  <fieldset>
    <legend class="hidden-legend">Terms</legend>
    <div class="form-group">
      <label class="col-sm-2 control-label" id="check-group-1">Terms</label>
      <div class="col-sm-10">
        <div class="checkbox checkbox--left">
          <input id="checkboxform" type="checkbox" aria-labelledby="check-group-1 checkbox-label-1">
          <label id="checkbox-label-1" for="checkboxform">Remember me</label>
        </div>
        <div class="checkbox checkbox--left">
          <input id="checkboxform2" type="checkbox" aria-labelledby="check-group-1 checkbox-label-2">
          <label id="checkbox-label-2" for="checkboxform2">Accept terms</label>
        </div>
      </div>
    </div>
  </fieldset>

  <!-- Checkboxes Horizontal -->
  <fieldset>
    <legend class="hidden-legend">Terms</legend>
    <div class="form-group">
      <label class="col-sm-2 control-label" id="check-group-2">Terms</label>
      <div class="col-sm-10">
        <label class="checkbox-inline">
          <div class="checkbox checkbox--left">
            <input id="checkboxform3" type="checkbox" aria-labelledby="check-group-2 checkbox-label-3">
            <label id="checkbox-label-3" for="checkboxform3">Remember me</label>
          </div>
        </label>
        <label class="checkbox-inline">
          <div class="checkbox checkbox--left">
            <input id="checkboxform4" type="checkbox" aria-labelledby="check-group-2 checkbox-label-4">
            <label id="checkbox-label-4" for="checkboxform4">Accept terms</label>
          </div>
        </label>
      </div>
    </div>
  </fieldset>

 <!-- Radio buttons horizontal -->
  <fieldset>
    <legend class="hidden-legend">Terms</legend>
    <div class="form-group">
      <label class="col-sm-2 control-label" id="radio-group-1">Terms</label>
      <div class="col-sm-10">
        <div class="radio radio--left">
          <input id="radioform" type="radio" name="radio-h" aria-labelledby="radio-group-1 radio-label-1">
          <label for="radioform" id="radio-label-1">Remember me</label>
        </div>
        <div class="radio radio--left">
          <input id="radioform2" type="radio" name="radio-h" aria-labelledby="radio-group-1 radio-label-2">
          <label for="radioform2" id="radio-label-2">Don't remember me</label>
        </div>
      </div>
    </div>
  </fieldset>

  <!-- Radio buttons vertical -->
  <fieldset>
    <legend class="hidden-legend">Terms</legend>
    <div class="form-group">
      <label class="col-sm-2 control-label" id="radio-group-2">Terms</label>
      <div class="col-sm-10">
        <label class="radio-inline">
          <div class="radio radio--left">
            <input id="radioform" type="radio" name="radio-h" aria-labelledby="radio-group-2 radio-label-3">
            <label for="radioform" id="radio-label-3">Remember me</label>
          </div>
        </label>
        <label class="radio-inline">
          <div class="radio radio--left">
            <input id="radioform" type="radio" name="radio-h" aria-labelledby="radio-group-2 radio-label-4">
            <label for="radioform" id="radio-label-4">Remember me</label>
          </div>
        </label>
      </div>
    </div>
  </fieldset>

  <!-- Dropdown -->
  <fieldset>
    <legend class="hidden-legend">Dropdown</legend>
    <div class="form-group">
      <label class="col-sm-2 control-label" for="dropdown">Dropdown</label>
      <div class="col-sm-10">
        <select id="dropdown" class="form-control">
          <option>Option 1</option>
          <option>Option 2</option>
        </select>
      </div>
    </div>
  </fieldset>

    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" role="button" class="btn btn-default">Sign in</button>
      </div>
    </div>
  </fieldset>

</form>
```

*/

legend {
  font-size: 1.1em;
}

.hidden-legend {
  display: inline-block;
  position: absolute;
  top: -6000px;
  left: -6000px;
  width: 0;
  height: 0;
  overflow: hidden;
}

.form-horizontal .form-group {
  margin-left: 0;
  margin-right: 0;
}

.form-group {
  .control-label {
    padding-top: 4px;
  }
}

.form-control {
  border-color: $empress;
  padding: 0.4em 0.3076em;
  line-height: 1.2;
  height: auto;
  &[type=file] {
    border: none;
    box-shadow: none;
  }
}
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
  line-height: 1.2;
}


label {
  font-weight: normal;
}

.help-block {
  font-size: 0.9em;
  color: $coal;
}

.has-warning {
  background: $state-warning-bg;
  padding: 6px 0;
  .control-label {
    color: $coal;
  }
  .help-block {
    color: $venetian-red;
  }
}

.has-success {
  background: $state-success-bg;
  padding: 6px 0;
  .control-label {
    color: $coal;
  }
  .form-control {
    border-color: $coal;
    @extend .form-control;
  }
}

.has-error {
  background: $state-danger-bg;
  padding: 6px 0;
  .control-label {
    color: $coal;
  }
  .form-control {
    border-color: $coal;
    @extend .form-control;
  }
}

.form-inline {
  margin-top: 1em;
  padding-bottom: 1.3em;
  border-bottom: 2px solid $silver;
  .control-label {
    padding-top: 3px;
    padding-bottom: 3px;
  }
  label {
    margin-right: 1.6em;
  }
  input[type="number"] {
    width: 50px;
  }
  .form-control {
    @media only screen and (min-width: $screen-sm-min) {
      width: 150px;
    }
  }
}

// Override Bootstrap behavior
.radio-inline,
.checkbox-inline {
  padding-right: 20px;
  padding-left: 0;
}
.form-horizontal{
  .radio-inline,
  .checkbox-inline {
    margin-top: -10px;
  }
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
  margin-right: 10px; // space out consecutive inline controls
  margin-left: 0;
}
{'fraction_non_alphanumeric': 0.18337956048645188, 'fraction_numerical': 0.016428419031363346, 'mean_word_length': 2.9823704333050127, 'pattern_counts': {'":': 0, '<': 375, '<?xml version=': 0, '>': 375, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, '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': '6513131', 'n_tokens_mistral': 6463, 'n_tokens_neox': 6107, 'n_words': 1422}