Skip to content

Commit 0c010eb

Browse files
craftpipcraftpip
committed
update: changed whole code, to add more features.
1 parent bb1ca26 commit 0c010eb

19 files changed

+822
-499
lines changed

‎.gitignore

+26-24
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,33 @@
1-
# Windows image file caches
2-
Thumbs.db
3-
ehthumbs.db
4-
5-
# Folder config file
6-
Desktop.ini
7-
8-
# Recycle Bin used on file shares
9-
$RECYCLE.BIN/
10-
11-
# Windows Installer files
12-
*.cab
13-
*.msi
14-
*.msm
15-
*.msp
16-
17-
# =========================
18-
# Operating System Files
19-
# =========================
20-
21-
# OSX
22-
# =========================
23-
1+
# Windows image file caches
2+
Thumbs.db
3+
ehthumbs.db
4+
5+
# Folder config file
6+
Desktop.ini
7+
8+
# Recycle Bin used on file shares
9+
$RECYCLE.BIN/
10+
11+
# Windows Installer files
12+
*.cab
13+
*.msi
14+
*.msm
15+
*.msp
16+
17+
# =========================
18+
# Operating System Files
19+
# =========================
20+
21+
# OSX
22+
# =========================
23+
2424
.DS_Store
2525
.AppleDouble
2626
.LSOverride
2727

2828
# Icon must end with two \r
29-
Icon
29+
Icon
30+
3031

3132
# Thumbnails
3233
._*
@@ -41,3 +42,4 @@ Icon
4142
Network Trash Folder
4243
Temporary Items
4344
.apdisk
45+
/nbproject/private/

‎css/bootstrap-fullscreen-select.css

+127-41
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,143 @@
1-
.bootSelect {
1+
body.mobileSelect-noscroll {
2+
overflow: hidden !important;
3+
}
4+
.mobileSelect {
25
position: fixed;
3-
left: -15px;
4-
right: -15px;
56
top: 0;
6-
bottom: 15px;
7-
z-index: 88;
8-
background-color: white;
7+
left: 0;
8+
right: 0;
9+
bottom: 0;
10+
background-color: rgba(0, 0, 0, 0.1);
11+
z-index: 9999999;
12+
font-size: 18px;
13+
-webkit-transition: all .4s;
14+
transition: all .4s;
15+
display: none;
16+
}
17+
.mobileSelect > div {
18+
position: absolute;
19+
top: 20px;
20+
bottom: 20px;
21+
left: 40px;
22+
right: 40px;
23+
border-radius: 4px;
24+
background: #eee;
25+
overflow: hidden;
26+
-webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
27+
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
28+
-webkit-transform: scale(1) translate(0px, 0px);
29+
-ms-transform: scale(1) translate(0px, 0px);
30+
transform: scale(1) translate(0px, 0px);
31+
-webkit-transition: all .4s;
32+
transition: all .4s;
33+
visibility: visible;
34+
}
35+
.mobileSelect > div.anim-top,
36+
.mobileSelect > div.anim-left,
37+
.mobileSelect > div.anim-right,
38+
.mobileSelect > div.anim-bottom,
39+
.mobileSelect > div.anim-opacity,
40+
.mobileSelect > div.anim-zoom,
41+
.mobileSelect > div.anim-scale,
42+
.mobileSelect > div.anim-none {
43+
visibility: hidden;
44+
opacity: 0;
45+
}
46+
.mobileSelect > div.anim-top {
47+
-webkit-transform: translate(0px, -100px);
48+
-ms-transform: translate(0px, -100px);
49+
transform: translate(0px, -100px);
50+
}
51+
.mobileSelect > div.anim-left {
52+
-webkit-transform: translate(-100px, 0px);
53+
-ms-transform: translate(-100px, 0px);
54+
transform: translate(-100px, 0px);
955
}
10-
.bootSelect * {
11-
border-radius: 0px;
56+
.mobileSelect > div.anim-right {
57+
-webkit-transform: translate(100px, 0px);
58+
-ms-transform: translate(100px, 0px);
59+
transform: translate(100px, 0px);
1260
}
13-
.bootSelect .bootSelect-title {
14-
font-size: 1.5em;
15-
text-transform: capitalize;
61+
.mobileSelect > div.anim-bottom {
62+
-webkit-transform: translate(0px, 100px);
63+
-ms-transform: translate(0px, 100px);
64+
transform: translate(0px, 100px);
1665
}
17-
.bootSelect .list-container {
66+
.mobileSelect > div.anim-zoom {
67+
-webkit-transform: scale(1.2);
68+
-ms-transform: scale(1.2);
69+
transform: scale(1.2);
70+
}
71+
.mobileSelect > div.anim-scale {
72+
-webkit-transform: scale(0.95);
73+
-ms-transform: scale(0.95);
74+
transform: scale(0.95);
75+
}
76+
.mobileSelect > div.anim-none {
77+
display: none;
78+
}
79+
.mobileSelect .mobileSelect-title {
80+
position: absolute;
81+
background: #eee;
82+
left: 0;
83+
top: 0;
84+
right: 0;
85+
padding: 17px 20px;
86+
height: 60px;
87+
border-bottom: solid 1px #aaa;
88+
}
89+
.mobileSelect .list-container {
90+
position: absolute;
91+
left: 0;
92+
right: 0;
93+
top: 0;
94+
bottom: 0;
95+
margin-top: 60px;
96+
margin-bottom: 60px;
1897
overflow: hidden;
1998
overflow-y: scroll;
2099
}
21-
.bootSelect .list-container a {
100+
.mobileSelect .list-container .mobileSelect-control {
22101
display: block;
23-
background-color: #fff;
24102
border-bottom: solid 1px #ddd;
25-
padding: 10px 20px;
103+
padding: 17px 20px;
104+
text-decoration: none;
105+
background-color: #eee;
26106
}
27-
.bootSelect .list-container a:active {
28-
background-color: #ddd;
107+
.mobileSelect .list-container .mobileSelect-control:hover,
108+
.mobileSelect .list-container .mobileSelect-control:active {
109+
background-color: #eee;
29110
}
30-
.bootSelect .list-container a:hover {
31-
text-decoration: none;
111+
.mobileSelect .list-container .mobileSelect-control.selected {
112+
background-color: #28a4c9;
113+
color: white;
32114
}
33-
.bootSelect .list-container[data-multiple="true"] a {
34-
padding: 10px 20px 10px 10px;
115+
.mobileSelect .mobileSelect-buttons {
116+
position: absolute;
117+
left: 0;
118+
bottom: 0;
119+
right: 0;
120+
height: 60px;
121+
display: table;
122+
width: 100%;
123+
table-layout: fixed;
124+
border-collapse: separate;
35125
}
36-
.bootSelect .list-container[data-multiple="true"] a:before {
37-
content: '';
38-
background-color: #eee;
39-
height: 22px;
40-
width: 22px;
41-
display: inline-block;
42-
vertical-align: middle;
43-
margin-top: -2px;
44-
margin-right: 10px;
45-
border: solid 1px #ddd;
46-
background-image: url('../img/tick.png');
47-
background-repeat: no-repeat;
48-
background-position: 21px 0px;
49-
-webkit-transition: all .2s;
50-
transition: all .2s;
51-
}
52-
.bootSelect .list-container[data-multiple="true"] a.check:before {
53-
background-position: 1px 0px;
54-
}
55-
.bootSelect .list-container[data-multiple="false"] a.check {
126+
.mobileSelect .mobileSelect-buttons a {
127+
text-decoration: none;
128+
text-align: center;
129+
display: table-cell;
56130
background-color: #eee;
131+
padding: 15px 20px;
132+
border-top: solid 1px #aaa;
133+
border-right: solid 1px #aaa;
134+
color: #555;
135+
}
136+
.mobileSelect .mobileSelect-buttons a:last-child {
137+
border-right: none;
138+
}
139+
.mobileSelect .mobileSelect-buttons a:hover,
140+
.mobileSelect .mobileSelect-buttons a:active {
141+
text-decoration: none;
142+
background-color: #ddd;
57143
}

0 commit comments

Comments
 (0)