PageRenderTime 37ms CodeModel.GetById 18ms app.highlight 16ms RepoModel.GetById 1ms app.codeStats 0ms

/ext-4.0.7/resources/themes/stylesheets/ext4/default/mixins/_frame.scss

https://bitbucket.org/srogerf/javascript
Sass | 205 lines | 185 code | 20 blank | 0 comment | 21 complexity | 941a03d8bb1d7d284c0909ebb6c4457f MD5 | raw file
  1@mixin x-frame(
  2    $cls, 
  3    $ui: null, 
  4    $border-radius: 0px, 
  5    $border-width: 0px, 
  6    $padding: null, 
  7    $background-color: null, 
  8    $background-gradient: null,
  9    $table: false,
 10    $background-direction: top
 11) {
 12    $cls-ui: $cls;
 13    @if $ui != null {
 14        $cls-ui: $cls + '-' + $ui;
 15    }
 16    
 17    $vertical: false;
 18    @if $background-direction == left or $background-direction == right {
 19        $vertical: true;
 20    }
 21
 22    $frame-top: max(top($border-radius), right($border-radius));
 23    $frame-right: max(right($border-radius), bottom($border-radius));
 24    $frame-bottom: max(bottom($border-radius), left($border-radius));
 25    $frame-left: max(left($border-radius), top($border-radius));
 26    
 27    $padding-top: 0;
 28    $padding-right: 0;
 29    $padding-bottom: 0;
 30    $padding-left: 0;
 31    
 32    @if $padding == null {
 33        $padding-top: $frame-top - top($border-width);
 34        $padding-right: $frame-right - right($border-width);
 35        $padding-bottom: $frame-bottom - bottom($border-width);
 36        $padding-left: $frame-left - left($border-width);
 37    }
 38    @else {
 39        $padding-top: top($padding);
 40        $padding-right: right($padding);
 41        $padding-bottom: bottom($padding);
 42        $padding-left: left($padding);    
 43    }
 44    
 45    @if $padding-top < $frame-top {
 46        $padding-top: $frame-top - top($border-width);
 47    }
 48    @if $padding-right < $frame-right {
 49        $padding-right: $frame-right - right($border-width);
 50    }
 51    @if $padding-bottom < $frame-bottom {
 52        $padding-bottom: $frame-bottom - bottom($border-width);
 53    }
 54    @if $padding-left < $frame-left {
 55        $padding-left: $frame-left - left($border-width);
 56    }
 57     
 58    .#{$prefix}#{$cls-ui} {
 59        @if $supports-border-radius {
 60            @if length($border-radius) == 2 {
 61                @include border-top-left-radius(nth($border-radius, 1));
 62                @include border-top-right-radius(nth($border-radius, 2));
 63            } @else if length($border-radius) == 3 {
 64                @include border-top-left-radius(nth($border-radius, 1));
 65                @include border-top-right-radius(nth($border-radius, 2));
 66                @include border-bottom-right-radius(nth($border-radius, 3));
 67            } @else if length($border-radius) == 4 {
 68                @include border-top-left-radius(nth($border-radius, 1));
 69                @include border-top-right-radius(nth($border-radius, 2));
 70                @include border-bottom-right-radius(nth($border-radius, 3));
 71                @include border-bottom-left-radius(nth($border-radius, 4));
 72            } @else {
 73                @include border-radius($border-radius);
 74            }
 75        }
 76        padding: $padding-top $padding-right $padding-bottom $padding-left;
 77        border-width: $border-width;
 78        border-style: solid;
 79        @if $background-color != null {
 80            @if $supports-gradients and $background-gradient != null {
 81                @include background-gradient($background-color, $background-gradient, $background-direction);
 82            }
 83            @else {
 84                background-color: $background-color;
 85            }      
 86        }
 87    }
 88    
 89    @if not $supports-gradients or $compile-all {
 90        .#{$prefix}nlg {
 91            .#{$prefix}#{$cls-ui}-mc {
 92                @if $background-gradient != null {
 93                    background-image: theme-background-image($theme-name, '#{$cls}/#{$cls-ui}-bg.gif', false, $relative-image-path-for-uis);
 94                }
 95                @if $background-color != null {
 96                    background-color: $background-color;
 97                }
 98            }
 99        }        
100    }
101    
102    @if not $supports-border-radius or $compile-all {
103        .#{$prefix}nbr {
104            .#{$prefix}#{$cls-ui} {
105                padding: 0 !important;
106                border-width: 0 !important;
107                @include border-radius(0px);
108                @if $background-color != null {
109                    background-color: transparent;
110                }
111                @else {
112                    background: #fff;
113                }
114
115                @function pad($radius) {
116                    $radius: boxmax($radius);
117                    $radius: parseint($radius);
118                    @if $radius > 10 {
119                        @return $radius;
120                    }
121                    @else {
122                        @return "0" + $radius;
123                    }
124                }
125                
126                $type: '100';
127                @if $table == true {
128                    $type: '110';
129                }
130                $direction: '100';
131                @if $vertical == true {
132                    $direction: '110';
133                }
134                
135                $left: $type + pad(top($border-radius)) + pad(right($border-radius)) + 'px';
136                $top: $direction + pad(bottom($border-radius)) + pad(left($border-radius)) + 'px';
137                background-position: unquote($left) unquote($top);
138            }
139
140            .#{$prefix}#{$cls-ui}-tl,
141            .#{$prefix}#{$cls-ui}-bl,
142            .#{$prefix}#{$cls-ui}-tr,
143            .#{$prefix}#{$cls-ui}-br,
144            .#{$prefix}#{$cls-ui}-tc,
145            .#{$prefix}#{$cls-ui}-bc,
146            .#{$prefix}#{$cls-ui}-ml,
147            .#{$prefix}#{$cls-ui}-mr {
148                zoom:1;
149                
150                @if $background-color != transparent {
151                    background-image: theme-background-image($theme-name, '#{$cls}/#{$cls-ui}-corners.gif', false, $relative-image-path-for-uis);
152                }
153            }
154            
155            @if $vertical == true {
156                .#{$prefix}#{$cls-ui}-tc,
157                .#{$prefix}#{$cls-ui}-bc {
158                    zoom:1;
159
160                    @if $background-color != transparent {
161                        background-image: theme-background-image($theme-name, '#{$cls}/#{$cls-ui}-sides.gif', false, $relative-image-path-for-uis);
162                        background-position: 0 0;
163                        background-repeat: repeat-x;
164                    }
165                }
166            } @else {
167                .#{$prefix}#{$cls-ui}-ml,
168                .#{$prefix}#{$cls-ui}-mr {
169                    zoom:1;
170
171                    @if $background-color != transparent {
172                        background-image: theme-background-image($theme-name, '#{$cls}/#{$cls-ui}-sides.gif', false, $relative-image-path-for-uis);
173                        background-position: 0 0;
174                        @if $background-gradient == null {
175                            background-repeat: repeat-y;
176                        }
177                    }
178                }
179            }
180
181            $padding-top: $padding-top - $frame-top;
182            $padding-right: $padding-right - $frame-right;
183            $padding-bottom: $padding-bottom - $frame-bottom;
184            $padding-left: $padding-left - $frame-left;
185            
186            
187            @if $padding-top < 0 {
188                $padding-top: 0;
189            }
190            @if $padding-right < 0 {
191                $padding-right: 0;
192            }
193            @if $padding-bottom < 0 {
194                $padding-bottom: 0;
195            }
196            @if $padding-left < 0 {
197                $padding-left: 0;
198            }
199
200            .#{$prefix}#{$cls-ui}-mc {
201                padding: $padding-top $padding-right $padding-bottom $padding-left;
202            }    
203        }   
204    }
205}