_functions.scss 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. @function theme-color-lighter($color, $background: #fff) {
  2. @return mix($color, $background, 10%);
  3. }
  4. @function theme-color-darker($color) {
  5. @return shade-color($color, 10%);
  6. }
  7. @function str-replace($string, $search, $replace: "") {
  8. $index: str-index($string, $search);
  9. @if $index {
  10. @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  11. }
  12. @return $string;
  13. }
  14. @mixin media-breakpoint-down-than($name, $breakpoints: $grid-breakpoints) {
  15. $prev: breakpoint-prev($name);
  16. @if $prev == null {
  17. @content;
  18. } @else {
  19. $max: breakpoint-max($prev, $breakpoints);
  20. @if $max {
  21. @media (max-width: $max) {
  22. @content;
  23. }
  24. } @else {
  25. @content;
  26. }
  27. }
  28. }
  29. @function breakpoint-prev($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
  30. $n: index($breakpoint-names, $name);
  31. @if not $n {
  32. @error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
  33. }
  34. @return if($n > 1, nth($breakpoint-names, $n - 1), null);
  35. }
  36. /**
  37. * Converts a given value to a percentage string.
  38. *
  39. * @param {Number} $value - The value to be converted to a percentage.
  40. * @return {String} - The percentage representation of the value.
  41. */
  42. @function to-percentage($value) {
  43. @return if(unitless($value), percentage($value), $value);
  44. }
  45. /**
  46. * Generates a transparent version of the given color.
  47. *
  48. * @param {Color} $color - The base color to be made transparent.
  49. * @param {Number} $alpha - The level of transparency, ranging from 0 (fully transparent) to 1 (fully opaque). Default is 1.
  50. * @return {Color} - The resulting color with the specified transparency.
  51. */
  52. @function color-transparent($color, $alpha: 1, $background: transparent) {
  53. @if $alpha == 1 {
  54. @return $color;
  55. } @else {
  56. @return color-mix(in srgb, #{$color} #{to-percentage($alpha)}, $background);
  57. }
  58. }
  59. @function url-svg($svg) {
  60. $svg: str-replace($svg, '#', '%23');
  61. $svg: str-replace($svg, '<svg', '<svg xmlns="http://www.w3.org/2000/svg"');
  62. @return url('data:image/svg+xml;charset=UTF-8,#{$svg}');
  63. }