outline.scss 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. /**
  2. * Creates an outline round an element, by default immediately
  3. * surrounding the element. It may be offset positively (away from the element bounds)
  4. * or negatively (within the element bounds).
  5. *
  6. * @param {number/list} $width
  7. * The outline-width
  8. *
  9. * @param {string/list} $style
  10. * The outline-style
  11. *
  12. * @param {color/list} $color
  13. * The outline-color
  14. *
  15. * @param {number} $offset
  16. * The outline-offset
  17. *
  18. * @param {string/boolean} [$pseudo=after]
  19. * A pseudo element is used to create the appearance of an outline in IE and Edge if
  20. * required by $offset. By default the :after pseudo is used. Set this to 'before'
  21. * if :after is not available. Set this to `false` to use CSS outline.
  22. *
  23. * @param {number} $z-index
  24. * z-index of the pseudo element
  25. *
  26. * @param {number/list} $border-width
  27. * The border-width of the element that the outline is being applied to.
  28. * Since the pseudo element is rendered inside the borders, the border-width needs to be
  29. * included in the $offset calculation
  30. *
  31. * @param {number/list} $border-radius
  32. * The border radius of the of pseudo element.
  33. *
  34. * @private
  35. */
  36. @mixin outline(
  37. $width: null,
  38. $style: null,
  39. $color: null,
  40. $offset: null,
  41. $pseudo: after,
  42. $z-index: null,
  43. $border-width: null,
  44. $border-radius: null
  45. ) {
  46. @if ($border-radius == null and ($offset == null or $offset == 0 or $pseudo == false)) {
  47. @if $width != null and $style != null and $color != null {
  48. outline: $width $style $color;
  49. } @else {
  50. outline-width: $width;
  51. outline-style: $style;
  52. outline-color: $color;
  53. }
  54. outline-offset: $offset;
  55. } @else {
  56. // IE/Edge don't support outline-offset so we have to fake it using a pseudo element
  57. @if $z-index == null and $pseudo == before {
  58. $z-index: 1;
  59. }
  60. &:#{$pseudo} {
  61. content: '';
  62. position: absolute;
  63. top: -$width - $offset;
  64. right: -$width - $offset;
  65. bottom: -$width - $offset;
  66. left: -$width - $offset;
  67. pointer-events: none;
  68. @include border($width, $style, $color);
  69. border-radius: $border-radius;
  70. z-index: $z-index;
  71. // use negative margins to account for parent border-width instead of including
  72. // border-width in the calculation for top/right/bottom/left.
  73. // This ensures that UI mixins are not required to pass both $offset and $border-width -
  74. // they can inherit one or the other from another UI or the default UI.
  75. margin: box(-(top($border-width)), -(right($border-width)), -(bottom($border-width)), -(left($border-width)));
  76. }
  77. @if $offset > -1 {
  78. overflow: visible;
  79. }
  80. }
  81. }