Q
Version: 1.0.1
Source on Github

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

  1. Browser Support – Provides configuration options for the Compass Browser Support Matrix.

Configurable Variables help

$graceful-usage-threshold

The prefixed support threshold for user-select. Defaults to the $graceful-usage-threshold.

$graceful-usage-threshold

The prefixed support threshold for input-placeholder. Defaults to the $graceful-usage-threshold.

Mixins

view source

=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 ]

view source

=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;
  }
}