Sha256: 3c441d6ef28f786f040bf0ff8ad588f45e3c84d65d28308622c1d537f4af1240
Contents?: true
Size: 1.34 KB
Versions: 6
Compression:
Stored size: 1.34 KB
Contents
/// Style placeholder attributes on form elements
///
/// @author Joe Green
@mixin placeholder($color) {
&::-webkit-input-placeholder {
color: $color;
}
&::-moz-placeholder {
color: $color;
opacity: 1;
}
&:-ms-input-placeholder {
color: $color;
}
}
/// Conveniently style form input pseudo-classes for different form states
///
/// @author Joe Green
///
/// @param {Color} $color
/// The colour to be used for the form input's border and box-shadow
@mixin form-element-style($color, $color--active: false) {
border-color: $color;
&:hover,
&:focus,
&:checked {
border-color: if($color--active, $color--active, $color);
}
&:focus {
box-shadow: inset 0 0 0 1px if($color--active, $color--active, $color);
}
}
/// Visually make disabled form inputs look like they can't be interacted with
///
/// @author Joe Green
///
/// @param {Color} $color [#ddd]
/// Foreground placeholder and border colour
///
/// @param {Color} $background-color [#fafafa]
/// Background colour of the form input
@mixin form-element-disabled($color: $c-form-element-disabled-fg, $background: $c-form-element-disabled-bg) {
@include form-element-style($color);
@include placeholder($color);
color: $color;
background-color: $background;
cursor: default;
&:focus {
@include placeholder($color);
box-shadow: none;
}
}
Version data entries
6 entries across 6 versions & 1 rubygems