_menu.scss2.html 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  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-menu-Menu-css_mixin-extjs-menu'>/**
  19. </span> * Creates the base structure of a Menu
  20. * @member Ext.menu.Menu
  21. */
  22. @mixin extjs-menu {
  23. .#{$prefix}menu-body {
  24. @include no-select;
  25. background: $menu-background-color !important;
  26. padding: $menu-padding;
  27. }
  28. .#{$prefix}menu-item .#{$prefix}form-text {
  29. user-select: text;
  30. -webkit-user-select: text;
  31. -o-user-select: text;
  32. -ie-user-select: text;
  33. -moz-user-select: text;
  34. -ie-user-select: text;
  35. }
  36. .#{$prefix}menu-icon-separator {
  37. position: absolute;
  38. top: 0px;
  39. left: $menu-item-indent;
  40. z-index: 0;
  41. border-left: solid 1px $menu-separator-border-color;
  42. background-color: $menu-separator-background-color;
  43. width: 2px;
  44. overflow: hidden;
  45. }
  46. .#{$prefix}menu-plain {
  47. .#{$prefix}menu-icon-separator {
  48. display: none;
  49. }
  50. }
  51. .#{$prefix}menu-focus {
  52. display: block;
  53. position: absolute;
  54. top: -10px;
  55. left: -10px;
  56. width: 0px;
  57. height: 0px;
  58. }
  59. .#{$prefix}menu-item {
  60. white-space: nowrap;
  61. overflow: hidden;
  62. z-index: 1;
  63. }
  64. .#{$prefix}menu-item-cmp {
  65. margin-bottom: 1px;
  66. }
  67. .#{$prefix}menu-item-link {
  68. display: block;
  69. margin: 1px;
  70. padding: $menu-link-padding;
  71. text-decoration: none !important;
  72. line-height: 16px;
  73. cursor: default;
  74. }
  75. @if $include-opera {
  76. .#{$prefix}opera {
  77. // Opera 10.5 absolute positioning of submenu arrow has issues
  78. // This will fix it, and not affect newer Operas
  79. .#{$prefix}menu-item-link {
  80. position: relative;
  81. }
  82. }
  83. }
  84. .#{$prefix}menu-item-icon {
  85. width: 16px;
  86. height: 16px;
  87. position: absolute;
  88. top: 5px;
  89. left: 4px;
  90. background: no-repeat center center;
  91. }
  92. // For when an icon needs to be used in the right position where a submenu arrow usually goes.
  93. // eg: When a CheckItem needs an icon. The left icon position is a checkbox, so the icon is moved to the right.
  94. .#{$prefix}menu-item-icon-right {
  95. width: 16px;
  96. height: 16px;
  97. position: absolute;
  98. top: 6px;
  99. right: 4px;
  100. background: no-repeat center center;
  101. }
  102. .#{$prefix}menu-item-text {
  103. font-size: ceil($font-size * .9);
  104. color: $menu-text-color;
  105. }
  106. .#{$prefix}menu-item-checked {
  107. .#{$prefix}menu-item-icon {
  108. background-image: theme-background-image($theme-name, $menu-icon-checked);
  109. }
  110. .#{$prefix}menu-group-icon {
  111. background-image: theme-background-image($theme-name, $menu-icon-group-checked);
  112. }
  113. }
  114. .#{$prefix}menu-item-unchecked {
  115. .#{$prefix}menu-item-icon {
  116. background-image: theme-background-image($theme-name, $menu-icon-unchecked);
  117. }
  118. .#{$prefix}menu-group-icon {
  119. background-image: none;
  120. }
  121. }
  122. .#{$prefix}menu-item-separator {
  123. height: 2px;
  124. border-top: solid 1px $menu-separator-border-color;
  125. background-color: $menu-separator-background-color;
  126. margin: $menu-padding 0px;
  127. overflow: hidden;
  128. }
  129. .#{$prefix}menu-item-arrow {
  130. position: absolute;
  131. width: 12px;
  132. height: 9px;
  133. top: 9px;
  134. right: 0px;
  135. background: no-repeat center center;
  136. background-image: theme-background-image($theme-name, $menu-icon-arrow);
  137. }
  138. .#{$prefix}menu-item-indent {
  139. margin-left: $menu-item-indent + $menu-padding + 2px; /* The 2px is the width of the seperator */
  140. }
  141. .#{$prefix}menu-item-active {
  142. cursor: pointer;
  143. .#{$prefix}menu-item-link {
  144. @include background-gradient($menu-item-active-background-color, 'matte');
  145. margin: 0px;
  146. border: 1px solid $menu-item-active-border-color;
  147. cursor: pointer;
  148. @include border-radius(3px);
  149. }
  150. }
  151. .#{$prefix}menu-item-disabled {
  152. @include opacity(.5);
  153. }
  154. @if $include-ie {
  155. .#{$prefix}ie {
  156. .#{$prefix}menu-item-disabled {
  157. .#{$prefix}menu-item-icon {
  158. @include opacity(.5);
  159. }
  160. .#{$prefix}menu-item-text {
  161. // IE opacity/cleartype bug workaround
  162. background-color: transparent;
  163. }
  164. }
  165. .#{$prefix}strict .#{$prefix}ie7m &amp; {
  166. .#{$prefix}menu-icon-separator {
  167. width: 1px;
  168. }
  169. .#{$prefix}menu-item-separator {
  170. height: 1px;
  171. }
  172. }
  173. }
  174. .#{$prefix}ie6,
  175. .#{$prefix}ie7,
  176. .#{$prefix}quirks .#{$prefix}ie8 {
  177. .#{$prefix}menu-item-link {
  178. padding-bottom: $menu-padding;
  179. }
  180. }
  181. }
  182. @if not $supports-gradients or $compile-all {
  183. .#{$prefix}nlg {
  184. .#{$prefix}menu-item-active .#{$prefix}menu-item-link {
  185. background: $menu-item-active-background-color repeat-x left top;
  186. background-image: theme-background-image($theme-name, $menu-item-active-background-image);
  187. }
  188. }
  189. }
  190. .#{$prefix}menu-date-item {
  191. border-color: #99BBE8;
  192. }
  193. }
  194. </pre>
  195. </body>
  196. </html>