_frame.scss (7773B)
1 @function pad($radius) { 2 $radius: boxmax($radius); 3 $radius: parseint($radius); 4 @if $radius >= 10 { 5 @return $radius; 6 } 7 @else { 8 @return "0" + $radius; 9 } 10 } 11 12 @mixin x-frame( 13 $cls, 14 $ui: null, 15 $border-radius: 0px, 16 $border-width: 0px, 17 $padding: null, 18 $background-color: null, 19 $background-gradient: null, 20 $table: false, 21 $background-direction: top 22 ) { 23 $cls-ui: $cls; 24 @if $ui != null { 25 $cls-ui: $cls + '-' + $ui; 26 } 27 28 $vertical: false; 29 @if $background-direction == left or $background-direction == right { 30 $vertical: true; 31 } 32 33 $frame-top: max(top($border-radius), right($border-radius)); 34 $frame-right: max(right($border-radius), bottom($border-radius)); 35 $frame-bottom: max(bottom($border-radius), left($border-radius)); 36 $frame-left: max(left($border-radius), top($border-radius)); 37 38 $padding-top: 0; 39 $padding-right: 0; 40 $padding-bottom: 0; 41 $padding-left: 0; 42 43 @if $padding == null { 44 $padding-top: $frame-top - top($border-width); 45 $padding-right: $frame-right - right($border-width); 46 $padding-bottom: $frame-bottom - bottom($border-width); 47 $padding-left: $frame-left - left($border-width); 48 } 49 @else { 50 $padding-top: top($padding); 51 $padding-right: right($padding); 52 $padding-bottom: bottom($padding); 53 $padding-left: left($padding); 54 } 55 56 @if $padding-top < $frame-top { 57 $padding-top: $frame-top - top($border-width); 58 } 59 @if $padding-right < $frame-right { 60 $padding-right: $frame-right - right($border-width); 61 } 62 @if $padding-bottom < $frame-bottom { 63 $padding-bottom: $frame-bottom - bottom($border-width); 64 } 65 @if $padding-left < $frame-left { 66 $padding-left: $frame-left - left($border-width); 67 } 68 69 .#{$prefix}#{$cls-ui} { 70 @if $supports-border-radius { 71 @if length($border-radius) == 2 { 72 @include border-top-left-radius(nth($border-radius, 1)); 73 @include border-top-right-radius(nth($border-radius, 2)); 74 } @else if length($border-radius) == 3 { 75 @include border-top-left-radius(nth($border-radius, 1)); 76 @include border-top-right-radius(nth($border-radius, 2)); 77 @include border-bottom-right-radius(nth($border-radius, 3)); 78 } @else if length($border-radius) == 4 { 79 @include border-top-left-radius(nth($border-radius, 1)); 80 @include border-top-right-radius(nth($border-radius, 2)); 81 @include border-bottom-right-radius(nth($border-radius, 3)); 82 @include border-bottom-left-radius(nth($border-radius, 4)); 83 } @else { 84 @include border-radius($border-radius); 85 } 86 } 87 padding: $padding-top $padding-right $padding-bottom $padding-left; 88 border-width: $border-width; 89 border-style: solid; 90 @if $background-color != null { 91 @if $supports-gradients and $background-gradient != null { 92 @include background-gradient($background-color, $background-gradient, $background-direction); 93 } 94 @else { 95 background-color: $background-color; 96 } 97 } 98 } 99 100 @if not $supports-gradients or $compile-all { 101 .#{$prefix}nlg { 102 .#{$prefix}#{$cls-ui}-mc { 103 @if $background-gradient != null { 104 background-image: theme-background-image($theme-name, '#{$cls}/#{$cls-ui}-bg.gif', false, $relative-image-path-for-uis); 105 } 106 @if $background-color != null { 107 background-color: $background-color; 108 } 109 } 110 } 111 } 112 113 @if not $supports-border-radius or $compile-all { 114 .#{$prefix}nbr { 115 .#{$prefix}#{$cls-ui} { 116 padding: 0 !important; 117 border-width: 0 !important; 118 @include border-radius(0px); 119 @if $background-color != null { 120 background-color: transparent; 121 } 122 @else { 123 background: #fff; 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 + top($border-width); 182 $padding-right: $padding-right - $frame-right + right($border-width); 183 $padding-bottom: $padding-bottom - $frame-bottom + bottom($border-width); 184 $padding-left: $padding-left - $frame-left + left($border-width); 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 @if $include-ie { 206 // framed components in ie7 strict mode suffer from an obscure bug that causes the tl and bl framing elements to 207 // be shrink-wrapped to the width of their contents. This hack forces the elements' widths to fit to their parent 208 .#{$prefix}strict .#{$prefix}ie7 { 209 .#{$prefix}#{$cls-ui}-tl, 210 .#{$prefix}#{$cls-ui}-bl { 211 position: relative; 212 right: 0; 213 } 214 } 215 } 216 } 217 }