Skip to content

Commit c5379a9

Browse files
istevenisteven
committed
added offline documentation
1 parent b33a519 commit c5379a9

File tree

91 files changed

+10483
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

91 files changed

+10483
-0
lines changed

‎doc/css/bootstrap.min.css

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

‎doc/css/isteven-multi-select.css

Lines changed: 288 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,288 @@
1+
/*
2+
* Don't modify things marked with ! - unless you know what you're doing
3+
*/
4+
5+
/* ! vertical layout */
6+
.multiSelect .vertical {
7+
float: none;
8+
}
9+
10+
/* ! horizontal layout */
11+
.multiSelect .horizontal:not(.multiSelectGroup) {
12+
float: left;
13+
}
14+
15+
/* ! create a "row" */
16+
.multiSelect .line {
17+
padding: 2px 0px 4px 0px;
18+
max-height: 30px;
19+
overflow: hidden;
20+
box-sizing: content-box;
21+
}
22+
23+
/* ! create a "column" */
24+
.multiSelect .acol {
25+
display: inline-block;
26+
min-width: 12px;
27+
}
28+
29+
/* ! */
30+
.multiSelect .inlineBlock {
31+
display: inline-block;
32+
}
33+
34+
/* the multiselect button */
35+
.multiSelect > button {
36+
display: inline-block;
37+
position: relative;
38+
text-align: center;
39+
cursor: pointer;
40+
border: 1px solid #c6c6c6;
41+
padding: 1px 8px 1px 8px;
42+
font-size: 14px;
43+
min-height : 38px !important;
44+
border-radius: 4px;
45+
color: #555;
46+
-webkit-user-select: none;
47+
-moz-user-select: none;
48+
-ms-user-select: none;
49+
-o-user-select: none;
50+
user-select: none;
51+
white-space:normal;
52+
background-color: #fff;
53+
background-image: linear-gradient(#fff, #f7f7f7);
54+
}
55+
56+
/* button: hover */
57+
.multiSelect > button:hover {
58+
background-image: linear-gradient(#fff, #e9e9e9);
59+
}
60+
61+
/* button: clicked */
62+
.multiSelect .buttonClicked {
63+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
64+
}
65+
66+
/* labels on the button */
67+
.multiSelect .buttonLabel {
68+
display: inline-block;
69+
padding: 5px 0px 5px 0px;
70+
}
71+
72+
/* downward pointing arrow */
73+
.multiSelect .caret {
74+
display: inline-block;
75+
width: 0;
76+
height: 0;
77+
margin: 0px 0px 1px 12px !important;
78+
vertical-align: middle;
79+
border-top: 4px solid #333;
80+
border-right: 4px solid transparent;
81+
border-left: 4px solid transparent;
82+
border-bottom: 0 dotted;
83+
}
84+
85+
/* the main checkboxes and helper layer */
86+
.multiSelect .checkboxLayer {
87+
background-color: #fff;
88+
position: absolute;
89+
z-index: 999;
90+
border: 1px solid rgba(0, 0, 0, 0.15);
91+
border-radius: 4px;
92+
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
93+
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
94+
min-width:278px;
95+
display: none !important;
96+
}
97+
98+
/* container of helper elements */
99+
.multiSelect .helperContainer {
100+
border-bottom: 1px solid #ddd;
101+
padding: 8px 8px 0px 8px;
102+
}
103+
104+
/* helper buttons (select all, none, reset); */
105+
.multiSelect .helperButton {
106+
display: inline;
107+
text-align: center;
108+
cursor: pointer;
109+
border: 1px solid #ccc;
110+
height: 26px;
111+
font-size: 13px;
112+
border-radius: 2px;
113+
color: #666;
114+
background-color: #f1f1f1;
115+
line-height: 1.6;
116+
margin: 0px 0px 8px 0px;
117+
}
118+
119+
.multiSelect .helperButton.reset{
120+
float: right;
121+
}
122+
123+
.multiSelect .helperButton:not( .reset ) {
124+
margin-right: 4px;
125+
}
126+
127+
/* clear button */
128+
.multiSelect .clearButton {
129+
position: absolute;
130+
display: inline;
131+
text-align: center;
132+
cursor: pointer;
133+
border: 1px solid #ccc;
134+
height: 22px;
135+
width: 22px;
136+
font-size: 13px;
137+
border-radius: 2px;
138+
color: #666;
139+
background-color: #f1f1f1;
140+
line-height: 1.4;
141+
right : 2px;
142+
top: 4px;
143+
}
144+
145+
/* filter */
146+
.multiSelect .inputFilter {
147+
border-radius: 2px;
148+
border: 1px solid #ccc;
149+
height: 26px;
150+
font-size: 14px;
151+
width:100%;
152+
padding-left:7px;
153+
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
154+
-moz-box-sizing: border-box; /* Firefox, other Gecko */
155+
box-sizing: border-box; /* Opera/IE 8+ */
156+
color: #888;
157+
margin: 0px 0px 8px 0px;
158+
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
159+
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
160+
}
161+
162+
/* helper elements on hover & focus */
163+
.multiSelect .clearButton:hover,
164+
.multiSelect .helperButton:hover {
165+
border: 1px solid #ccc;
166+
color: #999;
167+
background-color: #f4f4f4;
168+
}
169+
170+
.multiSelect .clearButton:focus,
171+
.multiSelect .helperButton:focus,
172+
.multiSelect .inputFilter:focus {
173+
border: 1px solid #66AFE9 !important;
174+
outline: 0;
175+
-webkit-box-shadow: box-shadow: inset 0 0 1px rgba(0,0,0,.065), 0 0 5px rgba(102, 175, 233, .6) !important;
176+
box-shadow: inset 0 0 1px rgba(0,0,0,.065), 0 0 5px rgba(102, 175, 233, .6) !important;
177+
}
178+
179+
/* container of multi select items */
180+
.multiSelect .checkBoxContainer {
181+
display: block;
182+
padding: 8px;
183+
overflow: hidden;
184+
}
185+
186+
/* ! to show / hide the checkbox layer above */
187+
.multiSelect .show {
188+
display: block !important;
189+
}
190+
191+
/* item labels */
192+
.multiSelect .multiSelectItem {
193+
display: block;
194+
padding: 3px;
195+
color: #444;
196+
white-space: nowrap;
197+
-webkit-user-select: none;
198+
-moz-user-select: none;
199+
-ms-user-select: none;
200+
-o-user-select: none;
201+
user-select: none;
202+
border: 1px solid transparent;
203+
position: relative;
204+
min-width:278px;
205+
min-height: 32px;
206+
}
207+
208+
/* Styling on selected items */
209+
.multiSelect .multiSelectItem:not(.multiSelectGroup).selected
210+
{
211+
background-image: linear-gradient( #e9e9e9, #f1f1f1 );
212+
color: #555;
213+
cursor: pointer;
214+
border-top: 1px solid #e4e4e4;
215+
border-left: 1px solid #e4e4e4;
216+
border-right: 1px solid #d9d9d9;
217+
}
218+
219+
.multiSelect .multiSelectItem .acol label {
220+
display: inline-block;
221+
padding-right: 30px;
222+
margin: 0px;
223+
font-weight: normal;
224+
line-height: normal;
225+
}
226+
227+
/* item labels focus on mouse hover */
228+
.multiSelect .multiSelectItem:hover,
229+
.multiSelect .multiSelectGroup:hover {
230+
background-image: linear-gradient( #c1c1c1, #999 ) !important;
231+
color: #fff !important;
232+
cursor: pointer;
233+
border: 1px solid #ccc !important;
234+
}
235+
236+
/* item labels focus using keyboard */
237+
.multiSelect .multiSelectFocus {
238+
background-image: linear-gradient( #c1c1c1, #999 ) !important;
239+
color: #fff !important;
240+
cursor: pointer;
241+
border: 1px solid #ccc !important;
242+
}
243+
244+
/* change mouse pointer into the pointing finger */
245+
.multiSelect .multiSelectItem span:hover,
246+
.multiSelect .multiSelectGroup span:hover
247+
{
248+
cursor: pointer;
249+
}
250+
251+
/* ! group labels */
252+
.multiSelect .multiSelectGroup {
253+
display: block;
254+
clear: both;
255+
}
256+
257+
/* right-align the tick mark (✔) */
258+
.multiSelect .tickMark {
259+
display:inline-block;
260+
position: absolute;
261+
right: 10px;
262+
top: 7px;
263+
font-size: 10px;
264+
}
265+
266+
/* hide the original HTML checkbox away */
267+
.multiSelect .checkbox {
268+
color: #ddd !important;
269+
position: absolute;
270+
left: -9999px;
271+
cursor: pointer;
272+
}
273+
274+
/* checkboxes currently disabled */
275+
.multiSelect .disabled,
276+
.multiSelect .disabled:hover,
277+
.multiSelect .disabled label input:hover ~ span {
278+
color: #c4c4c4 !important;
279+
cursor: not-allowed !important;
280+
}
281+
282+
/* If you use images in button / checkbox label, you might want to change the image style here. */
283+
.multiSelect img {
284+
vertical-align: middle;
285+
margin-bottom:0px;
286+
max-height: 22px;
287+
max-width:22px;
288+
}

0 commit comments

Comments
 (0)