/ext-4.1.0_b3/resources/themes/stylesheets/ext4/default/layout/_layout.scss

https://bitbucket.org/srogerf/javascript · Sass · 322 lines · 261 code · 53 blank · 8 comment · 0 complexity · 3cc115bb751e8f8f0af5924afa79db6e MD5 · raw file

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