1 | @function pad($radius) {
|
---|
2 | $radius: boxmax($radius);
|
---|
3 | $radius: parseint($radius);
|
---|
4 | @if $radius >= 10 {
|
---|
5 | @return $radius;
|
---|
6 | }
|
---|
7 | @else {
|
---|
8 | @return "0" + $radius;
|
---|
9 | }
|
---|
10 | }
|
---|
11 |
|
---|
12 | @mixin x-frame(
|
---|
13 | $cls,
|
---|
14 | $ui: null,
|
---|
15 | $border-radius: 0px,
|
---|
16 | $border-width: 0px,
|
---|
17 | $padding: null,
|
---|
18 | $background-color: null,
|
---|
19 | $background-gradient: null,
|
---|
20 | $table: false,
|
---|
21 | $background-direction: top
|
---|
22 | ) {
|
---|
23 | $cls-ui: $cls;
|
---|
24 | @if $ui != null {
|
---|
25 | $cls-ui: $cls + '-' + $ui;
|
---|
26 | }
|
---|
27 |
|
---|
28 | $vertical: false;
|
---|
29 | @if $background-direction == left or $background-direction == right {
|
---|
30 | $vertical: true;
|
---|
31 | }
|
---|
32 |
|
---|
33 | $frame-top: max(top($border-radius), right($border-radius));
|
---|
34 | $frame-right: max(right($border-radius), bottom($border-radius));
|
---|
35 | $frame-bottom: max(bottom($border-radius), left($border-radius));
|
---|
36 | $frame-left: max(left($border-radius), top($border-radius));
|
---|
37 |
|
---|
38 | $padding-top: 0;
|
---|
39 | $padding-right: 0;
|
---|
40 | $padding-bottom: 0;
|
---|
41 | $padding-left: 0;
|
---|
42 |
|
---|
43 | @if $padding == null {
|
---|
44 | $padding-top: $frame-top - top($border-width);
|
---|
45 | $padding-right: $frame-right - right($border-width);
|
---|
46 | $padding-bottom: $frame-bottom - bottom($border-width);
|
---|
47 | $padding-left: $frame-left - left($border-width);
|
---|
48 | }
|
---|
49 | @else {
|
---|
50 | $padding-top: top($padding);
|
---|
51 | $padding-right: right($padding);
|
---|
52 | $padding-bottom: bottom($padding);
|
---|
53 | $padding-left: left($padding);
|
---|
54 | }
|
---|
55 |
|
---|
56 | @if $padding-top < $frame-top {
|
---|
57 | $padding-top: $frame-top - top($border-width);
|
---|
58 | }
|
---|
59 | @if $padding-right < $frame-right {
|
---|
60 | $padding-right: $frame-right - right($border-width);
|
---|
61 | }
|
---|
62 | @if $padding-bottom < $frame-bottom {
|
---|
63 | $padding-bottom: $frame-bottom - bottom($border-width);
|
---|
64 | }
|
---|
65 | @if $padding-left < $frame-left {
|
---|
66 | $padding-left: $frame-left - left($border-width);
|
---|
67 | }
|
---|
68 |
|
---|
69 | .#{$prefix}#{$cls-ui} {
|
---|
70 | @if $supports-border-radius {
|
---|
71 | @if length($border-radius) == 2 {
|
---|
72 | @include border-top-left-radius(nth($border-radius, 1));
|
---|
73 | @include border-top-right-radius(nth($border-radius, 2));
|
---|
74 | } @else if length($border-radius) == 3 {
|
---|
75 | @include border-top-left-radius(nth($border-radius, 1));
|
---|
76 | @include border-top-right-radius(nth($border-radius, 2));
|
---|
77 | @include border-bottom-right-radius(nth($border-radius, 3));
|
---|
78 | } @else if length($border-radius) == 4 {
|
---|
79 | @include border-top-left-radius(nth($border-radius, 1));
|
---|
80 | @include border-top-right-radius(nth($border-radius, 2));
|
---|
81 | @include border-bottom-right-radius(nth($border-radius, 3));
|
---|
82 | @include border-bottom-left-radius(nth($border-radius, 4));
|
---|
83 | } @else {
|
---|
84 | @include border-radius($border-radius);
|
---|
85 | }
|
---|
86 | }
|
---|
87 | padding: $padding-top $padding-right $padding-bottom $padding-left;
|
---|
88 | border-width: $border-width;
|
---|
89 | border-style: solid;
|
---|
90 | @if $background-color != null {
|
---|
91 | @if $supports-gradients and $background-gradient != null {
|
---|
92 | @include background-gradient($background-color, $background-gradient, $background-direction);
|
---|
93 | }
|
---|
94 | @else {
|
---|
95 | background-color: $background-color;
|
---|
96 | }
|
---|
97 | }
|
---|
98 | }
|
---|
99 |
|
---|
100 | @if not $supports-gradients or $compile-all {
|
---|
101 | .#{$prefix}nlg {
|
---|
102 | .#{$prefix}#{$cls-ui}-mc {
|
---|
103 | @if $background-gradient != null {
|
---|
104 | background-image: theme-background-image($theme-name, '#{$cls}/#{$cls-ui}-bg.gif', false, $relative-image-path-for-uis);
|
---|
105 | }
|
---|
106 | @if $background-color != null {
|
---|
107 | background-color: $background-color;
|
---|
108 | }
|
---|
109 | }
|
---|
110 | }
|
---|
111 | }
|
---|
112 |
|
---|
113 | @if not $supports-border-radius or $compile-all {
|
---|
114 | .#{$prefix}nbr {
|
---|
115 | .#{$prefix}#{$cls-ui} {
|
---|
116 | padding: 0 !important;
|
---|
117 | border-width: 0 !important;
|
---|
118 | @include border-radius(0px);
|
---|
119 | @if $background-color != null {
|
---|
120 | background-color: transparent;
|
---|
121 | }
|
---|
122 | @else {
|
---|
123 | background: #fff;
|
---|
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 | // @tag iezoomhack
|
---|
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 | // @tag iezoomhack
|
---|
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 | // @tag iezoomhack
|
---|
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 | } |
---|