[Summary view] [Print] [Text view]

   1  // Bootstrap functions
   2  //
   3  // Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
   4  
   5  // Ascending
   6  // Used to evaluate Sass maps like our grid breakpoints.
   7  @mixin _assert-ascending($map, $map-name) {
   8    $prev-key: null;
   9    $prev-num: null;
  10    @each $key, $num in $map {
  11      @if $prev-num == null or unit($num) == "%" or unit($prev-num) == "%" {
  12        // Do nothing
  13      } @else if not comparable($prev-num, $num) {
  14        @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}' !";
  15      } @else if $prev-num >= $num {
  16        @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}' !";
  17      }
  18      $prev-key: $key;
  19      $prev-num: $num;
  20    }
  21  }
  22  
  23  // Starts at zero
  24  // Used to ensure the min-width of the lowest breakpoint starts at 0.
  25  @mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
  26    @if length($map) > 0 {
  27      $values: map-values($map);
  28      $first-value: nth($values, 1);
  29      @if $first-value != 0 {
  30        @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
  31      }
  32    }
  33  }
  34  
  35  // Colors
  36  @function to-rgb($value) {
  37    @return red($value), green($value), blue($value);
  38  }
  39  
  40  // stylelint-disable scss/dollar-variable-pattern
  41  @function rgba-css-var($identifier, $target) {
  42    @if $identifier == "body" and $target == "bg" {
  43      @return rgba(var(--#{$variable-prefix}#{$identifier}-bg-rgb), var(--#{$variable-prefix}#{$target}-opacity));
  44    } @if $identifier == "body" and $target == "text" {
  45      @return rgba(var(--#{$variable-prefix}#{$identifier}-color-rgb), var(--#{$variable-prefix}#{$target}-opacity));
  46    } @else {
  47      @return rgba(var(--#{$variable-prefix}#{$identifier}-rgb), var(--#{$variable-prefix}#{$target}-opacity));
  48    }
  49  }
  50  
  51  @function map-loop($map, $func, $args...) {
  52    $_map: ();
  53  
  54    @each $key, $value in $map {
  55      // allow to pass the $key and $value of the map as an function argument
  56      $_args: ();
  57      @each $arg in $args {
  58        $_args: append($_args, if($arg == "$key", $key, if($arg == "$value", $value, $arg)));
  59      }
  60  
  61      $_map: map-merge($_map, ($key: call(get-function($func), $_args...)));
  62    }
  63  
  64    @return $_map;
  65  }
  66  // stylelint-enable scss/dollar-variable-pattern
  67  
  68  @function varify($list) {
  69    $result: null;
  70    @each $entry in $list {
  71      $result: append($result, var(--#{$variable-prefix}#{$entry}), space);
  72    }
  73    @return $result;
  74  }
  75  
  76  // Internal Bootstrap function to turn maps into its negative variant.
  77  // It prefixes the keys with `n` and makes the value negative.
  78  @function negativify-map($map) {
  79    $result: ();
  80    @each $key, $value in $map {
  81      @if $key != 0 {
  82        $result: map-merge($result, ("n" + $key: (-$value)));
  83      }
  84    }
  85    @return $result;
  86  }
  87  
  88  // Get multiple keys from a sass map
  89  @function map-get-multiple($map, $values) {
  90    $result: ();
  91    @each $key, $value in $map {
  92      @if (index($values, $key) != null) {
  93        $result: map-merge($result, ($key: $value));
  94      }
  95    }
  96    @return $result;
  97  }
  98  
  99  // Merge multiple maps
 100  @function map-merge-multiple($maps...) {
 101    $merged-maps: ();
 102  
 103    @each $map in $maps {
 104      $merged-maps: map-merge($merged-maps, $map);
 105    }
 106    @return $merged-maps;
 107  }
 108  
 109  // Replace `$search` with `$replace` in `$string`
 110  // Used on our SVG icon backgrounds for custom forms.
 111  //
 112  // @author Hugo Giraudel
 113  // @param {String} $string - Initial string
 114  // @param {String} $search - Substring to replace
 115  // @param {String} $replace ('') - New value
 116  // @return {String} - Updated string
 117  @function str-replace($string, $search, $replace: "") {
 118    $index: str-index($string, $search);
 119  
 120    @if $index {
 121      @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
 122    }
 123  
 124    @return $string;
 125  }
 126  
 127  // See https://codepen.io/kevinweber/pen/dXWoRw
 128  //
 129  // Requires the use of quotes around data URIs.
 130  
 131  @function escape-svg($string) {
 132    @if str-index($string, "data:image/svg+xml") {
 133      @each $char, $encoded in $escaped-characters {
 134        // Do not escape the url brackets
 135        @if str-index($string, "url(") == 1 {
 136          $string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
 137        } @else {
 138          $string: str-replace($string, $char, $encoded);
 139        }
 140      }
 141    }
 142  
 143    @return $string;
 144  }
 145  
 146  // Color contrast
 147  // See https://github.com/twbs/bootstrap/pull/30168
 148  
 149  // A list of pre-calculated numbers of pow(divide((divide($value, 255) + .055), 1.055), 2.4). (from 0 to 255)
 150  // stylelint-disable-next-line scss/dollar-variable-default, scss/dollar-variable-pattern
 151  $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1;
 152  
 153  @function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio) {
 154    $foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
 155    $max-ratio: 0;
 156    $max-ratio-color: null;
 157  
 158    @each $color in $foregrounds {
 159      $contrast-ratio: contrast-ratio($background, $color);
 160      @if $contrast-ratio > $min-contrast-ratio {
 161        @return $color;
 162      } @else if $contrast-ratio > $max-ratio {
 163        $max-ratio: $contrast-ratio;
 164        $max-ratio-color: $color;
 165      }
 166    }
 167  
 168    @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}...";
 169  
 170    @return $max-ratio-color;
 171  }
 172  
 173  @function contrast-ratio($background, $foreground: $color-contrast-light) {
 174    $l1: luminance($background);
 175    $l2: luminance(opaque($background, $foreground));
 176  
 177    @return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
 178  }
 179  
 180  // Return WCAG2.0 relative luminance
 181  // See https://www.w3.org/WAI/GL/wiki/Relative_luminance
 182  // See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
 183  @function luminance($color) {
 184    $rgb: (
 185      "r": red($color),
 186      "g": green($color),
 187      "b": blue($color)
 188    );
 189  
 190    @each $name, $value in $rgb {
 191      $value: if(divide($value, 255) < .03928, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
 192      $rgb: map-merge($rgb, ($name: $value));
 193    }
 194  
 195    @return (map-get($rgb, "r") * .2126) + (map-get($rgb, "g") * .7152) + (map-get($rgb, "b") * .0722);
 196  }
 197  
 198  // Return opaque color
 199  // opaque(#fff, rgba(0, 0, 0, .5)) => #808080
 200  @function opaque($background, $foreground) {
 201    @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100);
 202  }
 203  
 204  // scss-docs-start color-functions
 205  // Tint a color: mix a color with white
 206  @function tint-color($color, $weight) {
 207    @return mix(white, $color, $weight);
 208  }
 209  
 210  // Shade a color: mix a color with black
 211  @function shade-color($color, $weight) {
 212    @return mix(black, $color, $weight);
 213  }
 214  
 215  // Shade the color if the weight is positive, else tint it
 216  @function shift-color($color, $weight) {
 217    @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
 218  }
 219  // scss-docs-end color-functions
 220  
 221  // Return valid calc
 222  @function add($value1, $value2, $return-calc: true) {
 223    @if $value1 == null {
 224      @return $value2;
 225    }
 226  
 227    @if $value2 == null {
 228      @return $value1;
 229    }
 230  
 231    @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
 232      @return $value1 + $value2;
 233    }
 234  
 235    @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2);
 236  }
 237  
 238  @function subtract($value1, $value2, $return-calc: true) {
 239    @if $value1 == null and $value2 == null {
 240      @return null;
 241    }
 242  
 243    @if $value1 == null {
 244      @return -$value2;
 245    }
 246  
 247    @if $value2 == null {
 248      @return $value1;
 249    }
 250  
 251    @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
 252      @return $value1 - $value2;
 253    }
 254  
 255    @if type-of($value2) != number {
 256      $value2: unquote("(") + $value2 + unquote(")");
 257    }
 258  
 259    @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
 260  }
 261  
 262  @function divide($dividend, $divisor, $precision: 10) {
 263    $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
 264    $dividend: abs($dividend);
 265    $divisor: abs($divisor);
 266    @if $dividend == 0 {
 267      @return 0;
 268    }
 269    @if $divisor == 0 {
 270      @error "Cannot divide by 0";
 271    }
 272    $remainder: $dividend;
 273    $result: 0;
 274    $factor: 10;
 275    @while ($remainder > 0 and $precision >= 0) {
 276      $quotient: 0;
 277      @while ($remainder >= $divisor) {
 278        $remainder: $remainder - $divisor;
 279        $quotient: $quotient + 1;
 280      }
 281      $result: $result * 10 + $quotient;
 282      $factor: $factor * .1;
 283      $remainder: $remainder * 10;
 284      $precision: $precision - 1;
 285      @if ($precision < 0 and $remainder >= $divisor * 5) {
 286        $result: $result + 1;
 287      }
 288    }
 289    $result: $result * $factor * $sign;
 290    $dividend-unit: unit($dividend);
 291    $divisor-unit: unit($divisor);
 292    $unit-map: (
 293      "px": 1px,
 294      "rem": 1rem,
 295      "em": 1em,
 296      "%": 1%
 297    );
 298    @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
 299      $result: $result * map-get($unit-map, $dividend-unit);
 300    }
 301    @return $result;
 302  }