_mixins.scss 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. // @see https://github.com/twbs/bootstrap/blob/main/scss/_functions.scss
  2. @function material-icons-str-replace($string, $search, $replace: "") {
  3. $index: str-index($string, $search);
  4. @if $index {
  5. @return str-slice($string, 1, $index - 1) + $replace +
  6. material-icons-str-replace(
  7. str-slice($string, $index + str-length($search)),
  8. $search,
  9. $replace
  10. );
  11. }
  12. @return $string;
  13. }
  14. @mixin material-icons-font-class($font-family) {
  15. font-family: $font-family;
  16. font-weight: normal;
  17. font-style: normal;
  18. font-size: $material-icons-font-size;
  19. line-height: 1;
  20. letter-spacing: normal;
  21. text-transform: none;
  22. display: inline-block;
  23. white-space: nowrap;
  24. word-wrap: normal;
  25. direction: ltr;
  26. -webkit-font-smoothing: antialiased; // Support for all WebKit browsers
  27. -moz-osx-font-smoothing: grayscale; // Support for Firefox
  28. text-rendering: optimizeLegibility; // Support for Safari and Chrome
  29. font-feature-settings: "liga"; // Support for IE
  30. }
  31. @mixin material-icons-font($font-family) {
  32. $class-name: to-lower-case($font-family);
  33. $class-name: material-icons-str-replace($class-name, " ", "-");
  34. $font-file: $material-icons-font-path + $class-name;
  35. @font-face {
  36. font-family: $font-family;
  37. font-style: normal;
  38. font-weight: 400;
  39. font-display: $material-icons-font-display;
  40. src:
  41. url("#{$font-file}.woff2") format("woff2"),
  42. url("#{$font-file}.woff") format("woff");
  43. }
  44. .#{$class-name} {
  45. @include material-icons-font-class($font-family);
  46. }
  47. }
  48. @mixin material-icons() {
  49. @warn "material-icons() Sass mixin has been deprecated as of 1.0. Use '@extend .material-icons;' instead of '@include material-icons();'.";
  50. @include material-icons-font-class("Material Icons");
  51. }