UNPKG

2.79 kBSCSSView Raw
1@mixin next-button-size-rtl(
2 $padding,
3 $icon-margin,
4 $icon-size,
5 $corner
6) {
7 border-radius: $corner;
8 & > #{$btn-prefix}-icon#{$btn-icon-prefix}-first {
9 @include icon-size($icon-size, $icon-margin, 0);
10 }
11 & > #{$btn-prefix}-icon#{$btn-icon-prefix}-last {
12 @include icon-size($icon-size, 0, $icon-margin);
13 }
14
15 &#{$btn-prefix}-loading {
16 padding-left: $padding;
17 padding-right: calc(#{$padding} + #{$icon-size} + #{$icon-margin});
18
19 &:after {
20 right: $padding;
21 top: 50%;
22 margin-right: 0;
23 margin-left: $icon-margin;
24 }
25 }
26}
27
28/* 组合 */
29/* ---------------------------------------- */
30#{$btn-prefix}-group[dir="rtl"] {
31 > #{$btn-prefix} {
32 float: right;
33 }
34
35 #{$btn-prefix}#{$btn-prefix} {
36 margin: 0 -1px 0 0;
37 }
38
39 > #{$btn-prefix}:first-child:not(:last-child) {
40 border-bottom-left-radius: 0;
41 border-top-left-radius: 0;
42 }
43
44 > #{$btn-prefix}:last-child:not(:first-child) {
45 border-bottom-right-radius: 0;
46 border-top-right-radius: 0;
47 }
48
49 > #{$btn-prefix}-primary:not(:first-child) {
50 border-right-color: rgba($color-white, .2);
51
52 &:hover {
53 border-right-color: transparent;
54 }
55 &.disabled,
56 &[disabled] {
57 border-right-color: $color-line1-1;
58 }
59 }
60}
61
62
63/* 尺寸维度 */
64/* ---------------------------------------- */
65#{$btn-prefix}.#{$css-prefix} {
66 &small[dir="rtl"] {
67 @include next-button-size-rtl(
68 $btn-size-s-padding,
69 $btn-size-s-icon-margin,
70 $btn-size-s-icon-size,
71 $btn-size-s-corner
72 );
73 }
74 &medium[dir="rtl"] {
75 @include next-button-size-rtl(
76 $btn-size-m-padding,
77 $btn-size-m-icon-margin,
78 $btn-size-m-icon-size,
79 $btn-size-m-corner
80 );
81 }
82 &large[dir="rtl"] {
83 @include next-button-size-rtl(
84 $btn-size-l-padding,
85 $btn-size-l-icon-margin,
86 $btn-size-l-icon-size,
87 $btn-size-l-corner
88 );
89 }
90}
91
92/* 文本按钮 */
93#{$btn-prefix}-text[dir="rtl"] {
94 &.#{$css-prefix}large {
95 @include next-button-size-rtl(
96 0px,
97 $btn-text-icon-l-margin,
98 $btn-size-l-icon-size,
99 0
100 );
101 }
102 &.#{$css-prefix}medium {
103 @include next-button-size-rtl(
104 0px,
105 $btn-text-icon-m-margin,
106 $btn-size-m-icon-size,
107 0
108 );
109 }
110 &.#{$css-prefix}small {
111 @include next-button-size-rtl(
112 0px,
113 $btn-text-icon-s-margin,
114 $btn-size-s-icon-size,
115 0
116 );
117 }
118}
119