Permalink
Browse files

Updated html5-input-types to support :hover and :focus pseudo-classes

  • Loading branch information...
1 parent 5f618e3 commit a2643efb92e6f02a7a1afdf6785fbd00c30ed683 Phil LaPier committed Dec 5, 2012
Showing with 21 additions and 1 deletion.
  1. +21 −1 app/assets/stylesheets/addons/_html5-input-types.scss
@@ -21,15 +21,35 @@ $inputs-list: 'input[type="email"]',
'input[type="week"]';
$unquoted-inputs-list: ();
-
@each $input-type in $inputs-list {
$unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma);
}
$all-text-inputs: $unquoted-inputs-list;
+
+// Hover Pseudo-class
+//************************************************************************//
+$all-text-inputs-hover: ();
+@each $input-type in $unquoted-inputs-list {
+ $input-type-hover: $input-type + ":hover";
+ $all-text-inputs-hover: append($all-text-inputs-hover, $input-type-hover, comma);
+}
+
+// Focus Pseudo-class
+//************************************************************************//
+$all-text-inputs-focus: ();
+@each $input-type in $unquoted-inputs-list {
+ $input-type-focus: $input-type + ":focus";
+ $all-text-inputs-focus: append($all-text-inputs-focus, $input-type-focus, comma);
+}
+
// You must use interpolation on the variable:
// #{$all-text-inputs}
+// #{$all-text-inputs-hover}
+// #{$all-text-inputs-focus}
+
+// Example
//************************************************************************//
// #{$all-text-inputs}, textarea {
// border: 1px solid red;

0 comments on commit a2643ef

Please sign in to comment.