_layout.scss 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273
  1. $border-layout-ct-background: $neutral-color !default;
  2. $toolbar-scroll-border-color: #8db2e3 !default;
  3. @mixin extjs-layout {
  4. .#{$prefix}docked {
  5. position: absolute !important;
  6. z-index: 1;
  7. }
  8. /**
  9. * Dock Layouts
  10. * @todo move this somewhere else?
  11. */
  12. .#{$prefix}docked-top {
  13. // border-bottom-width: 0 !important; TODO remove this
  14. }
  15. .#{$prefix}docked-bottom {
  16. border-top-width: 0 !important;
  17. }
  18. .#{$prefix}docked-left {
  19. border-right-width: 0 !important;
  20. }
  21. .#{$prefix}docked-right {
  22. border-left-width: 0 !important;
  23. }
  24. .#{$prefix}docked-noborder-top {
  25. border-top-width: 0 !important;
  26. }
  27. .#{$prefix}docked-noborder-right {
  28. border-right-width: 0 !important;
  29. }
  30. .#{$prefix}docked-noborder-bottom {
  31. border-bottom-width: 0 !important;
  32. }
  33. .#{$prefix}docked-noborder-left {
  34. border-left-width: 0 !important;
  35. }
  36. .#{$prefix}box-inner {
  37. overflow: hidden;
  38. position: relative;
  39. left: 0;
  40. top: 0;
  41. // @tag iezoomhack
  42. }
  43. .#{$prefix}box-item {
  44. position: absolute !important;
  45. left: 0;
  46. top: 0;
  47. }
  48. .#{$prefix}rtl .#{$prefix}box-item {
  49. right: 0;
  50. left: auto;
  51. }
  52. .#{$prefix}box-layout-ct,
  53. .#{$prefix}border-layout-ct {
  54. overflow: hidden;
  55. // @tag iezoomhack
  56. }
  57. .#{$prefix}border-layout-ct {
  58. background-color: #E4E5E5;
  59. .#{$prefix}border-layout-ct {
  60. background-color: darken(#E4E5E5, 5%);
  61. }
  62. }
  63. .x-panel-default-framed > .#{$prefix}border-layout-ct {
  64. background-color: $panel-base-color;
  65. .#{$prefix}border-layout-ct {
  66. background-color: darken($panel-base-color, 5%);
  67. }
  68. // padding: 5px;
  69. .#{$prefix}panel {
  70. // margin: 5px;
  71. }
  72. .#{$prefix}panel-body {
  73. // border: 0;
  74. }
  75. }
  76. .#{$prefix}overflow-hidden {
  77. overflow: hidden !important;
  78. }
  79. .#{$prefix}inline-children > * {
  80. display: inline-block !important;
  81. }
  82. .#{$prefix}abs-layout-ct {
  83. position: relative;
  84. }
  85. .#{$prefix}abs-layout-item {
  86. position: absolute !important;
  87. }
  88. .#{$prefix}fit-item {
  89. position: relative;
  90. }
  91. .#{$prefix}border-region-slide-in {
  92. z-index: 5;
  93. }
  94. .#{$prefix}region-collapsed-placeholder {
  95. z-index: 4;
  96. }
  97. // Framing
  98. .#{$prefix}frame-tl,
  99. .#{$prefix}frame-tr,
  100. .#{$prefix}frame-tc,
  101. .#{$prefix}frame-bl,
  102. .#{$prefix}frame-br,
  103. .#{$prefix}frame-bc {
  104. overflow: hidden;
  105. background-repeat: no-repeat;
  106. }
  107. .#{$prefix}frame-tc,
  108. .#{$prefix}frame-bc {
  109. background-repeat: repeat-x;
  110. }
  111. .#{$prefix}frame-mc {
  112. position: relative;
  113. background-repeat: repeat-x;
  114. overflow: hidden;
  115. }
  116. // Classes for horizontal Box layout scroller.
  117. // Uses the *TAB* scroller image because it's all we have.
  118. // This will not work well in other cases
  119. .#{$prefix}box-scroller-left, .#{$prefix}box-scroller-right {
  120. height: 100%;
  121. z-index: 5;
  122. }
  123. .#{$prefix}toolbar-scroll-left, .#{$prefix}tabbar-scroll-left,
  124. .#{$prefix}toolbar-scroll-right, .#{$prefix}tabbar-scroll-right {
  125. @extend .mr-white-glove;
  126. position: relative;
  127. // width: 18px;
  128. // height: $tab-height;
  129. }
  130. .#{$prefix}toolbar-scroll-left, .#{$prefix}toolbar-scroll-right {
  131. // width: 14px;
  132. // height: 22px;
  133. // border-bottom: 1px solid $toolbar-scroll-border-color;
  134. }
  135. .#{$prefix}toolbar-scroll-left-disabled,
  136. .#{$prefix}tabbar-scroll-left-disabled,
  137. .#{$prefix}toolbar-scroll-right-disabled,
  138. .#{$prefix}tabbar-scroll-right-disabled {
  139. @include opacity(.5);
  140. cursor: default;
  141. }
  142. .#{$prefix}box-scroller-left {
  143. float: left;
  144. // .#{$prefix}toolbar-scroll-left,
  145. // .#{$prefix}tabbar-scroll-left {
  146. // background: theme-background-image($theme-name, 'tab-bar/scroll-left.gif') no-repeat -18px 0;
  147. // }
  148. // .#{$prefix}toolbar-scroll-left-hover {
  149. // background-position: 0 0;
  150. // }
  151. // .#{$prefix}toolbar-scroll-left-disabled,
  152. // .#{$prefix}tabbar-scroll-left-disabled {
  153. // background-position: -18px 0;
  154. // }
  155. // .#{$prefix}toolbar-scroll-left {
  156. // background-image: theme-background-image($theme-name, 'toolbar/scroll-left.gif');
  157. // background-position: -14px 0;
  158. // }
  159. // .#{$prefix}toolbar-scroll-left-hover {
  160. // background-position: 0 0;
  161. // }
  162. // .#{$prefix}toolbar-scroll-left-disabled {
  163. // background-position: -14px 0;
  164. // }
  165. }
  166. .#{$prefix}horizontal-box-overflow-body {
  167. float: left;
  168. }
  169. .#{$prefix}box-scroller-right {
  170. float: right;
  171. .#{$prefix}toolbar-scroll-right,
  172. .#{$prefix}tabbar-scroll-right {
  173. background: theme-background-image($theme-name, 'tab-bar/scroll-right.gif') no-repeat 0 0;
  174. }
  175. .#{$prefix}toolbar-scroll-right-hover {
  176. background-position: -18px 0;
  177. }
  178. .#{$prefix}toolbar-scroll-right-disabled,
  179. .#{$prefix}tabbar-scroll-right-disabled {
  180. background-position: 0 0;
  181. }
  182. .#{$prefix}toolbar-scroll-right {
  183. background-image: theme-background-image($theme-name, 'toolbar/scroll-right.gif');
  184. }
  185. .#{$prefix}toolbar-scroll-right-hover {
  186. background-position: -14px 0;
  187. }
  188. .#{$prefix}toolbar-scroll-right-disabled {
  189. background-position: 0 0;
  190. }
  191. }
  192. // Classes for vertical Box layout scroller
  193. .#{$prefix}box-scroller-top {
  194. .#{$prefix}box-scroller {
  195. line-height: 0;
  196. font-size: 0;
  197. }
  198. .#{$prefix}menu-scroll-top {
  199. background: transparent no-repeat center center;
  200. background-image: theme-background-image($theme-name, 'layout/mini-top.gif');
  201. height: 8px;
  202. cursor: pointer;
  203. }
  204. }
  205. .#{$prefix}box-scroller-bottom {
  206. .#{$prefix}box-scroller {
  207. line-height: 0;
  208. font-size: 0;
  209. }
  210. .#{$prefix}menu-scroll-bottom {
  211. background: transparent no-repeat center center;
  212. background-image: theme-background-image($theme-name, 'layout/mini-bottom.gif');
  213. height: 8px;
  214. cursor: pointer;
  215. }
  216. }
  217. .#{$prefix}box-menu-right {
  218. float: right;
  219. padding-right: $toolbar-horizontal-spacing;
  220. }
  221. .#{$prefix}column {
  222. float: left;
  223. }
  224. @if $include-ie {
  225. .#{$prefix}ie6 .#{$prefix}column {
  226. display: inline; /*prevent IE6 double-margin bug*/
  227. }
  228. }
  229. }