resources/tools/dash/app/pal/static/sass/bootstrap/_functions.scss

   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(--#{$prefix}#{$identifier}-bg-rgb), var(--#{$prefix}#{$target}-opacity));
  44   } @if $identifier == "body" and $target == "text" {
  45     @return rgba(var(--#{$prefix}#{$identifier}-color-rgb), var(--#{$prefix}#{$target}-opacity));
  46   } @else {
  47     @return rgba(var(--#{$prefix}#{$identifier}-rgb), var(--#{$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(--#{$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 Kitty 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.1 relative luminance
 181 // See https://www.w3.org/TR/WCAG/#dfn-relative-luminance
 182 // See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
 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 }