Sha256: 3190cfda0f53a26c31fcef0511cee1381804c2a27f61b991416e175dbb30652d
Contents?: true
Size: 1.85 KB
Versions: 26
Compression:
Stored size: 1.85 KB
Contents
@import "compass/support";
@import "compass/utilities/color";
// The prefixed support threshold for ::selection.
// Defaults to the $graceful-usage-threshold.
$selection-support-threshold: $graceful-usage-threshold !default;
// Style selected text.
//
// At this time, only two CSS properties are supported in most browsers
// during selection: color and background-color. Firefox supports the
// text-shadow property.
//
// At the stylesheet root, include the mixin within the * selector.
//
// * {
// @include selection(#fe57a1, #fff)
// }
//
// If a specific element or selector's selection is being styled
// you can use that selector instead. For example:
//
// .hot-pink {
// @include selection(#fe57a1, #fff)
// }
//
// These properties can be passed as arguments or you can set them via mixin
// content.
//
// For future-forward compatibility with other properties and aesthetic freedom,
// a mixin content block can be passed to this mixin in addition to or in place of
// passing arguments.
//
// .hot-pink {
// @include selection {
// background: #fe57a1;
// color: #fff;
// }
// }
//
// When `$background-color` is specified, but `$color` is not, this mixin
// styles the foreground color like the [contrasted
// mixin](/reference/compass/utilities/color/contrast/#mixin-contrasted). To
// specify only the background-color, you should pass an explicit `null` value
// for `$color` or use mixin content.
@mixin selection($background-color: null, $color: contrast-color($background-color)) {
@include with-each-prefix(css-selection, $selection-support-threshold) {
$selector: '';
@if $current-prefix != null {
$selector: $current-prefix + '-';
}
$selector: "&::#{$selector}selection";
#{$selector} {
color: $color;
background-color: $background-color;
@content;
}
}
}
Version data entries
26 entries across 26 versions & 4 rubygems