thoughtbot/bourbon

View on GitHub
core/bourbon/library/_text-inputs.scss

Summary

Maintainability
Test Coverage
@charset "UTF-8";

////
/// @type list
///
/// @require {function} _assign-inputs
///
/// @require {variable} $_text-inputs-list
////

/// A list of all _text-based_ HTML inputs. Please note that you must
/// interpolate the variable (`#{}`) to use it as a selector.
///
/// @example scss
///   #{$all-text-inputs} {
///     border: 1px solid #ccc;
///   }
///
///   // CSS Output
///   [type='color'],
///   [type='date'],
///   [type='datetime'],
///   [type='datetime-local'],
///   [type='email'],
///   [type='month'],
///   [type='number'],
///   [type='password'],
///   [type='search'],
///   [type='tel'],
///   [type='text'],
///   [type='time'],
///   [type='url'],
///   [type='week'],
///   input:not([type]),
///   textarea {
///     border: 1px solid #ccc;
///   }

$all-text-inputs: _assign-inputs($_text-inputs-list);

/// A list of all _text-based_ HTML inputs with the `:active` pseudo-class
/// applied. Please note that you must interpolate the variable (`#{}`) to use
/// it as a selector.
///
/// @example scss
///   #{$all-text-inputs-active} {
///     border: 1px solid #aaa;
///   }
///
///   // CSS Output
///   [type='color']:active,
///   [type='date']:active,
///   [type='datetime']:active,
///   [type='datetime-local']:active,
///   [type='email']:active,
///   [type='month']:active,
///   [type='number']:active,
///   [type='password']:active,
///   [type='search']:active,
///   [type='tel']:active,
///   [type='text']:active,
///   [type='time']:active,
///   [type='url']:active,
///   [type='week']:active,
///   input:not([type]):active,
///   textarea:active {
///     border: 1px solid #aaa;
///   }

$all-text-inputs-active: _assign-inputs($_text-inputs-list, active);

/// A list of all _text-based_ HTML inputs with the `:focus` pseudo-class
/// applied. Please note that you must interpolate the variable (`#{}`) to use
/// it as a selector.
///
/// @example scss
///   #{$all-text-inputs-focus} {
///     border: 1px solid #1565c0;
///   }
///
///   // CSS Output
///   [type='color']:focus,
///   [type='date']:focus,
///   [type='datetime']:focus,
///   [type='datetime-local']:focus,
///   [type='email']:focus,
///   [type='month']:focus,
///   [type='number']:focus,
///   [type='password']:focus,
///   [type='search']:focus,
///   [type='tel']:focus,
///   [type='text']:focus,
///   [type='time']:focus,
///   [type='url']:focus,
///   [type='week']:focus,
///   input:not([type]):focus,
///   textarea:focus {
///     border: 1px solid #1565c0;
///   }

$all-text-inputs-focus: _assign-inputs($_text-inputs-list, focus);

/// A list of all _text-based_ HTML inputs with the `:hover` pseudo-class
/// applied. Please note that you must interpolate the variable (`#{}`) to use
/// it as a selector.
///
/// @example scss
///   #{$all-text-inputs-hover} {
///     border: 1px solid #aaa;
///   }
///
///   // CSS Output
///   [type='color']:hover,
///   [type='date']:hover,
///   [type='datetime']:hover,
///   [type='datetime-local']:hover,
///   [type='email']:hover,
///   [type='month']:hover,
///   [type='number']:hover,
///   [type='password']:hover,
///   [type='search']:hover,
///   [type='tel']:hover,
///   [type='text']:hover,
///   [type='time']:hover,
///   [type='url']:hover,
///   [type='week']:hover,
///   input:not([type]):hover,
///   textarea:hover {
///     border: 1px solid #aaa;
///   }

$all-text-inputs-hover: _assign-inputs($_text-inputs-list, hover);

/// A list of all _text-based_ HTML inputs with the `:invalid` pseudo-class
/// applied. Please note that you must interpolate the variable (`#{}`) to use
/// it as a selector.
///
/// @example scss
///   #{$all-text-inputs-invalid} {
///     border: 1px solid #00f;
///   }
///
///   // CSS Output
///   [type='color']:invalid,
///   [type='date']:invalid,
///   [type='datetime']:invalid,
///   [type='datetime-local']:invalid,
///   [type='email']:invalid,
///   [type='month']:invalid,
///   [type='number']:invalid,
///   [type='password']:invalid,
///   [type='search']:invalid,
///   [type='tel']:invalid,
///   [type='text']:invalid,
///   [type='time']:invalid,
///   [type='url']:invalid,
///   [type='week']:invalid,
///   input:not([type]):invalid,
///   textarea:invalid {
///     border: 1px solid #00f;
///   }

$all-text-inputs-invalid: _assign-inputs($_text-inputs-list, invalid);