_tabbar.scss 4.4 KB

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