/ext-4.0.7/resources/themes/stylesheets/ext4/default/mixins/_frame.scss

https://bitbucket.org/srogerf/javascript · Sass · 205 lines · 185 code · 20 blank · 0 comment · 21 complexity · 941a03d8bb1d7d284c0909ebb6c4457f MD5 · raw file

  1. @mixin x-frame(
  2. $cls,
  3. $ui: null,
  4. $border-radius: 0px,
  5. $border-width: 0px,
  6. $padding: null,
  7. $background-color: null,
  8. $background-gradient: null,
  9. $table: false,
  10. $background-direction: top
  11. ) {
  12. $cls-ui: $cls;
  13. @if $ui != null {
  14. $cls-ui: $cls + '-' + $ui;
  15. }
  16. $vertical: false;
  17. @if $background-direction == left or $background-direction == right {
  18. $vertical: true;
  19. }
  20. $frame-top: max(top($border-radius), right($border-radius));
  21. $frame-right: max(right($border-radius), bottom($border-radius));
  22. $frame-bottom: max(bottom($border-radius), left($border-radius));
  23. $frame-left: max(left($border-radius), top($border-radius));
  24. $padding-top: 0;
  25. $padding-right: 0;
  26. $padding-bottom: 0;
  27. $padding-left: 0;
  28. @if $padding == null {
  29. $padding-top: $frame-top - top($border-width);
  30. $padding-right: $frame-right - right($border-width);
  31. $padding-bottom: $frame-bottom - bottom($border-width);
  32. $padding-left: $frame-left - left($border-width);
  33. }
  34. @else {
  35. $padding-top: top($padding);
  36. $padding-right: right($padding);
  37. $padding-bottom: bottom($padding);
  38. $padding-left: left($padding);
  39. }
  40. @if $padding-top < $frame-top {
  41. $padding-top: $frame-top - top($border-width);
  42. }
  43. @if $padding-right < $frame-right {
  44. $padding-right: $frame-right - right($border-width);
  45. }
  46. @if $padding-bottom < $frame-bottom {
  47. $padding-bottom: $frame-bottom - bottom($border-width);
  48. }
  49. @if $padding-left < $frame-left {
  50. $padding-left: $frame-left - left($border-width);
  51. }
  52. .#{$prefix}#{$cls-ui} {
  53. @if $supports-border-radius {
  54. @if length($border-radius) == 2 {
  55. @include border-top-left-radius(nth($border-radius, 1));
  56. @include border-top-right-radius(nth($border-radius, 2));
  57. } @else if length($border-radius) == 3 {
  58. @include border-top-left-radius(nth($border-radius, 1));
  59. @include border-top-right-radius(nth($border-radius, 2));
  60. @include border-bottom-right-radius(nth($border-radius, 3));
  61. } @else if length($border-radius) == 4 {
  62. @include border-top-left-radius(nth($border-radius, 1));
  63. @include border-top-right-radius(nth($border-radius, 2));
  64. @include border-bottom-right-radius(nth($border-radius, 3));
  65. @include border-bottom-left-radius(nth($border-radius, 4));
  66. } @else {
  67. @include border-radius($border-radius);
  68. }
  69. }
  70. padding: $padding-top $padding-right $padding-bottom $padding-left;
  71. border-width: $border-width;
  72. border-style: solid;
  73. @if $background-color != null {
  74. @if $supports-gradients and $background-gradient != null {
  75. @include background-gradient($background-color, $background-gradient, $background-direction);
  76. }
  77. @else {
  78. background-color: $background-color;
  79. }
  80. }
  81. }
  82. @if not $supports-gradients or $compile-all {
  83. .#{$prefix}nlg {
  84. .#{$prefix}#{$cls-ui}-mc {
  85. @if $background-gradient != null {
  86. background-image: theme-background-image($theme-name, '#{$cls}/#{$cls-ui}-bg.gif', false, $relative-image-path-for-uis);
  87. }
  88. @if $background-color != null {
  89. background-color: $background-color;
  90. }
  91. }
  92. }
  93. }
  94. @if not $supports-border-radius or $compile-all {
  95. .#{$prefix}nbr {
  96. .#{$prefix}#{$cls-ui} {
  97. padding: 0 !important;
  98. border-width: 0 !important;
  99. @include border-radius(0px);
  100. @if $background-color != null {
  101. background-color: transparent;
  102. }
  103. @else {
  104. background: #fff;
  105. }
  106. @function pad($radius) {
  107. $radius: boxmax($radius);
  108. $radius: parseint($radius);
  109. @if $radius > 10 {
  110. @return $radius;
  111. }
  112. @else {
  113. @return "0" + $radius;
  114. }
  115. }
  116. $type: '100';
  117. @if $table == true {
  118. $type: '110';
  119. }
  120. $direction: '100';
  121. @if $vertical == true {
  122. $direction: '110';
  123. }
  124. $left: $type + pad(top($border-radius)) + pad(right($border-radius)) + 'px';
  125. $top: $direction + pad(bottom($border-radius)) + pad(left($border-radius)) + 'px';
  126. background-position: unquote($left) unquote($top);
  127. }
  128. .#{$prefix}#{$cls-ui}-tl,
  129. .#{$prefix}#{$cls-ui}-bl,
  130. .#{$prefix}#{$cls-ui}-tr,
  131. .#{$prefix}#{$cls-ui}-br,
  132. .#{$prefix}#{$cls-ui}-tc,
  133. .#{$prefix}#{$cls-ui}-bc,
  134. .#{$prefix}#{$cls-ui}-ml,
  135. .#{$prefix}#{$cls-ui}-mr {
  136. zoom:1;
  137. @if $background-color != transparent {
  138. background-image: theme-background-image($theme-name, '#{$cls}/#{$cls-ui}-corners.gif', false, $relative-image-path-for-uis);
  139. }
  140. }
  141. @if $vertical == true {
  142. .#{$prefix}#{$cls-ui}-tc,
  143. .#{$prefix}#{$cls-ui}-bc {
  144. zoom:1;
  145. @if $background-color != transparent {
  146. background-image: theme-background-image($theme-name, '#{$cls}/#{$cls-ui}-sides.gif', false, $relative-image-path-for-uis);
  147. background-position: 0 0;
  148. background-repeat: repeat-x;
  149. }
  150. }
  151. } @else {
  152. .#{$prefix}#{$cls-ui}-ml,
  153. .#{$prefix}#{$cls-ui}-mr {
  154. zoom:1;
  155. @if $background-color != transparent {
  156. background-image: theme-background-image($theme-name, '#{$cls}/#{$cls-ui}-sides.gif', false, $relative-image-path-for-uis);
  157. background-position: 0 0;
  158. @if $background-gradient == null {
  159. background-repeat: repeat-y;
  160. }
  161. }
  162. }
  163. }
  164. $padding-top: $padding-top - $frame-top;
  165. $padding-right: $padding-right - $frame-right;
  166. $padding-bottom: $padding-bottom - $frame-bottom;
  167. $padding-left: $padding-left - $frame-left;
  168. @if $padding-top < 0 {
  169. $padding-top: 0;
  170. }
  171. @if $padding-right < 0 {
  172. $padding-right: 0;
  173. }
  174. @if $padding-bottom < 0 {
  175. $padding-bottom: 0;
  176. }
  177. @if $padding-left < 0 {
  178. $padding-left: 0;
  179. }
  180. .#{$prefix}#{$cls-ui}-mc {
  181. padding: $padding-top $padding-right $padding-bottom $padding-left;
  182. }
  183. }
  184. }
  185. }