_position.sass 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. =top($important: null)
  2. &::before
  3. top: auto $important
  4. bottom: 100% $important
  5. left: 50% $important
  6. right: auto $important
  7. &:focus,
  8. &:hover,
  9. &.is-tooltip-active
  10. &:not(.is-loading)
  11. &::after
  12. top: 0 $important
  13. bottom: auto $important
  14. left: 50% $important
  15. right: auto $important
  16. border-color: rgba($tooltip-background-color, 0.9) transparent transparent transparent $important
  17. &::before
  18. transform: translate(-50%, -.5rem) $important
  19. =right($important: null)
  20. &::before
  21. top: auto $important
  22. bottom: 50% $important
  23. left: 100% $important
  24. right: auto $important
  25. transform: translate(-1rem, 50%) $important
  26. &:focus,
  27. &:hover,
  28. &.is-tooltip-active
  29. &:not(.is-loading)
  30. &::after
  31. top: 50% $important
  32. left: 100% $important
  33. right: auto $important
  34. border-color: transparent rgba($tooltip-background-color, 0.9) transparent transparent $important
  35. &::before
  36. transform: translate(0.5rem, 50%) $important
  37. =bottom($important: null)
  38. &::before
  39. top: 100% $important
  40. bottom: auto $important
  41. left: 50% $important
  42. right: auto $important
  43. transform: translate(-50%, -1rem) $important
  44. &:focus,
  45. &:hover,
  46. &.is-tooltip-active
  47. &:not(.is-loading)
  48. &::after
  49. top: 100% $important
  50. bottom: auto $important
  51. left: 50% $important
  52. right: auto $important
  53. border-color: transparent transparent rgba($tooltip-background-color, 0.9) transparent $important
  54. &::before
  55. transform: translate(-50%, 0.5rem) $important
  56. =left($important: null)
  57. &::before
  58. top: auto $important
  59. bottom: 50% $important
  60. left: auto $important
  61. right: 100% $important
  62. transform: translate(1rem, 50%) $important
  63. &:focus,
  64. &:hover,
  65. &.is-tooltip-active
  66. &:not(.is-loading)
  67. &::after
  68. top: 50% $important
  69. bottom: auto $important
  70. left: auto $important
  71. right: calc(100% - .5rem) $important
  72. border-color: transparent transparent transparent rgba($tooltip-background-color, 0.9) $important
  73. &::before
  74. transform: translate(-0.5rem, 50%) $important
  75. =direction($direction)
  76. @if $direction == 'top'
  77. @include top(!important)
  78. @else if $direction == 'right'
  79. @include right(!important)
  80. @else if $direction == 'bottom'
  81. @include bottom(!important)
  82. @else if $direction == 'left'
  83. @include left(!important)