_relatedpopup.scss 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. @import "globals";
  2. /* POPUP */
  3. .related-popup {
  4. position: absolute;
  5. top: 0;
  6. right: 0;
  7. bottom: 0;
  8. left: 0;
  9. z-index: 4;
  10. border: 0;
  11. width: 100%;
  12. height: 100%;
  13. padding-left: 250px;
  14. box-sizing: border-box;
  15. display: none;
  16. background: $background-color;
  17. background-clip: content-box;
  18. &-container {
  19. display: none;
  20. background-color: transparentize($sidebar-popup-overlay-color, 0.5);
  21. position: fixed;
  22. top: 0;
  23. left: 0;
  24. bottom: 0;
  25. right: 0;
  26. z-index: 3;
  27. .loading-indicator {
  28. display: none;
  29. font-size: 96px;
  30. color: $content-contrast2-text-color;
  31. position: absolute;
  32. top: 50%;
  33. left: 50%;
  34. margin-left: -48px;
  35. margin-top: -48px;
  36. animation: spin 4s linear infinite;
  37. }
  38. }
  39. &-back {
  40. &, &:visited, &:hover {
  41. display: none;
  42. background: $content-contrast2-background-color;
  43. color: $content-contrast2-text-color;
  44. position: absolute;
  45. top: 20px;
  46. left: 250px;
  47. z-index: 5;
  48. width: 100px;
  49. padding: 14px 6px 14px 0;
  50. text-align: center;
  51. margin-left: -100px;
  52. box-sizing: border-box;
  53. text-transform: uppercase;
  54. border-radius: 6px 0 0 6px;
  55. @include transition(background-color $transitions-duration, color $transitions-duration);
  56. }
  57. &:hover, &:focus {
  58. background: $background-color;
  59. color: $text-color;
  60. }
  61. span {
  62. vertical-align: middle;
  63. font-weight: bold;
  64. font-size: 18px;
  65. }
  66. }
  67. }