123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>The source code</title>
- <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
- <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
- <style type="text/css">
- .highlight { display: block; background-color: #ddd; }
- </style>
- <script type="text/javascript">
- function highlight() {
- document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
- }
- </script>
- </head>
- <body onload="prettyPrint(); highlight();">
- <pre class="prettyprint lang-js">@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;
- }
- }
- }
- }
- }
- </pre>
- </body>
- </html>
|