forms.scss

@import "../pui-variables";
@import '../../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins';
@import "../mixins";

/*doc
---
title: Introduction
name: 00_form_introduction
categories:
 - css_components_forms
 - css_all
---


<code class="pam">
<i class="fa fa-download" alt="Install the Component">
npm install @npmcorp/pui-css-forms --save
</i>
</code>


Individual form controls automatically receive some global styling.
All textual `<input>`, `<textarea>`, and `<select>` elements with
`.form-control` are set to `width: 100`%; by default.

<div class="alert alert-info">
  <p class="em-high">
    Wrap labels and controls in <code>.form-group</code> for optimum spacing.
  </p>
</div>

*/

/*doc
---
title: Basic Forms
name: 0a_form_basic
parent: 00_form_introduction
---

```html_example
<form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
```

*/

/*doc
---
title: Inline Forms
name: form_inline
categories:
 - css_components_forms
 - css_all
---

Add `.form-inline` to your `<form>` for left-aligned and inline-block controls.
This only applies to forms within viewports that are at least 768px wide.

<div class="alert alert-info">
  <h5 class="em-high mtn">
    Always add labels to every input.
  </h5>
  <p>
    Screen readers will have trouble with your forms if you don't.
    You can always hide the labels using the <code class="sg-code">.sr-only</code> class.
  </p>
</div>

```html_example
<form class="styleguide-form form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail5">Email address</label>
    <input class="form-control" id="exampleInputEmail5" placeholder="Enter email" type="email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword2">Password</label>
    <input class="form-control" id="exampleInputPassword2" placeholder="Password" type="password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox">
      Remember me
    </label>
  </div>
  <button class="btn btn-default" type="submit">Sign in</button>
</form>
```
*/

/*doc
---
title: Inline Forms with Labels
name: form_inline_with_labels
parent: form_inline
---

Add `.form-inline.inline-labels` to your `<form>` for left-aligned and inline-block controls with labels inline with inputs.


```html_example
<form class="styleguide-form form-inline inline-labels" role="form">
  <div class="form-group">
    <label for="exampleInputEmail6">Write a thing</label>
    <input class="form-control" id="exampleInputEmail6" placeholder="Write a thing" type="email">
  </div>
  <div class="form-group">
    <label for="exampleSelect">Choose a thing</label>
    <select class="form-control" id="exampleSelect">
      <option>thing</option>
    </select>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox">
      Remember me
    </label>
  </div>
  <button class="btn btn-default" type="submit">Sign in</button>
</form>
```
*/

/*doc
---
title: Inputs & Labels
name: form_inputs
categories:
 - css_components_forms
 - css_all
---

An input with the label top aligned (this is the default layout).

```html_example
<form class="styleguide-form" role="form">
  <div class="form-group">
    <label for="exampleInputEmail7">
      <abbr title="required">*</abbr>
      Email address
    </label>
    <input aria-required="true" class="form-control" id="exampleInputEmail7" placeholder="Enter email" required="required" type="email">
  </div>
</form>
```

Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal
layout by adding `.form-horizontal` to the form. Doing so changes `.form-groups` to behave as grid rows, so no need for `.row`.

An input with the label left aligned

```html_example
<form class="styleguide-form form-horizontal" role="form">
  <div class="form-group">
    <div class="col-md-6">
      <label class="control-label" for="exampleInputEmail3">
        <abbr title="required">*</abbr>
        Email address
      </label>
    </div>
    <div class="col-md-18">
      <input aria-required="true" class="form-control" id="exampleInputEmail3" placeholder="Enter email" required="required" type="email">
    </div>
  </div>
</form>
```

An input with the label right aligned (N.B., control-label class provides the right alignment):

```html_example
<form class="styleguide-form form-horizontal" role="form">
  <div class="form-group">
    <label class="col-md-6 control-label" for="exampleInputEmail4">
      <abbr title="required">*</abbr>
      Email address
    </label>
    <div class="col-md-18">
      <input aria-required="true" class="form-control" id="exampleInputEmail4" placeholder="Enter email" required="required" type="email">
    </div>
  </div>
</form>
```

An unstyled input that doesn't have any of the default input styles

```html_example
<form role="form">
  <label for="unstyledInput">Text Input</label>
  <input class="unstyled" id="unstyledInput" placeholder="This is a text input">
</form>
```
*/

/*doc
---
title: HTML5 Controls
name: 01_form_html5_controls
parent: form_inputs
---

Examples of standard form controls supported in an example form layout.

Inputs
Most common form control, text-based input fields. Includes support for
all HTML5 types: `text`, `password`, `datetime`, `datetime-local`,
`date`, `month`, `time`, `week`, `number`, `email`, `url`, `search`,
`tel`, and `color`.

<div class="alert alert-warning">
  <p class="em-high">
    Inputs will only be fully styled if their type is properly declared.
  </p>
</div>

```html_example
<form class="styleguide-form" role="form">
  <label for="html5TextInput">Text Input</label>
  <input class="form-control" id="html5TextInput" placeholder="Text input" type="text">
</form>
```

Password field

```html_example
<form class="styleguide-form" role="form">
  <label for="html5PasswordInput">Password Input</label>
  <input class="form-control" id="html5PasswordInput" placeholder="Password" type="password">
</form>
```

Date

```html_example
<form class="styleguide-form" role="form">
  <label for="html5DateInput">Date Input</label>
  <input class="form-control" id="html5DateInput" placeholder="Date" type="date">
</form>
```

Number

```html_example
<form class="styleguide-form" role="form">
  <label for="html5NumberInput">Number Input</label>
  <input class="form-control" id="html5NumberInput" placeholder="Number" type="number">
</form>
```

With a min/max and default starting value

```html_example
<form class="styleguide-form" role="form">
  <label for="html5MinMaxInput">Min/Max Input</label>
  <input class="form-control" id="html5MinMaxInput" placeholder="Number" type="number" min=0 max=2 value=1>
</form>
```

With a different increment value

```html_example
<form class="styleguide-form" role="form">
  <label for="html5StepInput">Step Input</label>
  <input class="form-control" id="html5StepInput" placeholder="Number" type="number" step=5>
</form>
```

Email

Use this with fields that require email addresses to pop up the correct keyboard on mobile

```html_example
<form class="styleguide-form" role="form">
  <label for="html5EmailInput">Email Input</label>
  <input class="form-control" id="html5EmailInput" placeholder="Email" type="email">
</form>
```

URL

Use this with fields that require urls to pop up the correct keyboard on mobile

```html_example
<form class="styleguide-form" role="form">
  <label for="html5URLInput">URL Input</label>
  <input class="form-control" id="html5URLInput" placeholder="URL" type="url">
</form>
```

Telephone

Use this with fields that require telephone numbers to pop up the dialpad on mobile

```html_example
<form class="styleguide-form" role="form">
  <label for="html5PhoneInput">Phone Input</label>
  <input class="form-control" id="html5PhoneInput" placeholder="Telephone" type="tel">
</form>
```
*/

/*doc
---
title: Sizing
name: 02_form_inputs_sizing
parent: form_inputs
---

Set heights using the form control classes `.input-lg` and `.input-sm`.
Create larger or smaller form controls that match button sizes.

```html_example_table
<label for="LargeInput">Large Input</label>
<input class="form-control input-lg" id="LargeInput" placeholder=".input-lg" type="text">

<label for="DefaultInput">Default Input</label>
<input class="form-control" id="DefaultInput" placeholder="Default Input" type="text">

<label for="SmallInput">Small Input</label>
<input class="form-control input-sm" id="SmallInput" placeholder=".input-sm" type="text">
```

Set widths using grid column classes like `.col-lg-*`.
Wrap selects in grid columns, or any custom parent element, to easily enforce desired widths.

```html_example
<form class="styleguide-form" role="form">
  <div class="row">
    <div class="col-md-4">
      <label for="Small2WidthInput">Small 2 Width Input</label>
      <input class="form-control" id="Small2WidthInput" placeholder=".col-xs-2" type="text">
    </div>
    <div class="col-md-6">
      <label for="Small3WidthInput">Small 3 Width Input</label>
      <input class="form-control" id="Small3WidthInput" placeholder=".col-xs-3" type="text">
    </div>
    <div class="col-md-8">
      <label for="Small4WidthInput">Small 4 Width Input</label>
      <input class="form-control" id="Small4WidthInput" placeholder=".col-xs-4" type="text">
    </div>
  </div>
</form>
```

*/


.form-group {
  abbr {
    float: right;
    margin-left: 5px;
    border-bottom: 0;
  }
  [class*="col"].control-label {
    abbr {
      float: none;
      margin-right: 2px;
    }
  }
}

.unstyled {
  background-color: transparent;
  outline: none;
  border: none;
}

label {
  font-weight: 700;
  color: $form-label-color;
}

// do not simplify placeholder styles, we need a separate line per browser because otherwise browser will invalidate the entire group
::-webkit-input-placeholder {
  font-weight: 400;
}

:-moz-placeholder { /* Firefox 18- */
  font-weight: 400;
}

::-moz-placeholder {  /* Firefox 19+ */
  font-weight: 400;
}

:-ms-input-placeholder {
  font-weight: 400;
}

/*pending
---
title: Fancy Number Inputs
name: 03_form_fancy_number
parent: form_inputs
---

This is a fancy number input!

```html_example
<form class="styleguide-form" role="form">
  <label>Instances</label>
  <div class="number-fancy">
    <input class="form-control" />
    <ul class="list-unstyled buttons">
      <li class="btn-plus">
        <i class="fa fa-plus"></i>
      </li>
      <li class="btn-minus">
        <i class="fa fa-minus"></i>
      </li>
    </ul>
  </div>
</form>


```
*/

.number-fancy {
  @extend .fancy-form-element;
  @include user-select(none);
  $button-width: 30px;
  padding-right: $button-width + 6px;

  .buttons {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    li {
      @include transition-pui(all, 150ms);
      font-size: 12px;
      background-color: white;
      border: none;
      width: $button-width;
      height: 50%;
      color: $blue-4;
      text-align: center;
      line-height: 20px;
      &:hover {
        color: $blue-2;
        background-color: $neutral-9;
        cursor: pointer;
      }

      &.btn-minus {
        border-bottom-right-radius: 4px;
      }

      &.btn-plus {
        border-top-right-radius: 4px;
      }
    }
  }

  input {
    $input-margin: 5px;
    height: $input-height-base - 2*$input-margin;
    margin: $input-margin;
    padding: 0 5px;
    display: inline;
    border-radius: 4px;

    &:hover {
      background-color: $neutral-9;
    }
  }
}

/*doc
---
title: Search Inputs
name: 04_form_search_input
parent: form_inputs
---

Use this input when creating a search component.

```html_example
<label for="searchInput">Search</label>
<div class="form-group form-group-search">
  <input class="form-control" id="searchInput" placeholder="This is a searchbox">
  <i class="fa fa-search"></i>
</div>
```
*/


.form-group-search {
  position: relative;

  i {
    position: absolute;
    left: 12px;
    top: 12px;
  }

  input {
    padding-left: 34px;
  }
}

/*doc
---
title: Read-Only Inputs
name: 05_form_inputs_read_only
parent: form_inputs
---

Add the `readonly` boolean attribute on an input to prevent user input and style the input as disabled.

```html_example
<label for="ReadOnlyInput">ReadOnly</label>
<input class="form-control" type="text" id="ReadOnlyInput" placeholder="Readonly input here..." readonly>
```

*/

.form-control[readonly] {
  background-color: $input-bg-disabled; //override bootstrap
}

/*doc
---
title: Selects
name: form_selects
categories:
 - css_components_forms
 - css_all
---
Selects are excellent to use because they will automatically
behave as expected cross browser on different devices. Prefer
them over a custom dropdown whenever possible.

```html_example
<form class="styleguide-form" role="form">
  <select class="form-control">
    <option>default option</option>
    <option>an option</option>
    <option>another option</option>
  </select>
</form>
```
*/

.form-control {
  padding: 8px 14px; // override bootstrap
  //-webkit-appearance: none;
  position: relative;
  &:hover, &:focus {
    border-color: $input-border-color-hover;
  }

  font-weight: 400;

  &.disabled, &:disabled {
    opacity: 0.5;
  }

  border-radius: $input-border-radius;
}

.form-control:not([type=submit]),
.form-control:not([type=button]),
.form-control:not(button) {
  box-shadow: inset 0 0px 20px rgba(127, 127, 127, 0.2);

  &.active, &:active, &.hover, &:hover, &.focus, &:focus {
    box-shadow: inset 0 0px 20px rgba(127, 127, 127, 0.4);
  }
}

select.form-control {
  color: $input-color-hover;
  font-weight: $input-font-weight;
  &:hover, &:focus {
    color: $input-color-hover;
  }

  &.active, &:active {
    color: $input-color-active;
  }

  &.disabled, &:disabled {
    color: $input-color;
  }
}

/*doc
---
title: Sizing
name: 01_form_select_sizing
parent: form_selects
---

Set heights using the form control classes `.input-lg` and `.input-sm`.
Create larger or smaller form controls that match button sizes.

```html_example_table
<select class="form-control input-lg">
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<select class="form-control">
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<select class="form-control input-sm">
  <option>Option 1</option>
  <option>Option 2</option>
</select>
```

Set widths using grid column classes like `.col-lg-*`.
Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.

```html_example
<form class="styleguide-form" role="form">
  <div class="row">
    <div class="col-md-4">
      <label for="Small2WidthInput2">Small 2 Width Input</label>
      <input class="form-control" id="Small2WidthInput2" placeholder=".col-xs-2" type="text">
    </div>
    <div class="col-md-6">
      <label for="Small3WidthInput2">Small 3 Width Input</label>
      <input class="form-control" id="Small3WidthInput2" placeholder=".col-xs-3" type="text">
    </div>
    <div class="col-md-8">
      <label for="Small4WidthInput2">Small 4 Width Input</label>
      <input class="form-control" id="Small4WidthInput2" placeholder=".col-xs-4" type="text">
    </div>
  </div>
</form>
```

*/

/*doc
---
title: Fancy Selects
name: 02_form_fancy_select
parent: form_selects
---

This is a fancy select!

```html_example
<form class="styleguide-form" role="form" style="width: 200px">
  <label for="fancy-select">Description</label>
  <div class="select-fancy">
    <select class="form-control">
      <option>Fancy Option 1</option>
      <option>Fancy Option 2</option>
    </select>
  </div>
</form>
```

*/

.fancy-form-element {
  box-shadow: 0 3px 0 $neutral-7;
  background-color: white;
  @include transition-pui();
  border-radius: 4px;
  position: relative;

  &:hover {
    box-shadow: 0 3px 0 $neutral-5;
    cursor: pointer;
  }

  .form-control {
    border: none;
    box-shadow: none;
    background: transparent;
    background-image: none;
    -webkit-appearance: none;
    @include transition-pui(all, 150ms);
    font-size: 16px;
    font-weight: 900;
    &.has-error {
      border-radius: 3px;
      border: 1px solid $red-3;
    }
  }
}

.fancy-form-element-disabled {
  font-size: 16px;
  font-weight: 900;
  height: 30px;
  margin-top: 7px;
  margin-left: 7px;
}

.select-fancy {
  @extend .fancy-form-element;

  &:after {
   z-index: 2;
   content: "\f107";
   font-family: FontAwesome;
   position: absolute;
   right: 10px;
   top: 4px;
   font-size: 22px;
   color: $blue-4;
   @include transition-pui(all, 150ms);
  }

  &:hover {
    &:after, select {
      color: $blue-2;
    }
  }

  select {
    -moz-appearance:window;
    position: relative;
    z-index: 3;
    padding: 5px 8px;
    width: 100%;
    cursor: pointer;
  }
  select:focus {
    outline: none;
  }
  input {
    $input-margin: 5px;
    height: $input-height-base - 2*$input-margin;
    margin: $input-margin;
    width: 75%;
    padding: 0 5px;
    display: inline;
    border-radius: 4px;

    &:hover {
      background-color: $neutral-9;
    }
  }

  .form-inline.inline-labels .form-group & select {
    width: 100% !important; // Fancy select needs to override the size when inline because it is in a wrapping element
  }

  &.disabled {
    box-shadow: none;
    background-color: $neutral-10;

    select {
      &[disabled] {
        color: $neutral-5;
        background-color: transparent;
        cursor: default; // Bootstrap fix https://github.com/twbs/bootstrap-sass/issues/881
      }
    }

    &:hover {
      color: $neutral-8;
      background-color: $neutral-10;
    }

    &:after {
      display: none;
    }
  }
}

/*doc
---
title: Text Areas
name: form_textarea
categories:
 - css_components_forms
 - css_all
---

Text areas are used for larger amounts of input.

```html_example
<form class="styleguide-form" role="form">
  <div class="form-group">
    <label for="exampleTextAreaId">Description</label>
    <textarea class="form-control" id="exampleTextAreaId" rows="3"></textarea>
  </div>
</form>
```

*/

/*doc
---
title: Checkboxes & Radios
name: form_checkboxes
categories:
 - css_components_forms
 - css_all
---
Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.

### Default (stacked)

```html_example
<form class="styleguide-form" role="form">
  <div class="checkbox">
    <label>
      <input type="checkbox">
      Option one is this and that&mdash;be sure to include why it's great
    </label>
  </div>
  <div class="radio">
    <label>
      <input id="optionsRadios1" name="optionsRadios" type="radio" value="option1" checked>
      Option one is this and that&mdash;be sure to include why it's great
    </label>
  </div>
  <div class="radio">
    <label>
      <input id="optionsRadios2" name="optionsRadios" type="radio" value="option2">
      Option two can be something else and selecting it will deselect option one
    </label>
  </div>
</form>
```

*/

input[type="radio"] {
  margin-top: 2px; // bootstrap override: make radios line up with our small font.
}

/*doc
---
title: Inline Checkboxes & Radios
name: form_checkboxes_inline
parent: form_checkboxes
---

Use `.checkbox-inline` or `.radio-inline` class to a series of checkboxes or radios for controls appear on the same line.

```html_example
<form class="styleguide-form" role="form">
  <div class="form-group">
    <label class="checkbox-inline">
      <input id="inlineCheckbox1" type="checkbox" value="option1">
      1
    </label>
    <label class="checkbox-inline">
      <input id="inlineCheckbox2" type="checkbox" value="option2">
      2
    </label>
    <label class="checkbox-inline">
      <input id="inlineCheckbox3" type="checkbox" value="option3">
      3
    </label>
  </div>
  <div class="form-group">
    <label class="radio-inline">
      <input id="inlineradio1" type="radio" value="option1">
      1
    </label>
    <label class="radio-inline">
      <input id="inlineradio2" type="radio" value="option2">
      2
    </label>
    <label class="radio-inline">
      <input id="inlineradio3" type="radio" value="option3">
      3
    </label>
  </div>
</form>
```

*/

.form-inline.inline-labels {
  .form-group {
    input, select {
      width: auto !important;
    }
  }
}

/*doc
---
title: Help Text
name: form_help_text
categories:
 - css_components_forms
 - css_all
---
Help text
Block level help text for form controls.

```html_example
<form class="styleguide-form" role="form">
  <label for="demohelp"/>
  <input class="form-control" id="demohelp" type="text">
  <span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</form>
```

*/

/*doc
---
title: Validations
name: form_validation
categories:
 - css_components_forms
 - css_all
---

To show validation errors on a field, add `.has-error` to the field's form group.
This class can be used for all types of inputs.

Error messages should use the classes `.help-block.has-error`.

```html_example_table
<form class="styleguide-form" role="form">
  <div class="form-group has-error">
    <label class="control-label" for="inputError">
      Input with error
    </label>
    <input id="inputError" class="form-control" type="text">
    <span class="help-block has-error">
      Error help text
    </span>
  </div>
</form>

<form class="styleguide-form" role="form">
  <div class="form-group has-error">
    <div class="checkbox">
      <label class="control-label">
        <input type="checkbox" value="">
        Checkbox which needs to be checked
      </label>
      <span class="help-block has-error">
        Error help text
      </span>
    </div>
  </div>
</form>
```

If you're doing client-side validation and want to show successful validation of a field,
add `.has-success` to the field's form group.

<div class="alert alert-info mbxl">
  <p class="em-high">
    The <code>.has-success</code> class can only be used on inputs that have a text-box.
  </p>
</div>

```html_example_table
<form class="styleguide-form" role="form">
  <div class="form-group has-success">
    <label class="control-label" for="inputSuccess">
      Input with success
    </label>
    <input id="inputSuccess" class="form-control" type="text">
  </div>
</form>
```

*/

/* overrides bootstrap colors */
@mixin validation-label-color() {
  .control-label {
    color: $neutral-3;
  }
}

.has-success {
  position: relative;
  &:before {
    content: "\f00c";
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    height: $input-height-base;
    width: $input-height-base;
    line-height: $input-height-base;
    border-top-right-radius: $input-border-radius;
    border-bottom-right-radius: $input-border-radius;
    color: $teal-3;
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    text-decoration: inherit;
    text-align: center;
  }
  @include validation-label-color()
}


// align bootstrap errors for checkboxes and radio buttons
.radio,
.checkbox {
  padding-left: 20px;

  label {
    padding-left: 0;
  }
}


/*doc
---
title: Disabled Controls
name: form_disabled_controls
categories:
 - css_components_forms
 - css_all
---

Controls will occasionally need to be disabled.
You can do that by adding the `disabled` attribute.
Inputs, selects, checkboxes, fieldsets, buttons, and other form controls can all be disabled.

```html_example_table
<input class="form-control" type="text" placeholder="Disabled input here" disabled>

<select class="form-control" disabled>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<label>
  <input type="checkbox" disabled>
  I'm disabled!
</label>

<button class="btn" disabled>
  Hi
</button>
```

*/

/*doc
---
title: Static Controls
name: form_static_control
categories:
 - css_components_forms
 - css_all
---

When you need to place plain text next to a form label within a form,
use the `.form-control-static` class on a `<p>`.

Here's an example in a horizontal form:

```html_example
<form class="form-horizontal styleguide-form" role="form">
  <div class="form-group">
    <label class="col-md-4 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">email@example.com</p>
    </div>
  </div>
  <div class="form-group">
    <label class="col-md-4 control-label" for="inputPassword">Password</label>
    <div class="col-sm-10">
      <input class="form-control" id="inputPassword" placeholder="Password" type="password">
    </div>
  </div>
</form>
```

Here's an example in a vertical form:

```html_example
<form class="styleguide-form" role="form">
  <div class="form-group">
    <label class="control-label">Email</label>
    <p class="form-control-static">someguy@test.com</p>
  </div>
  <div class="form-group">
    <label class="control-label" for="name">Name</label>
    <input class="form-control" id="name" placeholder="name">
  </div>
</form>
```

*/

.help-block {
  color: $neutral-5;
  font-weight: 400;
  font-size: $font-size-small;
}

// Form control sizing

@include input-size('.input-sm', $input-height-small, $padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $border-radius-medium);

@include input-size('.input-lg', $input-height-large, $padding-large-vertical, $padding-large-horizontal, $font-size-medium, $line-height-large, $border-radius-large);


p.form-control-static {
  color: $neutral-3;
}

/*doc
---
title: Autoselect Text Inputs
name: form_autoselect_text_input
categories:
 - css_components_forms
 - css_all
---

This form is used to show information that a user may wish to copy and paste somewhere.

```html_example
<label for="readonlyautoselect"></label>
<input class="auto-select form-control" id="readonlyautoselect" data-behavior="AutoSelect" readonly="readonly" value="This should auto highlight">
```

*/

.form-control.auto-select {
  cursor: pointer;
}

/*pending
---
title: Content Editables
name: form_content_editable
categories:
  - Forms
  - All
---

This form looks and behaves mostly like a content editable field

```html_example
<form class="form-contenteditable"
      name="newEditableForm"
      ng-class="{"saving": editText.saving, "editing": editText.editing}"
      ng-controller="FormContentEditableController"
      ng-submit="editText.save()">
  <label class="txt-c">
    <div class="form-group mbn">
      <span class="form-contenteditable-hint link-lowlight">Hover text</span>
      <h5 class="type-primary-4 showing-text">Default text</h5>
      <div class="saving-text">Updating Text...</div>
      <input class="form-control" name="name"
             ng-blur="editText.save()"
             ng-focus="editText.enterEditMode()"
             ng-model="editText.newModel.name"
             required="required" tabIndex="-1" type="text">
      </input>
    </div>
  </label>
</form>
```
*/

.form-contenteditable {
  position: relative;

  .form-contenteditable-hint {
    display: none;
  }
  label {
    padding: 5px;
    cursor: pointer;
    margin-bottom: 0;
  }
  input.form-control {
    background-color: transparent;
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    text-align: center;
    @include h1();
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 3px;
    text-overflow:ellipsis;
    overflow: hidden;
    width: 100%;
    line-height: 1.2;
    height: auto; //bootstrap override of fixed height
  }
  .showing-text {
    margin: 0;
  }
  .saving-text {
    display: none;
  }

  &.editing .form-contenteditable-hint {
    display: none;
  }

  &:hover .form-contenteditable-hint {
    display: block;
  }

  &.saving:hover .form-contenteditable-hint {
    display: none;
  }

  &:hover .showing-text {
    display: none;
  }

  &.saving {
    .saving-text {
      display: block;
    }
    .showing-text {
      display: none;
    }
  }
}

/*doc
---
title: Toggle Switches
name: form_toggle_switch
categories:
 - css_components_forms
 - css_all
---

A toggle switch is a horizontally styled checkbox which represents true with blue and false with gray.

```html_example
<div class="form-group">
  <input id="toggleSwitch" class="toggle-switch toggle-switch-lg" type="checkbox">
  <label for="toggleSwitch">Toggle Switch</label>
</div>
```

*/

.toggle-switch {
  position: absolute;
  visibility: hidden;

  + label {
    position: relative;
    display: block;
    background-color: $neutral-7;
    color: $neutral-1;
    transition: background 0.4s;
    cursor: pointer;
    outline: none;
    text-indent: -99999px;

    &:after {
      position: absolute;
      top: 4px;
      left: 4px;
      bottom: 4px;
      display: block;
      background-color: $neutral-11;
      transition: margin 0.4s, background 0.4s;
      content: "";
    }
  }

  &:checked + label {
    background-color: $blue-2;
  }

  &[disabled] + label {
    @include opacity(.5);
  }

  &.toggle-switch-lg {
    + label {
      width: 80px;
      height: 40px;
      border-radius: 40px;

      &:after {
        width: 30px;
        border-radius: 15px;
      }
    }

    &:checked + label:after {
      margin-left: 42px;
    }
  }
}

/*doc
---
title: Stepper
name: form_stepper
categories:
 - css_components_forms
 - css_all
---

A stepper is a component that increments and decrements a number in an associated
text field by interacting with one of two buttons.



```html_example
<form class="styleguide-form form-inline" role="form">
  <div class="form-group">
    <label class="control-label" for="subscribers">Subscriber count</label>
    <div class="form-stepper">
      <button type="button" class="btn btn-default btn-decrement form-control" title="decrement value"><span class="a11y-only">decrement value</span>&minus;</button>
      <input class="form-control" min="1" step="1" name="subscribers" required="" type="number" value=1>
      <button type="button" class="btn btn-default btn-increment form-control" title="increment value"><span class="a11y-only">increment value</span>+</button>
    </div>
  </div>
</form>
```

*/

.form-stepper {
  /* omg hacks
    this is to get rid of the native number spinner
   */
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
  }
  input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
    width: 5em;
    text-align: center;
  }

  button {
    line-height: 1;
    padding: 10px 15px;
    border-radius: 4px;
    text-align: center;
  }
}

/*doc
---
title: Organization Scope Input
name: form_org_scope_input
categories:
 - css_components_forms
 - css_all
---

An input for an npm scope, prompting the user with an @ sign.

```html_example
<form role="form">
  <div class="form-group">
    <label for="orgScope">Organization Scope</label>
      <div class="scope-input">
        <input id="orgScope" class="scope-input-inner form-control">
      </div>
    </label>
  </div>
</form>
```
*/

.scope-input {
  position: relative;
}
.scope-input-inner {
  padding-left: 1.5em; // Not exact, but the required distance _does_ depend on typeface. This assumes @ and the line height are in a decent ratio, which seems a reasonable approximation.
}
.scope-input::after {
  position: absolute;
  top: 0;
  left: 0;
  content: "@";
  speak: none;
  padding: 8px;
  color: $gray-5;
}

/*pending
---
title: Focus Inputs
name: fo:rm_focus_input
categories:
  - Forms
  - All
---

Add the focus-input directive to an element that should be focused if the focus-input expression changes such that it evalutes as true.

```html_example
<a ng-click="focus_input1=true; focus_input2=false;">Focus input 1</a>
<br/>
<a ng-click="focus_input2=true; focus_input1=false;">Focus input 2</a>
<br/>
<input focus-input="focus_input1"></input>
<input focus-input="focus_input2"></input>
```
*/


/*doc
---
title: Link updater input
name: form_input_link_update
parent: 00_form_introduction
categories:
 - css_components_forms
 - css_all
---

The link updater input updates a link underneath the input with the information that is inside of the input

```html_example
<form role="form">
  <div class="form-group">
    <label for="username">Username</label>
    <div class="link-updater">
      <input name="username" id="username" class="form-control">
      <p class="mtl">https://www.npmjs.com/~<strong>username</strong></p>
    </div>
  </div>
</form>
```
*/

.link-updater {
  .error {
    color: $npm-brand;
    font-size: .9em;
  }

  p {
    color: $form-label-color;
  }
}