1 | @charset "UTF-8";
|
2 | @keyframes s-button-click-animation {
|
3 | 0% {
|
4 | border-width: 0; }
|
5 | 100% {
|
6 | border-width: 6px; } }
|
7 |
|
8 | @keyframes s-button-click-animation-2 {
|
9 | 0% {
|
10 | opacity: 0.2; }
|
11 | 100% {
|
12 | opacity: 0; } }
|
13 |
|
14 | .s-circle.s-button, .s-button.s-round {
|
15 | border-radius: 40px; }
|
16 |
|
17 | .s-button.s-small {
|
18 | height: 24px;
|
19 | font-size: 14px;
|
20 | padding-left: 7px;
|
21 | padding-right: 7px; }
|
22 | .s-circle.s-button.s-small {
|
23 | width: 24px;
|
24 | padding: 0; }
|
25 |
|
26 | .s-button {
|
27 | height: 32px;
|
28 | font-size: 14px;
|
29 | padding-left: 12px;
|
30 | padding-right: 12px;
|
31 | border-radius: 4px; }
|
32 | .s-circle.s-button {
|
33 | width: 32px;
|
34 | padding: 0; }
|
35 |
|
36 | .s-button.s-large {
|
37 | height: 40px;
|
38 | font-size: 16px;
|
39 | padding-left: 15px;
|
40 | padding-right: 15px; }
|
41 | .s-circle.s-button.s-large {
|
42 | padding: 0;
|
43 | width: 40px; }
|
44 |
|
45 | .s-button {
|
46 | font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
47 | user-select: none;
|
48 | -webkit-user-select: none;
|
49 | transition: all .3s;
|
50 | box-sizing: border-box;
|
51 | box-shadow: 0 2px #fafafa;
|
52 | border: 1px solid #d9d9d9;
|
53 | background: #fff;
|
54 | color: #595959;
|
55 | vertical-align: middle;
|
56 | display: inline-flex;
|
57 | justify-content: center;
|
58 | align-items: center;
|
59 | margin: 0;
|
60 | cursor: pointer;
|
61 | position: relative; }
|
62 | .s-button::after {
|
63 | display: none; }
|
64 | .s-button[data-click-animating]::after {
|
65 | content: '';
|
66 | position: absolute;
|
67 | display: block;
|
68 | width: 100%;
|
69 | height: 100%;
|
70 | border-radius: inherit;
|
71 | border: 0 solid #1890ff;
|
72 | animation: s-button-click-animation 0.4s cubic-bezier(0.08, 0.82, 0.17, 1), s-button-click-animation-2 2s cubic-bezier(0.08, 0.82, 0.17, 1); }
|
73 | .s-button.s-icon-only:not(.s-circle) {
|
74 | padding-left: 8px !important;
|
75 | padding-right: 8px !important; }
|
76 | .s-button:focus {
|
77 | outline: none; }
|
78 | .s-button:hover {
|
79 | color: #40a9ff;
|
80 | border-color: #40a9ff; }
|
81 | .s-button:active {
|
82 | color: #096dd9;
|
83 | border-color: #096dd9; }
|
84 | .s-button.s-primary {
|
85 | color: #fff;
|
86 | background-color: #1890ff;
|
87 | border-color: #1890ff; }
|
88 | .s-button.s-primary:hover {
|
89 | background-color: #40a9ff;
|
90 | border-color: #40a9ff; }
|
91 | .s-button.s-primary:active {
|
92 | background-color: #096dd9;
|
93 | border-color: #096dd9; }
|
94 | .s-button.s-danger {
|
95 | color: #ff4d4f;
|
96 | background-color: whitesmoke; }
|
97 | .s-button.s-danger:hover {
|
98 | color: #fff;
|
99 | background-color: #ff4d4f;
|
100 | border-color: #ff4d4f; }
|
101 | .s-button.s-danger:active {
|
102 | background-color: #f5222d;
|
103 | border-color: #f5222d; }
|
104 | .s-button.s-danger::after {
|
105 | border-color: #ff4d4f; }
|
106 | .s-button.s-dashed {
|
107 | border-style: dashed; }
|
108 | .s-button:disabled {
|
109 | background-color: whitesmoke !important;
|
110 | border-color: #d9d9d9 !important;
|
111 | color: #bfbfbf !important;
|
112 | cursor: not-allowed !important; }
|
113 | .s-button span + .s-icon, .s-button .s-icon + span {
|
114 | margin-left: 8px; }
|
115 |
|
116 | .s-button-group {
|
117 | display: inline-block; }
|
118 | .s-button-group > .s-button {
|
119 | margin-right: 0;
|
120 | position: relative;
|
121 | z-index: 0; }
|
122 | .s-button-group > .s-button:focus:not(.s-primary) {
|
123 | z-index: 1 !important; }
|
124 | .s-button-group > .s-button:hover:not(.s-primary) {
|
125 | z-index: 2 !important; }
|
126 | .s-button-group > .s-button:not(:first-child) {
|
127 | margin-left: -1px; }
|
128 | .s-button-group > .s-button:not(:first-child).s-primary {
|
129 | border-left-color: #40a9ff; }
|
130 | .s-button-group > .s-button:not(:first-child):not(:last-child) {
|
131 | border-radius: 0; }
|
132 | .s-button-group > .s-button:first-child {
|
133 | border-top-right-radius: 0;
|
134 | border-bottom-right-radius: 0; }
|
135 | .s-button-group > .s-button:last-child {
|
136 | border-top-left-radius: 0;
|
137 | border-bottom-left-radius: 0; }
|
138 |
|
139 | .s-icon {
|
140 | width: 1em;
|
141 | height: 1em;
|
142 | display: inline-block;
|
143 | fill: currentColor;
|
144 | vertical-align: top; }
|
145 |
|