1 | @import './mixins'
|
2 |
|
3 | .mgc{
|
4 | input-checkbox()
|
5 | input-checkbox-color(#fff,#d7d7d7,#414141)
|
6 | }
|
7 | .mgc-primary{
|
8 | input-checkbox-color(#337ab7,#337ab7,#fff)
|
9 | }
|
10 | .mgc-success{
|
11 | input-checkbox-color(#5cb85c,#5cb85c,#fff)
|
12 | }
|
13 | .mgc-info{
|
14 | input-checkbox-color(#5bc0de,#5bc0de,#fff)
|
15 | }
|
16 | .mgc-warning{
|
17 | input-checkbox-color(#f0ad4e,#f0ad4e,#fff)
|
18 | }
|
19 | .mgc-danger{
|
20 | input-checkbox-color(#cf3b3a,#cf3b3a,#fff)
|
21 | }
|
22 | .mgc-circle{
|
23 | border-radius 50%
|
24 | }
|
25 |
|
26 | .mgc-sm{
|
27 | width 12px
|
28 | height 12px
|
29 | &:checked:after{
|
30 | top 2px
|
31 | left 1px
|
32 | height 3px
|
33 | width 6px
|
34 | }
|
35 | }
|
36 | .mgc-lg{
|
37 | width 19px
|
38 | height 19px
|
39 | &:checked:after{
|
40 | top 3px
|
41 | left 3px
|
42 | height 5px
|
43 | width 10px
|
44 | }
|
45 | }
|
46 |
|
47 |
|
48 | input[type="radio"].mgr{
|
49 | input-radio()
|
50 | input-radio-color(#fff,#555555)
|
51 | }
|
52 | .mgr-primary{
|
53 | input-radio-color(#337ab7,#337ab7)
|
54 | }
|
55 | .mgr-success{
|
56 | input-radio-color(#5cb85c,#5cb85c)
|
57 | }
|
58 | .mgr-info{
|
59 | input-radio-color(#5bc0de,#5bc0de)
|
60 | }
|
61 | .mgr-warning{
|
62 | input-radio-color(#f0ad4e,#f0ad4e)
|
63 | }
|
64 | .mgr-danger{
|
65 | input-radio-color(#cf3b3a,#cf3b3a)
|
66 | }
|
67 | .mgr-sm{
|
68 | width 12px
|
69 | height 12px
|
70 | &:checked:before{
|
71 | height 6px
|
72 | width 6px
|
73 | border-radius 50%
|
74 | margin 2px 0 0 2px
|
75 | }
|
76 | }
|
77 | .mgr-lg{
|
78 | width 19px
|
79 | height 19px
|
80 | &:checked:before{
|
81 | height 11px
|
82 | width 11px
|
83 | border-radius 50%
|
84 | margin 3px 0 0 3px
|
85 | }
|
86 | }
|
87 |
|
88 |
|
89 | $mgcSwitchHeight ?= 24px;
|
90 | .mgc-switch{
|
91 | appearance: none;
|
92 | position: relative;
|
93 | width: 41px;
|
94 | height: $mgcSwitchHeight;
|
95 | border: 1px solid #DFDFDF;
|
96 | outline: 0;
|
97 | border-radius: 16px;
|
98 | box-sizing: border-box;
|
99 | background: #DFDFDF;
|
100 | &:before,&:after{
|
101 | content: " ";
|
102 | position: absolute;
|
103 | top: 0;
|
104 | left: 0;
|
105 | border-radius: 15px;
|
106 | transition:transform .3s;
|
107 | }
|
108 | &:before{
|
109 | width: 39px;
|
110 | height: $mgcSwitchHeight - 2;
|
111 | background-color: #FDFDFD;
|
112 | }
|
113 | &:after{
|
114 | width: $mgcSwitchHeight - 2;
|
115 | height: $mgcSwitchHeight - 2;
|
116 | background-color: #FFFFFF;
|
117 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
118 | }
|
119 | &:checked{
|
120 | border-color: #04BE02;
|
121 | background-color: #04BE02;
|
122 | &:before{
|
123 | transform: scale(0);
|
124 | }
|
125 | &:after{
|
126 | transform: translateX(17px);
|
127 | }
|
128 | }
|
129 | &:focus{
|
130 | outline: 0;
|
131 | }
|
132 | }
|
133 |
|
134 | $mgcSwitchHeight =20px
|
135 | .mgc-sm.mgc-switch{
|
136 | height: $mgcSwitchHeight;
|
137 | width: 32px;
|
138 | &:before{
|
139 | height: $mgcSwitchHeight - 2;
|
140 | width: 30px;
|
141 | }
|
142 | &:after{
|
143 | width: $mgcSwitchHeight - 2;
|
144 | height: $mgcSwitchHeight - 2;
|
145 | }
|
146 | &:checked{
|
147 | &:after{
|
148 | top: 0px;
|
149 | left: 2px;
|
150 | transform: translateX(10px);
|
151 | }
|
152 | }
|
153 | }
|
154 |
|
155 | $mgcSwitchHeight =32px
|
156 | .mgc-lg.mgc-switch{
|
157 | height: $mgcSwitchHeight;
|
158 | width: 52px;
|
159 | &:before{
|
160 | height: $mgcSwitchHeight - 2;
|
161 | width: 50px;
|
162 | }
|
163 | &:after{
|
164 | width: $mgcSwitchHeight - 2;
|
165 | height: $mgcSwitchHeight - 2;
|
166 | }
|
167 | &:checked{
|
168 | &:after{
|
169 | top: 0px;
|
170 | left: 2px;
|
171 | transform: translateX(18px);
|
172 | }
|
173 | }
|
174 | }
|