2017-06-14 07:30:33 +02:00
// Bootstrap functions
//
2018-07-10 02:59:22 +02:00
// Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
2017-06-14 07:30:33 +02:00
// Ascending
// Used to evaluate Sass maps like our grid breakpoints.
2017-06-14 07:21:50 +02:00
@mixin _assert-ascending ( $map , $map-name ) {
$prev-key : null ;
$prev-num : null ;
@each $key , $num in $map {
2019-03-05 11:47:48 +01:00
@if $prev-num == null or unit ( $num ) == " % " or unit ( $prev-num ) == " % " {
2017-06-14 07:21:50 +02:00
// Do nothing
} @else if not comparable ( $prev-num , $num ) {
@warn " Potentially invalid value for #{ $map-name } : This map must be in ascending order, but key ' #{ $key } ' has value #{ $num } whose unit makes it incomparable to #{ $prev-num } , the value of the previous key ' #{ $prev-key } ' ! " ;
} @else if $prev-num >= $num {
@warn " Invalid value for #{ $map-name } : This map must be in ascending order, but key ' #{ $key } ' has value #{ $num } which isn't greater than #{ $prev-num } , the value of the previous key ' #{ $prev-key } ' ! " ;
}
$prev-key : $key ;
$prev-num : $num ;
}
}
2017-06-14 07:30:33 +02:00
// Starts at zero
2019-02-07 10:19:38 +01:00
// Used to ensure the min-width of the lowest breakpoint starts at 0.
@mixin _assert-starts-at-zero ( $map , $map-name : " $grid-breakpoints " ) {
2017-06-14 07:30:33 +02:00
$values : map-values ( $map ) ;
$first-value : nth ( $values , 1 ) ;
@if $first-value != 0 {
2019-02-07 10:19:38 +01:00
@warn " First breakpoint in #{ $map-name } must start at 0, but starts at #{ $first-value } . " ;
2017-06-14 07:30:33 +02:00
}
}
2019-05-23 11:56:03 +02:00
// Internal Bootstrap function to turn maps into its negative variant.
2019-05-24 23:09:10 +02:00
// It prefixes the keys with `n` and makes the value negative.
2019-05-23 11:56:03 +02:00
@function negativify-map ( $map ) {
$result : () ;
@each $key , $value in $map {
@if $key != 0 {
$result : map-merge ( $result , ( " n " + $key : ( - $value ))) ;
}
}
@return $result ;
}
// Get multiple keys from a sass map
@function map-get-multiple ( $map , $values ) {
$result : () ;
@each $key , $value in $map {
@if ( index ( $values , $key ) != null ) {
$result : map-merge ( $result , ( $key : $value )) ;
}
}
2019-08-14 00:03:55 +02:00
@return $result ;
2019-05-23 11:56:03 +02:00
}
2017-06-14 07:21:50 +02:00
// Replace `$search` with `$replace` in `$string`
2017-06-14 07:30:33 +02:00
// Used on our SVG icon backgrounds for custom forms.
//
2017-06-14 07:21:50 +02:00
// @author Hugo Giraudel
// @param {String} $string - Initial string
// @param {String} $search - Substring to replace
// @param {String} $replace ('') - New value
// @return {String} - Updated string
@function str-replace ( $string , $search , $replace : " " ) {
$index : str-index ( $string , $search ) ;
@if $index {
@return str-slice ( $string , 1 , $index - 1 ) + $replace + str-replace ( str-slice ( $string , $index + str-length ( $search )) , $search , $replace ) ;
}
@return $string ;
}
2017-06-15 20:15:48 +02:00
2019-07-20 03:57:12 +02:00
// See https://codepen.io/kevinweber/pen/dXWoRw
@function escape-svg ( $string ) {
@if str-index ( $string , " data:image/svg+xml " ) {
@each $char , $encoded in $escaped-characters {
$string : str-replace ( $string , $char , $encoded ) ;
}
}
@return $string ;
}
2017-06-15 20:15:48 +02:00
// Color contrast
2018-10-21 09:33:53 +02:00
@function color-yiq ( $color , $dark : $yiq-text-dark , $light : $yiq-text-light ) {
2017-06-15 20:15:48 +02:00
$r : red ( $color ) ;
$g : green ( $color ) ;
$b : blue ( $color ) ;
$yiq : (( $r * 299 ) + ( $g * 587 ) + ( $b * 114 )) / 1000 ;
2019-05-03 20:18:42 +02:00
@return if ( $yiq >= $yiq-contrasted-threshold , $dark , $light ) ;
2017-06-15 20:15:48 +02:00
}
2019-07-25 09:41:13 +02:00
// Request a color level
@function color-level ( $color : $primary , $level : 0 ) {
2018-01-21 02:00:44 +01:00
$color-base : if ( $level > 0 , $black , $white ) ;
2017-09-26 14:05:59 +02:00
$level : abs ( $level ) ;
2017-06-26 03:31:03 +02:00
2017-09-26 14:05:59 +02:00
@return mix ( $color-base , $color , $level * $theme-color-interval ) ;
2017-06-26 03:31:03 +02:00
}
2019-10-18 20:04:27 +02:00
@function tint-color ( $color , $level ) {
@return mix ( white , $color , $level * $theme-color-interval ) ;
}
@function shade-color ( $color , $level ) {
@return mix ( black , $color , $level * $theme-color-interval ) ;
}
2019-09-03 19:18:44 +02:00
// Return valid calc
@function add ( $value1 , $value2 , $return-calc : true ) {
@if $value1 == null {
@return $value2 ;
}
@if $value2 == null {
@return $value1 ;
}
@if type-of ( $value1 ) == number and type-of ( $value2 ) == number and comparable ( $value1 , $value2 ) {
@return $value1 + $value2 ;
}
@return if ( $return-calc == true , calc ( #{ $value1 } + #{ $value2 } ) , #{ $value1 } + #{ $value2 } ) ;
}
@function subtract ( $value1 , $value2 , $return-calc : true ) {
@if $value1 == null and $value2 == null {
@return null ;
}
@if $value1 == null {
@return - $value2 ;
}
@if $value2 == null {
@return $value1 ;
}
@if type-of ( $value1 ) == number and type-of ( $value2 ) == number and comparable ( $value1 , $value2 ) {
@return $value1 - $value2 ;
}
@return if ( $return-calc == true , calc ( #{ $value1 } - #{ $value2 } ) , #{ $value1 } - #{ $value2 } ) ;
}