2017-06-14 01:30:33 -04:00
// Bootstrap functions
//
// Utility mixins and functions for evalutating source code across our variables, maps, and mixins.
// Ascending
// Used to evaluate Sass maps like our grid breakpoints.
2017-06-14 01:21:50 -04:00
@mixin _assert-ascending ( $map , $map-name ) {
$prev-key : null ;
$prev-num : null ;
@each $key , $num in $map {
@if $prev-num == null {
// 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 01:30:33 -04:00
// Starts at zero
// Another grid mixin that ensures the min-width of the lowest breakpoint starts at 0.
@mixin _assert-starts-at-zero ( $map ) {
$values : map-values ( $map ) ;
$first-value : nth ( $values , 1 ) ;
@if $first-value != 0 {
@warn " First breakpoint in `$grid-breakpoints` must start at 0, but starts at #{ $first-value } . " ;
}
}
2017-06-14 01:21:50 -04:00
// Replace `$search` with `$replace` in `$string`
2017-06-14 01:30:33 -04:00
// Used on our SVG icon backgrounds for custom forms.
//
2017-06-14 01:21:50 -04: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 14:15:48 -04:00
// Color contrast
@mixin color-yiq ( $color ) {
$r : red ( $color ) ;
$g : green ( $color ) ;
$b : blue ( $color ) ;
$yiq : (( $r * 299 ) + ( $g * 587 ) + ( $b * 114 )) / 1000 ;
2017-06-25 21:11:16 -04:00
@if ( $yiq >= 150 ) {
2017-06-15 14:15:48 -04:00
color : #111 ;
} @else {
color : #fff ;
}
}
// Retreive color Sass maps
@function color ( $key : " blue " ) {
@return map-get ( $colors , $key ) ;
}
2017-06-25 21:31:03 -04:00
2017-06-15 14:15:48 -04:00
@function theme-color ( $key : " primary " ) {
@return map-get ( $theme-colors , $key ) ;
}
2017-06-25 21:31:03 -04:00
2017-08-20 17:18:11 -04:00
@function gray ( $key : " 100 " ) {
2017-06-30 02:06:46 -04:00
@return map-get ( $grays , $key ) ;
}
2017-06-25 21:31:03 -04:00
// Request a theme color level
@function theme-color-level ( $color-name : " primary " , $level : 0 ) {
$color : theme-color ( $color-name ) ;
$color-base : if ( $level > 0 , #000 , #fff ) ;
@if $level < 0 {
// Lighter values need a quick double negative for the Sass math to work
@return mix ( $color-base , $color , $level * - 1 * $theme-color-interval ) ;
} @else {
@return mix ( $color-base , $color , $level * $theme-color-interval ) ;
}
}