_popovers.scss 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. // Popovers
  2. .popover {
  3. display: inline-block;
  4. position: relative;
  5. .popover-container {
  6. left: 50%;
  7. opacity: 0;
  8. padding: $layout-spacing;
  9. position: absolute;
  10. top: 0;
  11. transform: translate(-50%, -50%) scale(0);
  12. transition: transform .2s ease;
  13. width: $control-width-sm;
  14. z-index: $zindex-3;
  15. }
  16. *:focus + .popover-container,
  17. &:hover .popover-container {
  18. display: block;
  19. opacity: 1;
  20. transform: translate(-50%, -100%);
  21. }
  22. &.popover-right {
  23. .popover-container {
  24. left: 100%;
  25. top: 50%;
  26. }
  27. *:focus + .popover-container,
  28. &:hover .popover-container {
  29. transform: translate(0, -50%);
  30. }
  31. }
  32. &.popover-bottom {
  33. .popover-container {
  34. left: 50%;
  35. top: 100%;
  36. }
  37. *:focus + .popover-container,
  38. &:hover .popover-container {
  39. transform: translate(-50%, 0);
  40. }
  41. }
  42. &.popover-left {
  43. .popover-container {
  44. left: 0;
  45. top: 50%;
  46. }
  47. *:focus + .popover-container,
  48. &:hover .popover-container {
  49. transform: translate(-100%, -50%);
  50. }
  51. }
  52. .card {
  53. @include shadow-variant(.2rem);
  54. border: 0;
  55. }
  56. }