Upgrade to ExtJS 4.0.1 - Released 05/18/2011

[extjs.git] / docs / resources / themes / stylesheets / ext4 / default / widgets / _btn-group.scss

diff --git a/docs/resources/themes/stylesheets/ext4/default/widgets/_btn-group.scss b/docs/resources/themes/stylesheets/ext4/default/widgets/_btn-group.scss
new file mode 100644 (file)
index 0000000..beb2785
--- /dev/null
+++ b/docs/resources/themes/stylesheets/ext4/default/widgets/_btn-group.scss
@@ -0,0 +1,78 @@
+@mixin extjs-btn-group {
+    .#{$prefix}btn-group {
+        position: relative;
+        overflow: hidden;
+    }
+    
+    .#{$prefix}btn-group-body {
+        position: relative;
+        zoom: 1;
+        
+        padding: $btn-group-padding;
+    }
+    
+    .#{$prefix}btn-group-header-text {
+        white-space: nowrap;
+    }
+    
+    @include extjs-btn-group-ui('default');
+}
+
+/**
+ * @mixin extjs-btn-group-ui
+ * @class Ext.ButtonGroup
+ */
+@mixin extjs-btn-group-ui(
+    $ui-label,
+    $ui-base-color: null,
+    
+    // background
+    $ui-background-color: $btn-group-background-color,
+    
+    // borders
+    $ui-border-color: $btn-group-border-color,
+    $ui-border-width: $btn-group-border-width,
+    $ui-border-radius: $btn-group-border-radius,
+    $ui-inner-border-color: $btn-group-inner-border-color,
+    
+    //header
+    $ui-header-background-color: $btn-group-header-background-color,
+    $ui-header-font: $btn-group-header-font,
+    $ui-header-color: $btn-group-header-color
+){
+    @include x-frame(
+        'btn-group',
+        $ui: '#{$ui-label}-framed',
+        
+        /* Radius, width, padding and background-color */
+        $border-radius: $ui-border-radius, 
+        $border-width: $ui-border-width, 
+        $padding: $btn-group-padding, 
+        $background-color: $ui-background-color
+    );
+    
+    .#{$prefix}btn-group-#{$ui-label}-framed {
+        border-color: $ui-border-color;
+        @include inner-border(
+            $width: $btn-group-inner-border-width, 
+            $color: $ui-inner-border-color
+        );
+    }
+
+    .#{$prefix}btn-group-header-#{$ui-label}-framed {
+        margin: $btn-group-header-margin;
+    }
+
+    .#{$prefix}btn-group-header-body-#{$ui-label}-framed {
+        padding: $btn-group-header-padding;
+
+        background: $ui-header-background-color;
+
+        @include border-top-radius($ui-border-radius);
+    }
+    
+    .#{$prefix}btn-group-header-text-#{$ui-label}-framed {
+        font: $ui-header-font;
+        color: $ui-header-color;
+    }
+}