You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

302 lines
10 KiB

8 months ago
  1. // Bootstrap functions
  2. //
  3. // Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
  4. // Ascending
  5. // Used to evaluate Sass maps like our grid breakpoints.
  6. @mixin _assert-ascending($map, $map-name) {
  7. $prev-key: null;
  8. $prev-num: null;
  9. @each $key, $num in $map {
  10. @if $prev-num == null or unit($num) == "%" or unit($prev-num) == "%" {
  11. // Do nothing
  12. } @else if not comparable($prev-num, $num) {
  13. @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}' !";
  14. } @else if $prev-num >= $num {
  15. @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}' !";
  16. }
  17. $prev-key: $key;
  18. $prev-num: $num;
  19. }
  20. }
  21. // Starts at zero
  22. // Used to ensure the min-width of the lowest breakpoint starts at 0.
  23. @mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
  24. @if length($map) > 0 {
  25. $values: map-values($map);
  26. $first-value: nth($values, 1);
  27. @if $first-value != 0 {
  28. @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
  29. }
  30. }
  31. }
  32. // Colors
  33. @function to-rgb($value) {
  34. @return red($value), green($value), blue($value);
  35. }
  36. // stylelint-disable scss/dollar-variable-pattern
  37. @function rgba-css-var($identifier, $target) {
  38. @if $identifier == "body" and $target == "bg" {
  39. @return rgba(var(--#{$prefix}#{$identifier}-bg-rgb), var(--#{$prefix}#{$target}-opacity));
  40. } @if $identifier == "body" and $target == "text" {
  41. @return rgba(var(--#{$prefix}#{$identifier}-color-rgb), var(--#{$prefix}#{$target}-opacity));
  42. } @else {
  43. @return rgba(var(--#{$prefix}#{$identifier}-rgb), var(--#{$prefix}#{$target}-opacity));
  44. }
  45. }
  46. @function map-loop($map, $func, $args...) {
  47. $_map: ();
  48. @each $key, $value in $map {
  49. // allow to pass the $key and $value of the map as an function argument
  50. $_args: ();
  51. @each $arg in $args {
  52. $_args: append($_args, if($arg == "$key", $key, if($arg == "$value", $value, $arg)));
  53. }
  54. $_map: map-merge($_map, ($key: call(get-function($func), $_args...)));
  55. }
  56. @return $_map;
  57. }
  58. // stylelint-enable scss/dollar-variable-pattern
  59. @function varify($list) {
  60. $result: null;
  61. @each $entry in $list {
  62. $result: append($result, var(--#{$prefix}#{$entry}), space);
  63. }
  64. @return $result;
  65. }
  66. // Internal Bootstrap function to turn maps into its negative variant.
  67. // It prefixes the keys with `n` and makes the value negative.
  68. @function negativify-map($map) {
  69. $result: ();
  70. @each $key, $value in $map {
  71. @if $key != 0 {
  72. $result: map-merge($result, ("n" + $key: (-$value)));
  73. }
  74. }
  75. @return $result;
  76. }
  77. // Get multiple keys from a sass map
  78. @function map-get-multiple($map, $values) {
  79. $result: ();
  80. @each $key, $value in $map {
  81. @if (index($values, $key) != null) {
  82. $result: map-merge($result, ($key: $value));
  83. }
  84. }
  85. @return $result;
  86. }
  87. // Merge multiple maps
  88. @function map-merge-multiple($maps...) {
  89. $merged-maps: ();
  90. @each $map in $maps {
  91. $merged-maps: map-merge($merged-maps, $map);
  92. }
  93. @return $merged-maps;
  94. }
  95. // Replace `$search` with `$replace` in `$string`
  96. // Used on our SVG icon backgrounds for custom forms.
  97. //
  98. // @author Kitty Giraudel
  99. // @param {String} $string - Initial string
  100. // @param {String} $search - Substring to replace
  101. // @param {String} $replace ('') - New value
  102. // @return {String} - Updated string
  103. @function str-replace($string, $search, $replace: "") {
  104. $index: str-index($string, $search);
  105. @if $index {
  106. @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  107. }
  108. @return $string;
  109. }
  110. // See https://codepen.io/kevinweber/pen/dXWoRw
  111. //
  112. // Requires the use of quotes around data URIs.
  113. @function escape-svg($string) {
  114. @if str-index($string, "data:image/svg+xml") {
  115. @each $char, $encoded in $escaped-characters {
  116. // Do not escape the url brackets
  117. @if str-index($string, "url(") == 1 {
  118. $string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
  119. } @else {
  120. $string: str-replace($string, $char, $encoded);
  121. }
  122. }
  123. }
  124. @return $string;
  125. }
  126. // Color contrast
  127. // See https://github.com/twbs/bootstrap/pull/30168
  128. // A list of pre-calculated numbers of pow(divide((divide($value, 255) + .055), 1.055), 2.4). (from 0 to 255)
  129. // stylelint-disable-next-line scss/dollar-variable-default, scss/dollar-variable-pattern
  130. $_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;
  131. @function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio) {
  132. $foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
  133. $max-ratio: 0;
  134. $max-ratio-color: null;
  135. @each $color in $foregrounds {
  136. $contrast-ratio: contrast-ratio($background, $color);
  137. @if $contrast-ratio > $min-contrast-ratio {
  138. @return $color;
  139. } @else if $contrast-ratio > $max-ratio {
  140. $max-ratio: $contrast-ratio;
  141. $max-ratio-color: $color;
  142. }
  143. }
  144. @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}...";
  145. @return $max-ratio-color;
  146. }
  147. @function contrast-ratio($background, $foreground: $color-contrast-light) {
  148. $l1: luminance($background);
  149. $l2: luminance(opaque($background, $foreground));
  150. @return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
  151. }
  152. // Return WCAG2.1 relative luminance
  153. // See https://www.w3.org/TR/WCAG/#dfn-relative-luminance
  154. // See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
  155. @function luminance($color) {
  156. $rgb: (
  157. "r": red($color),
  158. "g": green($color),
  159. "b": blue($color)
  160. );
  161. @each $name, $value in $rgb {
  162. $value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
  163. $rgb: map-merge($rgb, ($name: $value));
  164. }
  165. @return (map-get($rgb, "r") * .2126) + (map-get($rgb, "g") * .7152) + (map-get($rgb, "b") * .0722);
  166. }
  167. // Return opaque color
  168. // opaque(#fff, rgba(0, 0, 0, .5)) => #808080
  169. @function opaque($background, $foreground) {
  170. @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
  171. }
  172. // scss-docs-start color-functions
  173. // Tint a color: mix a color with white
  174. @function tint-color($color, $weight) {
  175. @return mix(white, $color, $weight);
  176. }
  177. // Shade a color: mix a color with black
  178. @function shade-color($color, $weight) {
  179. @return mix(black, $color, $weight);
  180. }
  181. // Shade the color if the weight is positive, else tint it
  182. @function shift-color($color, $weight) {
  183. @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
  184. }
  185. // scss-docs-end color-functions
  186. // Return valid calc
  187. @function add($value1, $value2, $return-calc: true) {
  188. @if $value1 == null {
  189. @return $value2;
  190. }
  191. @if $value2 == null {
  192. @return $value1;
  193. }
  194. @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
  195. @return $value1 + $value2;
  196. }
  197. @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2);
  198. }
  199. @function subtract($value1, $value2, $return-calc: true) {
  200. @if $value1 == null and $value2 == null {
  201. @return null;
  202. }
  203. @if $value1 == null {
  204. @return -$value2;
  205. }
  206. @if $value2 == null {
  207. @return $value1;
  208. }
  209. @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
  210. @return $value1 - $value2;
  211. }
  212. @if type-of($value2) != number {
  213. $value2: unquote("(") + $value2 + unquote(")");
  214. }
  215. @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
  216. }
  217. @function divide($dividend, $divisor, $precision: 10) {
  218. $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
  219. $dividend: abs($dividend);
  220. $divisor: abs($divisor);
  221. @if $dividend == 0 {
  222. @return 0;
  223. }
  224. @if $divisor == 0 {
  225. @error "Cannot divide by 0";
  226. }
  227. $remainder: $dividend;
  228. $result: 0;
  229. $factor: 10;
  230. @while ($remainder > 0 and $precision >= 0) {
  231. $quotient: 0;
  232. @while ($remainder >= $divisor) {
  233. $remainder: $remainder - $divisor;
  234. $quotient: $quotient + 1;
  235. }
  236. $result: $result * 10 + $quotient;
  237. $factor: $factor * .1;
  238. $remainder: $remainder * 10;
  239. $precision: $precision - 1;
  240. @if ($precision < 0 and $remainder >= $divisor * 5) {
  241. $result: $result + 1;
  242. }
  243. }
  244. $result: $result * $factor * $sign;
  245. $dividend-unit: unit($dividend);
  246. $divisor-unit: unit($divisor);
  247. $unit-map: (
  248. "px": 1px,
  249. "rem": 1rem,
  250. "em": 1em,
  251. "%": 1%
  252. );
  253. @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
  254. $result: $result * map-get($unit-map, $dividend-unit);
  255. }
  256. @return $result;
  257. }