123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>The source code</title>
- <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
- <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
- <style type="text/css">
- .highlight { display: block; background-color: #ddd; }
- </style>
- <script type="text/javascript">
- function highlight() {
- document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
- }
- </script>
- </head>
- <body onload="prettyPrint(); highlight();">
- <pre class="prettyprint lang-js"><span id='Ext-menu-Menu-css_mixin-extjs-menu'>/**
- </span> * Creates the base structure of a Menu
- * @member Ext.menu.Menu
- */
- @mixin extjs-menu {
- .#{$prefix}menu-body {
- @include no-select;
- background: $menu-background-color !important;
- padding: $menu-padding;
- }
- .#{$prefix}menu-item .#{$prefix}form-text {
- user-select: text;
- -webkit-user-select: text;
- -o-user-select: text;
- -ie-user-select: text;
- -moz-user-select: text;
- -ie-user-select: text;
- }
- .#{$prefix}menu-icon-separator {
- position: absolute;
- top: 0px;
- left: $menu-item-indent;
- z-index: 0;
- border-left: solid 1px $menu-separator-border-color;
- background-color: $menu-separator-background-color;
- width: 2px;
- overflow: hidden;
- }
- .#{$prefix}menu-plain {
- .#{$prefix}menu-icon-separator {
- display: none;
- }
- }
- .#{$prefix}menu-focus {
- display: block;
- position: absolute;
- top: -10px;
- left: -10px;
- width: 0px;
- height: 0px;
- }
- .#{$prefix}menu-item {
- white-space: nowrap;
- overflow: hidden;
- z-index: 1;
- }
- .#{$prefix}menu-item-cmp {
- margin-bottom: 1px;
- }
- .#{$prefix}menu-item-link {
- display: block;
- margin: 1px;
- padding: $menu-link-padding;
- text-decoration: none !important;
- line-height: 16px;
- cursor: default;
- }
- @if $include-opera {
- .#{$prefix}opera {
- // Opera 10.5 absolute positioning of submenu arrow has issues
- // This will fix it, and not affect newer Operas
- .#{$prefix}menu-item-link {
- position: relative;
- }
- }
- }
- .#{$prefix}menu-item-icon {
- width: 16px;
- height: 16px;
- position: absolute;
- top: 5px;
- left: 4px;
- background: no-repeat center center;
- }
- // For when an icon needs to be used in the right position where a submenu arrow usually goes.
- // eg: When a CheckItem needs an icon. The left icon position is a checkbox, so the icon is moved to the right.
- .#{$prefix}menu-item-icon-right {
- width: 16px;
- height: 16px;
- position: absolute;
- top: 6px;
- right: 4px;
- background: no-repeat center center;
- }
- .#{$prefix}menu-item-text {
- font-size: ceil($font-size * .9);
- color: $menu-text-color;
- }
- .#{$prefix}menu-item-checked {
- .#{$prefix}menu-item-icon {
- background-image: theme-background-image($theme-name, $menu-icon-checked);
- }
- .#{$prefix}menu-group-icon {
- background-image: theme-background-image($theme-name, $menu-icon-group-checked);
- }
- }
- .#{$prefix}menu-item-unchecked {
- .#{$prefix}menu-item-icon {
- background-image: theme-background-image($theme-name, $menu-icon-unchecked);
- }
- .#{$prefix}menu-group-icon {
- background-image: none;
- }
- }
- .#{$prefix}menu-item-separator {
- height: 2px;
- border-top: solid 1px $menu-separator-border-color;
- background-color: $menu-separator-background-color;
- margin: $menu-padding 0px;
- overflow: hidden;
- }
- .#{$prefix}menu-item-arrow {
- position: absolute;
- width: 12px;
- height: 9px;
- top: 9px;
- right: 0px;
- background: no-repeat center center;
- background-image: theme-background-image($theme-name, $menu-icon-arrow);
- }
- .#{$prefix}menu-item-indent {
- margin-left: $menu-item-indent + $menu-padding + 2px; /* The 2px is the width of the seperator */
- }
- .#{$prefix}menu-item-active {
- cursor: pointer;
- .#{$prefix}menu-item-link {
- @include background-gradient($menu-item-active-background-color, 'matte');
- margin: 0px;
- border: 1px solid $menu-item-active-border-color;
- cursor: pointer;
- @include border-radius(3px);
- }
- }
- .#{$prefix}menu-item-disabled {
- @include opacity(.5);
- }
- @if $include-ie {
- .#{$prefix}ie {
- .#{$prefix}menu-item-disabled {
- .#{$prefix}menu-item-icon {
- @include opacity(.5);
- }
- .#{$prefix}menu-item-text {
- // IE opacity/cleartype bug workaround
- background-color: transparent;
- }
- }
- .#{$prefix}strict .#{$prefix}ie7m & {
- .#{$prefix}menu-icon-separator {
- width: 1px;
- }
- .#{$prefix}menu-item-separator {
- height: 1px;
- }
- }
- }
- .#{$prefix}ie6,
- .#{$prefix}ie7,
- .#{$prefix}quirks .#{$prefix}ie8 {
- .#{$prefix}menu-item-link {
- padding-bottom: $menu-padding;
- }
- }
- }
- @if not $supports-gradients or $compile-all {
- .#{$prefix}nlg {
- .#{$prefix}menu-item-active .#{$prefix}menu-item-link {
- background: $menu-item-active-background-color repeat-x left top;
- background-image: theme-background-image($theme-name, $menu-item-active-background-image);
- }
- }
- }
- .#{$prefix}menu-date-item {
- border-color: #99BBE8;
- }
- }
- </pre>
- </body>
- </html>
|