1 | .phoenix-checkbox {
|
2 | position: relative;
|
3 | line-height: 0;
|
4 | box-sizing: border-box;
|
5 | display: inline-block;
|
6 | font-family: "PingFang SC", "Hiragino Sans GB", STHeitiSC, Helvetica, "Helvetica Neue", "Microsoft YaHei", Tahoma;
|
7 | font-size: 12px;
|
8 | margin: 0;
|
9 | padding: 0;
|
10 | cursor: pointer;
|
11 | min-width: 42px;
|
12 | max-width: 100%;
|
13 | }
|
14 |
|
15 | .phoenix-checkbox--disabled {
|
16 | cursor: not-allowed;
|
17 | }
|
18 |
|
19 | .phoenix-checkbox__box {
|
20 | box-sizing: border-box;
|
21 | margin: 0;
|
22 | padding: 0;
|
23 | position: relative;
|
24 | display: inline-block;
|
25 | outline: none;
|
26 | cursor: pointer;
|
27 | vertical-align: middle;
|
28 | }
|
29 |
|
30 | .phoenix-checkbox__box::after {
|
31 | opacity: 0;
|
32 | transform: rotate(0) scale(1) translate(-50%, -50%);
|
33 | border: none;
|
34 | width: 0px;
|
35 | top: 50%;
|
36 | left: 50%;
|
37 | height: 1px;
|
38 | background-color: #fff;
|
39 | position: absolute;
|
40 | display: table;
|
41 | content: ' ';
|
42 | transition: all .2s ease-in .1s;
|
43 | }
|
44 |
|
45 | .phoenix-checkbox__box--partialChecked::after {
|
46 | opacity: 1;
|
47 | width: 8px;
|
48 | transition: all 0.4s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
|
49 | }
|
50 |
|
51 | .phoenix-checkbox__input {
|
52 | box-sizing: border-box;
|
53 | padding: 0;
|
54 | margin: 0;
|
55 | position: absolute;
|
56 | top: 0;
|
57 | right: 0;
|
58 | left: 0;
|
59 | bottom: 0;
|
60 | z-index: 1;
|
61 | width: 100%;
|
62 | height: 100%;
|
63 | opacity: 0;
|
64 | cursor: pointer;
|
65 | }
|
66 |
|
67 | .phoenix-checkbox__input--disabled {
|
68 | cursor: not-allowed;
|
69 | }
|
70 |
|
71 | .phoenix-checkbox__realInput {
|
72 | border: 1px solid rgba(191, 195, 199, 0.7);
|
73 | background-color: rgba(255, 255, 255, 0.7);
|
74 | position: relative;
|
75 | top: 0;
|
76 | left: 0;
|
77 | display: block;
|
78 | width: 14px;
|
79 | height: 14px;
|
80 | border-radius: 2px;
|
81 | border-collapse: separate;
|
82 | transition: all .3s;
|
83 | box-sizing: border-box;
|
84 | }
|
85 |
|
86 | .phoenix-checkbox__realInput--checked, .phoenix-checkbox__realInput--partialChecked {
|
87 | background-color: #1d86f0;
|
88 | border: 1px solid #1d86f0;
|
89 | }
|
90 |
|
91 | .phoenix-checkbox__realInput--disabled {
|
92 | background-color: rgba(230, 232, 235, 0.3);
|
93 | border: 1px solid rgba(191, 195, 199, 0.5);
|
94 | }
|
95 |
|
96 | .phoenix-checkbox__realInput--disabledChecked {
|
97 | background-color: rgba(29, 134, 240, 0.5);
|
98 | border: 1px solid rgba(29, 134, 240, 0);
|
99 | }
|
100 |
|
101 | .phoenix-checkbox__realInput::after {
|
102 | box-sizing: border-box;
|
103 | position: absolute;
|
104 | top: 1px;
|
105 | left: 4px;
|
106 | width: 4px;
|
107 | height: 7px;
|
108 | border: 1px solid #fff;
|
109 | border-top: 0;
|
110 | border-left: 0;
|
111 | opacity: 0;
|
112 | transform: rotate(45deg) scale(0);
|
113 | transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
|
114 | content: ' ';
|
115 | }
|
116 |
|
117 | .phoenix-checkbox__realInput--checked::after {
|
118 | transform: rotate(45deg) scale(1);
|
119 | transition: all 0.3s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
|
120 | opacity: 1;
|
121 | }
|
122 |
|
123 | .phoenix-checkbox__text {
|
124 | margin-left: 4px;
|
125 | color: #565e66;
|
126 | display: inline-block;
|
127 | font-family: "PingFang SC", "Hiragino Sans GB", STHeitiSC, Helvetica, "Helvetica Neue", "Microsoft YaHei", Tahoma;
|
128 | white-space: nowrap;
|
129 | text-overflow: ellipsis;
|
130 | overflow: hidden;
|
131 | width: calc(100% - 18px);
|
132 | vertical-align: middle;
|
133 | line-height: 20px;
|
134 | }
|
135 |
|
136 | .phoenix-checkbox__text--fontMiddle {
|
137 | font-size: 14px;
|
138 | }
|
139 |
|
140 | .phoenix-checkbox__text.color-M1 {
|
141 | color: #0e1114;
|
142 | }
|
143 |
|
144 | .phoenix-checkbox__text.color-M2 {
|
145 | color: #33383d;
|
146 | }
|
147 |
|
148 | .phoenix-checkbox__text.color-M3 {
|
149 | color: #565e66;
|
150 | }
|
151 |
|
152 | .phoenix-checkbox__text.color-M4 {
|
153 | color: #83898f;
|
154 | }
|
155 |
|
156 | .phoenix-checkbox__text.color-M5 {
|
157 | color: #bfc3c7;
|
158 | }
|
159 |
|
160 | .phoenix-checkbox__text.phoenix-checkbox__text--disabled {
|
161 | color: #bfc3c7;
|
162 | }
|
163 |
|
164 | .phoenix-checkbox__text::before {
|
165 | content: '';
|
166 | display: block;
|
167 | }
|
168 |
|
169 | .phoenix-checkbox:hover .phoenix-checkbox__realInput {
|
170 | border: 1px solid #1d86f0;
|
171 | }
|
172 |
|
173 | .phoenix-checkbox:hover .phoenix-checkbox__realInput--checked, .phoenix-checkbox:hover .phoenix-checkbox__realInput--partialChecked {
|
174 | border: 1px solid #106ecc;
|
175 | background-color: #106ecc;
|
176 | }
|
177 |
|
178 | .phoenix-checkbox:hover .phoenix-checkbox__realInput--disabled {
|
179 | background-color: rgba(230, 232, 235, 0.3);
|
180 | border: 1px solid rgba(191, 195, 199, 0.5);
|
181 | }
|
182 |
|
183 | .phoenix-checkbox:hover .phoenix-checkbox__realInput--disabledChecked {
|
184 | background-color: rgba(29, 134, 240, 0.5);
|
185 | border: 1px solid rgba(29, 134, 240, 0);
|
186 | }
|