146c9e0ad67228a77c2f54d8cb5fc10799203adad8e7405e15cc9b5ea2e488aecba3e940f77afdf9dee2cd968fe2f147931f288c30af71743c2264392736f5 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. @import "variables";
  2. $context-menu-icons: () !default;
  3. @font-face {
  4. font-family: '#{$context-menu-icon-font-name}';
  5. src: url('#{$context-menu-icon-font-path}#{$context-menu-icon-font-name}.eot?#{$context-menu-icons-cachebust}');
  6. src: url('#{$context-menu-icon-font-path}#{$context-menu-icon-font-name}.eot?#{$context-menu-icons-cachebust}#iefix') format('embedded-opentype'),
  7. url('#{$context-menu-icon-font-path}#{$context-menu-icon-font-name}.woff2?#{$context-menu-icons-cachebust}') format('woff2'),
  8. url('#{$context-menu-icon-font-path}#{$context-menu-icon-font-name}.woff?#{$context-menu-icons-cachebust}') format('woff'),
  9. url('#{$context-menu-icon-font-path}#{$context-menu-icon-font-name}.ttf?#{$context-menu-icons-cachebust}') format('truetype');
  10. font-weight: normal;
  11. font-style: normal;
  12. }
  13. @mixin context-menu-icon-without-mediaquery($position: before, $icon: false, $icons-font: $context-menu-icon-font-name) {
  14. @if not map-has-key($context-menu-icons, $icon) {
  15. @error "Invalid icon `#{$icon}`.";
  16. }
  17. @if $position == both {
  18. $position: 'before, &:after';
  19. }
  20. // Either a :before or :after pseudo-element, or both, defaulting to :before
  21. &:#{$position} {
  22. @if $icon {
  23. // A particular icon has been specified
  24. content: #{"\"\\"}#{map-get($context-menu-icons, $icon) + "\""};
  25. }
  26. // Include any extra rules supplied for the pseudo-element
  27. @content;
  28. }
  29. }
  30. @mixin context-menu-icon-screen-only($position: before, $icon: false, $icons-font: $context-menu-icon-font-name) {
  31. @media screen {
  32. @include context-menu-icon-without-mediaquery($position, $icon, $icons-font) {
  33. @content;
  34. }
  35. }
  36. }
  37. // For adding font icons to elements using CSS pseudo-elements
  38. // http://jaydenseric.com/blog/fun-with-sass-and-font-icons
  39. @mixin context-menu-icon($position: before, $icon: false, $icons-font: $context-menu-icon-font-name, $screen-only: false) {
  40. @if $screen-only {
  41. @include context-menu-icon-screen-only($position, $icon, $icons-font) {
  42. @content;
  43. }
  44. } @else {
  45. @include context-menu-icon-without-mediaquery($position, $icon, $icons-font) {
  46. @content;
  47. }
  48. }
  49. }
  50. @mixin base-context-menu-icon($icon-font: "context-menu-icons") {
  51. &::before {
  52. color: $context-menu-icon-color;
  53. font-family: $icon-font;
  54. font-style: normal;
  55. font-weight: normal;
  56. font-size: $context-menu-icon-size;
  57. left: 0;
  58. line-height: 1;
  59. position: absolute;
  60. text-align: center;
  61. top: 50%;
  62. transform: translateY(-50%);
  63. -webkit-font-smoothing: antialiased;
  64. -moz-osx-font-smoothing: grayscale;
  65. width: 2em;
  66. }
  67. }
  68. @mixin context-menu-item-icon($icon: false) {
  69. @include context-menu-icon(before, $icon);
  70. }