Skip to content

Commit 454b37a

Browse files
petersirkapetersirka
committed
Improved UI and functionality of j-DataPicker.
Signed-off-by: Peter Sirka <[email protected]>
1 parent ab91a6c commit 454b37a

File tree

5 files changed

+261
-199
lines changed

5 files changed

+261
-199
lines changed

‎j-DatePicker/component.css‎

Lines changed: 43 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,47 @@
1-
.ui-datepicker { font-size: 12px; position: absolute; background-color: #FFFFFF; max-width: 264px; width: 100%; border: 1px solid #E0E0E0; left: 100px; top: 100px; border-radius: 2px; z-index: 100; color: gray; box-shadow: 0 5px 25px rgba(0,0,0,0.1); opacity: 0; transform: scale(0.6); transition: all 0.2s; }
1+
.ui-datepicker { font-size: 12px; width: 247px; height: 300px; position: absolute; background-color: #FFFFFF; border: 1px solid #E0E0E0; left: 100px; top: 100px; border-radius: 2px; z-index: 100; color: gray; box-shadow: 0 5px 25px rgba(0,0,0,0.1); opacity: 0; transform: scale(0.6); transition: all 0.2s; }
22
.ui-datepicker-visible { transform: scale(1); opacity: 1; }
3-
.ui-datepicker-table { padding: 10px; }
4-
.ui-datepicker table { width: 100%; margin: 0; table-layout: fixed; animation: ui-datepicker-animation 0.25s ease-out 1; }
5-
.ui-datepicker table td { text-align: center; vertical-align: middle; font-size: 11px; color: #505050; }
6-
.ui-datepicker table td div { margin: 2px; line-height: 30px; border-radius: 100px; }
7-
.ui-datepicker table th { padding: 8px 0 5px; text-align: center; width: 14%; vertical-align: middle; font-weight: bold; font-size: 12px; color: #000000; }
83
.ui-datepicker-disabled { color: silver !important; cursor: pointer; }
9-
.ui-datepicker-day {}
10-
.ui-datepicker-cancel { padding: 3px 8px; background-color: #D63B32; color: #FFFFFF; text-align: center; cursor: pointer; }
11-
.ui-datepicker-cancel i { margin-right: 5px; }
12-
.ui-datepicker-cancel:hover { text-decoration: none; opacity: 0.8; }
13-
.ui-datepicker-day-today div { background-color: #F0F0F0; font-weight: bold; }
14-
.ui-datepicker-selected div { background-color: #F8F7DA; font-weight: bold; }
15-
.ui-datepicker-day:hover div { background-color: #F8F7DA; cursor: pointer; }
16-
.ui-datepicker button { background-color: #FFFFFF; border: 0; outline: 0; border: 1px solid #D0D0D0; border-radius: 3px; width: 24px; height: 21px; font-size: 11px; line-height: 0; text-align: center; padding: 0; vertical-align: middle; cursor: pointer; }
17-
.ui-datepicker button:hover { background-color: #F0F0F0; }
18-
.ui-datepicker-header { height: 40px; border-bottom: 1px solid #E0E0E0; padding: 0 10px 0; }
19-
.ui-datepicker-header-info { text-align: center; width: 180px; float: left; font-size: 14px; margin: 8px 0 0 7px; font-weight: bold; color: #000000; }
20-
.ui-datepicker-header-prev { float: left; margin-top: 9px; }
21-
.ui-datepicker-header-next { float: right; margin-top: 9px; }
22-
.ui-datepicker-today { padding: 8px 10px; border-top: 1px solid #E0E0E0; background-color: #F0F0F0; }
23-
.ui-datepicker-today .fa { margin-right: 6px; }
24-
.ui-datepicker-header select { background-color: #FFFFFF; border: 1px solid #E0E0E0; height: 23px; outline: 0; cursor: pointer; appearance: none; padding: 0 10px; border-radius: 3px; }
25-
.ui-datepicker-today .link:first-child { float: right; color: #B7292E; font-weight: bold; }
26-
.ui-datepicker select::-ms-expand { display: none; }
27-
.ui-datepicker-cancel-container { text-align: center; padding: 0 0 10px; }
4+
.ui-datepicker-body, .ui-datepicker-months, .ui-datepicker-years { height: 235px; }
5+
.ui-datepicker-footer { height: 28px; border-top: 1px solid #E0E0E0; font-size: 11px; padding: 0 8px; line-height: 26px; background-color: #F8F8F8; }
6+
.ui-datepicker-footer > span:hover { text-decoration: underline; }
7+
.ui-datepicker-now { float: left; color: #000000; cursor: pointer; }
8+
.ui-datepicker-today div { background-color: #F0F0F0; font-weight: bold; }
9+
.ui-datepicker-selected div { background-color: #F8F7DA; font-weight: bold; color: #000000; }
10+
.ui-datepicker-date i { position: absolute; left: 15px; top: 26px; font-size: 6px; color: red; }
11+
.ui-datepicker-months > div { width: 61px; height: 78px; line-height: 76px; position: relative; display: inline-block; text-align: center; cursor: pointer; text-transform: uppercase; font-weight: bold; }
12+
.ui-datepicker-months > div > div { width: 50px; height: 50px; line-height: 46px; position: relative; display: inline-block; border-radius: 100%; border: 2px solid transparent; }
13+
.ui-datepicker-months > div:hover > div { border-color: #E0E0E0; color: #000000; }
14+
.ui-datepicker-years { padding: 5px 0 0; }
15+
.ui-datepicker-years > div { width: 49px; height: 46px; line-height: 44px; position: relative; display: inline-block; text-align: center; cursor: pointer; }
16+
.ui-datepicker-years > div > div { width: 40px; height: 40px; line-height: 36px; position: relative; display: inline-block; border-radius: 100%; border: 2px solid transparent; }
17+
.ui-datepicker-years > div:hover > div { border-color: #E0E0E0; color: #000000;}
18+
.ui-datepicker-header { height: 35px; border-bottom: 1px solid #E0E0E0; text-align: center; font-size: 14px; }
19+
.ui-datepicker-prev { float: left; line-height: 34px; width: 34px; color: #000000; cursor: pointer; }
20+
.ui-datepicker-next { float: right; line-height: 34px; width: 34px; color: #000000; cursor: pointer; }
21+
.ui-datepicker-prev:hover, .ui-datepicker-next:hover { background-color: #F0F0F0; }
22+
.ui-datepicker-info { margin: 0 34px; line-height: 34px; }
23+
.ui-datepicker-info > span { cursor: pointer; }
24+
.ui-datepicker-info > span:hover { color: #000000; }
25+
.ui-datepicker-info .ui-datepicker-year { margin-left: 5px; }
26+
.ui-datepicker-week > div, .ui-datepicker-days > div { width: 35px; height: 35px; line-height: 35px; position: relative; display: inline-block; vertical-align: middle; text-align: center; }
27+
.ui-datepicker-week > div { height: 25px; line-height: 25px; font-weight: bold; color: #000000; border-bottom: 1px solid #E0E0E0; }
28+
.ui-datepicker-days > div { font-size: 11px; cursor: pointer; }
29+
.ui-datepicker-date:hover > div { border-color: #E0E0E0; color: #000000; }
30+
.ui-datepicker-days > div > div { width: 28px; height: 28px; line-height: 24px; border-radius: 100%; margin: 0 auto; position: relative; display: inline-block; border: 2px solid transparent; }
2831

29-
.ui-dark .ui-datepicker { background-color: #303030; border-color: #353535; color: #A0A0A0; box-shadow: 1px 5px 10px rgba(0,0,0,0.2); }
30-
.ui-dark .ui-datepicker table th { color: #FFFFFF; }
31-
.ui-dark .ui-datepicker table td { color: #A0A0A0; }
32-
.ui-dark .ui-datepicker-disabled { color: #606060 !important; }
33-
.ui-dark .ui-datepicker-today { background-color: #252525; border-top-color: #404040; }
34-
.ui-dark .ui-datepicker-selected div { background-color: #101010; color: #FFFFFF; }
35-
.ui-dark .ui-datepicker-day:hover div { background-color: #181818; }
32+
.ui-dark .ui-datepicker { background-color: #282828; border-color: #404040; color: gray; }
33+
.ui-dark .ui-datepicker-disabled { color: #505050 !important; }
34+
.ui-dark .ui-datepicker-footer { border-top-color: #404040; background-color: #303030; }
35+
.ui-dark .ui-datepicker-now { color: #FFFFFF; }
36+
.ui-dark .ui-datepicker-today div { background-color: #353535; }
37+
.ui-dark .ui-datepicker-selected div { background-color: #505050; color: #FFFFFF; }
38+
.ui-dark .ui-datepicker-date i { color: red; }
39+
.ui-dark .ui-datepicker-months > div:hover > div { border-color: #505050; color: #FFFFFF; }
40+
.ui-dark .ui-datepicker-years > div:hover > div { border-color: #505050; color: #FFFFFF; }
3641
.ui-dark .ui-datepicker-header { border-bottom-color: #404040; }
37-
.ui-dark .ui-datepicker-today-a { color: #FFFFFF; }
38-
.ui-dark .ui-datepicker button { background-color: #202020; border-color: #202020; height: 22px; }
39-
.ui-dark .ui-datepicker button:hover { background-color: #404040; border-color: #404040; }
40-
.ui-dark .ui-datepicker-header select { background-color: #303030; color: #FFFFFF; border-color: #202020; }
41-
.ui-dark .ui-datepicker-day-today div { background-color: #505050; color: #FFFFFF; }
42-
43-
@media(max-width: 600px) {
44-
.ui-datepicker { top: 20% !important; left: 0 !important; width: 100%; max-width: 100%; position: fixed; }
45-
.ui-datepicker-header-info { width: calc(100% - 75px); }
46-
.ui-datepicker table td div { padding: 10px 0; }
47-
}
42+
.ui-dark .ui-datepicker-prev { color: #FFFFFF; }
43+
.ui-dark .ui-datepicker-next { color: #FFFFFF; }
44+
.ui-dark .ui-datepicker-prev:hover, .ui-dark .ui-datepicker-next:hover { background-color: #303030; }
45+
.ui-dark .ui-datepicker-info > span:hover { color: #FFFFFF; }
46+
.ui-dark .ui-datepicker-week > div { color: #FFFFFF; border-bottom-color: #404040; }
47+
.ui-dark .ui-datepicker-date:hover > div { border-color: #505050; color: #FFFFFF; }

0 commit comments

Comments
 (0)