You are here

Home » API reference » Responsive Theme Preview 7

responsive-preview.base.css in Responsive Theme Preview 7

Base styling for responsive preview.

File

css/responsive-preview.base.css
View source 
  1. /**

  2.  * @file

  3.  * Base styling for responsive preview.

  4.  */

  5. 

  6. /**

  7.  * Constrain the window height to the client height when the preview is active.

  8.  */

  9. .responsive-preview-active {

  10.   height: 100%;

  11.   overflow: hidden;

  12. }

  13. 

  14. /**

  15.  * navbar tab.

  16.  */

  17. #navbar-administration .navbar-tab-responsive-preview {

  18.   display: none;

  19. }

  20. /* At narrow screen widths, float the tab to the left so it falls in line with

  21.  * the rest of the navbar tabs. */

  22. #navbar-administration.navbar-oriented .navbar-bar .navbar-tab-responsive-preview.navbar-tab {

  23.   display: block;

  24.   float: right; /* LTR */

  25.   position: relative;

  26. }

  27. [dir="rtl"] #navbar-administration.navbar-oriented .navbar-bar .navbar-tab-responsive-preview.navbar-tab {

  28.   float: left;

  29. }

  30. #navbar-administration .navbar-tab-responsive-preview .responsive-preview-trigger {

  31.   display: block;

  32. }

  33. /* Device preview options. */

  34. #navbar-administration .navbar-tab-responsive-preview .item-list {

  35.   padding: 0;

  36.   margin: 0;

  37. }

  38. #navbar-administration .navbar-tab-responsive-preview .responsive-preview-options {

  39.   display: none;

  40.   min-width: 10em;

  41.   padding: 0;

  42.   position: absolute;

  43.   white-space: nowrap;

  44.   z-index: 1;

  45. }

  46. #navbar-administration .navbar-tab-responsive-preview.open .responsive-preview-options {

  47.   display: block;

  48. }

  49. #navbar-administration .navbar-tab-responsive-preview.navbar-tab .responsive-preview-options li {

  50.   display: block;

  51.   float: none;

  52.   position: relative;

  53. }

  54. 

  55. /**

  56.  * Preview container.

  57.  *

  58.  * The container is kept offscreen after it is built and has been disabled.

  59.  */

  60. .responsive-preview {

  61.   bottom: 0;

  62.   height: 100%;

  63.   left: -200%; /* LTR */

  64.   position: relative;

  65.   top: 0;

  66.   width: 100%;

  67.   z-index: 500;

  68. }

  69. [dir="rtl"] .responsive-preview {

  70.   left: auto;

  71.   right: -200%;

  72. }

  73. .responsive-preview.active {

  74.   left: 0; /* LTR */

  75.   position: fixed;

  76. }

  77. [dir="rtl"] .responsive-preview.active {

  78.   left: auto;

  79.   right: 0;

  80. }

  81. .responsive-preview-control {

  82.   position: absolute;

  83. }

  84. .responsive-preview-modal-background {

  85.   bottom: 0;

  86.   left: 0;

  87.   position: absolute;

  88.   right: 0;

  89.   top: 0;

  90.   z-index: 1;

  91. }

  92. 

  93. /**

  94.  * Preview iframe.

  95.  */

  96. .responsive-preview-frame-container {

  97.   position: absolute;

  98.   z-index: 100;

  99. }

  100. .responsive-preview-frame-container iframe {

  101.   display: block;

  102.   position: relative;

  103. }

  104. 

  105. /**

  106.  * Scroll container.

  107.  */

  108. #responsive-preview-scroll-track {

  109.   bottom: 0;

  110.   left: 0;

  111.   overflow: visible;

  112.   position: absolute;

  113.   right: 0;

  114.   top: 0;

  115.   z-index: 1;

  116. }

  117. #responsive-preview-scroll-pane {

  118.   min-height: 100%;

  119.   position: relative;

  120.   width: 100%;

  121. }

  122. 

  123. /**

  124.  * Override navbar styling in the preview iframe.

  125.  */

  126. body.navbar-tray-open.responsive-preview-frame {

  127.   margin-left: 0 !important;

  128.   margin-right: 0 !important;

  129. }

  130. .responsive-preview-frame {

  131.   overflow-x: hidden !important;

  132. }

  133. .responsive-preview-frame #navbar-administration {

  134.   display: none !important;

  135. }

  136. .responsive-preview-frame .contextual {

  137.   display: none !important;

  138. }