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