assets/sass/bourbon/bourbon/library/_text-inputs.scss

   1 @charset "UTF-8";
   2
   3 ////
   4 /// @type list
   5 ///
   6 /// @require {function} _assign-inputs
   7 ///
   8 /// @require {variable} $_text-inputs-list
   9 ////
  10
  11 /// A list of all _text-based_ HTML inputs. Please note that you must
  12 /// interpolate the variable (`#{}`) to use it as a selector.
  13 ///
  14 /// @example scss
  15 ///   #{$all-text-inputs} {
  16 ///     border: 1px solid #ccc;
  17 ///   }
  18 ///
  19 ///   // CSS Output
  20 ///   [type='color'],
  21 ///   [type='date'],
  22 ///   [type='datetime'],
  23 ///   [type='datetime-local'],
  24 ///   [type='email'],
  25 ///   [type='month'],
  26 ///   [type='number'],
  27 ///   [type='password'],
  28 ///   [type='search'],
  29 ///   [type='tel'],
  30 ///   [type='text'],
  31 ///   [type='time'],
  32 ///   [type='url'],
  33 ///   [type='week'],
  34 ///   input:not([type]),
  35 ///   textarea {
  36 ///     border: 1px solid #ccc;
  37 ///   }
  38
  39 $all-text-inputs: _assign-inputs($_text-inputs-list);
  40
  41 /// A list of all _text-based_ HTML inputs with the `:active` pseudo-class
  42 /// applied. Please note that you must interpolate the variable (`#{}`) to use
  43 /// it as a selector.
  44 ///
  45 /// @example scss
  46 ///   #{$all-text-inputs-active} {
  47 ///     border: 1px solid #aaa;
  48 ///   }
  49 ///
  50 ///   // CSS Output
  51 ///   [type='color']:active,
  52 ///   [type='date']:active,
  53 ///   [type='datetime']:active,
  54 ///   [type='datetime-local']:active,
  55 ///   [type='email']:active,
  56 ///   [type='month']:active,
  57 ///   [type='number']:active,
  58 ///   [type='password']:active,
  59 ///   [type='search']:active,
  60 ///   [type='tel']:active,
  61 ///   [type='text']:active,
  62 ///   [type='time']:active,
  63 ///   [type='url']:active,
  64 ///   [type='week']:active,
  65 ///   input:not([type]):active,
  66 ///   textarea:active {
  67 ///     border: 1px solid #aaa;
  68 ///   }
  69
  70 $all-text-inputs-active: _assign-inputs($_text-inputs-list, active);
  71
  72 /// A list of all _text-based_ HTML inputs with the `:focus` pseudo-class
  73 /// applied. Please note that you must interpolate the variable (`#{}`) to use
  74 /// it as a selector.
  75 ///
  76 /// @example scss
  77 ///   #{$all-text-inputs-focus} {
  78 ///     border: 1px solid #1565c0;
  79 ///   }
  80 ///
  81 ///   // CSS Output
  82 ///   [type='color']:focus,
  83 ///   [type='date']:focus,
  84 ///   [type='datetime']:focus,
  85 ///   [type='datetime-local']:focus,
  86 ///   [type='email']:focus,
  87 ///   [type='month']:focus,
  88 ///   [type='number']:focus,
  89 ///   [type='password']:focus,
  90 ///   [type='search']:focus,
  91 ///   [type='tel']:focus,
  92 ///   [type='text']:focus,
  93 ///   [type='time']:focus,
  94 ///   [type='url']:focus,
  95 ///   [type='week']:focus,
  96 ///   input:not([type]):focus,
  97 ///   textarea:focus {
  98 ///     border: 1px solid #1565c0;
  99 ///   }
 100
 101 $all-text-inputs-focus: _assign-inputs($_text-inputs-list, focus);
 102
 103 /// A list of all _text-based_ HTML inputs with the `:hover` pseudo-class
 104 /// applied. Please note that you must interpolate the variable (`#{}`) to use
 105 /// it as a selector.
 106 ///
 107 /// @example scss
 108 ///   #{$all-text-inputs-hover} {
 109 ///     border: 1px solid #aaa;
 110 ///   }
 111 ///
 112 ///   // CSS Output
 113 ///   [type='color']:hover,
 114 ///   [type='date']:hover,
 115 ///   [type='datetime']:hover,
 116 ///   [type='datetime-local']:hover,
 117 ///   [type='email']:hover,
 118 ///   [type='month']:hover,
 119 ///   [type='number']:hover,
 120 ///   [type='password']:hover,
 121 ///   [type='search']:hover,
 122 ///   [type='tel']:hover,
 123 ///   [type='text']:hover,
 124 ///   [type='time']:hover,
 125 ///   [type='url']:hover,
 126 ///   [type='week']:hover,
 127 ///   input:not([type]):hover,
 128 ///   textarea:hover {
 129 ///     border: 1px solid #aaa;
 130 ///   }
 131
 132 $all-text-inputs-hover: _assign-inputs($_text-inputs-list, hover);
 133
 134 /// A list of all _text-based_ HTML inputs with the `:invalid` pseudo-class
 135 /// applied. Please note that you must interpolate the variable (`#{}`) to use
 136 /// it as a selector.
 137 ///
 138 /// @example scss
 139 ///   #{$all-text-inputs-invalid} {
 140 ///     border: 1px solid #00f;
 141 ///   }
 142 ///
 143 ///   // CSS Output
 144 ///   [type='color']:invalid,
 145 ///   [type='date']:invalid,
 146 ///   [type='datetime']:invalid,
 147 ///   [type='datetime-local']:invalid,
 148 ///   [type='email']:invalid,
 149 ///   [type='month']:invalid,
 150 ///   [type='number']:invalid,
 151 ///   [type='password']:invalid,
 152 ///   [type='search']:invalid,
 153 ///   [type='tel']:invalid,
 154 ///   [type='text']:invalid,
 155 ///   [type='time']:invalid,
 156 ///   [type='url']:invalid,
 157 ///   [type='week']:invalid,
 158 ///   input:not([type]):invalid,
 159 ///   textarea:invalid {
 160 ///     border: 1px solid #00f;
 161 ///   }
 162
 163 $all-text-inputs-invalid: _assign-inputs($_text-inputs-list, invalid);