@function pad($radius) {
$radius: boxmax($radius);
$radius: parseint($radius);
@if $radius >= 10 {
@return $radius;
}
@else {
@return "0" + $radius;
}
}
@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-background-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;
}
$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-background-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-background-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-background-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 + top($border-width);
$padding-right: $padding-right - $frame-right + right($border-width);
$padding-bottom: $padding-bottom - $frame-bottom + bottom($border-width);
$padding-left: $padding-left - $frame-left + left($border-width);
@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;
}
}
@if $include-ie {
// framed components in ie7 strict mode suffer from an obscure bug that causes the tl and bl framing elements to
// be shrink-wrapped to the width of their contents. This hack forces the elements' widths to fit to their parent
.#{$prefix}strict .#{$prefix}ie7 {
.#{$prefix}#{$cls-ui}-tl,
.#{$prefix}#{$cls-ui}-bl {
position: relative;
right: 0;
}
}
}
}
}
|
Download
