1 |
|
2 |
|
3 | .u-switch {
|
4 | position: relative;
|
5 | display: inline-block;
|
6 | box-sizing: border-box;
|
7 | width: 44px;
|
8 | height: 22px;
|
9 | line-height: 20px;
|
10 | vertical-align: middle;
|
11 | border-radius: 20px;
|
12 | border: 1px solid rgb(224,224,224);
|
13 | background-color: rgb(224,224,224);
|
14 | cursor: pointer;
|
15 | outline: 0;
|
16 | -webkit-transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
|
17 | transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
|
18 | -webkit-user-select: none;
|
19 | -moz-user-select: none;
|
20 | -ms-user-select: none;
|
21 | user-select: none; }
|
22 | .u-switch .u-switch-inner {
|
23 | color: #fff;
|
24 | position: absolute;
|
25 | font-size: 12px;
|
26 | left: 22px; }
|
27 | .u-switch:active:after {
|
28 | width: 24px; }
|
29 | .u-switch:focus {
|
30 | box-shadow: 0 0 0 2px rgba(16, 142, 233, 0.2);
|
31 | outline: 0; }
|
32 | .u-switch:after {
|
33 | position: absolute;
|
34 | width: 18px;
|
35 | height: 18px;
|
36 | top: 1px;
|
37 | left: 0;
|
38 | border-radius: 18px;
|
39 | background-color: #fff;
|
40 | content: " ";
|
41 | cursor: pointer;
|
42 | -webkit-transition: left 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), width 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
|
43 | transition: left 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), width 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); }
|
44 | .u-switch.is-checked {
|
45 | border-color: rgb(245, 60, 50);
|
46 | background-color: rgb(245, 60, 50); }
|
47 | .u-switch.is-checked .u-switch-inner {
|
48 | left: 8px; }
|
49 | .u-switch.is-checked:after {
|
50 | left: 24px; }
|
51 | .u-switch.is-checked:active:after {
|
52 | left: 16px; }
|
53 | .u-switch.u-switch-disabled {
|
54 | cursor: no-drop;
|
55 | background: #ccc;
|
56 | border-color: #ccc; }
|
57 | .u-switch.u-switch-disabled:after {
|
58 | background: #9e9e9e;
|
59 | animation-name: none;
|
60 | cursor: no-drop; }
|
61 | .u-switch.u-switch-disabled:hover:after {
|
62 | transform: scale(1);
|
63 | animation-name: none; }
|
64 |
|
65 | .u-switch.u-switch-sm {
|
66 | width: 32px;
|
67 | height: 16px;
|
68 | line-height: 12px; }
|
69 | .u-switch.u-switch-sm .u-switch-inner {
|
70 | color: #fff;
|
71 | position: absolute;
|
72 | font-size: 10px;
|
73 | left: 16px; }
|
74 | .u-switch.u-switch-sm:active:after {
|
75 | width: 16px; }
|
76 | .u-switch.u-switch-sm:after {
|
77 | width: 14px;
|
78 | height: 14px;
|
79 | top: 0;
|
80 | left: 0; }
|
81 | .u-switch.u-switch-sm.is-checked .u-switch-inner {
|
82 | left: 4px; }
|
83 | .u-switch.u-switch-sm.is-checked:after {
|
84 | left: 16px; }
|
85 | .u-switch.u-switch-sm.is-checked:active:after {
|
86 | left: 10px; }
|
87 |
|
88 | .u-switch.u-switch-lg {
|
89 | width: 60px;
|
90 | height: 30px;
|
91 | line-height: 12px; }
|
92 | .u-switch.u-switch-lg .u-switch-inner {
|
93 | color: #fff;
|
94 | position: absolute;
|
95 | font-size: 18px;
|
96 | left: 30px;
|
97 | top: 8px; }
|
98 | .u-switch.u-switch-lg:active:after {
|
99 | width: 32px; }
|
100 | .u-switch.u-switch-lg:after {
|
101 | width: 26px;
|
102 | height: 26px;
|
103 | top: 1px;
|
104 | left: 0; }
|
105 | .u-switch.u-switch-lg.is-checked .u-switch-inner {
|
106 | left: 8px; }
|
107 | .u-switch.u-switch-lg.is-checked:after {
|
108 | left: 32px; }
|
109 | .u-switch.u-switch-lg.is-checked:active:after {
|
110 | left: 26px; }
|
111 |
|
112 | .u-switch-primary.is-checked {
|
113 | background: rgb(245, 60, 50);
|
114 | border: 1px solid rgb(245, 60, 50); }
|
115 |
|
116 | .u-switch-info.is-checked {
|
117 | background: rgb(0,188,212);
|
118 | border: 1px solid rgb(0,188,212); }
|
119 |
|
120 | .is-checked.u-switch-danger {
|
121 | background: rgb(244,67,54);
|
122 | border: 1px solid rgb(244,67,54); }
|
123 |
|
124 | .u-switch-warning.is-checked {
|
125 | background: rgb(255,152,0);
|
126 | border: 1px solid rgb(255,152,0); }
|
127 |
|
128 | .u-switch-dark.is-checked {
|
129 | background: rgb(97,97,97);
|
130 | border: 1px solid rgb(97,97,97); }
|
131 |
|
132 | .u-switch-success.is-checked {
|
133 | background: rgb(76,175,80);
|
134 | border: 1px solid rgb(76,175,80); }
|