_tabbar.scss.html 5.2 KB

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