1 |
|
2 | @import './helpers/mixin.scss';
|
3 |
|
4 | $btnThemeList: (
|
5 | (
|
6 | name: "primary",
|
7 | textColor: $vxe-primary-color,
|
8 | btnColor: #fff,
|
9 | btnBackground: $vxe-primary-color
|
10 | ),
|
11 | (
|
12 | name: "success",
|
13 | textColor: $vxe-success-color,
|
14 | btnColor: #fff,
|
15 | btnBackground: $vxe-success-color
|
16 | ),
|
17 | (
|
18 | name: "info",
|
19 | textColor: $vxe-info-color,
|
20 | btnColor: #fff,
|
21 | btnBackground: $vxe-info-color
|
22 | ),
|
23 | (
|
24 | name: "warning",
|
25 | textColor: $vxe-warning-color,
|
26 | btnColor: #fff,
|
27 | btnBackground: $vxe-warning-color
|
28 | ),
|
29 | (
|
30 | name: "danger",
|
31 | textColor: $vxe-danger-color,
|
32 | btnColor: #fff,
|
33 | btnBackground: $vxe-danger-color
|
34 | ),
|
35 | (
|
36 | name: "perfect",
|
37 | textColor: $vxe-table-header-background-color,
|
38 | btnColor: $vxe-font-color,
|
39 | btnBackground: $vxe-table-header-background-color
|
40 | )
|
41 | );
|
42 |
|
43 | .vxe-button {
|
44 | position: relative;
|
45 | text-align: center;
|
46 | background-color: $vxe-button-default-background-color;
|
47 | outline: 0;
|
48 | font-size: $vxe-font-size;
|
49 | max-width: $vxe-button-max-width;
|
50 | line-height: 1.5;
|
51 | overflow: hidden;
|
52 | text-overflow: ellipsis;
|
53 | white-space: nowrap;
|
54 | white-space: nowrap;
|
55 | user-select: none;
|
56 | appearance: none;
|
57 | @include animatTransition(border, .2s);
|
58 | &:not(.is--disabled) {
|
59 | color: $vxe-font-color;
|
60 | cursor: pointer;
|
61 | .vxe-button--icon {
|
62 | &.vxe-icon--zoomin {
|
63 | border-color: $vxe-font-color;
|
64 | }
|
65 | }
|
66 | }
|
67 | &.is--loading {
|
68 | cursor: progress;
|
69 | &:before {
|
70 | content: "";
|
71 | position: absolute;
|
72 | left: -1px;
|
73 | top: -1px;
|
74 | right: -1px;
|
75 | bottom: -1px;
|
76 | border-radius: inherit;
|
77 | background-color: hsla(0,0%,100%,.35);
|
78 | pointer-events: none;
|
79 | }
|
80 | }
|
81 | &.is--disabled {
|
82 | color: $vxe-disabled-color;
|
83 | .vxe-button--icon {
|
84 | &.vxe-icon--zoomin {
|
85 | border-color: $vxe-disabled-color;
|
86 | }
|
87 | }
|
88 | &:not(.is--loading) {
|
89 | cursor: no-drop;
|
90 | }
|
91 | }
|
92 | &.type--text {
|
93 | text-decoration: none;
|
94 | border: 0;
|
95 | padding: 0.1em 0.5em;
|
96 | background-color: transparent;
|
97 | &:not(.is--disabled) {
|
98 | &:focus {
|
99 | box-shadow: 0 0 0.25em 0 $vxe-primary-color;
|
100 | }
|
101 | &:hover {
|
102 | color: lighten($vxe-primary-color, 10%);
|
103 | }
|
104 | }
|
105 | @for $index from 0 to length($btnThemeList) {
|
106 | $item: nth($btnThemeList, $index + 1);
|
107 | $textColor: map-get($item, textColor);
|
108 | &.theme--#{map-get($item, name)} {
|
109 | color: $textColor;
|
110 | &:not(.is--disabled) {
|
111 | &:hover {
|
112 | color: lighten($textColor, 10%);
|
113 | }
|
114 | }
|
115 | &.is--disabled {
|
116 | color: lighten($textColor, 20%);
|
117 | }
|
118 | }
|
119 | }
|
120 | }
|
121 | &.type--button {
|
122 | font-family: inherit;
|
123 | height: $vxe-button-height-default;
|
124 | line-height: 1;
|
125 | border: 1px solid $vxe-input-border-color;
|
126 | &.is--round {
|
127 | border-radius: $vxe-button-height-default * 0.5;
|
128 | }
|
129 | &:not(.is--round) {
|
130 | border-radius: $vxe-border-radius;
|
131 | }
|
132 | &.is--circle {
|
133 | padding: 0 0.5em;
|
134 | min-width: $vxe-button-height-default;
|
135 | border-radius: 50%;
|
136 | }
|
137 | &:not(.is--circle) {
|
138 | padding: 0 1em;
|
139 | }
|
140 | &:not(.is--disabled) {
|
141 | &:hover {
|
142 | color: lighten($vxe-primary-color, 6%);
|
143 | .vxe-button--icon {
|
144 | &.vxe-icon--zoomin {
|
145 | border-color: lighten($vxe-primary-color, 6%);
|
146 | }
|
147 | }
|
148 | }
|
149 | &:focus {
|
150 | border-color: $vxe-primary-color;
|
151 | box-shadow: 0 0 0.25em 0 $vxe-primary-color;
|
152 | }
|
153 | &:active {
|
154 | color: darken($vxe-primary-color, 3%);
|
155 | border-color: darken($vxe-primary-color, 3%);
|
156 | background-color: darken($vxe-button-default-background-color, 3%);
|
157 | .vxe-button--icon {
|
158 | &.vxe-icon--zoomin {
|
159 | background-color: darken($vxe-button-default-background-color, 3%);
|
160 | }
|
161 | &.vxe-icon--zoomout {
|
162 | &:after {
|
163 | background-color: darken($vxe-button-default-background-color, 3%);
|
164 | }
|
165 | }
|
166 | }
|
167 | }
|
168 | }
|
169 | @for $index from 0 to length($btnThemeList) {
|
170 | $item: nth($btnThemeList, $index + 1);
|
171 | $btnColor: map-get($item, btnColor);
|
172 | $btnBackground: map-get($item, btnBackground);
|
173 | &.theme--#{map-get($item, name)} {
|
174 | color: $btnColor;
|
175 | .vxe-button--icon {
|
176 | &.vxe-icon--zoomin {
|
177 | border-color: $btnColor;
|
178 | }
|
179 | }
|
180 | &:not(.is--disabled) {
|
181 | border-color: $btnBackground;
|
182 | background-color: $btnBackground;
|
183 | &:hover {
|
184 | color: $btnColor;
|
185 | background-color: lighten($btnBackground, 6%);
|
186 | border-color: lighten($btnBackground, 6%);
|
187 | .vxe-button--icon {
|
188 | &.vxe-icon--zoomin {
|
189 | border-color: lighten($btnBackground, 6%);
|
190 | }
|
191 | }
|
192 | }
|
193 | &:active {
|
194 | color: $btnColor;
|
195 | background-color: darken($btnBackground, 3%);
|
196 | border-color: darken($btnBackground, 3%);
|
197 | &.vxe-icon--zoomin {
|
198 | background-color: darken($btnBackground, 3%);
|
199 | }
|
200 | &.vxe-icon--zoomout {
|
201 | &:after {
|
202 | background-color: darken($btnBackground, 3%);
|
203 | }
|
204 | }
|
205 | }
|
206 | }
|
207 | &.is--disabled {
|
208 | border-color: lighten($btnBackground, 20%);
|
209 | background-color: lighten($btnBackground, 20%);
|
210 | }
|
211 | &.is--loading {
|
212 | border-color: $btnBackground;
|
213 | background-color: $btnBackground;
|
214 | }
|
215 | }
|
216 | }
|
217 | }
|
218 | &.size--medium {
|
219 | font-size: $vxe-font-size-medium;
|
220 | &.type--button {
|
221 | height: $vxe-button-height-medium;
|
222 | &.is--circle {
|
223 | min-width: $vxe-button-height-medium;
|
224 | }
|
225 | &.is--round {
|
226 | border-radius: $vxe-button-height-medium * 0.5;
|
227 | }
|
228 | }
|
229 | .vxe-button--loading-icon,
|
230 | .vxe-button--icon {
|
231 | min-width: $vxe-font-size-medium;
|
232 | }
|
233 | }
|
234 | &.size--small {
|
235 | font-size: $vxe-font-size-small;
|
236 | &.type--button {
|
237 | height: $vxe-button-height-small;
|
238 | &.is--circle {
|
239 | min-width: $vxe-button-height-small;
|
240 | }
|
241 | &.is--round {
|
242 | border-radius: $vxe-button-height-small * 0.5;
|
243 | }
|
244 | }
|
245 | .vxe-button--loading-icon,
|
246 | .vxe-button--icon {
|
247 | min-width: $vxe-font-size-small;
|
248 | }
|
249 | }
|
250 | &.size--mini {
|
251 | font-size: $vxe-font-size-mini;
|
252 | &.type--button {
|
253 | height: $vxe-button-height-mini;
|
254 | &.is--circle {
|
255 | min-width: $vxe-button-height-mini;
|
256 | }
|
257 | &.is--round {
|
258 | border-radius: $vxe-button-height-mini * 0.5;
|
259 | }
|
260 | }
|
261 | .vxe-button--loading-icon,
|
262 | .vxe-button--icon {
|
263 | min-width: $vxe-font-size-mini;
|
264 | }
|
265 | }
|
266 | }
|
267 | .vxe-input,
|
268 | .vxe-button {
|
269 | &+.vxe-button,
|
270 | &+.vxe-button--dropdown {
|
271 | margin-left: 12px;
|
272 | }
|
273 | }
|
274 | .vxe-button--loading-icon,
|
275 | .vxe-button--icon,
|
276 | .vxe-button--content {
|
277 | vertical-align: middle;
|
278 | }
|
279 | .vxe-button--loading-icon,
|
280 | .vxe-button--icon {
|
281 | min-width: $vxe-font-size;
|
282 | &+.vxe-button--content {
|
283 | margin-left: 4px;
|
284 | }
|
285 | }
|
286 | .vxe-button--wrapper,
|
287 | .vxe-button--dropdown {
|
288 | display: inline-block;
|
289 | }
|
290 | .vxe-button--dropdown {
|
291 | position: relative;
|
292 | &+.vxe-button,
|
293 | &+.vxe-button--dropdown {
|
294 | margin-left: 12px;
|
295 | }
|
296 | & > .vxe-button {
|
297 | &.type--button {
|
298 | @for $index from 0 to length($btnThemeList) {
|
299 | $item: nth($btnThemeList, $index + 1);
|
300 | $btnColor: map-get($item, btnColor);
|
301 | &.theme--#{map-get($item, name)} {
|
302 | color: $btnColor;
|
303 | }
|
304 | }
|
305 | }
|
306 | }
|
307 | &.is--active {
|
308 | & > .vxe-button {
|
309 | &:not(.is--disabled) {
|
310 | color: lighten($vxe-primary-color, 6%);
|
311 | }
|
312 | &.type--text {
|
313 | @for $index from 0 to length($btnThemeList) {
|
314 | $item: nth($btnThemeList, $index + 1);
|
315 | $textColor: map-get($item, textColor);
|
316 | &.theme--#{map-get($item, name)} {
|
317 | color: lighten($textColor, 10%);
|
318 | }
|
319 | }
|
320 | }
|
321 | &.type--button {
|
322 | @for $index from 0 to length($btnThemeList) {
|
323 | $item: nth($btnThemeList, $index + 1);
|
324 | $btnColor: map-get($item, btnColor);
|
325 | $btnBackground: map-get($item, btnBackground);
|
326 | &.theme--#{map-get($item, name)} {
|
327 | color: $btnColor;
|
328 | background-color: lighten($btnBackground, 6%);
|
329 | border-color: lighten($btnBackground, 6%);
|
330 | }
|
331 | }
|
332 | }
|
333 | }
|
334 | .vxe-button--dropdown-arrow {
|
335 | transform: rotate(180deg);
|
336 | }
|
337 | }
|
338 | }
|
339 |
|
340 | .vxe-button--dropdown-arrow {
|
341 | font-size: 12px;
|
342 | margin-left: 4px;
|
343 | @include animatTransition(transform, .2s);
|
344 | }
|
345 |
|
346 | .vxe-button--dropdown-panel {
|
347 | display: none;
|
348 | position: absolute;
|
349 | right: 0;
|
350 | padding: 4px 0;
|
351 | &.animat--leave {
|
352 | display: block;
|
353 | opacity: 0;
|
354 | transform: scaleY(0.5);
|
355 | transition: transform .3s cubic-bezier(.23,1,.32,1), opacity .3s cubic-bezier(.23,1,.32,1);
|
356 | transform-origin: center top;
|
357 | backface-visibility: hidden;
|
358 | transform-style: preserve-3d;
|
359 | &[placement="top"] {
|
360 | transform-origin: center bottom;
|
361 | }
|
362 | }
|
363 | &.animat--enter {
|
364 | opacity: 1;
|
365 | transform: scaleY(1);
|
366 | }
|
367 | }
|
368 | .vxe-button--dropdown-wrapper {
|
369 | padding: 5px;
|
370 | background-color: $vxe-button-dropdown-panel-background-color;
|
371 | border-radius: $vxe-border-radius;
|
372 | border: 1px solid $vxe-input-border-color;
|
373 | box-shadow: 0 1px 6px rgba(0,0,0,.2);
|
374 | & > .vxe-button {
|
375 | margin-left: 0;
|
376 | margin-top: 0.4em;
|
377 | display: block;
|
378 | width: 100%;
|
379 | border: 0;
|
380 | &.type--text {
|
381 | padding: 2px 8px;
|
382 | }
|
383 | &:first-child {
|
384 | margin-top: 0;
|
385 | }
|
386 | &:last-child {
|
387 | margin-bottom: 0;
|
388 | }
|
389 | }
|
390 | } |
\ | No newline at end of file |