Mercurial > nebulaweb3
view 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 |
line wrap: on
line source
@charset "UTF-8"; /// Switches between two colors based on the lightness of a another color. Great /// for building button styles. /// /// @argument {color} $base-color /// The color to evaluate lightness against. /// /// @argument {color} $dark-color [#000] /// The color to be output when `$base-color` is light. /// /// @argument {color} $light-color [#fff] /// The color to be output when `$base-color` is dark. /// /// @return {color} /// /// @example scss /// .element { /// color: contrast-switch(#bae6e6); /// } /// /// // CSS Output /// .element { /// color: #000; /// } /// /// @example scss /// .element { /// $button-color: #2d72d9; /// background-color: $button-color; /// color: contrast-switch($button-color, #222, #eee); /// } /// /// // CSS Output /// .element { /// background-color: #2d72d9; /// color: #eee; /// } /// /// @require {function} _is-light /// /// @since 5.0.0 @function contrast-switch( $base-color, $dark-color: _retrieve-bourbon-setting("contrast-switch-dark-color"), $light-color: _retrieve-bourbon-setting("contrast-switch-light-color") ) { @if not _is-color($base-color) { @error "`#{$base-color}` is not a valid color for the `$base-color` " + "argument in the `contrast-switch` function."; } @else if not _is-color($dark-color) { @error "`#{$dark-color}` is not a valid color for the `$dark-color` " + "argument in the `contrast-switch` function."; } @else if not _is-color($light-color) { @error "`#{$light-color}` is not a valid color for the `$light-color` " + "argument in the `contrast-switch` function."; } @else { @return if(_is-light($base-color), $dark-color, $light-color); } }