Sha256: 1b30d6ac217f219dd6d872a5e0bdf1e82d028adea97045afbd251a06f40cea47
Contents?: true
Size: 2 KB
Versions: 16
Compression:
Stored size: 2 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;
}
}
/// Creates a larger version of a form input, allows us to set the styles
/// in a responsive manner
///
/// @author David Annez
/// @group Forms
///
/// @param {String} $input-size [base]
/// Name of the size used in the form element list
///
/// @param {List} $input-sizes [$form-element-sizes]
/// List of sizes to pass through. Should contain 4 values per item,
/// `(size-name, height, padding, font-size)`
@mixin input-sizing($input-size: base, $input-sizes: $form-element-sizes) {
@each $size in $input-sizes {
@if nth($size, 1) == $input-size {
height: nth($size, 2);
padding: nth($size, 3);
font-size: nth($size, 4);
}
}
}
Version data entries
16 entries across 16 versions & 1 rubygems