_text-inputs.scss (3482B)
1 @charset "UTF-8"; 2 3 /// Generates variables for all text-based inputs. Please note that you must use interpolation on the variable: `#{$all-text-inputs}`. 4 /// 5 /// @example scss - Usage 6 /// #{$all-text-inputs} { 7 /// border: 1px solid #f00; 8 /// } 9 /// 10 /// #{$all-text-inputs-focus}, 11 /// #{$all-text-inputs-hover} { 12 /// border: 1px solid #0f0; 13 /// } 14 /// 15 /// #{$all-text-inputs-active} { 16 /// border: 1px solid #00f; 17 /// } 18 /// 19 /// @example css - CSS Output 20 /// input[type="color"], 21 /// input[type="date"], 22 /// input[type="datetime"], 23 /// input[type="datetime-local"], 24 /// input[type="email"], 25 /// input[type="month"], 26 /// input[type="number"], 27 /// input[type="password"], 28 /// input[type="search"], 29 /// input[type="tel"], 30 /// input[type="text"], 31 /// input[type="time"], 32 /// input[type="url"], 33 /// input[type="week"], 34 /// textarea { 35 /// border: 1px solid #f00; 36 /// } 37 /// 38 /// input[type="color"]:focus, 39 /// input[type="date"]:focus, 40 /// input[type="datetime"]:focus, 41 /// input[type="datetime-local"]:focus, 42 /// input[type="email"]:focus, 43 /// input[type="month"]:focus, 44 /// input[type="number"]:focus, 45 /// input[type="password"]:focus, 46 /// input[type="search"]:focus, 47 /// input[type="tel"]:focus, 48 /// input[type="text"]:focus, 49 /// input[type="time"]:focus, 50 /// input[type="url"]:focus, 51 /// input[type="week"]:focus, 52 /// textarea:focus, 53 /// input[type="color"]:hover, 54 /// input[type="date"]:hover, 55 /// input[type="datetime"]:hover, 56 /// input[type="datetime-local"]:hover, 57 /// input[type="email"]:hover, 58 /// input[type="month"]:hover, 59 /// input[type="number"]:hover, 60 /// input[type="password"]:hover, 61 /// input[type="search"]:hover, 62 /// input[type="tel"]:hover, 63 /// input[type="text"]:hover, 64 /// input[type="time"]:hover, 65 /// input[type="url"]:hover, 66 /// input[type="week"]:hover, 67 /// textarea:hover { 68 /// border: 1px solid #0f0; 69 /// } 70 /// 71 /// input[type="color"]:active, 72 /// input[type="date"]:active, 73 /// input[type="datetime"]:active, 74 /// input[type="datetime-local"]:active, 75 /// input[type="email"]:active, 76 /// input[type="month"]:active, 77 /// input[type="number"]:active, 78 /// input[type="password"]:active, 79 /// input[type="search"]:active, 80 /// input[type="tel"]:active, 81 /// input[type="text"]:active, 82 /// input[type="time"]:active, 83 /// input[type="url"]:active, 84 /// input[type="week"]:active, 85 /// textarea:active { 86 /// border: 1px solid #00f; 87 /// } 88 /// 89 /// @require assign-inputs 90 /// 91 /// @type List 92 93 $text-inputs-list: 'input[type="color"]', 94 'input[type="date"]', 95 'input[type="datetime"]', 96 'input[type="datetime-local"]', 97 'input[type="email"]', 98 'input[type="month"]', 99 'input[type="number"]', 100 'input[type="password"]', 101 'input[type="search"]', 102 'input[type="tel"]', 103 'input[type="text"]', 104 'input[type="time"]', 105 'input[type="url"]', 106 'input[type="week"]', 107 'input:not([type])', 108 'textarea'; 109 110 $all-text-inputs: assign-inputs($text-inputs-list); 111 $all-text-inputs-active: assign-inputs($text-inputs-list, active); 112 $all-text-inputs-focus: assign-inputs($text-inputs-list, focus); 113 $all-text-inputs-hover: assign-inputs($text-inputs-list, hover);