Upgrade to ExtJS 4.0.0 - Released 04/26/2011

[extjs.git] / resources / themes / stylesheets / ext4 / default / widgets / _menu.scss

diff --git a/resources/themes/stylesheets/ext4/default/widgets/_menu.scss b/resources/themes/stylesheets/ext4/default/widgets/_menu.scss
new file mode 100644 (file)
index 0000000..53b970e
--- /dev/null
+++ b/resources/themes/stylesheets/ext4/default/widgets/_menu.scss
@@ -0,0 +1,180 @@
+/**
+  * @class Ext.menu.*
+  */
+@mixin extjs-menu {
+    .#{$prefix}menu-body {
+        @include no-select;
+        background: $menu-background-color !important;
+        padding: $menu-padding;
+    }
+
+    .#{$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;
+        height: 100%;
+        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;
+        padding: 0px $menu-padding;
+        margin: 1px;
+        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;
+        margin: 4px 11px 0px 2px;
+        background: no-repeat center center;
+    }
+
+    .#{$prefix}menu-item-text {
+        position: relative;
+        font-size: ceil($font-size * .9);
+        color: $menu-text-color;
+        top: -4px;
+    }
+
+    .#{$prefix}menu-item-checked {
+        .#{$prefix}menu-item-icon {
+            background-image: theme-image($theme-name, $menu-icon-checked);
+        }
+        .#{$prefix}menu-group-icon {
+            background-image: theme-image($theme-name, $menu-icon-group-checked);
+        }
+    }
+
+    .#{$prefix}menu-item-unchecked {
+        .#{$prefix}menu-item-icon {
+            background-image: theme-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: theme-image($theme-name, $menu-icon-arrow) no-repeat center center;
+    }
+
+    .#{$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;
+        }
+    }
+
+    .#{$prefix}menu-item-disabled {
+        @include opacity(.5);
+    }
+
+    @if $include-ie {
+        .#{$prefix}ie {
+            .#{$prefix}menu-item-link {
+                line-height: 17px;
+                padding-bottom: 1px;
+            }
+
+            .#{$prefix}menu-item-disabled {
+                .#{$prefix}menu-item-icon {
+                    @include opacity(.5);
+                }
+
+                .#{$prefix}menu-item-text {
+                    // IE opacity/cleartype bug workaround
+                    background-color: $menu-background-color;
+                }
+            }
+            
+            .#{$prefix}strict & {
+                .#{$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 theme-image($theme-name, $menu-item-active-background-image) repeat-x left top;
+            }
+        }
+    }
+}