Compass User Interface
Provides mixins for the CSS3 User Interface module.
This file can be imported using:
@import "compass/css3/user-interface"
Examples
- Input Placeholder
- css3 mixin to style input placeholders
Imports
- Browser Support – Provides configuration options for the Compass Browser Support Matrix.
Configurable Variables help
$userselect-support-threshold
$graceful-usage-threshold
The prefixed support threshold for user-select. Defaults to the $graceful-usage-threshold.
$input-placeholder-support-threshold
$graceful-usage-threshold
The prefixed support threshold for input-placeholder. Defaults to the $graceful-usage-threshold.
Mixins
view sourceuser-select($select)
=user-select($select) $select: unquote($select) +with-each-prefix(user-select-none, $userselect-support-threshold) // old Firefox used a proprietary `-moz-none` value, starting with Firefox 21 `none` behaves like `-moz-none` // @link https://developer.mozilla.org/en-US/docs/Web/CSS/user-select +prefix-prop(user-select, if($current-prefix == -moz and $select == "none", -moz-none, $select))
@mixin user-select($select) { $select: unquote($select); @include with-each-prefix(user-select-none, $userselect-support-threshold) { // old Firefox used a proprietary `-moz-none` value, starting with Firefox 21 `none` behaves like `-moz-none` // @link https://developer.mozilla.org/en-US/docs/Web/CSS/user-select @include prefix-prop(user-select, if($current-prefix == -moz and $select == "none", -moz-none, $select)); } }
This property controls the selection model and granularity of an element.
@param $select [ none | text | toggle | element | elements | all | inherit ]
input-placeholder
=input-placeholder +with-each-prefix(css-placeholder, $input-placeholder-support-threshold) @if $current-prefix == -webkit &::-webkit-input-placeholder @content @else if $current-prefix == -moz // for Firefox 19 and below @if support-legacy-browser("firefox", "4", "19", $threshold: $input-placeholder-support-threshold) &:-moz-placeholder @content // for Firefox 20 and above &::-moz-placeholder @content @else if $current-prefix == -ms &:-ms-input-placeholder @content // This is not standardized yet so no official selector is generated.
@mixin input-placeholder { @include with-each-prefix(css-placeholder, $input-placeholder-support-threshold) { @if $current-prefix == -webkit { &::-webkit-input-placeholder { @content; } } @else if $current-prefix == -moz { // for Firefox 19 and below @if support-legacy-browser("firefox", "4", "19", $threshold: $input-placeholder-support-threshold) { &:-moz-placeholder { @content; } } // for Firefox 20 and above &::-moz-placeholder { @content; } } @else if $current-prefix == -ms { &:-ms-input-placeholder { @content; } } } // This is not standardized yet so no official selector is generated. }
Style the html5 input placeholder in browsers that support it.
The styles for the input placeholder are passed as mixin content and the selector comes from the mixin's context.
For example:
#{elements-of-type(text-input)} {
@include input-placeholder {
color: #bfbfbf;
font-style: italic;
}
}
if you want to apply the placeholder styles to all elements supporting
the input-placeholder
pseudo class (beware of performance impacts):
* {
@include input-placeholder {
color: #bfbfbf;
font-style: italic;
}
}