@function pad($radius) {
$radius: boxmax($radius);
$radius: parseint($radius);
@if $radius >= 10 {
@return $radius;
}
@else {
@return "0" + $radius;
}
}
@function nopx ($value) {
@if $value == 0 {
@return 0;
}
@return $value / 1px;
}
@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,
$include-frame-rtl: false,
// an optional ui to use for images
$img-ui: $ui,
$background-stretch: null
) {
$cls-ui: $cls;
$cls-img-ui: null;
@if $ui != null {
$cls-ui: $cls + '-' + $ui;
$cls-img-ui: $cls + '-' + $img-ui;
}
$vertical: false;
@if $background-gradient != null and ($background-direction == left or $background-direction == right) {
$vertical: true;
}
$background-stretch-position: null;
@if $background-stretch == null {
@if $vertical {
$background-stretch: left;
} @else {
$background-stretch: bottom;
}
}
@if $background-stretch == top {
$background-stretch-position: bottom;
} @else if $background-stretch == bottom {
$background-stretch-position: top;
} @else if $background-stretch == left {
$background-stretch-position: right;
} @else if $background-stretch == right {
$background-stretch-position: left;
}
@if $background-gradient != null {
$stretch: slicer-background-stretch($cls-ui, $background-stretch);
}
// We use the border-radius of the two corners on each edge to determine the "edge's
// border-radius". For IE, the framing elements need to be as large as the larger of
// the border-radius and the border-width on each edge. These values are passed on to
// JavaScript using an encoded background-image url and the equivalent operations are
// handled by Renderable.js.
//
$frame-top: max(top($border-width), max(top($border-radius), right($border-radius)));
$frame-right: max(right($border-width), max(right($border-radius), bottom($border-radius)));
$frame-bottom: max(bottom($border-width), max(bottom($border-radius), left($border-radius)));
$frame-left: max(left($border-width), max(left($border-radius), top($border-radius)));
$frame-max: max(max($frame-top, $frame-bottom), max($frame-left, $frame-right));
// For CSS3 browsers, if the border-radius is larger than the border-width, we need to
// apply padding to inset the content. These values can never be 0 because frame-xxx
// includes border-xxx in its max.
//
$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);
// If there is additional padding, this is understood to be a request to ensure that
// the content is **at least** this far from the inside of the border. If the framing
// requires more padding, that wins. This is the amount of padding you need in CSS3
// browsers.
//
@if $padding != null {
$padding-top: max($padding-top, top($padding));
$padding-right: max($padding-right, right($padding));
$padding-bottom: max($padding-bottom, bottom($padding));
$padding-left: max($padding-left, left($padding));
}
// For IE, the framing elements are sized by frame-xxx and the "-mc" will carry the
// extra-padding-xxx.
//
$extra-padding-top: max(top($border-width) + $padding-top - $frame-top, 0);
$extra-padding-right: max(right($border-width) + $padding-right - $frame-right, 0);
$extra-padding-bottom: max(bottom($border-width) + $padding-bottom - $frame-bottom, 0);
$extra-padding-left: max(left($border-width) + $padding-left - $frame-left, 0);
$framing-info: '';
@if $table == true {
$framing-info: $framing-info + 't';
} @else {
$framing-info: $framing-info + 'd';
}
@if $vertical == true {
$framing-info: $framing-info + 'v';
} @else {
$framing-info: $framing-info + 'h';
}
$framing-info: $framing-info + '-' +
nopx(top($border-radius)) + '-' +
nopx(right($border-radius)) + '-' +
nopx(bottom($border-radius)) + '-' +
nopx(left($border-radius)) + '-' +
nopx(top($border-width)) + '-' +
nopx(right($border-width)) + '-' +
nopx(bottom($border-width)) + '-' +
nopx(left($border-width)) + '-' +
nopx($padding-top) + '-' +
nopx($padding-right) + '-' +
nopx($padding-bottom) + '-' +
nopx($padding-left);
.#{$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 $include-frame-rtl {
@if $background-direction == left {
$background-direction: right;
} @else if $background-direction == right {
$background-direction: left;
}
@if $background-direction == left or $background-direction == right {
.#{$prefix}rtl.#{$prefix}#{$cls-ui} {
@include background-gradient(
$background-color,
$background-gradient,
$background-direction
);
}
}
}
@if not $supports-gradients or $compile-all {
.#{$prefix}#{$cls-ui}-mc {
@if $background-gradient != null {
background-image: slicer-frame-background-image($cls-ui, '#{$cls}/#{$cls-img-ui}-fbg');
@if $vertical {
background-position: $background-stretch-position 0;
} @else {
background-position: 0 $background-stretch-position;
}
}
@if $background-color != null {
background-color: $background-color;
}
}
@if $include-frame-rtl and $background-gradient != null {
.#{$prefix}rtl.#{$prefix}#{$cls-ui}-mc {
background-image: slicer-frame-background-image-rtl($cls-ui, '#{$cls}/#{$cls-img-ui}-fbg-rtl');
background-position: rtl-background-position($background-stretch-position 0);
}
}
@if $background-gradient != null {
.#{$prefix}nlg {
.#{$prefix}#{$cls-ui} {
background-image: slicer-background-image($cls-ui, '#{$cls}/#{$cls-img-ui}-bg');
@if $vertical {
background-position: $background-stretch-position 0;
} @else {
background-position: 0 $background-stretch-position;
}
}
@if $include-frame-rtl {
.#{$prefix}rtl.#{$prefix}#{$cls-ui} {
background-image: slicer-background-image-rtl($cls-ui, '#{$cls}/#{$cls-img-ui}-bg-rtl');
background-position: rtl-background-position($background-stretch-position 0);
}
}
}
}
}
@if not $supports-border-radius or $compile-all {
.#{$prefix}nbr {
// This rule must be in x-nbr to avoid matching on CSS3 browsers.
.#{$prefix}#{$cls-ui} {
padding: 0 !important;
border-width: 0 !important;
@include border-radius(0px);
@if $background-color != null {
background-color: transparent;
} @else {
background: #fff;
}
@if $background-gradient != null {
background-image: none;
}
}
}
// This rule must be more specific than other x-nlg rules or else framing will
// not be applied to the element. This rule must also be in x-nbr to avoid
// matching on CSS3 browsers.
//
body.#{$prefix}nbr {
.#{$prefix}#{$cls-ui}-frameInfo {
// Pass along Div/Table, Horz/Vert, border-radius and border-width
// Here we're encoding the framing information in an arbitrary fashion so
// it can be parsed by the component and get information about the framing.
// Originally, this tried to embed the information using a background image
// pointing to about:blank#info however in IE with SSL, this would trigger
// the insecure content warning. We also tried encoding the info using a
// filter as follows (where framing-info is a string containg the encoded data):
// filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=false, src="ext-frame#{$framing-info}");
// However the filter property can only be read by IE, making it impossible
// to debug nocss3 mode in modern browsers. Font-family meets all the
// requirements for tunneling data to JavaScript. It can contain an
// arbitrary string value, which can be read in JS in any browser, and it
// does not trigger any network interactions.
font-family: #{$framing-info};
}
}
// These rules apply to elements that are not rendered on CSS3 browsers so we do
// not need to force the browser to walk to the root of the document searching
// for x-nbr!
@if $vertical {
// vertical framing element background positions
.#{$prefix}#{$cls-ui}-tl {
background-position: 0 0;
}
.#{$prefix}#{$cls-ui}-tr {
background-position: 0 (-$frame-max);
}
.#{$prefix}#{$cls-ui}-bl {
background-position: 0 (-$frame-max * 2);
}
.#{$prefix}#{$cls-ui}-br {
background-position: 0 (-$frame-max * 3);
}
.#{$prefix}#{$cls-ui}-ml {
background-position: (-$frame-max) 0;
}
.#{$prefix}#{$cls-ui}-mr {
background-position: right 0;
}
.#{$prefix}#{$cls-ui}-tc {
background-position: $background-stretch-position 0;
}
.#{$prefix}#{$cls-ui}-bc {
background-position: $background-stretch-position (-$frame-max);
}
@if $include-frame-rtl {
.#{$prefix}rtl.#{$prefix}#{$cls-ui}-tc {
background-position: rtl-background-position($background-stretch-position 0);
}
.#{$prefix}rtl.#{$prefix}#{$cls-ui}-bc {
background-position: rtl-background-position($background-stretch-position (-$frame-max));
}
}
} @else {
// horizontal framing element background positions
.#{$prefix}#{$cls-ui}-tl {
background-position: 0 (-$frame-max * 2);
}
.#{$prefix}#{$cls-ui}-tr {
background-position: right (-$frame-max * 3);
}
.#{$prefix}#{$cls-ui}-bl {
background-position: 0 (-$frame-max * 4);
}
.#{$prefix}#{$cls-ui}-br {
background-position: right (-$frame-max * 5);
}
.#{$prefix}#{$cls-ui}-ml {
background-position: 0 $background-stretch-position;
}
.#{$prefix}#{$cls-ui}-mr {
background-position: right $background-stretch-position;
}
.#{$prefix}#{$cls-ui}-tc {
background-position: 0 0;
}
.#{$prefix}#{$cls-ui}-bc {
background-position: 0 (-$frame-max);
}
}
.#{$prefix}#{$cls-ui}-tr,
.#{$prefix}#{$cls-ui}-br,
.#{$prefix}#{$cls-ui}-mr {
padding-right: $frame-right;
}
.#{$prefix}#{$cls-ui}-tl,
.#{$prefix}#{$cls-ui}-bl,
.#{$prefix}#{$cls-ui}-ml {
padding-left: $frame-left;
}
.#{$prefix}#{$cls-ui}-tc {
height: $frame-top;
}
.#{$prefix}#{$cls-ui}-bc {
height: $frame-bottom;
}
.#{$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: slicer-corner-sprite($cls-ui, '#{$cls}/#{$cls-img-ui}-corners');
}
}
@if $background-color != transparent {
@if $include-frame-rtl {
.#{$prefix}rtl {
&.#{$prefix}#{$cls-ui}-tl,
&.#{$prefix}#{$cls-ui}-ml,
&.#{$prefix}#{$cls-ui}-bl,
&.#{$prefix}#{$cls-ui}-tr,
&.#{$prefix}#{$cls-ui}-mr,
&.#{$prefix}#{$cls-ui}-br {
background-image: slicer-corner-sprite-rtl($cls-ui, '#{$cls}/#{$cls-img-ui}-corners-rtl');
}
}
}
}
@if $vertical == true {
.#{$prefix}#{$cls-ui}-tc,
.#{$prefix}#{$cls-ui}-bc {
zoom:1;
@if $background-color != transparent {
background-image: slicer-sides-sprite($cls-ui, '#{$cls}/#{$cls-img-ui}-sides');
background-repeat: repeat-x;
}
}
@if $include-frame-rtl and $background-color != transparent {
.#{$prefix}rtl {
&.#{$prefix}#{$cls-ui}-tc,
&.#{$prefix}#{$cls-ui}-bc {
background-image: slicer-sides-sprite-rtl($cls-ui, '#{$cls}/#{$cls-img-ui}-sides-rtl');
}
}
}
} @else {
.#{$prefix}#{$cls-ui}-ml,
.#{$prefix}#{$cls-ui}-mr {
zoom:1;
@if $background-color != transparent {
background-image: slicer-sides-sprite($cls-ui, '#{$cls}/#{$cls-img-ui}-sides');
@if $background-gradient == null {
background-repeat: repeat-y;
}
}
}
}
.#{$prefix}#{$cls-ui}-mc {
padding: $extra-padding-top $extra-padding-right $extra-padding-bottom $extra-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;
}
}
}
}
@include x-slicer($cls-ui);
}