forked from FormstoneClassic/Picker
-
Notifications
You must be signed in to change notification settings - Fork 0
/
jquery.fs.picker.css
85 lines (72 loc) · 3.62 KB
/
jquery.fs.picker.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
/*
* Picker v3.0.9 - 2014-02-06
* A jQuery plugin for replacing default checkboxes and radios. Part of the formstone library.
* http://formstone.it/picker/
*
* Copyright 2014 Ben Plum; MIT Licensed
*/
.picker-element { *left: -9999px; opacity: 0; position: absolute; z-index: -1;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
.picker { cursor: pointer; margin: 0 0 10px 0; overflow: hidden; }
.picker .picker-label { color: #888; cursor: pointer; display: block; float: left; font-size: 14px; float: left; line-height: 16px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.picker .picker-handle { border: 1px solid #ccc; display: block; float: left; height: 16px; margin: 0 5px 0 0; width: 16px; }
/* Focus */
.picker.focus .picker-label { color: #555; }
.picker.focus .picker-handle { border-color: #aaa; }
/* Radio Input */
.picker.picker-radio .picker-handle { border-radius: 8px; }
.picker.picker-radio .picker-flag { background: #fff; display: block; border-radius: 4px; height: 8px; margin: 3px; width: 8px; }
.picker.picker-radio.focus .picker-flag { background: #ddd; }
.picker.picker-radio.checked .picker-flag { background: #999; }
/* Checkbox Input */
.picker.picker-checkbox .picker-handle { border-radius: 3px; }
.picker.picker-checkbox .picker-flag { background: #fff; border-radius: 2px; display: block; height: 100%; margin: 0; width: 100%; }
/* 'Checked' */
.picker.picker-checkbox.checked .picker-flag { background: #fff url(jquery.fs.picker-icon.png) no-repeat center; }
/* 'Toggle' Style Input */
.picker.picker-toggle { padding: 20px 0 0; position: relative; }
.picker.picker-toggle .picker-toggle-label { color: #999; font-size: 12px; position: absolute; text-transform: uppercase; top: 0; }
.picker.picker-toggle .picker-toggle-label.on { left: 0; }
.picker.picker-toggle .picker-toggle-label.off { color: #333; right: 0; }
.picker.picker-toggle .picker-label { display: none; }
.picker.picker-toggle .picker-handle { border-radius: 3px; height: 20px; position: relative; width: 100%; }
.picker.picker-toggle .picker-flag { background: #666; border-radius: 2px; display: block; height: 100%; left: 50%; margin: 0; position: absolute; top: 0; width: 50%;
-webkit-transition: left 0.1s linear;
-moz-transition: left 0.1s linear;
-ms-transition: left 0.1s linear;
-o-transition: left 0.1s linear;
transition: left 0.1s linear;
}
/*
.picker.picker-toggle .picker-flag:after { content: '' !important; }
*/
.picker.picker-toggle.checked .picker-toggle-label.on { color: #333; }
.picker.picker-toggle.checked .picker-toggle-label.off { color: #999; }
.picker.picker-toggle.checked .picker-flag { background: #666; left: 0; }
/* 'Disabled' State */
.picker.disabled { cursor: default; opacity: 0.5; }
.picker.disabled .picker-label { cursor: default; }
.picker.disabled .picker-handle { cursor: default; }
/*
.picker.picker-checkbox.disabled .picker-flag:after { color: #eee; content: ''; }
.picker.picker-checkbox.disabled.checked .picker-flag:after { color: #eee; content: '\2714'; }
*/
@media screen and (min-width: 740px) {
.picker:hover .picker-label { color: #555; }
.picker:hover .picker-handle { border-color: #aaa; }
.picker.picker-radio:hover .picker-flag { background: #ddd; }
.picker.disabled:hover .picker-label { color: #888; }
.picker.disabled:hover .picker-handle { border-color: #ccc; }
.picker.picker-radio.disabled:hover .picker-flag { background: #fff; }
}