_text-inputs.scss 3.4 KB

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