_tabbar.scss 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. /**
  2. * @class Ext.tab.Bar
  3. */
  4. @mixin extjs-tabbar {
  5. .#{$prefix}tab-bar {
  6. position: relative;
  7. background-color: transparent;
  8. // @include background-gradient($tabbar-base-color, $tabbar-background-gradient);
  9. font-size: $tab-font-size;
  10. }
  11. // .#{$prefix}nlg .#{$prefix}tab-bar {
  12. // background-image: theme-background-image($theme-name, 'tab-bar/tab-bar-default-bg.gif');
  13. // }
  14. .#{$prefix}tab-bar-default-plain,
  15. .#{$prefix}nlg .#{$prefix}tab-bar-default-plain {
  16. background: transparent none;
  17. }
  18. .#{$prefix}tab-bar-body {
  19. // border-style: solid;
  20. // border-color: $tabbar-border-color;
  21. position: relative;
  22. z-index: 2;
  23. // @tag iezoomhack
  24. }
  25. .tab-bar-strip {
  26. display: none !important;
  27. }
  28. .x-tab-bar-body-default-horizontal {
  29. // padding-top: 5px;
  30. }
  31. /* Top Tabs */
  32. @include tab-bar-top(
  33. "tab-bar-top",
  34. "tab-bar-body",
  35. "tab-bar-strip",
  36. $tabbar-top-body-padding,
  37. $tabbar-top-body-border-width,
  38. $tabbar-top-strip-border-width,
  39. $tabbar-strip-height
  40. );
  41. @include tab-bar-top(
  42. "tab-bar-top",
  43. "tab-bar-body-default-plain",
  44. "tab-bar-strip-default-plain",
  45. $tabbar-top-plain-body-padding,
  46. $tabbar-top-plain-body-border-width,
  47. $tabbar-top-strip-border-width,
  48. $tabbar-strip-height
  49. );
  50. /* Bottom Tabs */
  51. @include tab-bar-bottom(
  52. "tab-bar-bottom",
  53. "tab-bar-body",
  54. "tab-bar-strip",
  55. $tabbar-bottom-body-padding,
  56. $tabbar-bottom-body-border-width,
  57. $tabbar-bottom-strip-border-width,
  58. $tabbar-strip-height
  59. );
  60. @include tab-bar-bottom(
  61. "tab-bar-bottom",
  62. "tab-bar-body-default-plain",
  63. "tab-bar-strip-default-plain",
  64. $tabbar-bottom-plain-body-padding,
  65. $tabbar-bottom-plain-body-border-width,
  66. $tabbar-bottom-strip-border-width,
  67. $tabbar-strip-height
  68. );
  69. // Tab strips not in Neptune
  70. // .#{$prefix}tab-bar-strip-default,
  71. // .#{$prefix}tab-bar-strip-default-plain {
  72. // font-size: 0;
  73. // line-height: 0;
  74. // position: absolute;
  75. // z-index: 1;
  76. // border-style: solid;
  77. // overflow: hidden;
  78. // border-color: $tabbar-strip-border-color;
  79. // background-color: $tabbar-strip-background-color;
  80. // zoom: 1;
  81. // }
  82. .#{$prefix}tabpanel-child {
  83. // padding: 0;
  84. }
  85. }
  86. @mixin tab-bar-top($toolbarCls, $bodyCls, $stripCls, $body-padding, $body-border-width, $strip-border-width, $strip-height) {
  87. .#{$prefix}#{$toolbarCls} {
  88. .#{$prefix}#{$bodyCls} {
  89. // height: $tab-height;
  90. // border-width: $body-border-width;
  91. // padding: $body-padding;
  92. }
  93. // .#{$prefix}#{$stripCls} {
  94. // /*position strip from top rather than bottom to avoid off-by-one error in IE6*/
  95. // top: $tab-height + top($body-border-width) + top($body-padding);
  96. // border-width: $strip-border-width;
  97. // height: $strip-height - vertical($strip-border-width);
  98. // }
  99. }
  100. .#{$prefix}border-box {
  101. .#{$prefix}#{$toolbarCls} {
  102. .#{$prefix}#{$bodyCls} {
  103. // height: $tab-height + vertical($body-border-width) + vertical($body-padding);
  104. }
  105. // .#{$prefix}#{$stripCls} {
  106. // height: $strip-height;
  107. // }
  108. }
  109. }
  110. }
  111. @mixin tab-bar-bottom($toolbarCls, $bodyCls, $stripCls, $body-padding, $body-border-width, $strip-border-width, $strip-height) {
  112. .#{$prefix}#{$toolbarCls} {
  113. .#{$prefix}#{$bodyCls} {
  114. // height: $tab-height;
  115. // border-width: $body-border-width;
  116. // padding: $body-padding;
  117. .#{$prefix}box-inner {
  118. position: relative;
  119. // top: 0 - bottom($strip-border-width);
  120. }
  121. .#{$prefix}box-scroller,
  122. .#{$prefix}box-scroller-left,
  123. .#{$prefix}box-scroller-right {
  124. // height: $tab-height + bottom($body-padding) + bottom($strip-border-width);
  125. }
  126. }
  127. // .#{$prefix}#{$stripCls} {
  128. // top: top($body-border-width);
  129. // border-width: $strip-border-width;
  130. // height: $strip-height - vertical($strip-border-width);
  131. // }
  132. }
  133. .#{$prefix}border-box {
  134. .#{$prefix}#{$toolbarCls} {
  135. .#{$prefix}#{$bodyCls} {
  136. // height: $tab-height + vertical($body-border-width) + vertical($body-padding);
  137. }
  138. .#{$prefix}#{$stripCls} {
  139. // height: $strip-height;
  140. }
  141. }
  142. }
  143. }