_layout.scss.html 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>The source code</title>
  6. <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  7. <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  8. <style type="text/css">
  9. .highlight { display: block; background-color: #ddd; }
  10. </style>
  11. <script type="text/javascript">
  12. function highlight() {
  13. document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14. }
  15. </script>
  16. </head>
  17. <body onload="prettyPrint(); highlight();">
  18. <pre class="prettyprint lang-js">@mixin extjs-layout {
  19. /*
  20. * Dock Layouts
  21. * @todo move this somewhere else?
  22. */
  23. .#{$prefix}docked {
  24. position: absolute !important;
  25. z-index: 1;
  26. }
  27. .#{$prefix}docked-top {
  28. border-bottom-width: 0 !important;
  29. }
  30. .#{$prefix}docked-bottom {
  31. border-top-width: 0 !important;
  32. }
  33. .#{$prefix}docked-left {
  34. border-right-width: 0 !important;
  35. }
  36. .#{$prefix}docked-right {
  37. border-left-width: 0 !important;
  38. }
  39. .#{$prefix}docked-noborder-top {
  40. border-top-width: 0 !important;
  41. }
  42. .#{$prefix}docked-noborder-right {
  43. border-right-width: 0 !important;
  44. }
  45. .#{$prefix}docked-noborder-bottom {
  46. border-bottom-width: 0 !important;
  47. }
  48. .#{$prefix}docked-noborder-left {
  49. border-left-width: 0 !important;
  50. }
  51. .#{$prefix}box-inner {
  52. overflow:hidden;
  53. zoom:1;
  54. position:relative;
  55. left:0;
  56. top:0;
  57. }
  58. .#{$prefix}box-item {
  59. position:absolute !important;
  60. left:0;
  61. top:0;
  62. }
  63. .#{$prefix}rtl .#{$prefix}box-item {
  64. right: 0;
  65. left: auto;
  66. }
  67. .#{$prefix}box-layout-ct,
  68. .#{$prefix}border-layout-ct {
  69. overflow: hidden;
  70. zoom: 1;
  71. }
  72. .#{$prefix}border-layout-ct {
  73. background-color: $border-layout-ct-background;
  74. position: relative;
  75. }
  76. .#{$prefix}overflow-hidden {
  77. overflow:hidden !important;
  78. }
  79. .#{$prefix}inline-children &gt; * {
  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. .#{$prefix}accordion-hd .#{$prefix}panel-header-text {
  98. color: $accordion-header-color;
  99. font-weight: normal;
  100. }
  101. .#{$prefix}accordion-hd {
  102. .#{$prefix}tool-collapse-top,
  103. .#{$prefix}tool-collapse-right,
  104. .#{$prefix}tool-collapse-bottom,
  105. .#{$prefix}tool-collapse-left {
  106. background-position: 0 -255px;
  107. }
  108. .#{$prefix}tool-expand-top,
  109. .#{$prefix}tool-expand-right,
  110. .#{$prefix}tool-expand-bottom,
  111. .#{$prefix}tool-expand-left {
  112. background-position: 0 -240px;
  113. }
  114. .#{$prefix}tool-over {
  115. .#{$prefix}tool-collapse-top,
  116. .#{$prefix}tool-collapse-right,
  117. .#{$prefix}tool-collapse-bottom,
  118. .#{$prefix}tool-collapse-left {
  119. background-position: -15px -255px;
  120. }
  121. }
  122. .#{$prefix}tool-over {
  123. .#{$prefix}tool-expand-top,
  124. .#{$prefix}tool-expand-right,
  125. .#{$prefix}tool-expand-bottom,
  126. .#{$prefix}tool-expand-left {
  127. background-position: -15px -240px;
  128. }
  129. }
  130. background: $accordion-header-background-color !important;
  131. @include single-box-shadow($accordion-header-background-color, 0, 0, 0, 0, true);
  132. }
  133. .#{$prefix}accordion-hd {
  134. border-width: 1px 0 1px 0 !important;
  135. padding: 4px 5px 5px 5px;
  136. border-top-color: $panel-header-inner-border-color !important;
  137. }
  138. .#{$prefix}accordion-body {
  139. border-width: 0 !important;
  140. }
  141. .#{$prefix}accordion-hd-sibling-expanded {
  142. border-top-color: $panel-border-color !important;
  143. @include single-box-shadow($panel-header-inner-border-color, 0, 1px, 0, 0, true);
  144. }
  145. .#{$prefix}accordion-hd-last-collapsed {
  146. border-bottom-color: $accordion-header-background-color !important;
  147. }
  148. .#{$prefix}frame-tl,
  149. .#{$prefix}frame-tr,
  150. .#{$prefix}frame-tc,
  151. .#{$prefix}frame-bl,
  152. .#{$prefix}frame-br,
  153. .#{$prefix}frame-bc {
  154. overflow: hidden;
  155. background-repeat: no-repeat;
  156. }
  157. .#{$prefix}frame-tc,
  158. .#{$prefix}frame-bc {
  159. background-repeat: repeat-x;
  160. }
  161. .#{$prefix}frame-mc {
  162. position: relative;
  163. background-repeat: repeat-x;
  164. overflow: hidden;
  165. }
  166. // Classes for horizontal Box layout scroller.
  167. // Uses the *TAB* scroller image because it's all we have.
  168. // This will not work well in other cases
  169. .#{$prefix}box-scroller-left {
  170. float: left;
  171. height: 100%;
  172. z-index: 5;
  173. .#{$prefix}toolbar-scroll-left,
  174. .#{$prefix}tabbar-scroll-left {
  175. width: 18px;
  176. position: relative;
  177. cursor: pointer;
  178. height: $tab-height;
  179. background: transparent no-repeat -18px 0;
  180. background-image: theme-background-image($theme-name, 'tab-bar/scroll-left.gif');
  181. }
  182. .#{$prefix}toolbar-scroll-left-hover {
  183. background-position: 0 0;
  184. }
  185. .#{$prefix}toolbar-scroll-left-disabled,
  186. .#{$prefix}tabbar-scroll-left-disabled {
  187. background-position: -18px 0;
  188. @include opacity(.5);
  189. cursor:default;
  190. }
  191. .#{$prefix}toolbar-scroll-left {
  192. background-image: theme-background-image($theme-name, 'toolbar/scroll-left.gif');
  193. background-position: -14px 0;
  194. }
  195. .#{$prefix}toolbar-scroll-left-hover {
  196. background-position: 0 0;
  197. }
  198. .#{$prefix}toolbar-scroll-left-disabled {
  199. background-position: -14px 0;
  200. }
  201. .#{$prefix}toolbar-scroll-left {
  202. width: 14px;
  203. height: 22px;
  204. border-bottom: 1px solid #8db2e3;
  205. }
  206. }
  207. .#{$prefix}horizontal-box-overflow-body {
  208. float: left;
  209. }
  210. .#{$prefix}box-scroller-right {
  211. float: right;
  212. height: 100%;
  213. z-index: 5;
  214. .#{$prefix}toolbar-scroll-right,
  215. .#{$prefix}tabbar-scroll-right {
  216. width: 18px;
  217. position: relative;
  218. cursor: pointer;
  219. height: $tab-height;
  220. background: transparent no-repeat 0 0;
  221. background-image: theme-background-image($theme-name, 'tab-bar/scroll-right.gif');
  222. }
  223. .#{$prefix}toolbar-scroll-right-hover {
  224. background-position: -18px 0;
  225. }
  226. .#{$prefix}toolbar-scroll-right-disabled,
  227. .#{$prefix}tabbar-scroll-right-disabled {
  228. background-position: 0 0;
  229. @include opacity(.5);
  230. cursor:default;
  231. }
  232. .#{$prefix}toolbar-scroll-right {
  233. background-image: theme-background-image($theme-name, 'toolbar/scroll-right.gif');
  234. }
  235. .#{$prefix}toolbar-scroll-right-hover {
  236. background-position: -14px 0;
  237. }
  238. .#{$prefix}toolbar-scroll-right-disabled {
  239. background-position: 0 0;
  240. }
  241. .#{$prefix}toolbar-scroll-right {
  242. width: 14px;
  243. height: 22px;
  244. border-bottom: 1px solid #8db2e3;
  245. }
  246. }
  247. // Classes for vertical Box layout scroller
  248. .#{$prefix}box-scroller-top {
  249. .#{$prefix}box-scroller {
  250. line-height: 0;
  251. font-size: 0;
  252. }
  253. .#{$prefix}menu-scroll-top {
  254. background: transparent no-repeat center center;
  255. background-image: theme-background-image($theme-name, 'layout/mini-top.gif');
  256. height: 8px;
  257. cursor: pointer;
  258. }
  259. }
  260. .#{$prefix}box-scroller-bottom {
  261. .#{$prefix}box-scroller {
  262. line-height: 0;
  263. font-size: 0;
  264. }
  265. .#{$prefix}menu-scroll-bottom {
  266. background: transparent no-repeat center center;
  267. background-image: theme-background-image($theme-name, 'layout/mini-bottom.gif');
  268. height: 8px;
  269. cursor: pointer;
  270. }
  271. }
  272. .#{$prefix}box-menu-right {
  273. float: right;
  274. padding-right: $toolbar-horizontal-spacing;
  275. }
  276. .#{$prefix}column {
  277. float: left;
  278. }
  279. @if $include-ie {
  280. .#{$prefix}ie6 .#{$prefix}column {
  281. display: inline; /*prevent IE6 double-margin bug*/
  282. }
  283. .#{$prefix}quirks .#{$prefix}ie .#{$prefix}form-layout-table, .#{$prefix}quirks .#{$prefix}ie .#{$prefix}form-layout-table tbody tr.#{$prefix}form-item {
  284. position: relative;
  285. }
  286. }
  287. }</pre>
  288. </body>
  289. </html>