You are here

Home » API reference » Responsive Theme Preview 8

responsive-preview.module.css in Responsive Theme Preview 8

Base styling for responsive preview.

File

css/responsive-preview.module.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.  * Toolbar tab.

  16.  */

  17. .toolbar-tab-responsive-preview {

  18.   display: none;

  19. }

  20. 

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

  22.  * the rest of the toolbar tabs. */

  23. .toolbar .toolbar-bar .toolbar-tab-responsive-preview.toolbar-tab {

  24.   display: block;

  25.   float: right; /* LTR */

  26.   position: relative;

  27. }

  28. 

  29. [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab-responsive-preview.toolbar-tab {

  30.   float: left;

  31. }

  32. 

  33. .toolbar-tab-responsive-preview .responsive-preview-trigger {

  34.   display: block;

  35. }

  36. 

  37. /* Device preview options. */

  38. .toolbar-tab-responsive-preview .responsive-preview-item-list {

  39.   display: none;

  40.   position: absolute;

  41.   white-space: nowrap;

  42.   z-index: 512;

  43. }

  44. 

  45. .toolbar-tab-responsive-preview.open .responsive-preview-item-list {

  46.   display: block;

  47. }

  48. 

  49. .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-options li {

  50.   float: none;

  51.   position: relative;

  52. }

  53. 

  54. /**

  55.  * Preview container.

  56.  *

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

  58.  */

  59. .responsive-preview {

  60.   bottom: 0;

  61.   height: 100%;

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

  63.   position: relative;

  64.   top: 0;

  65.   width: 100%;

  66.   z-index: 500;

  67. }

  68. 

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

  70.   left: auto;

  71.   right: -200%;

  72. }

  73. 

  74. .responsive-preview.active {

  75.   left: 0; /* LTR */

  76.   position: fixed;

  77. }

  78. 

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

  80.   left: auto;

  81.   right: 0;

  82. }

  83. 

  84. .responsive-preview-control {

  85.   position: absolute;

  86. }

  87. 

  88. .responsive-preview-modal-background {

  89.   bottom: 0;

  90.   left: 0;

  91.   position: absolute;

  92.   right: 0;

  93.   top: 0;

  94.   z-index: 1;

  95. }

  96. 

  97. /**

  98.  * Preview iframe.

  99.  */

  100. .responsive-preview-frame-container {

  101.   position: absolute;

  102.   z-index: 100;

  103. }

  104. 

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

  106.   display: block;

  107.   position: relative;

  108. }

  109. 

  110. /**

  111.  * Scroll container.

  112.  */

  113. #responsive-preview-scroll-track {

  114.   bottom: 0;

  115.   left: 0;

  116.   overflow: visible;

  117.   position: absolute;

  118.   right: 0;

  119.   top: 0;

  120.   z-index: 1;

  121. }

  122. 

  123. #responsive-preview-scroll-pane {

  124.   min-height: 100%;

  125.   position: relative;

  126.   width: 100%;

  127. }

  128. 

  129. /**

  130.  * Override Toolbar styling in the preview iframe.

  131.  */

  132. body.toolbar-tray-open.responsive-preview-frame {

  133.   padding-top: 0 !important;

  134.   margin-left: 0 !important;

  135.   margin-right: 0 !important;

  136. }

  137. 

  138. .responsive-preview-frame {

  139.   background-color: white;

  140.   overflow-x: hidden !important;

  141. }

  142. 

  143. /* Fix for Gin's sidebar navigation */

  144. .responsive-preview-frame.gin--vertical-toolbar.toolbar-fixed {

  145.   padding-left: 0;

  146. }

  147. 

  148. .responsive-preview-frame #toolbar-administration {

  149.   display: none !important;

  150. }

  151. 

  152. .responsive-preview-frame .node-preview-container {

  153.   display: none !important;

  154. }

  155. 

  156. .responsive-preview-frame .contextual {

  157.   display: none !important;

  158. }

  159. 

  160. /**

  161.  * Hide contextual toolbar tab when preview is active.

  162.  */

  163. .responsive-preview-active .contextual-toolbar-tab {

  164.   display: none !important;

  165. }