Skip to content

Commit 42917bd

Browse files
LeonArian
Leon
authored and
Arian
committed
Added Minimal theme
1 parent e0dfb76 commit 42917bd

File tree

2 files changed

+219
-14
lines changed

2 files changed

+219
-14
lines changed

‎Source/datepicker_minimal/datepicker_minimal.css

Lines changed: 208 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,208 @@
1+
/*
2+
Minimal Theme
3+
Author: Leon Radley (github.com/leon)
4+
5+
Selected: #95adb8
6+
Hover: #c6d2d8
7+
Current: #f60
8+
*/
9+
.datepicker_minimal {
10+
position: absolute;
11+
border: 1px solid #ddd;
12+
font-size: 11px;
13+
width: 220px;
14+
height: 200px;
15+
background: #fff;
16+
line-height: normal;
17+
z-index: 3003;
18+
border-radius: 2px;
19+
-webkit-border-radius: 2px;
20+
-moz-border-radius: 2px;
21+
}
22+
.datepicker_minimal th,
23+
.datepicker_minimal td {
24+
margin: 0;
25+
padding: 0;
26+
}
27+
.datepicker_minimal .selected {
28+
background: #95adb8 !important;
29+
color: #fff !important;
30+
}
31+
32+
.datepicker_minimal .unavailable,
33+
.datepicker_minimal .day.unavailable:hover {
34+
background: #edd !important;
35+
color: #b88 !important;
36+
cursor: default !important;
37+
}
38+
39+
.datepicker_minimal td.day:hover,
40+
.datepicker_minimal .month:hover,
41+
.datepicker_minimal .year:hover {
42+
background: #c6d2d8 !important;
43+
color: #222 !important;
44+
}
45+
46+
/*
47+
Header
48+
*/
49+
.datepicker_minimal .header {
50+
position: relative;
51+
background: #333;
52+
height: 25px;
53+
}
54+
.datepicker_minimal .header .title {
55+
margin: 0 50px;
56+
text-align: center;
57+
line-height: 25px;
58+
}
59+
.datepicker_minimal .header .titleText {
60+
color: #fff;
61+
font-weight: bold;
62+
}
63+
.datepicker_minimal .header .next,
64+
.datepicker_minimal .header .previous,
65+
.datepicker_minimal .header .closeButton {
66+
position: absolute;
67+
top: 0;
68+
width: 25px;
69+
height: 25px;
70+
line-height: 25px;
71+
text-align: center;
72+
color: #fff;
73+
cursor: pointer;
74+
}
75+
.datepicker_minimal .header .previous {
76+
left: 0;
77+
}
78+
.datepicker_minimal .header .next {
79+
right: 25px;
80+
}
81+
.datepicker_minimal .header .closeButton {
82+
right: 0;
83+
}
84+
85+
/*
86+
Body
87+
*/
88+
.datepicker_minimal .body {
89+
position: relative;
90+
top: 0;
91+
left: 0;
92+
width: 100%;
93+
height: 175px;
94+
overflow: hidden;
95+
}
96+
.datepicker_minimal .body .column {
97+
height: 100%;
98+
}
99+
100+
/*
101+
Days
102+
*/
103+
.datepicker_minimal .days {
104+
width: 100%;
105+
border: 0;
106+
border-spacing: 0;
107+
}
108+
.datepicker_minimal .days .title {
109+
font-weight: bold;
110+
color: #444;
111+
cursor: default;
112+
width: 14.2857142857143%; /* 100/7 */
113+
}
114+
.datepicker_minimal .days.weeknumbers .title {
115+
width: 12.5%;
116+
}
117+
.datepicker_minimal .days .otherMonth {
118+
background: #eee;
119+
color: #aaa;
120+
}
121+
.datepicker_minimal .day {
122+
cursor: pointer;
123+
text-align: center;
124+
overflow: hidden;
125+
line-height: 25px;
126+
}
127+
.datepicker_minimal .today {
128+
color: #f60;
129+
font-weight: bold;
130+
}
131+
.datepicker_minimal .day0 {
132+
margin-right: 0;
133+
}
134+
.datepicker_minimal .days .week5 .day {
135+
margin-bottom: 0;
136+
}
137+
138+
/*
139+
Months
140+
*/
141+
.datepicker_minimal .months {
142+
height: 100%;
143+
}
144+
.datepicker_minimal .month {
145+
float: left;
146+
display: inline;
147+
width: 33.33333333%;
148+
line-height: 44px;
149+
cursor: pointer;
150+
vertical-align: middle;
151+
text-align: center;
152+
overflow: hidden;
153+
}
154+
155+
/*
156+
Years
157+
*/
158+
.datepicker_minimal .years {
159+
height: 100%;
160+
}
161+
.datepicker_minimal .year {
162+
float: left;
163+
display: inline;
164+
width: 25%;
165+
line-height: 35px;
166+
cursor: pointer;
167+
text-align: center;
168+
overflow: hidden;
169+
}
170+
171+
/*
172+
Time
173+
*/
174+
.datepicker_minimal .time {
175+
width: 100%;
176+
height: 100%;
177+
background: #fff;
178+
}
179+
.datepicker_minimal .time .hour,
180+
.datepicker_minimal .time .separator,
181+
.datepicker_minimal .time .minutes {
182+
position: absolute;
183+
top: 50px;
184+
width: 50px;
185+
border: 1px dashed #ddd;
186+
font-size: 32px;
187+
text-align: center;
188+
}
189+
.datepicker_minimal .time .hour {
190+
left: 40px;
191+
}
192+
.datepicker_minimal .time .separator {
193+
background: transparent;
194+
border: 0px;
195+
width: 10px;
196+
left: 100px;
197+
}
198+
199+
.datepicker_minimal .time .minutes {
200+
left: 120px;
201+
}
202+
.datepicker_minimal .time .ok {
203+
position: absolute;
204+
top: 105px;
205+
width: 136px;
206+
left: 40px;
207+
font-size: 20px;
208+
}

‎Test/themes.html

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
<link href="../Source/datepicker_dashboard/datepicker_dashboard.css" rel="stylesheet" type="text/css" media="screen" />
1616
<link href="../Source/datepicker_jqui/datepicker_jqui.css" rel="stylesheet" type="text/css" media="screen" />
1717
<link href="../Source/datepicker_vista/datepicker_vista.css" rel="stylesheet" type="text/css" media="screen" />
18+
<link href="../Source/datepicker_minimal/datepicker_minimal.css" rel="stylesheet" type="text/css" media="screen" />
1819

1920
<style>
2021
.custom {
@@ -32,9 +33,7 @@
3233
border: 0;
3334
}
3435
</style>
35-
3636
<script>
37-
3837
window.addEvent('domready', function(){
3938
new Picker.Date('dashboard', {
4039
pickerClass: 'datepicker_dashboard'
@@ -48,46 +47,44 @@
4847
pickerClass: 'datepicker_vista'
4948
});
5049

50+
new Picker.Date('minimal', {
51+
pickerClass: 'datepicker_minimal',
52+
weeknumbers:true,
53+
});
54+
5155
new Picker.Date('default');
5256

5357
new Picker.Date('custom', {
5458
pickerClass: 'datepicker custom'
5559
});
5660

5761
});
58-
5962
</script>
60-
6163
</head>
6264

6365
<body>
6466
<h1>DatePicker Themes</h1>
65-
67+
<p>This demo shows you the current four supported themes. It is just a simple option of setting the picker classname to another CSS class.</p>
6668
<p>
67-
This demo shows you the current four supported themes. It is just a simple option of setting the picker classname to another CSS class.
69+
<label for="default">Default:</label><br />
70+
<input type="text" value="02/08/2011" id="default">
6871
</p>
69-
7072
<p>
7173
<label for="dashboard">Dashboard:</label><br />
7274
<input type="text" value="02/08/2011" id="dashboard">
7375
</p>
74-
7576
<p>
7677
<label for="jqui">jQuery UI:</label><br />
7778
<input type="text" value="02/08/2011" id="jqui">
7879
</p>
79-
80-
8180
<p>
8281
<label for="vista">Vista:</label><br />
8382
<input type="text" value="02/08/2011" id="vista">
8483
</p>
85-
8684
<p>
87-
<label for="default">Default:</label><br />
88-
<input type="text" value="02/08/2011" id="default">
85+
<label for="minimal">Minimal:</label><br />
86+
<input type="text" value="02/08/2011" id="minimal">
8987
</p>
90-
9188
<p>
9289
<label for="custom">Custom CSS classes</label><br />
9390
<input type="text" value="02/08/2011" id="custom">

0 commit comments

Comments
 (0)