Mercurial > nebulaweb3
comparison default/assets/scss/vendors/bourbon/library/_contrast-switch.scss @ 0:1d038bc9b3d2 default tip
Up:default
author | Liny <dev@neowd.com> |
---|---|
date | Sat, 31 May 2025 09:21:51 +0800 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
-1:000000000000 | 0:1d038bc9b3d2 |
---|---|
1 @charset "UTF-8"; | |
2 | |
3 /// Switches between two colors based on the lightness of a another color. Great | |
4 /// for building button styles. | |
5 /// | |
6 /// @argument {color} $base-color | |
7 /// The color to evaluate lightness against. | |
8 /// | |
9 /// @argument {color} $dark-color [#000] | |
10 /// The color to be output when `$base-color` is light. | |
11 /// | |
12 /// @argument {color} $light-color [#fff] | |
13 /// The color to be output when `$base-color` is dark. | |
14 /// | |
15 /// @return {color} | |
16 /// | |
17 /// @example scss | |
18 /// .element { | |
19 /// color: contrast-switch(#bae6e6); | |
20 /// } | |
21 /// | |
22 /// // CSS Output | |
23 /// .element { | |
24 /// color: #000; | |
25 /// } | |
26 /// | |
27 /// @example scss | |
28 /// .element { | |
29 /// $button-color: #2d72d9; | |
30 /// background-color: $button-color; | |
31 /// color: contrast-switch($button-color, #222, #eee); | |
32 /// } | |
33 /// | |
34 /// // CSS Output | |
35 /// .element { | |
36 /// background-color: #2d72d9; | |
37 /// color: #eee; | |
38 /// } | |
39 /// | |
40 /// @require {function} _is-light | |
41 /// | |
42 /// @since 5.0.0 | |
43 | |
44 @function contrast-switch( | |
45 $base-color, | |
46 $dark-color: _retrieve-bourbon-setting("contrast-switch-dark-color"), | |
47 $light-color: _retrieve-bourbon-setting("contrast-switch-light-color") | |
48 ) { | |
49 | |
50 @if not _is-color($base-color) { | |
51 @error "`#{$base-color}` is not a valid color for the `$base-color` " + | |
52 "argument in the `contrast-switch` function."; | |
53 } @else if not _is-color($dark-color) { | |
54 @error "`#{$dark-color}` is not a valid color for the `$dark-color` " + | |
55 "argument in the `contrast-switch` function."; | |
56 } @else if not _is-color($light-color) { | |
57 @error "`#{$light-color}` is not a valid color for the `$light-color` " + | |
58 "argument in the `contrast-switch` function."; | |
59 } @else { | |
60 @return if(_is-light($base-color), $dark-color, $light-color); | |
61 } | |
62 } |