Upgrade to ExtJS 4.0.0 - Released 04/26/2011

[extjs.git] / resources / themes / stylesheets / ext4 / default / mixins / _frame.scss

diff --git a/resources/themes/stylesheets/ext4/default/mixins/_frame.scss b/resources/themes/stylesheets/ext4/default/mixins/_frame.scss
new file mode 100644 (file)
index 0000000..13205bb
--- /dev/null
+++ b/resources/themes/stylesheets/ext4/default/mixins/_frame.scss
@@ -0,0 +1,205 @@
+@mixin x-frame(
+    $cls, 
+    $ui: null, 
+    $border-radius: 0px, 
+    $border-width: 0px, 
+    $padding: null, 
+    $background-color: null, 
+    $background-gradient: null,
+    $table: false,
+    $background-direction: top
+) {
+    $cls-ui: $cls;
+    @if $ui != null {
+        $cls-ui: $cls + '-' + $ui;
+    }
+    
+    $vertical: false;
+    @if $background-direction == left or $background-direction == right {
+        $vertical: true;
+    }
+
+    $frame-top: max(top($border-radius), right($border-radius));
+    $frame-right: max(right($border-radius), bottom($border-radius));
+    $frame-bottom: max(bottom($border-radius), left($border-radius));
+    $frame-left: max(left($border-radius), top($border-radius));
+    
+    $padding-top: 0;
+    $padding-right: 0;
+    $padding-bottom: 0;
+    $padding-left: 0;
+    
+    @if $padding == null {
+        $padding-top: $frame-top - top($border-width);
+        $padding-right: $frame-right - right($border-width);
+        $padding-bottom: $frame-bottom - bottom($border-width);
+        $padding-left: $frame-left - left($border-width);
+    }
+    @else {
+        $padding-top: top($padding);
+        $padding-right: right($padding);
+        $padding-bottom: bottom($padding);
+        $padding-left: left($padding);    
+    }
+    
+    @if $padding-top < $frame-top {
+        $padding-top: $frame-top - top($border-width);
+    }
+    @if $padding-right < $frame-right {
+        $padding-right: $frame-right - right($border-width);
+    }
+    @if $padding-bottom < $frame-bottom {
+        $padding-bottom: $frame-bottom - bottom($border-width);
+    }
+    @if $padding-left < $frame-left {
+        $padding-left: $frame-left - left($border-width);
+    }
+     
+    .#{$prefix}#{$cls-ui} {
+        @if $supports-border-radius {
+            @if length($border-radius) == 2 {
+                @include border-top-left-radius(nth($border-radius, 1));
+                @include border-top-right-radius(nth($border-radius, 2));
+            } @else if length($border-radius) == 3 {
+                @include border-top-left-radius(nth($border-radius, 1));
+                @include border-top-right-radius(nth($border-radius, 2));
+                @include border-bottom-right-radius(nth($border-radius, 3));
+            } @else if length($border-radius) == 4 {
+                @include border-top-left-radius(nth($border-radius, 1));
+                @include border-top-right-radius(nth($border-radius, 2));
+                @include border-bottom-right-radius(nth($border-radius, 3));
+                @include border-bottom-left-radius(nth($border-radius, 4));
+            } @else {
+                @include border-radius($border-radius);
+            }
+        }
+        padding: $padding-top $padding-right $padding-bottom $padding-left;
+        border-width: $border-width;
+        border-style: solid;
+        @if $background-color != null {
+            @if $supports-gradients and $background-gradient != null {
+                @include background-gradient($background-color, $background-gradient, $background-direction);
+            }
+            @else {
+                background-color: $background-color;
+            }      
+        }
+    }
+    
+    @if not $supports-gradients or $compile-all {
+        .#{$prefix}nlg {
+            .#{$prefix}#{$cls-ui}-mc {
+                @if $background-gradient != null {
+                    background-image: theme-image($theme-name, '#{$cls}/#{$cls-ui}-bg.gif', false, $relative-image-path-for-uis);
+                }
+                @if $background-color != null {
+                    background-color: $background-color;
+                }
+            }
+        }        
+    }
+    
+    @if not $supports-border-radius or $compile-all {
+        .#{$prefix}nbr {
+            .#{$prefix}#{$cls-ui} {
+                padding: 0 !important;
+                border-width: 0 !important;
+                @include border-radius(0px);
+                @if $background-color != null {
+                    background-color: transparent;
+                }
+                @else {
+                    background: #fff;
+                }
+
+                @function pad($radius) {
+                    $radius: boxmax($radius);
+                    $radius: parseint($radius);
+                    @if $radius > 10 {
+                        @return $radius;
+                    }
+                    @else {
+                        @return "0" + $radius;
+                    }
+                }
+                
+                $type: '100';
+                @if $table == true {
+                    $type: '110';
+                }
+                $direction: '100';
+                @if $vertical == true {
+                    $direction: '110';
+                }
+                
+                $left: $type + pad(top($border-radius)) + pad(right($border-radius)) + 'px';
+                $top: $direction + pad(bottom($border-radius)) + pad(left($border-radius)) + 'px';
+                background-position: unquote($left) unquote($top);
+            }
+
+            .#{$prefix}#{$cls-ui}-tl,
+            .#{$prefix}#{$cls-ui}-bl,
+            .#{$prefix}#{$cls-ui}-tr,
+            .#{$prefix}#{$cls-ui}-br,
+            .#{$prefix}#{$cls-ui}-tc,
+            .#{$prefix}#{$cls-ui}-bc,
+            .#{$prefix}#{$cls-ui}-ml,
+            .#{$prefix}#{$cls-ui}-mr {
+                zoom:1;
+                
+                @if $background-color != transparent {
+                    background-image: theme-image($theme-name, '#{$cls}/#{$cls-ui}-corners.gif', false, $relative-image-path-for-uis);
+                }
+            }
+            
+            @if $vertical == true {
+                .#{$prefix}#{$cls-ui}-tc,
+                .#{$prefix}#{$cls-ui}-bc {
+                    zoom:1;
+
+                    @if $background-color != transparent {
+                        background-image: theme-image($theme-name, '#{$cls}/#{$cls-ui}-sides.gif', false, $relative-image-path-for-uis);
+                        background-position: 0 0;
+                        background-repeat: repeat-x;
+                    }
+                }
+            } @else {
+                .#{$prefix}#{$cls-ui}-ml,
+                .#{$prefix}#{$cls-ui}-mr {
+                    zoom:1;
+
+                    @if $background-color != transparent {
+                        background-image: theme-image($theme-name, '#{$cls}/#{$cls-ui}-sides.gif', false, $relative-image-path-for-uis);
+                        background-position: 0 0;
+                        @if $background-gradient == null {
+                            background-repeat: repeat-y;
+                        }
+                    }
+                }
+            }
+
+            $padding-top: $padding-top - $frame-top;
+            $padding-right: $padding-right - $frame-right;
+            $padding-bottom: $padding-bottom - $frame-bottom;
+            $padding-left: $padding-left - $frame-left;
+            
+            
+            @if $padding-top < 0 {
+                $padding-top: 0;
+            }
+            @if $padding-right < 0 {
+                $padding-right: 0;
+            }
+            @if $padding-bottom < 0 {
+                $padding-bottom: 0;
+            }
+            @if $padding-left < 0 {
+                $padding-left: 0;
+            }
+
+            .#{$prefix}#{$cls-ui}-mc {
+                padding: $padding-top $padding-right $padding-bottom $padding-left;
+            }    
+        }   
+    }
+}
\ No newline at end of file