1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
@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;
}
}
}
|
