_functions.scss 2.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  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) == "%" {
  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. $values: map-values($map);
  25. $first-value: nth($values, 1);
  26. @if $first-value != 0 {
  27. @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
  28. }
  29. }
  30. // Replace `$search` with `$replace` in `$string`
  31. // Used on our SVG icon backgrounds for custom forms.
  32. //
  33. // @author Hugo Giraudel
  34. // @param {String} $string - Initial string
  35. // @param {String} $search - Substring to replace
  36. // @param {String} $replace ('') - New value
  37. // @return {String} - Updated string
  38. @function str-replace($string, $search, $replace: "") {
  39. $index: str-index($string, $search);
  40. @if $index {
  41. @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  42. }
  43. @return $string;
  44. }
  45. // Color contrast
  46. @function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
  47. $r: red($color);
  48. $g: green($color);
  49. $b: blue($color);
  50. $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
  51. @if ($yiq >= $yiq-contrasted-threshold) {
  52. @return $dark;
  53. } @else {
  54. @return $light;
  55. }
  56. }
  57. // Retrieve color Sass maps
  58. @function color($key: "blue") {
  59. @return map-get($colors, $key);
  60. }
  61. @function theme-color($key: "primary") {
  62. @return map-get($theme-colors, $key);
  63. }
  64. @function gray($key: "100") {
  65. @return map-get($grays, $key);
  66. }
  67. // Request a theme color level
  68. @function theme-color-level($color-name: "primary", $level: 0) {
  69. $color: theme-color($color-name);
  70. $color-base: if($level > 0, $black, $white);
  71. $level: abs($level);
  72. @return mix($color-base, $color, $level * $theme-color-interval);
  73. }