Upgrade to ExtJS 4.0.0 - Released 04/26/2011

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

diff --git a/resources/themes/stylesheets/ext4/default/widgets/_toolbar.scss b/resources/themes/stylesheets/ext4/default/widgets/_toolbar.scss
new file mode 100644 (file)
index 0000000..c3034af
--- /dev/null
+++ b/resources/themes/stylesheets/ext4/default/widgets/_toolbar.scss
@@ -0,0 +1,158 @@
+@mixin extjs-toolbar {
+    .#{$prefix}toolbar {
+        font-size: $toolbar-font-size;
+
+        border: 1px solid;
+        
+        padding: $toolbar-vertical-spacing 0 $toolbar-vertical-spacing $toolbar-horizontal-spacing;
+
+        .#{$prefix}form-item-label{
+            font-size: $toolbar-font-size;
+            line-height: 15px;
+        }
+        
+        .#{$prefix}toolbar-item {
+            margin: 0 $toolbar-horizontal-spacing 0 0;
+        }
+        
+        .#{$prefix}toolbar-text {
+            margin-left: 4px;
+            margin-right: 6px;
+            white-space: nowrap;
+            color: $toolbar-text-color !important;
+            line-height: $toolbar-text-line-height;
+            font-family: $toolbar-text-font-family;
+            font-size: $toolbar-text-font-size;
+            font-weight: $toolbar-text-font-weight;
+        }
+        
+        .#{$prefix}toolbar-separator {
+            display: block;
+            font-size: 1px;
+            overflow: hidden;
+            cursor: default;
+            border: 0;
+        }
+        
+        .#{$prefix}toolbar-separator-horizontal {
+            margin: 0 3px 0 2px;
+
+            height: 14px;
+            width: 0px;
+
+            border-left: 1px solid $toolbar-separator-color;
+            border-right: 1px solid $toolbar-separator-highlight-color;
+        }
+    }
+    
+    @if $include-ie {
+        .#{$prefix}quirks .#{$prefix}ie .#{$prefix}toolbar .#{$prefix}toolbar-separator-horizontal {
+            width: 2px;
+        } 
+    }
+    
+    .#{$prefix}toolbar-footer {
+        background: transparent;
+        border: 0px none;
+        margin-top: 3px;
+        
+        padding: $toolbar-footer-vertical-spacing 0 $toolbar-footer-vertical-spacing $toolbar-footer-horizontal-spacing;
+        
+        .#{$prefix}box-inner {
+            border-width: 0;
+        }
+        
+        .#{$prefix}toolbar-item {
+            margin: 0 $toolbar-footer-horizontal-spacing 0 0;
+        }
+    }
+    
+    .#{$prefix}toolbar-vertical {
+        padding: $toolbar-vertical-spacing $toolbar-horizontal-spacing 0 $toolbar-horizontal-spacing;
+        
+        .#{$prefix}toolbar-item {
+            margin: 0 0 $toolbar-horizontal-spacing 0;
+        }
+        
+        .#{$prefix}toolbar-text {
+            margin-top: 4px;
+            margin-bottom: 6px;
+        }     
+        
+        .#{$prefix}toolbar-separator-vertical {
+            margin: 2px 5px 3px 5px;
+
+            height: 0px;
+            width: 10px;
+            line-height: 0px;
+
+            border-top: 1px solid $toolbar-separator-color;
+            border-bottom: 1px solid $toolbar-separator-highlight-color;
+        }
+    }
+    
+    .#{$prefix}toolbar-scroller {
+        padding-left: 0;
+    }
+
+    .#{$prefix}toolbar-spacer {
+        width: $toolbar-spacer-width;
+    }
+
+    // Background for overflow button inserted by the Menu box overflow handler within a toolbar
+    .#{$prefix}toolbar-more-icon {
+        background-image: theme-image($theme-name, 'toolbar/more.gif') !important;
+        background-position: 2px center !important;
+        background-repeat: no-repeat;
+    }
+    
+    @include extjs-toolbar-ui(
+        'default',
+        $background-color: $toolbar-background-color,
+        $background-gradient: $toolbar-background-gradient,
+        $border-color: $tabbar-border-color
+    );
+    
+    //plain toolbars have no border
+    //by default they get no color, so they are transparent. IE6 doesnt support transparent borders
+    //so we must set the width to 0.
+    .#{$prefix}toolbar-plain {
+        border: 0;
+    }
+}
+
+/**
+ * @mixin ext-toolbar-ui
+ * @class Ext.toolbar.Toolbar
+ * @param {String} $ui The name of the UI
+ * @param {Color} $background-color The background color of the toolbar (defaults to transparent)
+ * @param {Gradient/color-stops} $background-gradient The background gradient of the toolbar (defaults to null)
+ * @param {Color} $border-color The border color of the toolbar (defaults to null)
+ */
+@mixin extjs-toolbar-ui(
+    $ui,
+    
+    $background-color: transparent,
+    $background-gradient: null,
+    
+    $border-color: null
+) {
+    .#{$prefix}toolbar-#{$ui} {
+        @if $border-color != null {
+            border-color: $border-color;
+        }
+        
+        @include background-gradient($background-color, $background-gradient);
+    }
+    
+    @if not $supports-gradients or $compile-all {
+        @if $background-gradient != null {
+            .#{$prefix}nlg {
+                .#{$prefix}toolbar-#{$ui} {
+                    background-image: theme-image($theme-name, 'toolbar/toolbar-#{$ui}-bg.gif') !important;
+                    background-repeat: repeat-x;
+                }
+            }
+        }
+    }
+}