_iframe.scss 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. body.iframe-mode {
  2. .main-sidebar {
  3. display: none;
  4. }
  5. .content-wrapper {
  6. margin-left: 0 !important;
  7. margin-top: 0 !important;
  8. padding-bottom: 0 !important;
  9. }
  10. .main-header,
  11. .main-footer {
  12. display: none;
  13. }
  14. }
  15. body.iframe-mode-fullscreen {
  16. overflow: hidden;
  17. &.layout-navbar-fixed .wrapper .content-wrapper {
  18. margin-top: 0 !important;
  19. }
  20. }
  21. .content-wrapper {
  22. height: 100%;
  23. &.iframe-mode {
  24. .btn-iframe-close {
  25. color: $danger;
  26. position: absolute;
  27. line-height: 1;
  28. right: .125rem;
  29. top: .125rem;
  30. z-index: 10;
  31. visibility: hidden;
  32. &:hover,
  33. &:focus {
  34. animation-name: fade-in;
  35. animation-duration: $transition-speed;
  36. animation-fill-mode: both;
  37. visibility: visible;
  38. }
  39. @include on-touch-device() {
  40. visibility: visible;
  41. }
  42. }
  43. .navbar-nav {
  44. overflow-y: auto;
  45. width: 100%;
  46. .nav-link {
  47. white-space: nowrap;
  48. }
  49. .nav-item {
  50. position: relative;
  51. &:hover,
  52. &:focus {
  53. .btn-iframe-close {
  54. animation-name: fade-in;
  55. animation-duration: $transition-speed;
  56. animation-fill-mode: both;
  57. visibility: visible;
  58. @include on-touch-device() {
  59. visibility: visible;
  60. }
  61. }
  62. }
  63. }
  64. }
  65. .tab-content {
  66. position: relative;
  67. }
  68. .tab-pane + .tab-empty {
  69. display: none;
  70. }
  71. .tab-empty {
  72. width: 100%;
  73. display: flex;
  74. justify-content: center;
  75. align-items: center;
  76. }
  77. .tab-loading {
  78. position: absolute;
  79. top: 0;
  80. left: 0;
  81. width: 100%;
  82. display: none;
  83. background-color: $main-bg;
  84. > div {
  85. display: flex;
  86. justify-content: center;
  87. align-items: center;
  88. width: 100%;
  89. height: 100%;
  90. }
  91. }
  92. iframe {
  93. border: 0;
  94. width: 100%;
  95. height: 100%;
  96. margin-bottom: -8px;
  97. .content-wrapper {
  98. padding-bottom: 0 !important;
  99. }
  100. }
  101. body.iframe-mode-fullscreen & {
  102. position: absolute;
  103. left: 0;
  104. top: 0;
  105. right: 0;
  106. bottom: 0;
  107. margin-left: 0 !important;
  108. height: 100%;
  109. min-height: 100%;
  110. z-index: $zindex-main-sidebar + 10;
  111. }
  112. }
  113. }
  114. .permanent-btn-iframe-close {
  115. .btn-iframe-close {
  116. animation: none !important;
  117. visibility: visible !important;
  118. opacity: 1;
  119. }
  120. }
  121. @include dark-mode () {
  122. .content-wrapper.iframe-mode {
  123. .tab-loading {
  124. background-color: $dark;
  125. }
  126. }
  127. }