Skip to content

Commit bb1ca26

Browse files
craftpipcraftpip
committed
final changes
1 parent 0343e07 commit bb1ca26

File tree

5 files changed

+154
-10
lines changed

5 files changed

+154
-10
lines changed

‎css/bootstrap-fullscreen-select.css

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
.bootSelect {
2+
position: fixed;
3+
left: -15px;
4+
right: -15px;
5+
top: 0;
6+
bottom: 15px;
7+
z-index: 88;
8+
background-color: white;
9+
}
10+
.bootSelect * {
11+
border-radius: 0px;
12+
}
13+
.bootSelect .bootSelect-title {
14+
font-size: 1.5em;
15+
text-transform: capitalize;
16+
}
17+
.bootSelect .list-container {
18+
overflow: hidden;
19+
overflow-y: scroll;
20+
}
21+
.bootSelect .list-container a {
22+
display: block;
23+
background-color: #fff;
24+
border-bottom: solid 1px #ddd;
25+
padding: 10px 20px;
26+
}
27+
.bootSelect .list-container a:active {
28+
background-color: #ddd;
29+
}
30+
.bootSelect .list-container a:hover {
31+
text-decoration: none;
32+
}
33+
.bootSelect .list-container[data-multiple="true"] a {
34+
padding: 10px 20px 10px 10px;
35+
}
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 {
56+
background-color: #eee;
57+
}

‎css/bootstrap-fullscreen-select.less

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
.bootSelect{
2+
position: fixed;
3+
left: -15px;
4+
right: -15px;
5+
top: 0;
6+
bottom: 15px;
7+
z-index: 88;
8+
background-color: white;
9+
10+
*{
11+
border-radius: 0px;
12+
}
13+
14+
.bootSelect-title{
15+
font-size: 1.5em;
16+
text-transform: capitalize;
17+
}
18+
.list-container{
19+
overflow: hidden;
20+
overflow-y: scroll;
21+
22+
a{
23+
display: block;
24+
background-color: #fff;
25+
border-bottom: solid 1px #ddd;
26+
padding: 10px 20px;
27+
28+
&:active{
29+
background-color: #ddd;
30+
}
31+
&:hover{
32+
text-decoration: none;
33+
}
34+
35+
}
36+
}
37+
38+
.list-container[data-multiple="true"]{
39+
a{
40+
padding: 10px 20px 10px 10px;
41+
42+
&:before{
43+
content: '';
44+
background-color: #eee;
45+
height: 22px;
46+
width: 22px;
47+
display: inline-block;
48+
vertical-align: middle;
49+
margin-top: -2px;
50+
margin-right: 10px;
51+
border: solid 1px #ddd;
52+
background-image: url('../img/tick.png');
53+
background-repeat: no-repeat;
54+
background-position: 21px 0px;
55+
transition: all .2s;
56+
}
57+
58+
&.check:before{
59+
background-position: 1px 0px;
60+
61+
}
62+
}
63+
}
64+
.list-container[data-multiple="false"] {
65+
a{
66+
&.check{
67+
background-color: #eee;
68+
}
69+
}
70+
}
71+
72+
}
73+

‎demo.css

+11-4
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@
77
display:block;
88
height:20px;
99
}
10+
body *{
11+
border-radius: 0px !important;
12+
}
1013
.spacer15{
1114
height: 15px;
1215
}
@@ -20,10 +23,14 @@ pre{
2023
background: #fff !important;
2124
}
2225
.btn-download{
23-
background: #eee;
24-
border:solid 1px #ddd;
25-
color: #555;
26+
background: #3498db;
27+
border:solid 1px #2980b9;
28+
color: #fff;
2629
}
2730
.btn-download:hover{
28-
background: #ddd;
31+
background: #2980b9;
32+
color: #fff;
33+
}
34+
body{
35+
background-color: #eee;
2936
}

‎demo.js

+9-2
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ $(document).ready(function () {
1010
});
1111
$(window).scroll(function(){
1212
var sti = $('.sticky-alt').parent().offset().top-30
13-
console.log(sti);
13+
// console.log(sti);
1414
var scr = $(window).scrollTop()
15-
console.log(scr);
15+
// console.log(scr);
1616

1717
if(scr > sti){
1818
$('.sticky-alt').css({
@@ -26,4 +26,11 @@ $(window).scroll(function(){
2626
});
2727
}
2828

29+
});
30+
$('.gotoSmooth').click(function(){
31+
var body = $("html, body");
32+
body.animate({
33+
scrollTop: $($(this).attr('href')).offset().top-10
34+
}, '500', 'swing');
35+
return false;
2936
});

‎index.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
<div class="logo-wrapper-project">
3737
<div class="logo-wrapper-project"></div>
3838
</div>
39-
<nav class="navbar navbar-default" role="navigation">
39+
<nav class="navbar navbar-default navbar-top-static" role="navigation">
4040
<div class="container-fluid">
4141
<!-- Brand and toggle get grouped for better mobile display -->
4242
<div class="navbar-header">
@@ -84,9 +84,9 @@
8484
<div class="spacer15"></div>
8585
<div class="panel panel-default">
8686
<div class="list-group">
87-
<a class="list-group-item" href="#introduction"><i class="fa fa-circle-o fa-fw"></i> Introduction / Download</a>
88-
<a class="list-group-item" href="#usage"><i class="fa fa-circle-o fa-fw"></i> Usage</a>
89-
<a class="list-group-item" href="#examples"><i class="fa fa-circle-o fa-fw"></i> Examples</a>
87+
<a class="list-group-item gotoSmooth" href="#introduction"><i class="fa fa-circle-o fa-fw"></i> Introduction</a>
88+
<a class="list-group-item gotoSmooth" href="#usage"><i class="fa fa-circle-o fa-fw"></i> Usage</a>
89+
<a class="list-group-item gotoSmooth" href="#examples"><i class="fa fa-circle-o fa-fw"></i> Examples</a>
9090
</div>
9191
</div>
9292
</div>

0 commit comments

Comments
 (0)