datatables.net-datetime 1.5.6 → 1.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,24 +1,118 @@
1
1
 
2
- $dt-datetime-selected: #4E6CA3 !default;
2
+ :root {
3
+ --dt-datetime_background: white;
4
+ --dt-datetime_zindex: 2050;
5
+ --dt-datetime_border: 1px solid #ccc;
6
+ --dt-datetime_box-shadow: 0 5px 15px -5px rgba(0,0,0,.5);
7
+ --dt-datetime_padding: 6px 20px;
8
+ --dt-datetime_width: 275px;
9
+ --dt-datetime_border-radius: 5px;
10
+ --dt-datetime-inline_padding: 6px 0;
11
+ --dt-datetime-inline_background: transparent;
12
+
13
+ --dt-datetime-title_padding: 5px 0px 3px;
14
+
15
+ --dt-datetime-buttons-link_padding: 0 0.5em 0.5em 0.5em;
16
+ --dt-datetime-buttons-link_font-size: 0.9em;
17
+
18
+ --dt-datetime-table-header_font-size: 0.8em;
19
+ --dt-datetime-table-header_color: #777;
20
+ --dt-datetime-table-header_padding: 0 0 4px 0;
21
+
22
+ --dt-datetime-table-body_font-size: 0.9em;
23
+ --dt-datetime-table-body_color: #444;
24
+ --dt-datetime-table-body_padding: 0;
25
+
26
+ --dt-datetime-table-selectable_background: #f5f5f5;
27
+ --dt-datetime-table-selectable_disabled-color: #aaa;
28
+ --dt-datetime-table-selectable_disabled-background: white;
29
+ --dt-datetime-table-selectable_disabled-hover-color: #aaa;
30
+ --dt-datetime-table-selectable_disabled-hover-background: white;
31
+ --dt-datetime-table_hover-background: #ff8000;
32
+ --dt-datetime-table_hover-color: white;
33
+
34
+ --dt-datetime-table-now_background: #ddd;
35
+
36
+ --dt-datetime-table-selected_background: #4E6CA3;
37
+ --dt-datetime-table-selected_color: white;
38
+
39
+ --dt-datetime-label_height: 30px;
40
+ --dt-datetime-label_border: 1px solid transparent;
41
+ --dt-datetime-label_padding: 5px 6px;
42
+ --dt-datetime-label_hover-border: 1px solid #ddd;
43
+ --dt-datetime-label_hover-background: #f5f5f5;
44
+
45
+ --dt-datetime-icon_border: 1px solid transparent;
46
+ --dt-datetime-icon-opacity: 0.3;
47
+ --dt-datetime-icon_hover-border: 1px solid #ccc;
48
+ --dt-datetime-icon_hover-background: #f0f0f0;
49
+ --dt-datetime-icon_hover-opacity: 0.6;
50
+
51
+ --dt-datetime-icon-triangle_border-color: black;
52
+
53
+ --dt-datetime-error_color: #b11f1f;
54
+ }
55
+
56
+ html.dark,
57
+ :root[data-theme="dark"],
58
+ :root[data-bs-theme="dark"] {
59
+ --dt-datetime_background: rgb(33, 37, 41);
60
+ --dt-datetime_border: 1px solid rgb(89, 91, 94);
61
+ --dt-datetime_box-shadow: 3px 4px 10px 1px rgba(0, 0, 0, 0.8);
62
+
63
+ --dt-datetime-table-header_color: #ccc;
64
+
65
+ --dt-datetime-table-body_color: #eee;
66
+
67
+ --dt-datetime-table-selectable_background: rgb(55, 60, 65);
68
+ --dt-datetime-table-selectable_disabled-color: #aaa;
69
+ --dt-datetime-table-selectable_disabled-background: rgb(23, 27, 31);
70
+ --dt-datetime-table-selectable_disabled-hover-color: #aaa;
71
+ --dt-datetime-table-selectable_disabled-hover-background: rgb(23, 27, 31);
72
+ --dt-datetime-table_hover-background: #ff8000;
73
+ --dt-datetime-table_hover-color: black;
74
+
75
+ --dt-datetime-table-now_background: rgb(75, 80, 85);
76
+
77
+ --dt-datetime-table-selected_background: #6ea8fe;
78
+ --dt-datetime-table-selected_color: black;
79
+
80
+ --dt-datetime-label_border: 1px solid transparent;
81
+ --dt-datetime-label_hover-border: 1px solid transparent;
82
+ --dt-datetime-label_hover-background: rgba(255, 255, 255, 0.1);
83
+
84
+ --dt-datetime-icon_border: 1px solid transparent;
85
+ --dt-datetime-icon_hover-border: 1px solid transparent;
86
+ --dt-datetime-icon_hover-background: rgba(255, 255, 255, 0.1);
87
+
88
+ --dt-datetime-icon-triangle_border-color: white;
89
+
90
+ --dt-datetime-error_color: #b11f1f;
91
+ }
92
+
3
93
 
4
94
  div.dt-datetime {
5
95
  position: absolute;
6
- background-color: white;
7
- z-index: 2050;
8
- border: 1px solid #ccc;
9
- box-shadow: 0 5px 15px -5px rgba(0,0,0,.5);
10
- padding: 6px 20px;
11
- width: 275px;
12
- border-radius: 5px;
96
+ background-color: var(--dt-datetime_background);
97
+ z-index: var(--dt-datetime_zindex);
98
+ border: var(--dt-datetime_border);
99
+ box-shadow: var(--dt-datetime_box-shadow);
100
+ padding: var(--dt-datetime_padding);
101
+ width: var(--dt-datetime_width);
102
+ border-radius: var(--dt-datetime_border-radius);
13
103
 
14
104
  &.inline {
15
105
  position: relative;
16
106
  box-shadow: none;
107
+ border: none;
108
+ z-index: inherit;
109
+ padding: var(--dt-datetime-inline_padding);
110
+ background-color: var(--dt-datetime-inline_background);
17
111
  }
18
112
 
19
113
  div.dt-datetime-title {
20
114
  text-align: center;
21
- padding: 5px 0px 3px;
115
+ padding: var(--dt-datetime-title_padding);
22
116
  }
23
117
 
24
118
  div.dt-datetime-buttons {
@@ -26,9 +120,9 @@ div.dt-datetime {
26
120
 
27
121
  a {
28
122
  display: inline-block;
29
- padding: 0 0.5em 0.5em 0.5em;
123
+ padding: var(--dt-datetime-buttons-link_padding);
30
124
  margin: 0;
31
- font-size: 0.9em;
125
+ font-size: var(--dt-datetime-buttons-link_font-size);
32
126
 
33
127
  &:hover {
34
128
  text-decoration: underline;
@@ -46,36 +140,36 @@ div.dt-datetime {
46
140
  }
47
141
 
48
142
  th {
49
- font-size: 0.8em;
50
- color: #777;
143
+ font-size: var(--dt-datetime-table-header_font-size);
144
+ color: var(--dt-datetime-table-header_color);
51
145
  font-weight: normal;
52
146
  width: 14.285714286%;
53
- padding: 0 0 4px 0;
147
+ padding: var(--dt-datetime-table-header_padding);
54
148
  text-align: center;
55
149
  }
56
150
 
57
151
  td {
58
- font-size: 0.9em;
59
- color: #444;
60
- padding: 0;
152
+ font-size: var(--dt-datetime-table-body_font-size);
153
+ color: var(--dt-datetime-table-body_color);
154
+ padding: var(--dt-datetime-table-body_padding);
61
155
  }
62
156
 
63
157
  td.selectable {
64
158
  text-align: center;
65
- background: #f5f5f5;
159
+ background: var(--dt-datetime-table-selectable_background);
66
160
 
67
161
  &.disabled {
68
- color: #aaa;
69
- background: white;
162
+ color: var(--dt-datetime-table-selectable_disabled-color);
163
+ background: var(--dt-datetime-table-selectable_disabled-background);
70
164
 
71
165
  button:hover {
72
- color: #aaa;
73
- background: white;
166
+ color: var(--dt-datetime-table-selectable_disabled-hover-color);
167
+ background: var(--dt-datetime-table-selectable_disabled-hover-background);
74
168
  }
75
169
  }
76
170
 
77
171
  &.now {
78
- background-color: #ddd;
172
+ background-color: var(--dt-datetime-table-now_background);
79
173
 
80
174
  button {
81
175
  font-weight: bold;
@@ -83,14 +177,14 @@ div.dt-datetime {
83
177
  }
84
178
 
85
179
  &.selected button {
86
- background: $dt-datetime-selected;
87
- color: white;
180
+ background: var(--dt-datetime-table-selected_background);
181
+ color: var(--dt-datetime-table-selected_color);
88
182
  border-radius: 2px;
89
183
  }
90
184
 
91
185
  button:hover {
92
- background: #ff8000;
93
- color: white;
186
+ background: var(--dt-datetime-table_hover-background);
187
+ color: var(--dt-datetime-table_hover-color);
94
188
  border-radius: 2px;
95
189
  }
96
190
  }
@@ -132,16 +226,16 @@ div.dt-datetime {
132
226
  div.dt-datetime-label {
133
227
  position: relative;
134
228
  display: inline-block;
135
- height: 30px;
136
- padding: 5px 6px;
137
- border: 1px solid transparent;
229
+ height: var(--dt-datetime-label_height);
230
+ padding: var(--dt-datetime-label_padding);
231
+ border: var(--dt-datetime-label_border);
138
232
  box-sizing: border-box;
139
233
  cursor: pointer;
140
234
 
141
235
  &:hover {
142
- border: 1px solid #ddd;
236
+ border: var(--dt-datetime-label_hover-border);
143
237
  border-radius: 2px;
144
- background-color: #f5f5f5;
238
+ background-color: var(--dt-datetime-label_hover-background);
145
239
  }
146
240
 
147
241
  select {
@@ -201,16 +295,16 @@ div.dt-datetime {
201
295
  height: 30px;
202
296
  background-position: center;
203
297
  background-repeat: no-repeat;
204
- opacity: 0.3;
298
+ opacity: var(--dt-datetime-icon-opacity);
205
299
  overflow: hidden;
206
300
  box-sizing: border-box;
207
- border: 1px solid transparent;
301
+ border: var(--dt-datetime-icon_border);
208
302
 
209
303
  &:hover {
210
- border: 1px solid #ccc;
304
+ border: var(--dt-datetime-icon_hover-border);
211
305
  border-radius: 2px;
212
- background-color: #f0f0f0;
213
- opacity: 0.6;
306
+ background-color: var(--dt-datetime-icon_hover-background);
307
+ opacity: var(--dt-datetime-icon_hover-opacity);
214
308
  }
215
309
 
216
310
  button {
@@ -240,7 +334,7 @@ div.dt-datetime {
240
334
  display: block;
241
335
  content: "";
242
336
  border-top: 7px solid transparent;
243
- border-right: 7px solid black;
337
+ border-right: 7px solid var(--dt-datetime-icon-triangle_border-color);
244
338
  border-bottom: 7px solid transparent;
245
339
  }
246
340
  }
@@ -262,7 +356,7 @@ div.dt-datetime {
262
356
  display: block;
263
357
  content: "";
264
358
  border-top: 7px solid transparent;
265
- border-left: 7px solid black;
359
+ border-left: 7px solid var(--dt-datetime-icon-triangle_border-color);
266
360
  border-bottom: 7px solid transparent;
267
361
  }
268
362
  }
@@ -275,95 +369,20 @@ div.dt-datetime-error {
275
369
  font-size: 11px;
276
370
  line-height: 1.25em;
277
371
  text-align: center;
278
- color: #b11f1f;
372
+ color: var(--dt-datetime-error_color);
279
373
  }
280
374
 
281
375
 
282
376
  html.dark,
283
377
  :root[data-theme="dark"],
284
378
  :root[data-bs-theme="dark"] {
285
- input.dt-datetime {
379
+ input.dt-datetime,
380
+ select {
286
381
  color-scheme: dark;
287
382
  }
288
383
 
289
- div.dt-datetime {
290
- border: 1px solid rgb(89, 91, 94);
291
- background-color: rgb(33, 37, 41);
292
- box-shadow: 3px 4px 10px 1px rgba(0, 0, 0, 0.8);
293
-
294
- table {
295
- th {
296
- color: #ccc;
297
- }
298
-
299
- td {
300
- color: #eee;
301
- }
302
-
303
- td.selectable {
304
- background: rgb(55, 60, 65);
305
-
306
- &.disabled {
307
- color: #aaa;
308
- background: rgb(23, 27, 31);
309
-
310
- button:hover {
311
- color: #aaa;
312
- background: rgb(23, 27, 31);
313
- }
314
- }
315
-
316
- &.now {
317
- background: rgb(75, 80, 85);
318
- }
319
-
320
- &.selected button {
321
- background: rgb(110, 168, 254);
322
- color: black;
323
- }
324
-
325
- button:hover {
326
- background: #ff8000;
327
- color: black;
328
- }
329
- }
330
- }
331
-
332
- div.dt-datetime-label {
333
- &:hover {
334
- border: 1px solid transparent;
335
- background-color: rgba(255, 255, 255, 0.1);
336
- }
337
- }
338
-
339
- div.dt-datetime-iconLeft,
340
- div.dt-datetime-iconRight,
341
- div.dt-datetime-iconUp,
342
- div.dt-datetime-iconDown {
343
- &:hover {
344
- border: 1px solid transparent;
345
- background-color: rgba(255, 255, 255, 0.1);
346
- }
347
- }
348
-
349
- div.dt-datetime-iconLeft {
350
- &:after {
351
- border-right-color: white;
352
- }
353
- }
354
-
355
- div.dt-datetime-iconRight {
356
- &:after {
357
- border-left-color: white;
358
- }
359
- }
360
-
361
- select {
362
- color-scheme: dark;
363
- }
364
- }
365
-
366
- div.dt-datetime-error {
367
- color: #b11f1f;
368
- }
384
+ &.inline {
385
+ box-shadow: none;
386
+ border: none;
387
+ }
369
388
  }