1 | .phoenix-radio {
|
2 | cursor: pointer;
|
3 | display: inline-block;
|
4 | font-size: 12px;
|
5 | color: #565e66;
|
6 | border-width: 1px;
|
7 | cursor: pointer;
|
8 | box-sizing: border-box;
|
9 | }
|
10 |
|
11 | .phoenix-radio--withLabel {
|
12 | min-width: 42px;
|
13 | }
|
14 |
|
15 | .phoenix-radio .flex {
|
16 | display: flex;
|
17 | display: -ms-flexbox;
|
18 | display: -webkit-flex;
|
19 | height: 100%;
|
20 | }
|
21 |
|
22 | .phoenix-radio .flex-vertical {
|
23 | display: flex;
|
24 | display: -ms-flexbox;
|
25 | display: -webkit-flex;
|
26 | flex-direction: column;
|
27 | }
|
28 |
|
29 | .phoenix-radio .flex-align-center {
|
30 | align-items: center;
|
31 | }
|
32 |
|
33 | .phoenix-radio * {
|
34 | font-family: "PingFang SC", "Hiragino Sans GB", STHeitiSC, Helvetica, "Helvetica Neue", "Microsoft YaHei", Tahoma;
|
35 | box-sizing: border-box;
|
36 | }
|
37 |
|
38 | @keyframes RadioEffect {
|
39 | 0% {
|
40 | transform: scale(0);
|
41 | opacity: 0;
|
42 | }
|
43 |
|
44 | 50% {
|
45 | transform: scale(1);
|
46 | opacity: 1;
|
47 | }
|
48 |
|
49 | 60% {
|
50 | transform: scale(1);
|
51 | opacity: 1;
|
52 | }
|
53 |
|
54 | 100% {
|
55 | transform: scale(0.875);
|
56 | opacity: 1;
|
57 | }
|
58 | }
|
59 |
|
60 | .phoenix-radio--disabled {
|
61 | cursor: not-allowed;
|
62 | }
|
63 |
|
64 | .phoenix-radio--vertical {
|
65 | display: block;
|
66 | margin-right: 0;
|
67 | }
|
68 |
|
69 | .phoenix-radio__wrapper {
|
70 | display: flex;
|
71 | display: -ms-flexbox;
|
72 | display: -webkit-flex;
|
73 | height: 100%;
|
74 | align-items: center;
|
75 | }
|
76 |
|
77 | .phoenix-radio__wrapper--vertical {
|
78 | justify-content: left;
|
79 | }
|
80 |
|
81 | .phoenix-radio__circle-wrapper {
|
82 | width: 16px;
|
83 | height: 16px;
|
84 | position: relative;
|
85 | display: block;
|
86 | flex-shrink: 0;
|
87 | }
|
88 |
|
89 | .phoenix-radio__circle-wrapper:hover .phoenix-radio__circle {
|
90 | border-color: #1d86f0;
|
91 | }
|
92 |
|
93 | .phoenix-radio__circle-wrapper:hover .phoenix-radio__circle--checked {
|
94 | border-color: #1d86f0;
|
95 | }
|
96 |
|
97 | .phoenix-radio__circle-wrapper:hover .phoenix-radio__circle--disabled {
|
98 | border-color: rgba(191, 195, 199, 0.5);
|
99 | }
|
100 |
|
101 | .phoenix-radio__circle-wrapper:hover .phoenix-radio__circle--disabledWithChecked {
|
102 | border-color: rgba(29, 134, 240, 0.5);
|
103 | }
|
104 |
|
105 | .phoenix-radio__circle {
|
106 | width: 14px;
|
107 | height: 14px;
|
108 | border-radius: 14px;
|
109 | background: white;
|
110 | border: 1px solid #bfc3c7;
|
111 | position: absolute;
|
112 | top: 50%;
|
113 | left: 50%;
|
114 | transform: translateX(-50%) translateY(-50%);
|
115 | }
|
116 |
|
117 | .phoenix-radio__circle--disabled {
|
118 | border: 1px solid rgba(191, 195, 199, 0.5);
|
119 | background: rgba(230, 232, 235, 0.3);
|
120 | }
|
121 |
|
122 | .phoenix-radio__circle--checked {
|
123 | border: 1px solid #1d86f0;
|
124 | }
|
125 |
|
126 | .phoenix-radio__circle--disabledWithChecked {
|
127 | border: 1px solid rgba(29, 134, 240, 0.5);
|
128 | background: white;
|
129 | }
|
130 |
|
131 | .phoenix-radio__dot {
|
132 | width: 6px;
|
133 | height: 6px;
|
134 | border-radius: 6px;
|
135 | position: absolute;
|
136 | left: 5px;
|
137 | top: 5px;
|
138 | transform-origin: 50% 50%;
|
139 | opacity: 0;
|
140 | background: #1d86f0;
|
141 | }
|
142 |
|
143 | .phoenix-radio__dot--checked {
|
144 | opacity: 1;
|
145 | }
|
146 |
|
147 | .phoenix-radio__dot--disabled {
|
148 | background: rgba(29, 134, 240, 0.5);
|
149 | }
|
150 |
|
151 | .phoenix-radio__dot--checkedWithRadioClicked {
|
152 | animation: RadioEffect 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
|
153 | }
|
154 |
|
155 | .phoenix-radio__radio-text {
|
156 | line-height: 20px;
|
157 | margin-left: 4px;
|
158 | color: #565e66;
|
159 | display: none;
|
160 | white-space: nowrap;
|
161 | text-overflow: ellipsis;
|
162 | overflow: hidden;
|
163 | }
|
164 |
|
165 | .phoenix-radio__radio-text--disabled {
|
166 | color: #bfc3c7;
|
167 | }
|
168 |
|
169 | .phoenix-radio__radio-text--appear {
|
170 | display: block;
|
171 | }
|
172 |
|
173 | .phoenix-radio__radio-text--fontMiddle {
|
174 | font-size: 14px;
|
175 | }
|
176 |
|
177 | .phoenix-radio__radio-text.color-M1 {
|
178 | color: #0e1114;
|
179 | }
|
180 |
|
181 | .phoenix-radio__radio-text.color-M2 {
|
182 | color: #33383d;
|
183 | }
|
184 |
|
185 | .phoenix-radio__radio-text.color-M3 {
|
186 | color: #565e66;
|
187 | }
|
188 |
|
189 | .phoenix-radio__radio-text.color-M4 {
|
190 | color: #83898f;
|
191 | }
|
192 |
|
193 | .phoenix-radio__radio-text.color-M5 {
|
194 | color: #bfc3c7;
|
195 | }
|