Skip to content

Commit 87e9e6c

Browse files
dalelottsdalelotts
committed
Simplify CSS and fix issue with hover not working correctly on odd rows in day view.
1 parent 4a738da commit 87e9e6c

File tree

2 files changed

+62
-78
lines changed

2 files changed

+62
-78
lines changed

‎src/css/datetimepicker.css‎

Lines changed: 61 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -48,45 +48,29 @@
4848
border: none;
4949
}
5050

51-
.datetimepicker .table-striped > tbody > tr:nth-child(odd) > td,
52-
.datetimepicker .table-striped > tbody > tr:nth-child(odd) > td,
53-
.datetimepicker .table-striped > tbody > tr:nth-child(odd) > td,
54-
.datetimepicker .table-striped > tbody > tr:nth-child(odd) > th,
55-
.datetimepicker .table-striped > tbody > tr:nth-child(odd) {
56-
background-color: transparent;
57-
}
58-
59-
.datetimepicker table tr .minute:hover {
60-
background: #eeeeee;
61-
cursor: pointer;
62-
}
63-
64-
.datetimepicker table tr .hour:hover {
65-
background: #eeeeee;
66-
cursor: pointer;
67-
}
68-
69-
.datetimepicker table tr .day:hover {
51+
.datetimepicker td.minute:hover,
52+
.datetimepicker td.hour:hover,
53+
.datetimepicker td.day:hover {
7054
background: #eeeeee;
7155
cursor: pointer;
7256
}
7357

74-
.datetimepicker table tr td.past,
75-
.datetimepicker table tr td.future {
58+
.datetimepicker td.past,
59+
.datetimepicker td.future {
7660
color: #999999;
7761
}
7862

79-
.datetimepicker table tr td.disabled,
80-
.datetimepicker table tr td.disabled:hover {
63+
.datetimepicker td.disabled,
64+
.datetimepicker td.disabled:hover {
8165
background: none;
8266
color: #999999;
8367
cursor: default;
8468
}
8569

86-
.datetimepicker table tr td.active,
87-
.datetimepicker table tr td.active:hover,
88-
.datetimepicker table tr td.active.disabled,
89-
.datetimepicker table tr td.active.disabled:hover {
70+
.datetimepicker td.active,
71+
.datetimepicker td.active:hover,
72+
.datetimepicker td.active.disabled,
73+
.datetimepicker td.active.disabled:hover {
9074
background-color: #006dcc;
9175
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
9276
background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
@@ -102,30 +86,30 @@
10286
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
10387
}
10488

105-
.datetimepicker table tr td.active:hover,
106-
.datetimepicker table tr td.active:hover:hover,
107-
.datetimepicker table tr td.active.disabled:hover,
108-
.datetimepicker table tr td.active.disabled:hover:hover,
109-
.datetimepicker table tr td.active:active,
110-
.datetimepicker table tr td.active:hover:active,
111-
.datetimepicker table tr td.active.disabled:active,
112-
.datetimepicker table tr td.active.disabled:hover:active,
113-
.datetimepicker table tr td.active.active,
114-
.datetimepicker table tr td.active:hover.active,
115-
.datetimepicker table tr td.active.disabled.active,
116-
.datetimepicker table tr td.active.disabled:hover.active,
117-
.datetimepicker table tr td.active.disabled,
118-
.datetimepicker table tr td.active:hover.disabled,
119-
.datetimepicker table tr td.active.disabled.disabled,
120-
.datetimepicker table tr td.active.disabled:hover.disabled,
121-
.datetimepicker table tr td.active[disabled],
122-
.datetimepicker table tr td.active:hover[disabled],
123-
.datetimepicker table tr td.active.disabled[disabled],
124-
.datetimepicker table tr td.active.disabled:hover[disabled] {
89+
.datetimepicker td.active:hover,
90+
.datetimepicker td.active:hover:hover,
91+
.datetimepicker td.active.disabled:hover,
92+
.datetimepicker td.active.disabled:hover:hover,
93+
.datetimepicker td.active:active,
94+
.datetimepicker td.active:hover:active,
95+
.datetimepicker td.active.disabled:active,
96+
.datetimepicker td.active.disabled:hover:active,
97+
.datetimepicker td.active.active,
98+
.datetimepicker td.active:hover.active,
99+
.datetimepicker td.active.disabled.active,
100+
.datetimepicker td.active.disabled:hover.active,
101+
.datetimepicker td.active.disabled,
102+
.datetimepicker td.active:hover.disabled,
103+
.datetimepicker td.active.disabled.disabled,
104+
.datetimepicker td.active.disabled:hover.disabled,
105+
.datetimepicker td.active[disabled],
106+
.datetimepicker td.active:hover[disabled],
107+
.datetimepicker td.active.disabled[disabled],
108+
.datetimepicker td.active.disabled:hover[disabled] {
125109
background-color: #0044cc;
126110
}
127111

128-
.datetimepicker table tr td span {
112+
.datetimepicker span {
129113
display: block;
130114
width: 23%;
131115
height: 54px;
@@ -138,21 +122,21 @@
138122
border-radius: 4px;
139123
}
140124

141-
.datetimepicker table tr td span:hover {
125+
.datetimepicker span:hover {
142126
background: #eeeeee;
143127
}
144128

145-
.datetimepicker table tr td span.disabled,
146-
.datetimepicker table tr td span.disabled:hover {
129+
.datetimepicker span.disabled,
130+
.datetimepicker span.disabled:hover {
147131
background: none;
148132
color: #999999;
149133
cursor: default;
150134
}
151135

152-
.datetimepicker table tr td span.active,
153-
.datetimepicker table tr td span.active:hover,
154-
.datetimepicker table tr td span.active.disabled,
155-
.datetimepicker table tr td span.active.disabled:hover {
136+
.datetimepicker span.active,
137+
.datetimepicker span.active:hover,
138+
.datetimepicker span.active.disabled,
139+
.datetimepicker span.active.disabled:hover {
156140
background-color: #006dcc;
157141
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
158142
background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
@@ -168,31 +152,31 @@
168152
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
169153
}
170154

171-
.datetimepicker table tr td span.active:hover,
172-
.datetimepicker table tr td span.active:hover:hover,
173-
.datetimepicker table tr td span.active.disabled:hover,
174-
.datetimepicker table tr td span.active.disabled:hover:hover,
175-
.datetimepicker table tr td span.active:active,
176-
.datetimepicker table tr td span.active:hover:active,
177-
.datetimepicker table tr td span.active.disabled:active,
178-
.datetimepicker table tr td span.active.disabled:hover:active,
179-
.datetimepicker table tr td span.active.active,
180-
.datetimepicker table tr td span.active:hover.active,
181-
.datetimepicker table tr td span.active.disabled.active,
182-
.datetimepicker table tr td span.active.disabled:hover.active,
183-
.datetimepicker table tr td span.active.disabled,
184-
.datetimepicker table tr td span.active:hover.disabled,
185-
.datetimepicker table tr td span.active.disabled.disabled,
186-
.datetimepicker table tr td span.active.disabled:hover.disabled,
187-
.datetimepicker table tr td span.active[disabled],
188-
.datetimepicker table tr td span.active:hover[disabled],
189-
.datetimepicker table tr td span.active.disabled[disabled],
190-
.datetimepicker table tr td span.active.disabled:hover[disabled] {
155+
.datetimepicker span.active:hover,
156+
.datetimepicker span.active:hover:hover,
157+
.datetimepicker span.active.disabled:hover,
158+
.datetimepicker span.active.disabled:hover:hover,
159+
.datetimepicker span.active:active,
160+
.datetimepicker span.active:hover:active,
161+
.datetimepicker span.active.disabled:active,
162+
.datetimepicker span.active.disabled:hover:active,
163+
.datetimepicker span.active.active,
164+
.datetimepicker span.active:hover.active,
165+
.datetimepicker span.active.disabled.active,
166+
.datetimepicker span.active.disabled:hover.active,
167+
.datetimepicker span.active.disabled,
168+
.datetimepicker span.active:hover.disabled,
169+
.datetimepicker span.active.disabled.disabled,
170+
.datetimepicker span.active.disabled:hover.disabled,
171+
.datetimepicker span.active[disabled],
172+
.datetimepicker span.active:hover[disabled],
173+
.datetimepicker span.active.disabled[disabled],
174+
.datetimepicker span.active.disabled:hover[disabled] {
191175
background-color: #0044cc;
192176
}
193177

194-
.datetimepicker table tr td span.past,
195-
.datetimepicker table tr td span.future {
178+
.datetimepicker span.past,
179+
.datetimepicker span.future {
196180
color: #999999;
197181
}
198182

‎src/js/datetimepicker.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@
106106
restrict: 'E',
107107
require: 'ngModel',
108108
template: '<div class="datetimepicker table-responsive">' +
109-
'<table class="table table-striped {{ data.currentView }}-view">' +
109+
'<table class="table table-condensed {{ data.currentView }}-view">' +
110110
' <thead>' +
111111
' <tr>' +
112112
' <th class="left" data-ng-click="changeView(data.currentView, data.leftDate, $event)" data-ng-show="data.leftDate.selectable"><i class="glyphicon glyphicon-arrow-left"/></th>' +

0 commit comments

Comments
 (0)