Skip to content

Instantly share code, notes, and snippets.

@akfzambrana
Last active November 20, 2017 13:09
Show Gist options
  • Save akfzambrana/6f20f8a36a0a99e76577f5c93bf713a5 to your computer and use it in GitHub Desktop.
Save akfzambrana/6f20f8a36a0a99e76577f5c93bf713a5 to your computer and use it in GitHub Desktop.
All inputs like text type
// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----
$input-text-like-types: (
'text',
'password',
'url',
'email',
'tel',
'search',
'number',
'date',
'month',
'week',
'datetime',
'datetime-local'
) !default;
@mixin all-input-text-like {
@at-root {
$teste: unique-id();
%#{$teste} {
@content;
}
@each $item in $input-text-like-types {
&[type='#{$item}'] {
@extend %#{$teste};
}
}
}
}
input {
@include all-input-text-like {
padding: {
top: 10px;
bottom: 15px;
};
}
}
.classe {
@include all-input-text-like {
border: solid 1px #f00;
}
}
input[type='text'], input[type='password'], input[type='url'], input[type='email'], input[type='tel'], input[type='search'], input[type='number'], input[type='date'], input[type='month'], input[type='week'], input[type='datetime'], input[type='datetime-local'] {
padding-top: 10px;
padding-bottom: 15px;
}
.classe[type='text'], .classe[type='password'], .classe[type='url'], .classe[type='email'], .classe[type='tel'], .classe[type='search'], .classe[type='number'], .classe[type='date'], .classe[type='month'], .classe[type='week'], .classe[type='datetime'], .classe[type='datetime-local'] {
border: solid 1px #f00;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment