_frame.scss.html 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>The source code</title>
  6. <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  7. <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  8. <style type="text/css">
  9. .highlight { display: block; background-color: #ddd; }
  10. </style>
  11. <script type="text/javascript">
  12. function highlight() {
  13. document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14. }
  15. </script>
  16. </head>
  17. <body onload="prettyPrint(); highlight();">
  18. <pre class="prettyprint lang-js">@function pad($radius) {
  19. $radius: boxmax($radius);
  20. $radius: parseint($radius);
  21. @if $radius &gt;= 10 {
  22. @return $radius;
  23. }
  24. @else {
  25. @return &quot;0&quot; + $radius;
  26. }
  27. }
  28. @mixin x-frame(
  29. $cls,
  30. $ui: null,
  31. $border-radius: 0px,
  32. $border-width: 0px,
  33. $padding: null,
  34. $background-color: null,
  35. $background-gradient: null,
  36. $table: false,
  37. $background-direction: top
  38. ) {
  39. $cls-ui: $cls;
  40. @if $ui != null {
  41. $cls-ui: $cls + '-' + $ui;
  42. }
  43. $vertical: false;
  44. @if $background-direction == left or $background-direction == right {
  45. $vertical: true;
  46. }
  47. $frame-top: max(top($border-radius), right($border-radius));
  48. $frame-right: max(right($border-radius), bottom($border-radius));
  49. $frame-bottom: max(bottom($border-radius), left($border-radius));
  50. $frame-left: max(left($border-radius), top($border-radius));
  51. $padding-top: 0;
  52. $padding-right: 0;
  53. $padding-bottom: 0;
  54. $padding-left: 0;
  55. @if $padding == null {
  56. $padding-top: $frame-top - top($border-width);
  57. $padding-right: $frame-right - right($border-width);
  58. $padding-bottom: $frame-bottom - bottom($border-width);
  59. $padding-left: $frame-left - left($border-width);
  60. }
  61. @else {
  62. $padding-top: top($padding);
  63. $padding-right: right($padding);
  64. $padding-bottom: bottom($padding);
  65. $padding-left: left($padding);
  66. }
  67. @if $padding-top &lt; $frame-top {
  68. $padding-top: $frame-top - top($border-width);
  69. }
  70. @if $padding-right &lt; $frame-right {
  71. $padding-right: $frame-right - right($border-width);
  72. }
  73. @if $padding-bottom &lt; $frame-bottom {
  74. $padding-bottom: $frame-bottom - bottom($border-width);
  75. }
  76. @if $padding-left &lt; $frame-left {
  77. $padding-left: $frame-left - left($border-width);
  78. }
  79. .#{$prefix}#{$cls-ui} {
  80. @if $supports-border-radius {
  81. @if length($border-radius) == 2 {
  82. @include border-top-left-radius(nth($border-radius, 1));
  83. @include border-top-right-radius(nth($border-radius, 2));
  84. } @else if length($border-radius) == 3 {
  85. @include border-top-left-radius(nth($border-radius, 1));
  86. @include border-top-right-radius(nth($border-radius, 2));
  87. @include border-bottom-right-radius(nth($border-radius, 3));
  88. } @else if length($border-radius) == 4 {
  89. @include border-top-left-radius(nth($border-radius, 1));
  90. @include border-top-right-radius(nth($border-radius, 2));
  91. @include border-bottom-right-radius(nth($border-radius, 3));
  92. @include border-bottom-left-radius(nth($border-radius, 4));
  93. } @else {
  94. @include border-radius($border-radius);
  95. }
  96. }
  97. padding: $padding-top $padding-right $padding-bottom $padding-left;
  98. border-width: $border-width;
  99. border-style: solid;
  100. @if $background-color != null {
  101. @if $supports-gradients and $background-gradient != null {
  102. @include background-gradient($background-color, $background-gradient, $background-direction);
  103. }
  104. @else {
  105. background-color: $background-color;
  106. }
  107. }
  108. }
  109. @if not $supports-gradients or $compile-all {
  110. .#{$prefix}nlg {
  111. .#{$prefix}#{$cls-ui}-mc {
  112. @if $background-gradient != null {
  113. background-image: theme-background-image($theme-name, '#{$cls}/#{$cls-ui}-bg.gif', false, $relative-image-path-for-uis);
  114. }
  115. @if $background-color != null {
  116. background-color: $background-color;
  117. }
  118. }
  119. }
  120. }
  121. @if not $supports-border-radius or $compile-all {
  122. .#{$prefix}nbr {
  123. .#{$prefix}#{$cls-ui} {
  124. padding: 0 !important;
  125. border-width: 0 !important;
  126. @include border-radius(0px);
  127. @if $background-color != null {
  128. background-color: transparent;
  129. }
  130. @else {
  131. background: #fff;
  132. }
  133. $type: '100';
  134. @if $table == true {
  135. $type: '110';
  136. }
  137. $direction: '100';
  138. @if $vertical == true {
  139. $direction: '110';
  140. }
  141. $left: $type + pad(top($border-radius)) + pad(right($border-radius)) + 'px';
  142. $top: $direction + pad(bottom($border-radius)) + pad(left($border-radius)) + 'px';
  143. background-position: unquote($left) unquote($top);
  144. }
  145. .#{$prefix}#{$cls-ui}-tl,
  146. .#{$prefix}#{$cls-ui}-bl,
  147. .#{$prefix}#{$cls-ui}-tr,
  148. .#{$prefix}#{$cls-ui}-br,
  149. .#{$prefix}#{$cls-ui}-tc,
  150. .#{$prefix}#{$cls-ui}-bc,
  151. .#{$prefix}#{$cls-ui}-ml,
  152. .#{$prefix}#{$cls-ui}-mr {
  153. zoom:1;
  154. @if $background-color != transparent {
  155. background-image: theme-background-image($theme-name, '#{$cls}/#{$cls-ui}-corners.gif', false, $relative-image-path-for-uis);
  156. }
  157. }
  158. @if $vertical == true {
  159. .#{$prefix}#{$cls-ui}-tc,
  160. .#{$prefix}#{$cls-ui}-bc {
  161. zoom:1;
  162. @if $background-color != transparent {
  163. background-image: theme-background-image($theme-name, '#{$cls}/#{$cls-ui}-sides.gif', false, $relative-image-path-for-uis);
  164. background-position: 0 0;
  165. background-repeat: repeat-x;
  166. }
  167. }
  168. } @else {
  169. .#{$prefix}#{$cls-ui}-ml,
  170. .#{$prefix}#{$cls-ui}-mr {
  171. zoom:1;
  172. @if $background-color != transparent {
  173. background-image: theme-background-image($theme-name, '#{$cls}/#{$cls-ui}-sides.gif', false, $relative-image-path-for-uis);
  174. background-position: 0 0;
  175. @if $background-gradient == null {
  176. background-repeat: repeat-y;
  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. @if $padding-top &lt; 0 {
  186. $padding-top: 0;
  187. }
  188. @if $padding-right &lt; 0 {
  189. $padding-right: 0;
  190. }
  191. @if $padding-bottom &lt; 0 {
  192. $padding-bottom: 0;
  193. }
  194. @if $padding-left &lt; 0 {
  195. $padding-left: 0;
  196. }
  197. .#{$prefix}#{$cls-ui}-mc {
  198. padding: $padding-top $padding-right $padding-bottom $padding-left;
  199. }
  200. }
  201. @if $include-ie {
  202. // framed components in ie7 strict mode suffer from an obscure bug that causes the tl and bl framing elements to
  203. // be shrink-wrapped to the width of their contents. This hack forces the elements' widths to fit to their parent
  204. .#{$prefix}strict .#{$prefix}ie7 {
  205. .#{$prefix}#{$cls-ui}-tl,
  206. .#{$prefix}#{$cls-ui}-bl {
  207. position: relative;
  208. right: 0;
  209. }
  210. }
  211. }
  212. }
  213. }
  214. </pre>
  215. </body>
  216. </html>