_toolbar.scss2.html 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
  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"><span id='Ext-toolbar-Toolbar-css_mixin-extjs-toolbar'>/**
  19. </span> * Creates base structure for Toolbar
  20. * @member Ext.toolbar.Toolbar
  21. */
  22. @mixin extjs-toolbar {
  23. .#{$prefix}toolbar {
  24. font-size: $toolbar-font-size;
  25. border: 1px solid;
  26. padding: $toolbar-vertical-spacing 0 $toolbar-vertical-spacing $toolbar-horizontal-spacing;
  27. .#{$prefix}form-item-label{
  28. font-size: $toolbar-font-size;
  29. line-height: 15px;
  30. }
  31. .#{$prefix}toolbar-item {
  32. margin: 0 $toolbar-horizontal-spacing 0 0;
  33. }
  34. .#{$prefix}toolbar-text {
  35. margin-left: 4px;
  36. margin-right: 6px;
  37. white-space: nowrap;
  38. color: $toolbar-text-color;
  39. line-height: $toolbar-text-line-height;
  40. font-family: $toolbar-text-font-family;
  41. font-size: $toolbar-text-font-size;
  42. font-weight: $toolbar-text-font-weight;
  43. }
  44. .#{$prefix}toolbar-separator {
  45. display: block;
  46. font-size: 1px;
  47. overflow: hidden;
  48. cursor: default;
  49. border: 0;
  50. }
  51. .#{$prefix}toolbar-separator-horizontal {
  52. margin: 0 3px 0 2px;
  53. height: 14px;
  54. width: 0px;
  55. border-left: 1px solid $toolbar-separator-color;
  56. border-right: 1px solid $toolbar-separator-highlight-color;
  57. }
  58. }
  59. @if $include-ie {
  60. .#{$prefix}quirks .#{$prefix}ie .#{$prefix}toolbar .#{$prefix}toolbar-separator-horizontal {
  61. width: 2px;
  62. }
  63. }
  64. .#{$prefix}toolbar-footer {
  65. background: transparent;
  66. border: 0px none;
  67. margin-top: 3px;
  68. padding: $toolbar-footer-vertical-spacing 0 $toolbar-footer-vertical-spacing $toolbar-footer-horizontal-spacing;
  69. .#{$prefix}box-inner {
  70. border-width: 0;
  71. }
  72. .#{$prefix}toolbar-item {
  73. margin: 0 $toolbar-footer-horizontal-spacing 0 0;
  74. }
  75. }
  76. .#{$prefix}toolbar-vertical {
  77. padding: $toolbar-vertical-spacing $toolbar-horizontal-spacing 0 $toolbar-horizontal-spacing;
  78. .#{$prefix}toolbar-item {
  79. margin: 0 0 $toolbar-horizontal-spacing 0;
  80. }
  81. .#{$prefix}toolbar-text {
  82. margin-top: 4px;
  83. margin-bottom: 6px;
  84. }
  85. .#{$prefix}toolbar-separator-vertical {
  86. margin: 2px 5px 3px 5px;
  87. height: 0px;
  88. width: 10px;
  89. line-height: 0px;
  90. border-top: 1px solid $toolbar-separator-color;
  91. border-bottom: 1px solid $toolbar-separator-highlight-color;
  92. }
  93. }
  94. .#{$prefix}toolbar-scroller {
  95. padding-left: 0;
  96. }
  97. .#{$prefix}toolbar-spacer {
  98. width: $toolbar-spacer-width;
  99. }
  100. // Background for overflow button inserted by the Menu box overflow handler within a toolbar
  101. .#{$prefix}toolbar-more-icon {
  102. background-image: theme-background-image($theme-name, 'toolbar/more.gif') !important;
  103. background-position: 2px center !important;
  104. background-repeat: no-repeat;
  105. }
  106. @include extjs-toolbar-ui(
  107. 'default',
  108. $background-color: $toolbar-background-color,
  109. $background-gradient: $toolbar-background-gradient,
  110. $border-color: $toolbar-border-color
  111. );
  112. //plain toolbars have no border
  113. //by default they get no color, so they are transparent. IE6 doesnt support transparent borders
  114. //so we must set the width to 0.
  115. .#{$prefix}toolbar-plain {
  116. border: 0;
  117. }
  118. }
  119. <span id='Ext-toolbar-Toolbar-css_mixin-extjs-toolbar-ui'>/**
  120. </span> * Creates a visual theme for an Toolbar.
  121. * @param {String} $ui The name of the UI
  122. * @param {Color} $background-color The background color of the toolbar (defaults to transparent)
  123. * @param {Gradient/color-stops} $background-gradient The background gradient of the toolbar (defaults to null)
  124. * @param {Color} $border-color The border color of the toolbar (defaults to null)
  125. * @member Ext.toolbar.Toolbar
  126. */
  127. @mixin extjs-toolbar-ui(
  128. $ui,
  129. $background-color: transparent,
  130. $background-gradient: null,
  131. $border-color: null
  132. ) {
  133. .#{$prefix}toolbar-#{$ui} {
  134. @if $border-color != null {
  135. border-color: $border-color;
  136. }
  137. @include background-gradient($background-color, $background-gradient);
  138. }
  139. @if not $supports-gradients or $compile-all {
  140. @if $background-gradient != null {
  141. .#{$prefix}nlg {
  142. .#{$prefix}toolbar-#{$ui} {
  143. background-image: theme-background-image($theme-name, 'toolbar/toolbar-#{$ui}-bg.gif') !important;
  144. background-repeat: repeat-x;
  145. }
  146. }
  147. }
  148. }
  149. }
  150. </pre>
  151. </body>
  152. </html>