You are here

Home » API reference » Responsive Theme Preview 8

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

Same filename and directory in other branches
  1. 7 css/responsive-preview.icons.css

Responsive preview icon styling.

File

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

  2.  * @file

  3.  * Responsive preview icon styling.

  4.  */

  5. .toolbar-tab-responsive-preview .responsive-preview-icon:before,

  6. .responsive-preview .responsive-preview-icon:before {

  7.   background-attachment: scroll;

  8.   background-color: transparent;

  9.   background-image: url("../images/responsive-preview-icons.png");

  10.   background-repeat: no-repeat;

  11.   content: '';

  12.   display: block;

  13.   position: absolute;

  14.   z-index: 1;

  15. }

  16. .toolbar .toolbar-bar .toolbar-tab-responsive-preview .responsive-preview-icon:before {

  17.   width: 13px;

  18. }

  19. .toolbar-tab-responsive-preview button.responsive-preview-icon,

  20. .responsive-preview button.responsive-preview-icon {

  21.   background-color: transparent;

  22.   border: 0;

  23.   font-size: 1em;

  24. }

  25. 

  26. /* Toolbar icon. */

  27. .toolbar .toolbar-bar .responsive-preview-icon.responsive-preview-icon-responsive-preview {

  28.   margin-left: 0;

  29.   margin-right: 0;

  30.   padding-left: 0;

  31.   padding-right: 0;

  32.   width: 5em;

  33. }

  34. .toolbar-tab-responsive-preview .responsive-preview-icon.responsive-preview-icon-responsive-preview:before {

  35.   background-position: center top;

  36. }

  37. .toolbar-tab-responsive-preview.open .responsive-preview-icon-responsive-preview:before,

  38. .toolbar-tab-responsive-preview .responsive-preview-icon-responsive-preview.active:before,

  39. .toolbar-tab-responsive-preview .responsive-preview-icon-responsive-preview:hover:before {

  40.   background-position: center -22px;

  41. }

  42. .toolbar .toolbar-bar .toolbar-tab-responsive-preview .responsive-preview-icon-responsive-preview:before {

  43.   left: 1em; /* LTR */

  44.   height: 22px;

  45.   top: 0.6667em;

  46. }

  47. [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab-responsive-preview .responsive-preview-icon-responsive-preview:before {

  48.   left: auto;

  49.   right: 6px;

  50. }

  51. .toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-options .responsive-preview-device.responsive-preview-icon-active {

  52.   padding: 0.5em 1.3333em;

  53.   text-indent: 0;

  54.   -moz-transition: padding 0.25s;

  55.   -webkit-transition: padding 0.25s;

  56.   transition: padding 0.25s;

  57. }

  58. .toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-options .responsive-preview-device.responsive-preview-icon-active.active {

  59.   padding-left: 2.25em; /* LTR */

  60. }

  61. [dir="rtl"] .toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-options .responsive-preview-device.responsive-preview-icon-active.active {

  62.   padding-left: 1.333em;

  63.   padding-right: 2.25em;

  64. }

  65. .toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-options .responsive-preview-device.responsive-preview-icon-active:before {

  66.   background-position: -999px -999px;

  67.   height: 14px;

  68.   left: 0.667em; /* LTR */

  69.   top: 0.5em;

  70.   width: 13px;

  71. }

  72. [dir="rtl"] .toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-options .responsive-preview-device.responsive-preview-icon-active:before {

  73.   left: auto;

  74.   right: 0.667em;

  75. }

  76. .toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-options .responsive-preview-device.responsive-preview-icon-active.active:before {

  77.   background-position: center -116px;

  78. }

  79. 

  80. 

  81. /**

  82.  * Responsive preview controls icons.

  83.  */

  84. .responsive-preview-control.responsive-preview-icon:before {

  85.   height: 12px;

  86.   width: 12px;

  87.   top: 12px;

  88. }

  89. .responsive-preview-icon-close:before {

  90.   background-position: left -44px;

  91.   right: 9px; /* LTR */

  92. }

  93. [dir="rtl"] .responsive-preview-icon-close:before {

  94.   left: 9px;

  95.   right: auto;

  96. }

  97. .responsive-preview-icon-close:active:before,

  98. .responsive-preview-icon-close.active:before,

  99. .responsive-preview-icon-close:hover:before {

  100.   background-position: left -56px;

  101. }

  102. .responsive-preview-icon-orientation:before {

  103.   background-position: left -92px; /* LTR */

  104.   left: 9px; /* LTR */

  105. }

  106. [dir="rtl"] .responsive-preview-icon-orientation:before {

  107.   background-position: left -155px;

  108.   left: auto;

  109.   right: 9px;

  110. }

  111. .responsive-preview-icon-orientation:hover:before {

  112.   background-position: left -104px; /* LTR */

  113. }

  114. [dir="rtl"] .responsive-preview-icon-orientation:hover:before {

  115.   background-position: left -167px;

  116. }

  117. .responsive-preview-icon-orientation.rotated:before {

  118.   background-position: left -68px; /* LTR */

  119. }

  120. [dir="rtl"] .responsive-preview-icon-orientation.rotated:before {

  121.   background-position: left -131px;

  122. }

  123. .responsive-preview-icon-orientation.rotated:hover:before {

  124.   background-position: left -80px; /* LTR */

  125. }

  126. [dir="rtl"] .responsive-preview-icon-orientation.rotated:hover:before {

  127.   background-position: left -143px;

  128. }