Skip to content

Commit 7f5557d

Browse files
author
dorgan@donaldorgan.com
committed
Adding date picker, not 100% working just yet
1 parent 6349dbb commit 7f5557d

File tree

4 files changed

+782
-0
lines changed

4 files changed

+782
-0
lines changed
Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
/*!
2+
* Datepicker for Bootstrap
3+
*
4+
* Copyright 2012 Stefan Petre
5+
* Licensed under the Apache License v2.0
6+
* http://www.apache.org/licenses/LICENSE-2.0
7+
*
8+
*/
9+
.datepicker {
10+
top: 0;
11+
left: 0;
12+
padding: 4px;
13+
margin-top: 1px;
14+
-webkit-border-radius: 4px;
15+
-moz-border-radius: 4px;
16+
border-radius: 4px;
17+
/*.dow {
18+
border-top: 1px solid #ddd !important;
19+
}*/
20+
21+
}
22+
.datepicker:before {
23+
content: '';
24+
display: inline-block;
25+
border-left: 7px solid transparent;
26+
border-right: 7px solid transparent;
27+
border-bottom: 7px solid #ccc;
28+
border-bottom-color: rgba(0, 0, 0, 0.2);
29+
position: absolute;
30+
top: -7px;
31+
left: 6px;
32+
}
33+
.datepicker:after {
34+
content: '';
35+
display: inline-block;
36+
border-left: 6px solid transparent;
37+
border-right: 6px solid transparent;
38+
border-bottom: 6px solid #ffffff;
39+
position: absolute;
40+
top: -6px;
41+
left: 7px;
42+
}
43+
.datepicker > div {
44+
display: none;
45+
}
46+
.datepicker table {
47+
width: 100%;
48+
margin: 0;
49+
}
50+
.datepicker td,
51+
.datepicker th {
52+
text-align: center;
53+
width: 20px;
54+
height: 20px;
55+
-webkit-border-radius: 4px;
56+
-moz-border-radius: 4px;
57+
border-radius: 4px;
58+
}
59+
.datepicker td.day:hover {
60+
background: #eeeeee;
61+
cursor: pointer;
62+
}
63+
.datepicker td.day.disabled {
64+
color: #eeeeee;
65+
}
66+
.datepicker td.old,
67+
.datepicker td.new {
68+
color: #999999;
69+
}
70+
.datepicker td.active,
71+
.datepicker td.active:hover {
72+
color: #ffffff;
73+
background-color: #006dcc;
74+
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
75+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
76+
background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
77+
background-image: -o-linear-gradient(top, #0088cc, #0044cc);
78+
background-image: linear-gradient(to bottom, #0088cc, #0044cc);
79+
background-repeat: repeat-x;
80+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
81+
border-color: #0044cc #0044cc #002a80;
82+
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
83+
*background-color: #0044cc;
84+
/* Darken IE7 buttons by default so they stand out more given they won't have borders */
85+
86+
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
87+
color: #fff;
88+
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
89+
}
90+
.datepicker td.active:hover,
91+
.datepicker td.active:hover:hover,
92+
.datepicker td.active:focus,
93+
.datepicker td.active:hover:focus,
94+
.datepicker td.active:active,
95+
.datepicker td.active:hover:active,
96+
.datepicker td.active.active,
97+
.datepicker td.active:hover.active,
98+
.datepicker td.active.disabled,
99+
.datepicker td.active:hover.disabled,
100+
.datepicker td.active[disabled],
101+
.datepicker td.active:hover[disabled] {
102+
color: #ffffff;
103+
background-color: #0044cc;
104+
*background-color: #003bb3;
105+
}
106+
.datepicker td.active:active,
107+
.datepicker td.active:hover:active,
108+
.datepicker td.active.active,
109+
.datepicker td.active:hover.active {
110+
background-color: #003399 \9;
111+
}
112+
.datepicker td span {
113+
display: block;
114+
width: 47px;
115+
height: 54px;
116+
line-height: 54px;
117+
float: left;
118+
margin: 2px;
119+
cursor: pointer;
120+
-webkit-border-radius: 4px;
121+
-moz-border-radius: 4px;
122+
border-radius: 4px;
123+
}
124+
.datepicker td span:hover {
125+
background: #eeeeee;
126+
}
127+
.datepicker td span.active {
128+
color: #ffffff;
129+
background-color: #006dcc;
130+
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
131+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
132+
background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
133+
background-image: -o-linear-gradient(top, #0088cc, #0044cc);
134+
background-image: linear-gradient(to bottom, #0088cc, #0044cc);
135+
background-repeat: repeat-x;
136+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
137+
border-color: #0044cc #0044cc #002a80;
138+
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
139+
*background-color: #0044cc;
140+
/* Darken IE7 buttons by default so they stand out more given they won't have borders */
141+
142+
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
143+
color: #fff;
144+
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
145+
}
146+
.datepicker td span.active:hover,
147+
.datepicker td span.active:focus,
148+
.datepicker td span.active:active,
149+
.datepicker td span.active.active,
150+
.datepicker td span.active.disabled,
151+
.datepicker td span.active[disabled] {
152+
color: #ffffff;
153+
background-color: #0044cc;
154+
*background-color: #003bb3;
155+
}
156+
.datepicker td span.active:active,
157+
.datepicker td span.active.active {
158+
background-color: #003399 \9;
159+
}
160+
.datepicker td span.old {
161+
color: #999999;
162+
}
163+
.datepicker th.switch {
164+
width: 145px;
165+
}
166+
.datepicker th.next,
167+
.datepicker th.prev {
168+
font-size: 21px;
169+
}
170+
.datepicker thead tr:first-child th {
171+
cursor: pointer;
172+
}
173+
.datepicker thead tr:first-child th:hover {
174+
background: #eeeeee;
175+
}
176+
.input-append.date .add-on i,
177+
.input-prepend.date .add-on i {
178+
display: block;
179+
cursor: pointer;
180+
width: 16px;
181+
height: 16px;
182+
}

0 commit comments

Comments
 (0)