UNPKG

7.88 kBCSSView Raw
1/* FormGroup */
2/* Navlayout */
3.u-radio-group {
4 position: relative;
5 display: inline-block; }
6
7.u-radio-group .u-radio-button:first-child:not(:last-child):not(.dropdown-toggle) {
8 border-top-right-radius: 0;
9 border-bottom-right-radius: 0; }
10
11.u-radio-group .u-radio-button:not(:first-child):not(:last-child):not(.dropdown-toggle) {
12 border-radius: 0; }
13
14.u-radio-group .u-radio-button {
15 position: relative;
16 float: left;
17 display: inline-block;
18 padding: 6px 12px;
19 margin-bottom: 0;
20 font-size: 12px;
21 font-weight: 400;
22 line-height: 12px;
23 text-align: center;
24 white-space: nowrap;
25 vertical-align: middle;
26 -ms-touch-action: manipulation;
27 touch-action: manipulation;
28 cursor: pointer;
29 -webkit-user-select: none;
30 -moz-user-select: none;
31 -ms-user-select: none;
32 user-select: none;
33 background-image: none;
34 border: 1px solid transparent;
35 border-radius: 3px;
36 color: #212121;
37 background-color: #fff;
38 border-color: rgb(165, 173, 186);
39 z-index: 10; }
40 .u-radio-group .u-radio-button:first-child {
41 margin-left: 0;
42 border-radius: 3px 0 0 3px; }
43 .u-radio-group .u-radio-button:last-child {
44 border-radius: 0 3px 3px 0;
45 border-right: 1px solid rgb(165, 173, 186); }
46 .u-radio-group .u-radio-button.u-radio-button-lg {
47 height: 42px;
48 line-height: 26px; }
49 .u-radio-group .u-radio-button.u-radio-button-sm {
50 height: 22px;
51 line-height: 20px;
52 padding: 0 12px; }
53 .u-radio-group .u-radio-button.sm:first-child {
54 border-radius: 2px 0 0 2px; }
55 .u-radio-group .u-radio-button:hover, .u-radio-group .u-radio-button:focus {
56 position: relative; }
57 .u-radio-group .u-radio-button input {
58 position: absolute;
59 left: 2px;
60 z-index: 3;
61 cursor: pointer;
62 opacity: 0;
63 top: 7px;
64 bottom: 0;
65 right: 0;
66 box-sizing: border-box;
67 padding: 0;
68 width: 100%; }
69 .u-radio-group .u-radio-button.is-checked {
70 border-color: rgb(245, 60, 50); }
71 .u-radio-group .u-radio-button.is-checked .u-radio-button-label {
72 color: #fff; }
73 .u-radio-group .u-radio-button.is-checked.disabled, .u-radio-group .u-radio-button.is-checked.disabled:hover {
74 border-color: #c1c7d0;
75 background-color: #c1c7d0; }
76 .u-radio-group .u-radio-button.is-checked.disabled .u-radio-button-label {
77 color: #fff; }
78 .u-radio-group .u-radio-button.disabled {
79 z-index: 1;
80 border-color: #DFE1E6;
81 background-color: #F7F9FB;
82 cursor: not-allowed;
83 color: #909090; }
84 .u-radio-group .u-radio-button.disabled span, .u-radio-group .u-radio-button.disabled label, .u-radio-group .u-radio-button.disabled input[type='radio'] {
85 cursor: not-allowed; }
86 .u-radio-group .u-radio-button.disabled:hover {
87 border-color: #DFE1E6;
88 background-color: #F7F9FB;
89 color: #909090;
90 box-shadow: none;
91 cursor: not-allowed; }
92 .u-radio-group .u-radio-button:hover, .u-radio-group .u-radio-button.is-checked {
93 background: rgb(235, 236, 240); }
94 .u-radio-group .u-radio-button:focus, .u-radio-group .u-radio-button.focus, .u-radio-group .u-radio-button:active, .u-radio-group .u-radio-button.active, .u-radio-group .u-radio-button.is-checked {
95 border-color: rgb(245, 60, 50);
96 background: rgb(245, 60, 50);
97 color: #fff; }
98
99.u-radio-group .u-radio-button + .u-radio-button, .u-radio-group .u-radio-button + .u-radio-group, .u-radio-group .u-radio-group + .u-radio-button, .u-radio-group .u-radio-group + .u-radio-group {
100 margin-left: -1px; }
101
102.u-radio {
103 position: relative;
104 line-height: 18px; }
105 .u-radio input[type='radio'] {
106 position: absolute;
107 z-index: 3;
108 cursor: pointer;
109 opacity: 0;
110 top: 1px;
111 box-sizing: border-box;
112 padding: 0;
113 width: 100%;
114 height: 100%; }
115 .u-radio input[type='radio']:focus + .u-radio-label:before {
116 border-color: rgb(245, 60, 50); }
117 .u-radio.is-checked .u-radio-label:before {
118 box-shadow: inset 0 0 0 10px rgb(255,255,255);
119 border-color: rgb(165, 173, 186); }
120 .u-radio.is-checked .u-radio-label:after {
121 position: absolute;
122 top: 6px;
123 border-radius: 4px;
124 height: 6px;
125 width: 6px;
126 background: rgb(245, 60, 50);
127 margin-left: 5px; }
128 .u-radio.is-checked.u-radio-inverse .u-radio-label:before {
129 box-shadow: inset 0 0 0 10px rgb(245, 60, 50);
130 border-color: rgb(245, 60, 50); }
131 .u-radio.is-checked.u-radio-inverse .u-radio-label:after {
132 background: rgb(255,255,255); }
133 .u-radio.u-radio-noContent .u-radio-label:after {
134 top: -7px; }
135 .u-radio.u-radio-noContent.u-radio .u-radio-label:before {
136 bottom: -4px; }
137 .u-radio.disabled {
138 cursor: not-allowed; }
139 .u-radio.disabled input[type='radio'] {
140 cursor: not-allowed; }
141 .u-radio.disabled .u-radio-label {
142 color: #909090; }
143 .u-radio.disabled .u-radio-label:before {
144 border-color: #DFE1E6; }
145 .u-radio.disabled.is-checked .u-radio-label {
146 color: #909090; }
147 .u-radio.disabled.is-checked .u-radio-label:after {
148 background: #c1c7d0; }
149 .u-radio .u-radio-label {
150 font-size: 12px;
151 cursor: pointer;
152 display: inline-block;
153 position: relative;
154 padding-left: 24px;
155 margin-right: 16px;
156 color: #212121; }
157 .u-radio .u-radio-label:before {
158 border-radius: 50%;
159 border: 2px solid rgb(165, 173, 186);
160 background-color: #fff;
161 content: '';
162 font-family: 'uf';
163 display: inline-block;
164 width: 16px;
165 height: 16px;
166 left: 0;
167 bottom: 1px;
168 text-align: center;
169 position: absolute; }
170 .u-radio .u-radio-label:after {
171 content: '';
172 font-family: 'uf';
173 display: inline-block;
174 width: 16px;
175 height: 16px;
176 left: 0;
177 bottom: 0;
178 text-align: center;
179 position: absolute; }
180
181.u-radio.u-radio-success.is-checked .u-radio-label:before {
182 box-shadow: inset 0 0 0 10px #fff;
183 border-color: rgb(165, 173, 186); }
184
185.u-radio.u-radio-success.is-checked .u-radio-label:after {
186 background: rgb(76,175,80); }
187
188.u-radio.u-radio-success .u-radio-label {
189 color: rgb(76,175,80); }
190
191.u-radio.u-radio-success input[type='radio']:focus + .u-radio-label:before {
192 border-color: rgb(76,175,80); }
193
194.u-radio.u-radio-warning.is-checked .u-radio-label:before {
195 box-shadow: inset 0 0 0 10px #fff;
196 border-color: rgb(165, 173, 186); }
197
198.u-radio.u-radio-warning.is-checked .u-radio-label:after {
199 background: rgb(255,152,0); }
200
201.u-radio.u-radio-warning .u-radio-label {
202 color: rgb(255,152,0); }
203
204.u-radio.u-radio-warning input[type='radio']:focus + .u-radio-label:before {
205 border-color: rgb(255,152,0); }
206
207.u-radio.u-radio-danger.is-checked .u-radio-label:before {
208 box-shadow: inset 0 0 0 10px #fff;
209 border-color: rgb(165, 173, 186); }
210
211.u-radio.u-radio-danger.is-checked .u-radio-label:after {
212 background: rgb(244,67,54); }
213
214.u-radio.u-radio-danger .u-radio-label {
215 color: rgb(244,67,54); }
216
217.u-radio.u-radio-danger input[type='radio']:focus + .u-radio-label:before {
218 border-color: rgb(244,67,54); }
219
220.u-radio.u-radio-info.is-checked .u-radio-label:before {
221 box-shadow: inset 0 0 0 10px #fff;
222 border-color: rgb(165, 173, 186); }
223
224.u-radio.u-radio-info.is-checked .u-radio-label:after {
225 background: rgb(0,188,212); }
226
227.u-radio.u-radio-info .u-radio-label {
228 color: rgb(0,188,212); }
229
230.u-radio.u-radio-info input[type='radio']:focus + .u-radio-label:before {
231 border-color: rgb(0,188,212); }
232
233.u-radio.u-radio-dark.is-checked .u-radio-label:before {
234 box-shadow: inset 0 0 0 10px #fff;
235 border-color: rgb(165, 173, 186); }
236
237.u-radio.u-radio-dark.is-checked .u-radio-label:after {
238 background: rgb(97,97,97); }
239
240.u-radio.u-radio-dark .u-radio-label {
241 color: rgb(97,97,97); }
242
243.u-radio.u-radio-dark input[type='radio']:focus + .u-radio-label:before {
244 border-color: rgb(97,97,97); }
245
246.demo3 .u-radio-group .u-radio {
247 margin-bottom: 8px; }
248
249/*# sourceMappingURL=demo.css.map */