Skip to content

Commit f79880d

Browse files
jaywcjlovejaywcjlove
committed
add file.
1 parent 6ce0540 commit f79880d

10 files changed

+785
-0
lines changed

‎README.md

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
2+
# magic-input
3+
4+
CSS3 Styles for Checkbox and Radio Button inputs look prettier. [Live demo](#)
5+
6+
7+
# Usage
8+
9+
Include `dist/magic-input.css` or `dist/magic-input.min.css` in your html. If your use [Stylus](https://github.com/stylus/stylus) use `magic-input.styl`
10+
11+
```html
12+
<link rel="stylesheet" type="text/css" href="dist/magic-input.min.css">
13+
```
14+
15+
## Checkbox iPhone Style
16+
17+
```html
18+
<input type="checkbox" class="mgc-switch mgc-sm" checked />
19+
<input type="checkbox" class="mgc-switch" />
20+
<input type="checkbox" class="mgc-switch mgc-lg" checked />
21+
```
22+
23+
## Checkbox
24+
25+
```html
26+
<input type="checkbox" class="mgc" checked/> Default
27+
<input type="checkbox" class="mgc mgc-primary" checked /> Primary
28+
<input type="checkbox" class="mgc mgc-success" /> Success
29+
<input type="checkbox" class="mgc mgc-info" checked /> Info
30+
<input type="checkbox" class="mgc mgc-warning" checked /> Warning
31+
<input type="checkbox" class="mgc mgc-danger" checked /> Danger
32+
```
33+
34+
35+
## Radios
36+
37+
```html
38+
<input type="radio" name="radio3" class="mgr mgr-sm"/> Default
39+
<input type="radio" name="radio3" class="mgr mgr-primary" /> Primary
40+
<input type="radio" name="radio3" class="mgr mgr-success mgr-lg" checked/> Success
41+
<input type="radio" name="radio3" class="mgr mgr-info mgr-sm" /> Info
42+
<input type="radio" name="radio3" class="mgr mgr-warning" /> Warning
43+
<input type="radio" name="radio3" class="mgr mgr-danger mgr-lg" /> Danger
44+
```
45+
46+
## Sizing Class
47+
48+
`sm` for `small` , `lg` for `large`
49+
50+
### For Checkbox
51+
52+
`mgc-sm` `mgc-lg`
53+
54+
### For Radio Button
55+
56+
`mgr-sm` `mgr-lg`
57+
58+
59+
## Colorize Class
60+
61+
### For Checkbox
62+
63+
`mgc-primary` `mgc-info` `mgc-success` `mgc-warning` `mgc-danger`
64+
65+
### For Radio Button
66+
67+
`mgr-primary` `mgr-info` `mgr-success` `mgr-warning` `mgr-danger`

‎dist/magic-input.css

Lines changed: 316 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,316 @@
1+
.mgc {
2+
position: relative;
3+
width: 16px;
4+
height: 16px;
5+
background-clip: border-box;
6+
-webkit-appearance: none;
7+
-moz-appearance: none;
8+
appearance: none;
9+
margin: -0.15px 0.6px 0 0;
10+
vertical-align: text-bottom;
11+
border-radius: 3px;
12+
-webkit-transition: background-color 0.25s;
13+
transition: background-color 0.25s;
14+
background-color: #fff;
15+
border: 1px solid #d7d7d7;
16+
}
17+
.mgc:checked:after {
18+
content: '';
19+
display: block;
20+
height: 4px;
21+
width: 7px;
22+
border: 0 solid #333;
23+
border-width: 0 0 2px 2px;
24+
-webkit-transform: rotate(-45deg);
25+
transform: rotate(-45deg);
26+
position: absolute;
27+
top: 3px;
28+
left: 3px;
29+
}
30+
.mgc:disabled {
31+
opacity: 0.65;
32+
}
33+
.mgc:focus {
34+
outline: none;
35+
box-shadow: inset 0 1px 1px rgba(255,255,255,0.075), 0 0px 2px #38a7ff;
36+
}
37+
.mgc:checked {
38+
background-color: #fff;
39+
border-color: #d7d7d7;
40+
}
41+
.mgc:checked:after {
42+
border-color: #414141;
43+
}
44+
.mgc-primary {
45+
background-color: #fff;
46+
border: 1px solid #d7d7d7;
47+
}
48+
.mgc-primary:checked {
49+
background-color: #337ab7;
50+
border-color: #337ab7;
51+
}
52+
.mgc-primary:checked:after {
53+
border-color: #fff;
54+
}
55+
.mgc-success {
56+
background-color: #fff;
57+
border: 1px solid #d7d7d7;
58+
}
59+
.mgc-success:checked {
60+
background-color: #5cb85c;
61+
border-color: #5cb85c;
62+
}
63+
.mgc-success:checked:after {
64+
border-color: #fff;
65+
}
66+
.mgc-info {
67+
background-color: #fff;
68+
border: 1px solid #d7d7d7;
69+
}
70+
.mgc-info:checked {
71+
background-color: #5bc0de;
72+
border-color: #5bc0de;
73+
}
74+
.mgc-info:checked:after {
75+
border-color: #fff;
76+
}
77+
.mgc-warning {
78+
background-color: #fff;
79+
border: 1px solid #d7d7d7;
80+
}
81+
.mgc-warning:checked {
82+
background-color: #f0ad4e;
83+
border-color: #f0ad4e;
84+
}
85+
.mgc-warning:checked:after {
86+
border-color: #fff;
87+
}
88+
.mgc-danger {
89+
background-color: #fff;
90+
border: 1px solid #d7d7d7;
91+
}
92+
.mgc-danger:checked {
93+
background-color: #cf3b3a;
94+
border-color: #cf3b3a;
95+
}
96+
.mgc-danger:checked:after {
97+
border-color: #fff;
98+
}
99+
.mgc-circle {
100+
border-radius: 50%;
101+
}
102+
.mgc-sm {
103+
width: 12px;
104+
height: 12px;
105+
}
106+
.mgc-sm:checked:after {
107+
top: 2px;
108+
left: 1px;
109+
height: 3px;
110+
width: 6px;
111+
}
112+
.mgc-lg {
113+
width: 19px;
114+
height: 19px;
115+
}
116+
.mgc-lg:checked:after {
117+
top: 3px;
118+
left: 3px;
119+
height: 5px;
120+
width: 10px;
121+
}
122+
.mgr {
123+
position: relative;
124+
width: 16px;
125+
height: 16px;
126+
background-clip: border-box;
127+
-webkit-appearance: none;
128+
-moz-appearance: none;
129+
appearance: none;
130+
margin: -0.15px 0.6px 0 0;
131+
vertical-align: text-bottom;
132+
border-radius: 50%;
133+
background-color: #fff;
134+
border: 1px solid #d7d7d7;
135+
}
136+
.mgr:disabled {
137+
opacity: 0.65;
138+
}
139+
.mgr:before {
140+
content: '';
141+
display: block;
142+
height: 0px;
143+
width: 0px;
144+
-webkit-transition: width 0.25s, height 0.25s;
145+
transition: width 0.25s, height 0.25s;
146+
}
147+
.mgr:checked:before {
148+
height: 8px;
149+
width: 8px;
150+
border-radius: 50%;
151+
margin: 3px 0 0 3px;
152+
}
153+
.mgr:focus {
154+
outline: none;
155+
box-shadow: inset 0 1px 1px rgba(255,255,255,0.075), 0 0px 2px #38a7ff;
156+
}
157+
.mgr:checked {
158+
border: 1px solid #555;
159+
}
160+
.mgr:checked:before {
161+
background-color: #555;
162+
}
163+
.mgr-primary {
164+
background-color: #fff;
165+
border: 1px solid #d7d7d7;
166+
}
167+
.mgr-primary:checked {
168+
border: 1px solid #337ab7;
169+
}
170+
.mgr-primary:checked:before {
171+
background-color: #337ab7;
172+
}
173+
.mgr-success {
174+
background-color: #fff;
175+
border: 1px solid #d7d7d7;
176+
}
177+
.mgr-success:checked {
178+
border: 1px solid #5cb85c;
179+
}
180+
.mgr-success:checked:before {
181+
background-color: #5cb85c;
182+
}
183+
.mgr-info {
184+
background-color: #fff;
185+
border: 1px solid #d7d7d7;
186+
}
187+
.mgr-info:checked {
188+
border: 1px solid #5bc0de;
189+
}
190+
.mgr-info:checked:before {
191+
background-color: #5bc0de;
192+
}
193+
.mgr-warning {
194+
background-color: #fff;
195+
border: 1px solid #d7d7d7;
196+
}
197+
.mgr-warning:checked {
198+
border: 1px solid #f0ad4e;
199+
}
200+
.mgr-warning:checked:before {
201+
background-color: #f0ad4e;
202+
}
203+
.mgr-danger {
204+
background-color: #fff;
205+
border: 1px solid #d7d7d7;
206+
}
207+
.mgr-danger:checked {
208+
border: 1px solid #cf3b3a;
209+
}
210+
.mgr-danger:checked:before {
211+
background-color: #cf3b3a;
212+
}
213+
.mgr-sm {
214+
width: 12px;
215+
height: 12px;
216+
}
217+
.mgr-sm:checked:before {
218+
height: 6px;
219+
width: 6px;
220+
border-radius: 50%;
221+
margin: 2px 0 0 2px;
222+
}
223+
.mgr-lg {
224+
width: 19px;
225+
height: 19px;
226+
}
227+
.mgr-lg:checked:before {
228+
height: 11px;
229+
width: 11px;
230+
border-radius: 50%;
231+
margin: 3px 0 0 3px;
232+
}
233+
.mgc-switch {
234+
-webkit-appearance: none;
235+
-moz-appearance: none;
236+
appearance: none;
237+
position: relative;
238+
width: 41px;
239+
height: 24px;
240+
border: 1px solid #dfdfdf;
241+
outline: 0;
242+
border-radius: 16px;
243+
box-sizing: border-box;
244+
background: #dfdfdf;
245+
}
246+
.mgc-switch:before,
247+
.mgc-switch:after {
248+
content: " ";
249+
position: absolute;
250+
top: 0;
251+
left: 0;
252+
border-radius: 15px;
253+
-webkit-transition: -webkit-transform 0.3s;
254+
transition: -webkit-transform 0.3s;
255+
transition: transform 0.3s;
256+
transition: transform 0.3s, -webkit-transform 0.3s;
257+
}
258+
.mgc-switch:before {
259+
width: 39px;
260+
height: 22px;
261+
background-color: #fdfdfd;
262+
}
263+
.mgc-switch:after {
264+
width: 22px;
265+
height: 22px;
266+
background-color: #fff;
267+
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
268+
}
269+
.mgc-switch:checked {
270+
border-color: #04be02;
271+
background-color: #04be02;
272+
}
273+
.mgc-switch:checked:before {
274+
-webkit-transform: scale(0);
275+
transform: scale(0);
276+
}
277+
.mgc-switch:checked:after {
278+
-webkit-transform: translateX(17px);
279+
transform: translateX(17px);
280+
}
281+
.mgc-sm.mgc-switch {
282+
height: 20px;
283+
width: 32px;
284+
}
285+
.mgc-sm.mgc-switch:before {
286+
height: 18px;
287+
width: 30px;
288+
}
289+
.mgc-sm.mgc-switch:after {
290+
width: 18px;
291+
height: 18px;
292+
}
293+
.mgc-sm.mgc-switch:checked:after {
294+
top: 0px;
295+
left: 2px;
296+
-webkit-transform: translateX(10px);
297+
transform: translateX(10px);
298+
}
299+
.mgc-lg.mgc-switch {
300+
height: 32px;
301+
width: 52px;
302+
}
303+
.mgc-lg.mgc-switch:before {
304+
height: 30px;
305+
width: 50px;
306+
}
307+
.mgc-lg.mgc-switch:after {
308+
width: 30px;
309+
height: 30px;
310+
}
311+
.mgc-lg.mgc-switch:checked:after {
312+
top: 0px;
313+
left: 2px;
314+
-webkit-transform: translateX(18px);
315+
transform: translateX(18px);
316+
}

‎dist/magic-input.min.css

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎img/mg1.gif

24.4 KB
Loading

‎img/mg2.gif

25.6 KB
Loading

‎img/mg3.gif

29.7 KB
Loading

0 commit comments

Comments
 (0)