UNPKG

@alifd/next/lib/button/main.scss

Version:

1@import '../core/index-noreset';
2
3@import './scss/variable';
4@import './scss/normalize';
5@import './scss/mixin';
6
7#{$btn-prefix} {
  & {
      position: relative;
      display: inline-block;
      box-shadow: $btn-shadow;
      text-decoration: none;
      text-align: center;
      text-transform: none;
      white-space: nowrap;
      vertical-align: middle;
      user-select: none;
      transition: all $motion-duration-immediately $motion-linear;
      line-height: 1;
      cursor: pointer;
21
      &:after {
          text-align: center;
          position: absolute;
          opacity: 0;
          visibility: hidden;
          transition: opacity $motion-duration-immediately $motion-linear;
      }
29
      &::before {
          content: '';
          display: inline-block;
          height: 100%;
          width: 0;
          vertical-align: middle;
      }
37
      .#{$css-prefix}icon {
          display: inline-block;
          font-size: 0;
          vertical-align: middle;
      }
43
      > span,
      > div {
          display: inline-block;
          vertical-align: middle;
      }
49
      > #{$btn-prefix}-helper {
          text-decoration: inherit;
          display: inline-block;
          vertical-align: middle;
      }
55
      &.hover,
      &:hover {
          box-shadow: $btn-shadow-hover;
      }
  }
61
  /* 尺寸维度 */
  /* ---------------------------------------- */
  &.#{$css-prefix} {
      &small {
          @include next-button-size(
              $btn-size-s-padding,
              $btn-size-s-height,
              $btn-size-s-font,
              $btn-size-s-border-width,
              $btn-size-s-corner,
              $btn-size-s-icon-margin,
              $btn-size-s-icon-size,
              $btn-size-s-icon-split-size
          );
      }
      &medium {
          @include next-button-size(
              $btn-size-m-padding,
              $btn-size-m-height,
              $btn-size-m-font,
              $btn-size-m-border-width,
              $btn-size-m-corner,
              $btn-size-m-icon-margin,
              $btn-size-m-icon-size,
              $btn-size-m-icon-split-size
          );
      }
      &large {
          @include next-button-size(
              $btn-size-l-padding,
              $btn-size-l-height,
              $btn-size-l-font,
              $btn-size-l-border-width,
              $btn-size-l-corner,
              $btn-size-l-icon-margin,
              $btn-size-l-icon-size,
              $btn-size-l-icon-split-size
          );
      }
  }
102
  /* 普通按钮 */
  &#{$btn-prefix} {
      &-normal {
          border-style: $btn-pure-normal-border-style;
107
          @include button-color(
              $btn-pure-normal-color,
              $btn-pure-normal-color-hover,
              $btn-pure-normal-color-active,
              $btn-pure-normal-bg,
              $btn-pure-normal-bg-hover,
              $btn-pure-normal-bg-active,
              $btn-pure-normal-border-color,
              $btn-pure-normal-border-color-hover,
              $btn-pure-normal-border-color-active
          );
      }
120
      &-primary {
          border-style: $btn-pure-primary-border-style;
123
          @include button-color(
              $btn-pure-primary-color,
              $btn-pure-primary-color-hover,
              $btn-pure-primary-color-active,
              $btn-pure-primary-bg,
              $btn-pure-primary-bg-hover,
              $btn-pure-primary-bg-active,
              $btn-pure-primary-border-color,
              $btn-pure-primary-border-color-hover,
              $btn-pure-primary-border-color-active
          );
      }
136
      &-secondary {
          border-style: $btn-pure-secondary-border-style;
139
          @include button-color(
              $btn-pure-secondary-color,
              $btn-pure-secondary-color-hover,
              $btn-pure-secondary-color-active,
              $btn-pure-secondary-bg,
              $btn-pure-secondary-bg-hover,
              $btn-pure-secondary-bg-active,
              $btn-pure-secondary-border-color,
              $btn-pure-secondary-border-color-hover,
              $btn-pure-secondary-border-color-active
          );
      }
  }
153
  /* 普通态禁用样式 */
  &.disabled,
  &[disabled] {
      cursor: not-allowed;
158
      &#{$btn-prefix}-normal {
          @include button-color(
              $btn-pure-normal-color-disabled,
              $btn-pure-normal-color-disabled,
              $btn-pure-normal-color-disabled,
              $btn-pure-normal-bg-disabled,
              $btn-pure-normal-bg-disabled,
              $btn-pure-normal-bg-disabled,
              $btn-pure-normal-border-color-disabled,
              $btn-pure-normal-border-color-disabled,
              $btn-pure-normal-border-color-disabled
          );
      }
172
      &#{$btn-prefix}-primary {
          @include button-color(
              $btn-pure-primary-color-disabled,
              $btn-pure-primary-color-disabled,
              $btn-pure-primary-color-disabled,
              $btn-pure-primary-bg-disabled,
              $btn-pure-primary-bg-disabled,
              $btn-pure-primary-bg-disabled,
              $btn-pure-primary-border-color-disabled,
              $btn-pure-primary-border-color-disabled,
              $btn-pure-primary-border-color-disabled
          );
      }
186
      &#{$btn-prefix}-secondary {
          @include button-color(
              $btn-pure-secondary-color-disabled,
              $btn-pure-secondary-color-disabled,
              $btn-pure-secondary-color-disabled,
              $btn-pure-secondary-bg-disabled,
              $btn-pure-secondary-bg-disabled,
              $btn-pure-secondary-bg-disabled,
              $btn-pure-secondary-border-color-disabled,
              $btn-pure-secondary-border-color-disabled,
              $btn-pure-secondary-border-color-disabled
          );
      }
  }
201
  /* 警告按钮 */
  &-warning {
      border-style: $btn-warning-border-style;
205
      &#{$btn-prefix}-primary {
          @include button-color(
              $btn-warning-primary-color,
              $btn-warning-primary-color-hover,
              $btn-warning-primary-color-active,
              $btn-warning-primary-bg,
              $btn-warning-primary-bg-hover,
              $btn-warning-primary-bg-active,
              $btn-warning-primary-border-color,
              $btn-warning-primary-border-color-hover,
              $btn-warning-primary-border-color-active
          );
          &.disabled,
          &[disabled] {
              @include button-color(
                  $btn-warning-primary-color-disabled,
                  $btn-warning-primary-color-disabled,
                  $btn-warning-primary-color-disabled,
                  $btn-warning-primary-bg-disabled,
                  $btn-warning-primary-bg-disabled,
                  $btn-warning-primary-bg-disabled,
                  $btn-warning-primary-border-color-disabled,
                  $btn-warning-primary-border-color-disabled,
                  $btn-warning-primary-border-color-disabled
              );
          }
      }
233
      &#{$btn-prefix}-normal {
          @include button-color(
              $btn-warning-normal-color,
              $btn-warning-normal-color-hover,
              $btn-warning-normal-color-active,
              $btn-warning-normal-bg,
              $btn-warning-normal-bg-hover,
              $btn-warning-normal-bg-active,
              $btn-warning-normal-border-color,
              $btn-warning-normal-border-color-hover,
              $btn-warning-normal-border-color-active
          );
246
          &.disabled,
          &[disabled] {
              @include button-color(
                  $btn-warning-normal-color-disabled,
                  $btn-warning-normal-color-disabled,
                  $btn-warning-normal-color-disabled,
                  $btn-warning-normal-bg-disabled,
                  $btn-warning-normal-bg-disabled,
                  $btn-warning-normal-bg-disabled,
                  $btn-warning-normal-border-color-disabled,
                  $btn-warning-normal-border-color-disabled,
                  $btn-warning-normal-border-color-disabled
              );
          }
      }
  }
263
  /* 文本按钮 */
  &-text {
      box-shadow: none;
      border-radius: 0;
      user-select: text;
269
      &.hover,
      &:hover {
          box-shadow: none;
      }
274
      &#{$btn-prefix}-primary {
          @include button-color(
              $btn-text-primary-color,
              $btn-text-primary-color-hover,
              $btn-text-primary-color-hover,
              transparent,
              transparent,
              transparent,
              transparent,
              transparent,
              transparent
          );
          &.disabled,
          &[disabled] {
              @include button-color(
                  $btn-text-disabled-color,
                  $btn-text-disabled-color,
                  $btn-text-disabled-color,
                  transparent,
                  transparent,
                  transparent,
                  transparent,
                  transparent,
                  transparent
              );
          }
      }
      &#{$btn-prefix}-secondary {
          @include button-color(
              $btn-text-secondary-color,
              $btn-text-secondary-color-hover,
              $btn-text-secondary-color-hover,
              transparent,
              transparent,
              transparent,
              transparent,
              transparent,
              transparent
          );
          &.disabled,
          &[disabled] {
              @include button-color(
                  $btn-text-disabled-color,
                  $btn-text-disabled-color,
                  $btn-text-disabled-color,
                  transparent,
                  transparent,
                  transparent,
                  transparent,
                  transparent,
                  transparent
              );
          }
      }
      &#{$btn-prefix}-normal {
          @include button-color(
              $btn-text-normal-color,
              $btn-text-normal-color-hover,
              $btn-text-normal-color-hover,
              transparent,
              transparent,
              transparent,
              transparent,
              transparent,
              transparent
          );
          &.disabled,
          &[disabled] {
              @include button-color(
                  $btn-text-disabled-color,
                  $btn-text-disabled-color,
                  $btn-text-disabled-color,
                  transparent,
                  transparent,
                  transparent,
                  transparent,
                  transparent,
                  transparent
              );
          }
      }
      &.#{$css-prefix}large {
          @include next-button-size(
              0px,
              $btn-text-size-l-height,
              $btn-text-size-l-font,
              0,
              0,
              $btn-text-icon-l-margin,
              $btn-size-l-icon-size,
              $btn-size-l-icon-split-size
          );
      }
      &.#{$css-prefix}medium {
          @include next-button-size(
              0px,
              $btn-text-size-m-height,
              $btn-text-size-m-font,
              0,
              0,
              $btn-text-icon-m-margin,
              $btn-size-m-icon-size,
              $btn-size-m-icon-split-size
          );
      }
      &.#{$css-prefix}small {
          @include next-button-size(
              0px,
              $btn-text-size-s-height,
              $btn-text-size-s-font,
              0,
              0,
              $btn-text-icon-s-margin,
              $btn-size-s-icon-size,
              $btn-size-s-icon-split-size
          );
      }
      &#{$btn-prefix}-loading {
          @include button-color(
              $btn-text-loading-color,
              $btn-text-loading-color,
              $btn-text-loading-color,
              transparent,
              transparent,
              transparent,
              transparent,
              transparent,
              transparent
          );
      }
  }
406
  /* loading */
  /* ---------------------------------------- */
  &-loading {
      pointer-events: none;
      &:before {
          font-family: $icon-font-family;
          content: $icon-content-loading;
          opacity: 1;
          visibility: visible;
          animation: loadingCircle 2s infinite linear;
      }
      &:after {
          content: '';
          display: inline-block;
          position: static;
          height: 100%;
          width: 0;
          vertical-align: middle;
      }
  }
427
  /* custom loading */
  &-custom-loading {
      pointer-events: none;
  }
432
  /* 幽灵按钮 */
  &-ghost {
      box-shadow: none;
      border-style: $btn-ghost-border-style;
      &#{$btn-prefix}-dark {
          @include button-color( $btn-ghost-dark-color, $btn-ghost-dark-color-hover, $btn-ghost-dark-color-hover, $btn-ghost-dark-bg-normal, $btn-ghost-dark-bg-hover, $btn-ghost-dark-bg-hover, $btn-ghost-dark-border-color, $btn-ghost-dark-border-color-hover, $btn-ghost-dark-border-color-hover);
          &.disabled,
          &[disabled] {
              @include button-color( $btn-ghost-dark-color-disabled, $btn-ghost-dark-color-disabled, $btn-ghost-dark-color-disabled, $btn-ghost-dark-bg-disabled, $btn-ghost-dark-bg-disabled, $btn-ghost-dark-bg-disabled, $btn-ghost-dark-border-color-disabled, $btn-ghost-dark-border-color-disabled, $btn-ghost-dark-border-color-disabled);
          }
      }
      &#{$btn-prefix}-light {
          @include button-color( $btn-ghost-light-color, $btn-ghost-light-color-hover, $btn-ghost-light-color-hover, $btn-ghost-light-bg-normal, $btn-ghost-light-bg-hover, $btn-ghost-light-bg-hover, $btn-ghost-light-border-color, $btn-ghost-light-border-color-hover, $btn-ghost-light-border-color-hover);
          &.disabled,
          &[disabled] {
              @include button-color( $btn-ghost-light-color-disabled, $btn-ghost-light-color-disabled, $btn-ghost-light-color-disabled, $btn-ghost-light-bg-disabled, $btn-ghost-light-bg-disabled, $btn-ghost-light-bg-disabled, $btn-ghost-light-border-color-disabled, $btn-ghost-light-border-color-disabled, $btn-ghost-light-border-color-disabled);
          }
      }
  }
452
  /* 组合 */
  /* ---------------------------------------- */
  &-group {
      position: relative;
      display: inline-block;
      vertical-align: middle;
459
      > #{$btn-prefix} {
          position: relative;
          float: left;
          box-shadow: none;
464
          &:hover,
          &:focus,
          &:active,
          &.active {
              z-index: 1;
          }
          &.disabled,
          &[disabled] {
              z-index: 0;
          }
      }
476
      #{$btn-prefix}#{$btn-prefix} {
          margin: 0 0 0 -1px;
      }
480
      #{$btn-prefix}:not(:first-child):not(:last-child) {
          border-radius: 0;
      }
484
      > #{$btn-prefix}:first-child {
          margin: 0;
      }
488
      > #{$btn-prefix}:first-child:not(:last-child) {
          border-bottom-right-radius: 0;
          border-top-right-radius: 0;
      }
493
      > #{$btn-prefix}:last-child:not(:first-child) {
          border-bottom-left-radius: 0;
          border-top-left-radius: 0;
      }
498
      > #{$btn-prefix}-primary:not(:first-child) {
          border-left-color: rgba($color-white, .2);
501
          &:hover {
              border-left-color: transparent;
          }
          &.disabled,
          &[disabled] {
              border-left-color: $color-line1-1;
          }
      }
  }
511}
512
513@import './rtl.scss';

1	`@import '../core/index-noreset';`
2
3	`@import './scss/variable';`
4	`@import './scss/normalize';`
5	`@import './scss/mixin';`
6
7	`#{$btn-prefix} {`
8	`& {`
9	`position: relative;`
10	`display: inline-block;`
11	`box-shadow: $btn-shadow;`
12	`text-decoration: none;`
13	`text-align: center;`
14	`text-transform: none;`
15	`white-space: nowrap;`
16	`vertical-align: middle;`
17	`user-select: none;`
18	`transition: all $motion-duration-immediately $motion-linear;`
19	`line-height: 1;`
20	`cursor: pointer;`
21
22	`&:after {`
23	`text-align: center;`
24	`position: absolute;`
25	`opacity: 0;`
26	`visibility: hidden;`
27	`transition: opacity $motion-duration-immediately $motion-linear;`
28	`}`
29
30	`&::before {`
31	`content: '';`
32	`display: inline-block;`
33	`height: 100%;`
34	`width: 0;`
35	`vertical-align: middle;`
36	`}`
37
38	`.#{$css-prefix}icon {`
39	`display: inline-block;`
40	`font-size: 0;`
41	`vertical-align: middle;`
42	`}`
43
44	`> span,`
45	`> div {`
46	`display: inline-block;`
47	`vertical-align: middle;`
48	`}`
49
50	`> #{$btn-prefix}-helper {`
51	`text-decoration: inherit;`
52	`display: inline-block;`
53	`vertical-align: middle;`
54	`}`
55
56	`&.hover,`
57	`&:hover {`
58	`box-shadow: $btn-shadow-hover;`
59	`}`
60	`}`
61
62	`/* 尺寸维度 */`
63	`/* ---------------------------------------- */`
64	`&.#{$css-prefix} {`
65	`&small {`
66	`@include next-button-size(`
67	`$btn-size-s-padding,`
68	`$btn-size-s-height,`
69	`$btn-size-s-font,`
70	`$btn-size-s-border-width,`
71	`$btn-size-s-corner,`
72	`$btn-size-s-icon-margin,`
73	`$btn-size-s-icon-size,`
74	`$btn-size-s-icon-split-size`
75	`);`
76	`}`
77	`&medium {`
78	`@include next-button-size(`
79	`$btn-size-m-padding,`
80	`$btn-size-m-height,`
81	`$btn-size-m-font,`
82	`$btn-size-m-border-width,`
83	`$btn-size-m-corner,`
84	`$btn-size-m-icon-margin,`
85	`$btn-size-m-icon-size,`
86	`$btn-size-m-icon-split-size`
87	`);`
88	`}`
89	`&large {`
90	`@include next-button-size(`
91	`$btn-size-l-padding,`
92	`$btn-size-l-height,`
93	`$btn-size-l-font,`
94	`$btn-size-l-border-width,`
95	`$btn-size-l-corner,`
96	`$btn-size-l-icon-margin,`
97	`$btn-size-l-icon-size,`
98	`$btn-size-l-icon-split-size`
99	`);`
100	`}`
101	`}`
102
103	`/* 普通按钮 */`
104	`&#{$btn-prefix} {`
105	`&-normal {`
106	`border-style: $btn-pure-normal-border-style;`
107
108	`@include button-color(`
109	`$btn-pure-normal-color,`
110	`$btn-pure-normal-color-hover,`
111	`$btn-pure-normal-color-active,`
112	`$btn-pure-normal-bg,`
113	`$btn-pure-normal-bg-hover,`
114	`$btn-pure-normal-bg-active,`
115	`$btn-pure-normal-border-color,`
116	`$btn-pure-normal-border-color-hover,`
117	`$btn-pure-normal-border-color-active`
118	`);`
119	`}`
120
121	`&-primary {`
122	`border-style: $btn-pure-primary-border-style;`
123
124	`@include button-color(`
125	`$btn-pure-primary-color,`
126	`$btn-pure-primary-color-hover,`
127	`$btn-pure-primary-color-active,`
128	`$btn-pure-primary-bg,`
129	`$btn-pure-primary-bg-hover,`
130	`$btn-pure-primary-bg-active,`
131	`$btn-pure-primary-border-color,`
132	`$btn-pure-primary-border-color-hover,`
133	`$btn-pure-primary-border-color-active`
134	`);`
135	`}`
136
137	`&-secondary {`
138	`border-style: $btn-pure-secondary-border-style;`
139
140	`@include button-color(`
141	`$btn-pure-secondary-color,`
142	`$btn-pure-secondary-color-hover,`
143	`$btn-pure-secondary-color-active,`
144	`$btn-pure-secondary-bg,`
145	`$btn-pure-secondary-bg-hover,`
146	`$btn-pure-secondary-bg-active,`
147	`$btn-pure-secondary-border-color,`
148	`$btn-pure-secondary-border-color-hover,`
149	`$btn-pure-secondary-border-color-active`
150	`);`
151	`}`
152	`}`
153
154	`/* 普通态禁用样式 */`
155	`&.disabled,`
156	`&[disabled] {`
157	`cursor: not-allowed;`
158
159	`&#{$btn-prefix}-normal {`
160	`@include button-color(`
161	`$btn-pure-normal-color-disabled,`
162	`$btn-pure-normal-color-disabled,`
163	`$btn-pure-normal-color-disabled,`
164	`$btn-pure-normal-bg-disabled,`
165	`$btn-pure-normal-bg-disabled,`
166	`$btn-pure-normal-bg-disabled,`
167	`$btn-pure-normal-border-color-disabled,`
168	`$btn-pure-normal-border-color-disabled,`
169	`$btn-pure-normal-border-color-disabled`
170	`);`
171	`}`
172
173	`&#{$btn-prefix}-primary {`
174	`@include button-color(`
175	`$btn-pure-primary-color-disabled,`
176	`$btn-pure-primary-color-disabled,`
177	`$btn-pure-primary-color-disabled,`
178	`$btn-pure-primary-bg-disabled,`
179	`$btn-pure-primary-bg-disabled,`
180	`$btn-pure-primary-bg-disabled,`
181	`$btn-pure-primary-border-color-disabled,`
182	`$btn-pure-primary-border-color-disabled,`
183	`$btn-pure-primary-border-color-disabled`
184	`);`
185	`}`
186
187	`&#{$btn-prefix}-secondary {`
188	`@include button-color(`
189	`$btn-pure-secondary-color-disabled,`
190	`$btn-pure-secondary-color-disabled,`
191	`$btn-pure-secondary-color-disabled,`
192	`$btn-pure-secondary-bg-disabled,`
193	`$btn-pure-secondary-bg-disabled,`
194	`$btn-pure-secondary-bg-disabled,`
195	`$btn-pure-secondary-border-color-disabled,`
196	`$btn-pure-secondary-border-color-disabled,`
197	`$btn-pure-secondary-border-color-disabled`
198	`);`
199	`}`
200	`}`
201
202	`/* 警告按钮 */`
203	`&-warning {`
204	`border-style: $btn-warning-border-style;`
205
206	`&#{$btn-prefix}-primary {`
207	`@include button-color(`
208	`$btn-warning-primary-color,`
209	`$btn-warning-primary-color-hover,`
210	`$btn-warning-primary-color-active,`
211	`$btn-warning-primary-bg,`
212	`$btn-warning-primary-bg-hover,`
213	`$btn-warning-primary-bg-active,`
214	`$btn-warning-primary-border-color,`
215	`$btn-warning-primary-border-color-hover,`
216	`$btn-warning-primary-border-color-active`
217	`);`
218	`&.disabled,`
219	`&[disabled] {`
220	`@include button-color(`
221	`$btn-warning-primary-color-disabled,`
222	`$btn-warning-primary-color-disabled,`
223	`$btn-warning-primary-color-disabled,`
224	`$btn-warning-primary-bg-disabled,`
225	`$btn-warning-primary-bg-disabled,`
226	`$btn-warning-primary-bg-disabled,`
227	`$btn-warning-primary-border-color-disabled,`
228	`$btn-warning-primary-border-color-disabled,`
229	`$btn-warning-primary-border-color-disabled`
230	`);`
231	`}`
232	`}`
233
234	`&#{$btn-prefix}-normal {`
235	`@include button-color(`
236	`$btn-warning-normal-color,`
237	`$btn-warning-normal-color-hover,`
238	`$btn-warning-normal-color-active,`
239	`$btn-warning-normal-bg,`
240	`$btn-warning-normal-bg-hover,`
241	`$btn-warning-normal-bg-active,`
242	`$btn-warning-normal-border-color,`
243	`$btn-warning-normal-border-color-hover,`
244	`$btn-warning-normal-border-color-active`
245	`);`
246
247	`&.disabled,`
248	`&[disabled] {`
249	`@include button-color(`
250	`$btn-warning-normal-color-disabled,`
251	`$btn-warning-normal-color-disabled,`
252	`$btn-warning-normal-color-disabled,`
253	`$btn-warning-normal-bg-disabled,`
254	`$btn-warning-normal-bg-disabled,`
255	`$btn-warning-normal-bg-disabled,`
256	`$btn-warning-normal-border-color-disabled,`
257	`$btn-warning-normal-border-color-disabled,`
258	`$btn-warning-normal-border-color-disabled`
259	`);`
260	`}`
261	`}`
262	`}`
263
264	`/* 文本按钮 */`
265	`&-text {`
266	`box-shadow: none;`
267	`border-radius: 0;`
268	`user-select: text;`
269
270	`&.hover,`
271	`&:hover {`
272	`box-shadow: none;`
273	`}`
274
275	`&#{$btn-prefix}-primary {`
276	`@include button-color(`
277	`$btn-text-primary-color,`
278	`$btn-text-primary-color-hover,`
279	`$btn-text-primary-color-hover,`
280	`transparent,`
281	`transparent,`
282	`transparent,`
283	`transparent,`
284	`transparent,`
285	`transparent`
286	`);`
287	`&.disabled,`
288	`&[disabled] {`
289	`@include button-color(`
290	`$btn-text-disabled-color,`
291	`$btn-text-disabled-color,`
292	`$btn-text-disabled-color,`
293	`transparent,`
294	`transparent,`
295	`transparent,`
296	`transparent,`
297	`transparent,`
298	`transparent`
299	`);`
300	`}`
301	`}`
302	`&#{$btn-prefix}-secondary {`
303	`@include button-color(`
304	`$btn-text-secondary-color,`
305	`$btn-text-secondary-color-hover,`
306	`$btn-text-secondary-color-hover,`
307	`transparent,`
308	`transparent,`
309	`transparent,`
310	`transparent,`
311	`transparent,`
312	`transparent`
313	`);`
314	`&.disabled,`
315	`&[disabled] {`
316	`@include button-color(`
317	`$btn-text-disabled-color,`
318	`$btn-text-disabled-color,`
319	`$btn-text-disabled-color,`
320	`transparent,`
321	`transparent,`
322	`transparent,`
323	`transparent,`
324	`transparent,`
325	`transparent`
326	`);`
327	`}`
328	`}`
329	`&#{$btn-prefix}-normal {`
330	`@include button-color(`
331	`$btn-text-normal-color,`
332	`$btn-text-normal-color-hover,`
333	`$btn-text-normal-color-hover,`
334	`transparent,`
335	`transparent,`
336	`transparent,`
337	`transparent,`
338	`transparent,`
339	`transparent`
340	`);`
341	`&.disabled,`
342	`&[disabled] {`
343	`@include button-color(`
344	`$btn-text-disabled-color,`
345	`$btn-text-disabled-color,`
346	`$btn-text-disabled-color,`
347	`transparent,`
348	`transparent,`
349	`transparent,`
350	`transparent,`
351	`transparent,`
352	`transparent`
353	`);`
354	`}`
355	`}`
356	`&.#{$css-prefix}large {`
357	`@include next-button-size(`
358	`0px,`
359	`$btn-text-size-l-height,`
360	`$btn-text-size-l-font,`
361	`0,`
362	`0,`
363	`$btn-text-icon-l-margin,`
364	`$btn-size-l-icon-size,`
365	`$btn-size-l-icon-split-size`
366	`);`
367	`}`
368	`&.#{$css-prefix}medium {`
369	`@include next-button-size(`
370	`0px,`
371	`$btn-text-size-m-height,`
372	`$btn-text-size-m-font,`
373	`0,`
374	`0,`
375	`$btn-text-icon-m-margin,`
376	`$btn-size-m-icon-size,`
377	`$btn-size-m-icon-split-size`
378	`);`
379	`}`
380	`&.#{$css-prefix}small {`
381	`@include next-button-size(`
382	`0px,`
383	`$btn-text-size-s-height,`
384	`$btn-text-size-s-font,`
385	`0,`
386	`0,`
387	`$btn-text-icon-s-margin,`
388	`$btn-size-s-icon-size,`
389	`$btn-size-s-icon-split-size`
390	`);`
391	`}`
392	`&#{$btn-prefix}-loading {`
393	`@include button-color(`
394	`$btn-text-loading-color,`
395	`$btn-text-loading-color,`
396	`$btn-text-loading-color,`
397	`transparent,`
398	`transparent,`
399	`transparent,`
400	`transparent,`
401	`transparent,`
402	`transparent`
403	`);`
404	`}`
405	`}`
406
407	`/* loading */`
408	`/* ---------------------------------------- */`
409	`&-loading {`
410	`pointer-events: none;`
411	`&:before {`
412	`font-family: $icon-font-family;`
413	`content: $icon-content-loading;`
414	`opacity: 1;`
415	`visibility: visible;`
416	`animation: loadingCircle 2s infinite linear;`
417	`}`
418	`&:after {`
419	`content: '';`
420	`display: inline-block;`
421	`position: static;`
422	`height: 100%;`
423	`width: 0;`
424	`vertical-align: middle;`
425	`}`
426	`}`
427
428	`/* custom loading */`
429	`&-custom-loading {`
430	`pointer-events: none;`
431	`}`
432
433	`/* 幽灵按钮 */`
434	`&-ghost {`
435	`box-shadow: none;`
436	`border-style: $btn-ghost-border-style;`
437	`&#{$btn-prefix}-dark {`
438	`@include button-color( $btn-ghost-dark-color, $btn-ghost-dark-color-hover, $btn-ghost-dark-color-hover, $btn-ghost-dark-bg-normal, $btn-ghost-dark-bg-hover, $btn-ghost-dark-bg-hover, $btn-ghost-dark-border-color, $btn-ghost-dark-border-color-hover, $btn-ghost-dark-border-color-hover);`
439	`&.disabled,`
440	`&[disabled] {`
441	`@include button-color( $btn-ghost-dark-color-disabled, $btn-ghost-dark-color-disabled, $btn-ghost-dark-color-disabled, $btn-ghost-dark-bg-disabled, $btn-ghost-dark-bg-disabled, $btn-ghost-dark-bg-disabled, $btn-ghost-dark-border-color-disabled, $btn-ghost-dark-border-color-disabled, $btn-ghost-dark-border-color-disabled);`
442	`}`
443	`}`
444	`&#{$btn-prefix}-light {`
445	`@include button-color( $btn-ghost-light-color, $btn-ghost-light-color-hover, $btn-ghost-light-color-hover, $btn-ghost-light-bg-normal, $btn-ghost-light-bg-hover, $btn-ghost-light-bg-hover, $btn-ghost-light-border-color, $btn-ghost-light-border-color-hover, $btn-ghost-light-border-color-hover);`
446	`&.disabled,`
447	`&[disabled] {`
448	`@include button-color( $btn-ghost-light-color-disabled, $btn-ghost-light-color-disabled, $btn-ghost-light-color-disabled, $btn-ghost-light-bg-disabled, $btn-ghost-light-bg-disabled, $btn-ghost-light-bg-disabled, $btn-ghost-light-border-color-disabled, $btn-ghost-light-border-color-disabled, $btn-ghost-light-border-color-disabled);`
449	`}`
450	`}`
451	`}`
452
453	`/* 组合 */`
454	`/* ---------------------------------------- */`
455	`&-group {`
456	`position: relative;`
457	`display: inline-block;`
458	`vertical-align: middle;`
459
460	`> #{$btn-prefix} {`
461	`position: relative;`
462	`float: left;`
463	`box-shadow: none;`
464
465	`&:hover,`
466	`&:focus,`
467	`&:active,`
468	`&.active {`
469	`z-index: 1;`
470	`}`
471	`&.disabled,`
472	`&[disabled] {`
473	`z-index: 0;`
474	`}`
475	`}`
476
477	`#{$btn-prefix}#{$btn-prefix} {`
478	`margin: 0 0 0 -1px;`
479	`}`
480
481	`#{$btn-prefix}:not(:first-child):not(:last-child) {`
482	`border-radius: 0;`
483	`}`
484
485	`> #{$btn-prefix}:first-child {`
486	`margin: 0;`
487	`}`
488
489	`> #{$btn-prefix}:first-child:not(:last-child) {`
490	`border-bottom-right-radius: 0;`
491	`border-top-right-radius: 0;`
492	`}`
493
494	`> #{$btn-prefix}:last-child:not(:first-child) {`
495	`border-bottom-left-radius: 0;`
496	`border-top-left-radius: 0;`
497	`}`
498
499	`> #{$btn-prefix}-primary:not(:first-child) {`
500	`border-left-color: rgba($color-white, .2);`
501
502	`&:hover {`
503	`border-left-color: transparent;`
504	`}`
505	`&.disabled,`
506	`&[disabled] {`
507	`border-left-color: $color-line1-1;`
508	`}`
509	`}`
510	`}`
511	`}`
512
513	`@import './rtl.scss';`