css-outline.scss 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. /**
  2. * adds a css outline to an element with compatibility for IE8/outline-offset
  3. * NOTE: the element receiving the outline must be positioned (either relative or absolute)
  4. * in order for the outline to work in IE8
  5. *
  6. * @param {number} [$width=1px]
  7. * The width of the outline
  8. *
  9. * @param {string} [$style=solid]
  10. * The style of the outline
  11. *
  12. * @param {color} [$color=#000]
  13. * The color of the outline
  14. *
  15. * @param {number} [$offset=0]
  16. * The offset of the outline
  17. *
  18. * @param {number/list} [$border-width=0]
  19. * The border-width of the element receiving the outline.
  20. * Required in order for outline-offset to work in IE8
  21. *
  22. * @param {boolean} [$pseudo=false]
  23. * `true to always use a pseudo element to render the outline.
  24. * by default this behavior is limited to IE8 only, but can be enabled in all browser
  25. * when required
  26. *
  27. * @member Global_CSS
  28. * @private
  29. */
  30. @mixin css-outline(
  31. $width: 1px,
  32. $style: solid,
  33. $color: #000,
  34. $offset: 0,
  35. $border-width: 0,
  36. $pseudo: false
  37. ) {
  38. @mixin css-outline-pseudo() {
  39. &:after {
  40. position: absolute;
  41. content: ' ';
  42. top: -$offset - $width - top($border-width);
  43. right: -$offset - $width - right($border-width);
  44. bottom: -$offset - $width - bottom($border-width);
  45. left: -$offset - $width - left($border-width);
  46. border: $width $style $color;
  47. pointer-events: none;
  48. }
  49. }
  50. @if $pseudo {
  51. @include css-outline-pseudo;
  52. } @else {
  53. outline: $width $style $color;
  54. outline-offset: $offset;
  55. @if $include-ie and ($offset == 0) {
  56. .#{$prefix}ie8 & {
  57. outline: none;
  58. @include css-outline-pseudo;
  59. }
  60. }
  61. @if $offset != 0 {
  62. .#{$prefix}ie &,
  63. .#{$prefix}ie10p &,
  64. .#{$prefix}edge & {
  65. outline: none;
  66. @include css-outline-pseudo;
  67. }
  68. }
  69. }
  70. }