@syncfusion/ej2-calendars 24.2.8 → 25.1.35

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.
Files changed (73) hide show
  1. package/CHANGELOG.md +0 -48
  2. package/dist/ej2-calendars.min.js +2 -2
  3. package/dist/ej2-calendars.umd.min.js +2 -2
  4. package/dist/ej2-calendars.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-calendars.es2015.js +45 -12
  6. package/dist/es6/ej2-calendars.es2015.js.map +1 -1
  7. package/dist/es6/ej2-calendars.es5.js +45 -12
  8. package/dist/es6/ej2-calendars.es5.js.map +1 -1
  9. package/dist/global/ej2-calendars.min.js +2 -2
  10. package/dist/global/ej2-calendars.min.js.map +1 -1
  11. package/dist/global/index.d.ts +1 -1
  12. package/package.json +11 -11
  13. package/src/calendar/calendar.js +3 -3
  14. package/src/datepicker/datepicker.d.ts +1 -0
  15. package/src/datepicker/datepicker.js +12 -3
  16. package/src/daterangepicker/daterangepicker.d.ts +1 -0
  17. package/src/daterangepicker/daterangepicker.js +8 -0
  18. package/src/datetimepicker/datetimepicker.js +10 -2
  19. package/src/timepicker/timepicker.d.ts +1 -0
  20. package/src/timepicker/timepicker.js +12 -4
  21. package/styles/bootstrap-dark.css +1 -1
  22. package/styles/bootstrap.css +1 -1
  23. package/styles/bootstrap4.css +1 -1
  24. package/styles/bootstrap5-dark.css +1 -1
  25. package/styles/bootstrap5.css +1 -1
  26. package/styles/calendar/_bds-definition.scss +272 -0
  27. package/styles/calendar/_bootstrap-definition.scss +1 -1
  28. package/styles/calendar/_fabric-dark-definition.scss +1 -1
  29. package/styles/calendar/_fabric-definition.scss +1 -1
  30. package/styles/calendar/_fluent-definition.scss +2 -2
  31. package/styles/calendar/_fusionnew-definition.scss +1 -1
  32. package/styles/calendar/_highcontrast-definition.scss +1 -1
  33. package/styles/calendar/_material-dark-definition.scss +1 -1
  34. package/styles/calendar/_tailwind-definition.scss +1 -1
  35. package/styles/calendar/_theme.scss +1 -1
  36. package/styles/calendar/bootstrap-dark.css +1 -1
  37. package/styles/calendar/bootstrap.css +1 -1
  38. package/styles/calendar/bootstrap4.css +1 -1
  39. package/styles/calendar/bootstrap5-dark.css +1 -1
  40. package/styles/calendar/bootstrap5.css +1 -1
  41. package/styles/calendar/fabric-dark.css +1 -1
  42. package/styles/calendar/fabric.css +1 -1
  43. package/styles/calendar/fluent-dark.css +11 -11
  44. package/styles/calendar/fluent.css +11 -11
  45. package/styles/calendar/highcontrast-light.css +1 -1
  46. package/styles/calendar/highcontrast.css +1 -1
  47. package/styles/calendar/icons/_bds.scss +13 -0
  48. package/styles/calendar/material-dark.css +1 -1
  49. package/styles/calendar/material.css +1 -1
  50. package/styles/calendar/material3-dark.css +1 -1
  51. package/styles/calendar/material3.css +1 -1
  52. package/styles/calendar/tailwind-dark.css +1 -1
  53. package/styles/calendar/tailwind.css +1 -1
  54. package/styles/datepicker/_bds-definition.scss +105 -0
  55. package/styles/datepicker/icons/_bds.scss +76 -0
  56. package/styles/daterangepicker/_bds-definition.scss +294 -0
  57. package/styles/daterangepicker/icons/_bds.scss +92 -0
  58. package/styles/datetimepicker/_bds-definition.scss +65 -0
  59. package/styles/datetimepicker/icons/_bds.scss +11 -0
  60. package/styles/fabric-dark.css +1 -1
  61. package/styles/fabric.css +1 -1
  62. package/styles/fluent-dark.css +11 -11
  63. package/styles/fluent.css +11 -11
  64. package/styles/highcontrast-light.css +1 -1
  65. package/styles/highcontrast.css +1 -1
  66. package/styles/material-dark.css +1 -1
  67. package/styles/material.css +1 -1
  68. package/styles/material3-dark.css +1 -1
  69. package/styles/material3.css +1 -1
  70. package/styles/tailwind-dark.css +1 -1
  71. package/styles/tailwind.css +1 -1
  72. package/styles/timepicker/_bds-definition.scss +84 -0
  73. package/styles/timepicker/icons/_bds.scss +24 -0
@@ -0,0 +1,294 @@
1
+ // size variables
2
+ $range-btn-font-weight: $font-weight-medium !default;
3
+ $range-btn-width: 50% !default;
4
+ $range-btn-normal-height: 30px !default;
5
+ $range-btn-bigger-height: 36px !default;
6
+ $range-btn-normal-line-height: 24px !default;
7
+ $range-btn-bigger-line-height: 32px !default;
8
+ $range-max-width: 730px !default;
9
+ $range-device-max-width: 300px !default;
10
+ $range-bigger-max-width: 770px !default;
11
+ $range-max-height: 500px !default;
12
+ $range-control-border-right: 0 !default;
13
+ $range-normal-nav-icon-width: 24px !default;
14
+ $range-normal-nav-icon-height: 24px !default;
15
+ $range-calendar-medium-font-size: $text-sm !default;
16
+ $range-calendar-btn-font-size: $text-sm !default;
17
+ $range-presets-normal-list-font-size: $text-xs !default;
18
+ $range-presets-bigger-list-font-size: $text-sm !default;
19
+ $range-range-btn-font-weight: $font-weight-medium !default;
20
+ $range-calendar-small-font-size: $text-xs !default;
21
+ $range-calendar-bigger-font-size: $text-xl !default;
22
+ $range-calendar-header-padding: 8px 6px !default;
23
+ $range-e-bigger-header-padding: 8px 8px !default;
24
+ $range-device-control-header-margin: 0 !default;
25
+ $range-device-control-header-padding: 12px 37px !default;
26
+ $range-control-header-margin: 8px 0 !default;
27
+ $range-indicator-margin: 0 !default;
28
+ $range-lg-day-header-format-width: 100% !default;
29
+ $range-start-end-container-height: 34px !default;
30
+ $range-calendar-margin: 0 !default;
31
+ $range-start-end-label-width: 48% !default;
32
+ $range-change-icon-width: 4% !default;
33
+ $range-font-weight-bold: $font-weight-medium !default;
34
+ $range-font-size: $text-base !default;
35
+ $range-indicator-label-width: 100% !default;
36
+ $range-device-indicator-margin: 8px 0 0 !default;
37
+ $range-device-indicator-height: 24px !default;
38
+ $range-separator-height: 1px !default;
39
+ $range-border-value: 1px solid $content-bg-color-alt1 !default;
40
+ $range-container-border-value: none !default;
41
+ $range-separator-margin: 0 !default;
42
+ $range-footer-height: 47px !default;
43
+ $range-bigger-footer-height: 63px !default;
44
+ $range-btn-height: 38px !default;
45
+ $range-btn-padding: 0 16px !default;
46
+ $range-normal-footer-margin: 0 8px 0 8px !default;
47
+ $range-bigger-footer-margin: 0 8px 0 8px !default;
48
+ $range-normal-rtl-footer-margin: 0 8px 0 8px !default;
49
+ $range-bigger-rtl-footer-margin: 0 8px 0 8px !default;
50
+ $range-presets-height: 192px !default;
51
+ $range-bigger-presets-height: 240px !default;
52
+ $range-calendar-container-height: 100% !default;
53
+ $range-list-item-height: 48px !default;
54
+ $range-list-item-padding: 0 24px !default;
55
+ $range-listview-padding: 4px 0 !default;
56
+ $range-list-item-line-height: 47px !default;
57
+ $range-device-medium-font-size: $text-sm !default;
58
+ $range-device-medium-header-font-size: $text-sm !default;
59
+ $range-device-small-font-size: $text-xs !default;
60
+ $range-week-header-font-size: $text-sm !default;
61
+ $range-device-header-container-height: 36px !default;
62
+ $range-device-header-container-width: 100% !default;
63
+ $range-device-list-item-padding: 0 16px !default;
64
+ $range-value-zero: 0 !default;
65
+ $range-btn-border-value: 1px solid $primary !default;
66
+ $range-btn-left-radius: 2px 0 0 2px !default;
67
+ $range-btn-right-radius: 0 2px 2px 0 !default;
68
+ $range-day-span-height: 14px !default;
69
+ $range-indicator-size: 1px !default;
70
+ $range-preset-min-width: 625px !default;
71
+ $range-header-btn-max-width: 116px !default;
72
+ $range-header-btn-bigger-max-width: 141px !default;
73
+ $range-presets-width: 160px !default;
74
+ $range-hover-start-radius: 30px 0 0 30px !default;
75
+ $range-hover-end-radius: 0 30px 30px 0 !default;
76
+ $range-btn-height: 38px !default;
77
+ $range-device-btn-line-height: 36px !default;
78
+ $range-icon-hover-color: $content-bg-color-hover !default;
79
+ $range-icon-border-radius: 50% !default;
80
+ $range-icon-container-min-height: 18px !default;
81
+ $range-icon-container-min-width: 20px !default;
82
+ $range-icon-bottom-right-radius: 0 !default;
83
+ $range-icon-top-right-radius: 0 !default;
84
+ $range-bigger-icon-container-min-height: 18px !default;
85
+ $range-bigger-icon-container-min-width: 20px !default;
86
+ $range-icon-margin: 0 !default;
87
+ $range-icon-bigger-margin: 0 !default;
88
+ $range-sart-end-btn-padding: 1px 6px !default;
89
+ $range-popup-padding: 0 !default;
90
+ $range-calendar-normal-table-padding: 0 !default;
91
+ $range-calendar-bigger-table-padding: 0 !default;
92
+ $range-popup-border-radius: 8px !default;
93
+ $range-popup-header-border-radius: 12px 12px 0 0 !default;
94
+ $range-popup-footer-border-radius: 0 0 12px 12px !default;
95
+ $range-list-border-radius: 0 !default;
96
+ $range-bigger-nav-icon-width: 28px !default;
97
+ $range-bigger-nav-icon-height: 28px !default;
98
+ $range-calendar-popup-padding: 0 8px 8px !default;
99
+ $range-bigger-calendar-popup-padding: 0 16px 12px !default;
100
+ $range-icon-bigger-padding: 0 !default;
101
+ $range-icon-normal-padding: 0 !default;
102
+ $range-preset-normal-list-height: 36px !default;
103
+ $range-preset-bigger-list-height: 48px !default;
104
+ $range-calendar-bigger-max: 296px !default;
105
+
106
+ $range-header-label-size: $text-base !default;
107
+ $range-bigger-header-label-size: $text-lg !default;
108
+ $range-small-header-label-size: $text-base !default;
109
+ $range-bigger-indicator-label-size: $text-sm !default;
110
+ $range-bigger-change-icon-size: 20px !default;
111
+ $range-control-bigger-header-margin: 12px 0 !default;
112
+ $range-calendar-landscape-height: 130px !default;
113
+
114
+ // new variable
115
+ $range-icon: '\e245' !default;
116
+ $range-icon-font-size: $font-icon-16 !default;
117
+ $range-bigger-icon-font-size: $font-icon-18 !default;
118
+ $range-icon-next: '\e913' !default;
119
+ $range-icon-prev: '\e921' !default;
120
+ $range-change-icon: '\e85f' !default;
121
+ $range-rtl-icon-next: '\e921' !default;
122
+ $range-rtl-icon-prev: '\e913' !default;
123
+ $range-rtl-icon-change: '\e85b' !default;
124
+
125
+ // Mouse small size
126
+ $range-small-font-size: $text-xs !default;
127
+ $range-start-end-container-small-height: 32px !default;
128
+ $range-calendar-mouse-small-font-size: $text-xs !default;
129
+ $range-indicator-small-margin: 0 0 10px 0 !default;
130
+ $range-control-small-header-margin: 10px 10px 0 10px !default;
131
+ $range-separator-small-margin: 0 10px !default;
132
+ $range-small-footer-margin: 10px 10px 10px 8px !default;
133
+ $range-preset-small-list-height: 26px !default;
134
+ $range-presets-small-list-font-size: $text-xs !default;
135
+ $calendar-bigger-small-max-width: 246px !default;
136
+ $range-control-header-width: auto !default;
137
+ $range-font-weight-normal: $font-weight-normal !default;
138
+ $range-flex-style: flex !default;
139
+ $range-flex-justify-content: flex-end !default;
140
+ $range-inline-block-style: inline-block !default;
141
+ $range-block-style: block !default;
142
+ $range-table-style: table !default;
143
+ $range-display-none: none !default;
144
+ $range-align-center: center !default;
145
+ $range-float-right: right !default;
146
+ $range-float-left: left !default;
147
+ $range-float-none: none !default;
148
+ $range-float-clear: both !default;
149
+ $range-calendar-border: none !default;
150
+ $range-calendar-selection-border: none !default;
151
+ $range-calendar-hover-border: none !default;
152
+ $range-calendar-other-month-border: none !default;
153
+ $range-cursor-default-style: default !default;
154
+ $range-cursor-pointer-style: pointer !default;
155
+ $range-browser-select-none: none !default;
156
+ $range-flex-direction-row-reverse: row-reverse !default;
157
+ $range-flex-direction-row: row !default;
158
+ $range-width-auto: auto !default;
159
+ $range-value-none: none !default;
160
+ $range-visibility-hidden: hidden !default;
161
+ $range-text-nowrap: nowrap !default;
162
+ $range-direction-left: ltr !default;
163
+ $range-text-overflow: ellipsis !default;
164
+ $range-calendar-other-normal-border: none !default;
165
+
166
+ // mouse small icon
167
+ $range-small-icon-font-size: $font-icon-14 !default;
168
+
169
+ // touch small icon
170
+ $range-bigger-small-icon-font-size: $font-icon-18 !default;
171
+
172
+ // color variables
173
+ $range-bg-color: $content-bg-color !default;
174
+ $range-primary-color: $primary !default;
175
+ $range-primary-font-color: $primary-text-color !default;
176
+ $range-presets-bg: $content-bg-color !default;
177
+ $range-preset-normal-font-color: $content-text-color !default;
178
+ $range-font-color: $content-text-color !default;
179
+ $range-background: $flyout-bg-color !default;
180
+ $range-footer-background: $content-bg-color-alt1 !default;
181
+ $range-header-bg-color: $content-bg-color-alt1 !default;
182
+ $range-active-icon-color: $content-text-color !default;
183
+ $range-active-state-icon-color: $content-text-color !default;
184
+ $range-hover-color: $content-bg-color-alt3 !default;
185
+ $range-hover-content-color: $content-bg-color-pressed !default;
186
+ $range-today-color: $content-bg-color-hover !default;
187
+ $range-selection-bg: $primary !default;
188
+ $range-other-hover-color: transparent !default;
189
+ $range-other-month-date: $content-text-color-alt2 !default;
190
+ $range-box-shadow: $shadow-lg !default;
191
+ $range-box-shadow-none: none !default;
192
+ $range-calendar-dark-color: $content-text-color-alt1 !default;
193
+ $range-calendar-header-text-color: $content-text-color-alt2 !default;
194
+ $range-calendar-header-dark-color: $content-text-color-alt1 !default;
195
+ $range-calendar-medium-color: $content-text-color-alt3 !default;
196
+ $range-calendar-light-color: $content-text-color-alt2 !default;
197
+ $range-btn-border-transparent: 1px solid transparent !default;
198
+ $range-calendar-hover-border-color: none !default;
199
+ $range-change-icon-color: $icon-color !default;
200
+ $range-separator-color: $border-light !default;
201
+ $range-popup-border: 1px solid $border-light !default;
202
+ $range-overlay: rgba($content-bg-color-hover, .6) !default;
203
+ $range-presets-bg-color: $content-bg-color-selected !default;
204
+ $range-presets-font-color: $content-text-color !default;
205
+ $range-presets-hover-bg: $content-bg-color-hover !default;
206
+ $range-list-hover-color: $content-text-color-hover !default;
207
+ $range-calendar-active-border: 1px solid $content-text-color !default;
208
+ $range-today-border-color: $range-calendar-active-border !default;
209
+ $range-calendar-today-color: $content-text-color !default;
210
+ $range-calendar-today-start-color: $range-calendar-active-border !default;
211
+ $range-active-font-color: $primary-text-color !default;
212
+
213
+ // Cancel flat button custom styling
214
+ $range-cancel-flat-btn-bgcolor: $secondary-bg-color !default;
215
+ $range-cancel-flat-btn-border-color: $secondary-border-color !default;
216
+ $range-cancel-flat-btn-box-shadow: $shadow-sm !default;
217
+ $range-cancel-flat-btn-color: $secondary-text-color !default;
218
+
219
+ // Apply primary button custom styling
220
+ $range-apply-btn-primary-bgcolor: $primary-bg-color !default;
221
+ $range-apply-btn-primary-border-color: $primary-border-color !default;
222
+ $range-apply-btn-primary-color: $primary-text-color !default;
223
+
224
+ // modal full-screen styles
225
+ $modal-range-portrait-calendar-min-height: 100% !default;
226
+ $modal-range-portrait-calendar-min-width: 100% !default;
227
+ $modal-range-portrait-calendar-height: 100% !default;
228
+ $modal-range-portrait-header-height: 20vh !default;
229
+ $modal-range-portrait-header-padding: 2vh 2vw !default;
230
+ $modal-range-portrait-month-header-padding: 2vh 2vw !default;
231
+ $modal-range-portrait-icon-float: right !default;
232
+ $modal-range-portrait-header-month-height: 10vh !default;
233
+ $modal-range-month-header-line-height: 5vh !default;
234
+ $modal-range-month-landscape-title-line-height: 8vh !default;
235
+ $modal-range-month-header-title-line-height: inherit !default;
236
+ $modal-range-portrait-calendar-content-height: 69vh !default;
237
+ $modal-range-portrait-calendar-tabel-height: 69vh !default;
238
+ $modal-range-landscape-header-big-height: 25vh !default;
239
+ $modal-range-portrait-calendar-width: 100% !default;
240
+ $modal-range-start-end-margin: 3vh 0 0 0 !default;
241
+ $modal-range-start-end-tablet-margin: 5vh 0 0 0 !default;
242
+ $modal-range-portrait-calendar-height: 70vh !default;
243
+ $modal-range-landscape-calendar-height: 80vh !default;
244
+ $modal-range-landscape-container-height: 75vh !default;
245
+ $modal-range-header-height: 60vh !default;
246
+ $modal-range-tablet-header-height: 65vh !default;
247
+ $modal-range-calendar-padding: 0 !default;
248
+ $modal-range-calendar-overflow: unset !default;
249
+ $modal-range-calendar-header-border-style: solid !default;
250
+ $modal-range-calendar-header-border-width: 0 0 1px 0 !default;
251
+ $modal-range-prev-next-icon-size: 36px !default;
252
+ $modal-range-prev-next-icon-padding: 10px !default;
253
+ $modal-range-prev-next-icon-line-height: 1 !default;
254
+ $modal-range-calendar-th-size: 48px !default;
255
+ $modal-range-tablet-content-size: 64px !default;
256
+ $modal-range-range-hover-radius: 0 !default;
257
+ $modal-range-table-padding: 0 2vw !default;
258
+ $modal-range-footer-display: none !default;
259
+ $modal-range-landscape-header-height: 27vh !default;
260
+ $modal-range-landscape-conetent-overflow: auto !default;
261
+ $modal-range-table-display: table !default;
262
+ $modal-range-start-end-size: 28px !default;
263
+
264
+ // header styles for presets
265
+ $modal-range-presets-header-height: 10% !default;
266
+ $modal-range-presets-portrait-height: 90% !default;
267
+ $modal-range-presets-landscape-height: 85% !default;
268
+ $modal-range-header-padding: 2.5vh 2.5vw 2.5vh 1.5vw !default;
269
+ $modal-range-header-display-style: flex !default;
270
+ $modal-range-header-content-align: center !default;
271
+ $modal-range-header-portrait-font-size: 2vh !default;
272
+ $modal-close-icon-float: left !default;
273
+ $modal-portrait-content-padding: 1vh 2vw !default;
274
+ $modal-range-header-title-transform: capitalize !default;
275
+ $modal-range-header-border-bottom: none !default;
276
+ $modal-range-header-landscape-height: 15% !default;
277
+ $modal-range-header-landscape-font-size: 18px !default;
278
+ $modal-landscape-padding: 1vh 1vw !default;
279
+
280
+ // modal dialog colors
281
+ $modal-range-header-bg-color: $content-bg-color-alt1 !default;
282
+ $modal-range-header-text-color: $content-text-color-alt1 !default;
283
+
284
+ // tablet device style changes for modal popup
285
+ $modal-range-tablet-font-size: 18px !default;
286
+
287
+ $range-header-font-size: 16px !default;
288
+
289
+ $footer-top-border-color :1px solid $border-light !default;
290
+
291
+ /* stylelint-disable */
292
+ .e-daterangepicker.e-popup .e-footer{
293
+ border-top: 1px solid $footer-top-border-color !important;
294
+ }
@@ -0,0 +1,92 @@
1
+ @include export-module('daterangepicker-bds-icons') {
2
+
3
+ /*! component icons */
4
+ .e-input-group-icon.e-range-icon,
5
+ #{if(&, '&', '*')}.e-control-wrapper .e-input-group-icon.e-range-icon {
6
+ border-bottom-right-radius: $range-icon-bottom-right-radius;
7
+ border-right: $range-control-border-right;
8
+ border-top-right-radius: $range-icon-top-right-radius;
9
+ font-size: $range-icon-font-size;
10
+ margin: $range-icon-margin;
11
+ min-height: $range-icon-container-min-height;
12
+ min-width: $range-icon-container-min-width;
13
+ outline: none;
14
+
15
+ #{if(&, '&', '*')}::before {
16
+ content: '\e74c';
17
+ font-family: 'e-icons';
18
+ }
19
+
20
+ #{if(&, '&', '*')}:focus {
21
+ background: $range-icon-hover-color;
22
+ border-radius: $range-icon-border-radius;
23
+ }
24
+ }
25
+
26
+ .e-daterangepicker {
27
+ #{if(&, '&', '*')} .e-calendar .e-header .e-date-icon-next::before {
28
+ content: '\e748';
29
+ }
30
+ #{if(&, '&', '*')} .e-calendar .e-header .e-date-icon-prev::before {
31
+ content: '\e765';
32
+ }
33
+ #{if(&, '&', '*')} .e-change-icon::before {
34
+ content: '\e7f9';
35
+ }
36
+ #{if(&, '&', '*')} .e-calendar.e-rtl .e-header .e-date-icon-next::before {
37
+ content: '\e765';
38
+ }
39
+ #{if(&, '&', '*')} .e-calendar.e-rtl .e-header .e-date-icon-prev::before {
40
+ content: '\e748';
41
+ }
42
+ #{if(&, '&', '*')}.e-rtl .e-start-end .e-change-icon::before {
43
+ content: '\e773';
44
+ }
45
+ }
46
+
47
+ .e-bigger {
48
+ #{if(&, '&', '*')} .e-input-group-icon.e-range-icon,
49
+ #{if(&, '&', '*')}.e-control-wrapper .e-input-group-icon.e-range-icon,
50
+ #{if(&, '&', '*')} .e-control-wrapper .e-input-group-icon.e-range-icon {
51
+ font-size: $range-bigger-icon-font-size;
52
+ margin: $range-icon-bigger-margin;
53
+ min-height: $range-bigger-icon-container-min-height;
54
+ min-width: $range-bigger-icon-container-min-width;
55
+ outline: none;
56
+ }
57
+ }
58
+
59
+ // mouse small icon
60
+ .e-small .e-input-group-icon.e-range-icon,
61
+ #{if(&, '&', '*')}.e-control-wrapper.e-small .e-input-group-icon.e-range-icon,
62
+ #{if(&, '&', '*')}.e-small .e-control-wrapper .e-input-group-icon.e-range-icon {
63
+ font-size: $range-small-icon-font-size;
64
+ }
65
+
66
+ // Touch small icon
67
+ .e-small.e-bigger .e-input-group-icon.e-range-icon,
68
+ #{if(&, '&', '*')}.e-control-wrapper.e-small.e-bigger .e-input-group-icon.e-range-icon,
69
+ #{if(&, '&', '*')}.e-small.e-bigger .e-control-wrapper .e-input-group-icon.e-range-icon {
70
+ font-size: $range-bigger-small-icon-font-size;
71
+ }
72
+
73
+ .e-daterangepick-mob-popup-wrap {
74
+
75
+ #{if(&, '&', '*')} .e-daterangepicker.e-popup-expand {
76
+
77
+ #{if(&, '&', '*')} .e-range-header,
78
+ #{if(&, '&', '*')} .e-model-header {
79
+
80
+ #{if(&, '&', '*')} .e-popup-close::before {
81
+ content: '\e7e7';
82
+ font-family: 'e-icons';
83
+ }
84
+
85
+ #{if(&, '&', '*')} .e-apply::before {
86
+ content: '\e774';
87
+ font-family: 'e-icons';
88
+ }
89
+ }
90
+ }
91
+ }
92
+ }
@@ -0,0 +1,65 @@
1
+ // size variables
2
+ $datetime-default-text-indent: 12px !default;
3
+ $datetime-list-bigger-line-height: 36px !default;
4
+ $datetime-list-normal-line-height: 30px !default;
5
+ $datetime-list-normal-font-size: $text-sm !default;
6
+ $datetime-list-bigger-font-size: $text-base !default;
7
+ $datetime-list-normal-text-indent: $datetime-default-text-indent !default;
8
+ $datetime-list-bigger-text-indent: 16px !default;
9
+ $datetime-popup-border-radius: 6px !default;
10
+ $datetime-list-font-weight: $font-weight-normal !default;
11
+ $datetime-list-normal-padding: 8px !default;
12
+ $datetime-list-bigger-padding: 8px !default;
13
+ $datetime-time-font-icon: '\e20c' !default;
14
+ $datetime-icon-normal-font-size: $text-base !default;
15
+ $datetime-icon-bigger-font-size: $text-lg !default;
16
+ $datetime-date-icon-margin: 0 !default;
17
+ $datetime-time-icon-margin: 0 !default;
18
+ $datetime-time-bigger-icon-margin: 0 !default;
19
+ $datetime-time-rtl-icon-margin: 0 !default;
20
+ $datetime-time-rtl-bigger-icon-margin: 0 !default;
21
+ $datetime-normal-min-height: 24px !default;
22
+ $datetime-normal-min-width: 24px !default;
23
+ $datetime-bigger-min-height: 26px !default;
24
+ $datetime-bigger-min-width: 26px !default;
25
+ $datetime-time-icon-border: 0 !default;
26
+ $datetime-time-icon-border-style: none !default;
27
+ $datetime-list-default-border-style: none !default;
28
+
29
+ //mouse small
30
+ $datetime-list-small-line-height: 24px !default;
31
+ $datetime-list-small-text-indent: 12px !default;
32
+ $datetime-list-small-font-size: $text-xs !default;
33
+
34
+ // mouse small icon
35
+ $datetime-icon-small-font-size: $font-icon-14 !default;
36
+ $datetime-small-min-width: 16px !default;
37
+
38
+ //touch small
39
+ $datetime-list-bigger-small-line-height: 36px !default;
40
+ $datetime-list-bigger-small-text-indent: 12px !default;
41
+ $datetime-list-bigger-small-font-size: $text-sm !default;
42
+
43
+ // touch small icon
44
+ $datetime-icon-bigger-small-font-size: $text-base !default;
45
+
46
+ // color variables
47
+ $datetime-popup-shadow: $shadow-lg !default;
48
+ $datetime-list-default-font-color: $content-text-color !default;
49
+ $datetime-list-border-color: 1px solid $border-light !default;
50
+ $datetime-list-bg-color: $content-bg-color !default;
51
+ $datetime-list-active-bg-color: $content-bg-color-pressed !default;
52
+ $datetime-list-active-font-color: $content-text-color-pressed !default;
53
+ $datetime-list-active-icon-color: $content-text-color-pressed !default;
54
+ $datetime-list-hover-bg-color: $content-bg-color-hover !default;
55
+ $datetime-list-hover-font-color: $content-text-color-hover !default;
56
+ $datetime-list-popup-icon-active-color: $icon-color-pressed !default;
57
+ $datetime-list-active-hover-bg-color: $content-bg-color-hover !default;
58
+ $datetime-list-active-hover-font-color: $content-text-color-hover !default;
59
+ $datetime-list-hover-border-color: none !default;
60
+ $datetime-default-overlay: $content-bg-color-alt2 !default;
61
+
62
+ // modal full-screen popup
63
+ $modal-datetime-position: fixed !default;
64
+ $modal-datetime-wrapper-position: relative !default;
65
+ $modal-datetime-wrapper-width: 100% !default;
@@ -0,0 +1,11 @@
1
+ @include export-module('datetimepicker-bds-icons') {
2
+
3
+ /*! component icons */
4
+ .e-datetime-wrapper {
5
+
6
+ #{if(&, '&', '*')} .e-time-icon.e-icons::before {
7
+ content: '\e705';
8
+ font-family: 'e-icons';
9
+ }
10
+ }
11
+ }
@@ -848,7 +848,7 @@ ejs-calendar {
848
848
  transform: scale(1);
849
849
  }
850
850
  }
851
- .e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
851
+ .e-calendar .e-calendar-content-table .e-cell.e-focused-cell span.e-day {
852
852
  box-shadow: 0 0 0 1px #333232;
853
853
  border-radius: 0;
854
854
  }
package/styles/fabric.css CHANGED
@@ -853,7 +853,7 @@ ejs-calendar {
853
853
  transform: scale(1);
854
854
  }
855
855
  }
856
- .e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
856
+ .e-calendar .e-calendar-content-table .e-cell.e-focused-cell span.e-day {
857
857
  box-shadow: 0 0 0 1px #000;
858
858
  border-radius: 0;
859
859
  }
@@ -195,7 +195,7 @@ ejs-calendar {
195
195
  .e-calendar .e-header .e-prev, .e-calendar .e-header .e-next,
196
196
  .e-bigger.e-small .e-calendar .e-header .e-prev,
197
197
  .e-bigger.e-small .e-calendar .e-header .e-next {
198
- border-radius: 2px;
198
+ border-radius: 0;
199
199
  display: inline-block;
200
200
  font-size: 14px;
201
201
  vertical-align: middle;
@@ -726,7 +726,7 @@ ejs-calendar {
726
726
  .e-bigger.e-small .e-calendar .e-content td.e-focused-date:focus span.e-day {
727
727
  background: #252423;
728
728
  border: none;
729
- border-radius: 2px;
729
+ border-radius: 0;
730
730
  box-shadow: none;
731
731
  background: none;
732
732
  border-radius: 4px;
@@ -736,7 +736,7 @@ ejs-calendar {
736
736
  .e-bigger.e-small .e-calendar .e-content td.e-focused-date:hover span.e-day {
737
737
  background-color: #323130;
738
738
  border: none;
739
- border-radius: 2px;
739
+ border-radius: 0;
740
740
  color: #f3f2f1;
741
741
  }
742
742
  .e-calendar .e-content td.e-today span.e-day, .e-calendar .e-content td.e-focused-date.e-today span.e-day,
@@ -744,7 +744,7 @@ ejs-calendar {
744
744
  .e-bigger.e-small .e-calendar .e-content td.e-focused-date.e-today span.e-day {
745
745
  background: #0078d4;
746
746
  border: none;
747
- border-radius: 2px;
747
+ border-radius: 0;
748
748
  box-shadow: inset 1px 0 #0078d4, inset 0 1px #0078d4, inset -1px 0 #0078d4, inset 0 -1px #0078d4;
749
749
  color: #1b1a19;
750
750
  border-radius: 50%;
@@ -761,7 +761,7 @@ ejs-calendar {
761
761
  .e-bigger.e-small .e-calendar .e-content td.e-focused-date.e-today:focus span.e-day {
762
762
  background-color: #3b3a39;
763
763
  border: none;
764
- border-radius: 2px;
764
+ border-radius: 0;
765
765
  color: #1b1a19;
766
766
  background-color: #0078d4;
767
767
  border-radius: 50%;
@@ -832,7 +832,7 @@ ejs-calendar {
832
832
  .e-bigger.e-small .e-calendar .e-content td:focus span.e-day {
833
833
  background-color: #323130;
834
834
  border: none;
835
- border-radius: 2px;
835
+ border-radius: 0;
836
836
  color: #f3f2f1;
837
837
  }
838
838
  .e-calendar .e-content td:focus span.e-day,
@@ -840,7 +840,7 @@ ejs-calendar {
840
840
  background-color: #3b3a39;
841
841
  color: #f3f2f1;
842
842
  border: none;
843
- border-radius: 2px;
843
+ border-radius: 0;
844
844
  border-radius: 50%;
845
845
  }
846
846
  .e-calendar .e-content td.e-disabled span.e-day, .e-calendar .e-content td.e-disabled:hover span.e-day, .e-calendar .e-content td.e-disabled:focus span.e-day,
@@ -863,7 +863,7 @@ ejs-calendar {
863
863
  .e-bigger.e-small .e-calendar .e-content td.e-selected span.e-day {
864
864
  background-color: #3b3a39;
865
865
  border: none;
866
- border-radius: 2px;
866
+ border-radius: 0;
867
867
  color: #f3f2f1;
868
868
  }
869
869
  .e-calendar .e-content td.e-selected:not(.e-focused-date) span.e-day,
@@ -898,7 +898,7 @@ ejs-calendar {
898
898
  .e-bigger.e-small .e-calendar .e-content td.e-selected:hover span.e-day {
899
899
  background-color: #3b3a39;
900
900
  border: none;
901
- border-radius: 2px;
901
+ border-radius: 0;
902
902
  color: #f3f2f1;
903
903
  }
904
904
  .e-calendar .e-content td.e-selected.e-focused-date span.e-day,
@@ -1019,9 +1019,9 @@ ejs-calendar {
1019
1019
  color: #484644;
1020
1020
  }
1021
1021
 
1022
- .e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
1022
+ .e-calendar .e-calendar-content-table .e-cell.e-focused-cell span.e-day {
1023
1023
  box-shadow: 0 0 0 1px #a19f9d;
1024
- border-radius: 2px;
1024
+ border-radius: 0;
1025
1025
  }
1026
1026
 
1027
1027
  /* stylelint-disable property-no-vendor-prefix */
package/styles/fluent.css CHANGED
@@ -195,7 +195,7 @@ ejs-calendar {
195
195
  .e-calendar .e-header .e-prev, .e-calendar .e-header .e-next,
196
196
  .e-bigger.e-small .e-calendar .e-header .e-prev,
197
197
  .e-bigger.e-small .e-calendar .e-header .e-next {
198
- border-radius: 2px;
198
+ border-radius: 0;
199
199
  display: inline-block;
200
200
  font-size: 14px;
201
201
  vertical-align: middle;
@@ -726,7 +726,7 @@ ejs-calendar {
726
726
  .e-bigger.e-small .e-calendar .e-content td.e-focused-date:focus span.e-day {
727
727
  background: #f3f2f1;
728
728
  border: none;
729
- border-radius: 2px;
729
+ border-radius: 0;
730
730
  box-shadow: none;
731
731
  background: none;
732
732
  border-radius: 4px;
@@ -736,7 +736,7 @@ ejs-calendar {
736
736
  .e-bigger.e-small .e-calendar .e-content td.e-focused-date:hover span.e-day {
737
737
  background-color: #f3f2f1;
738
738
  border: none;
739
- border-radius: 2px;
739
+ border-radius: 0;
740
740
  color: #201f1e;
741
741
  }
742
742
  .e-calendar .e-content td.e-today span.e-day, .e-calendar .e-content td.e-focused-date.e-today span.e-day,
@@ -744,7 +744,7 @@ ejs-calendar {
744
744
  .e-bigger.e-small .e-calendar .e-content td.e-focused-date.e-today span.e-day {
745
745
  background: #0078d4;
746
746
  border: none;
747
- border-radius: 2px;
747
+ border-radius: 0;
748
748
  box-shadow: inset 1px 0 #0078d4, inset 0 1px #0078d4, inset -1px 0 #0078d4, inset 0 -1px #0078d4;
749
749
  color: #fff;
750
750
  border-radius: 50%;
@@ -761,7 +761,7 @@ ejs-calendar {
761
761
  .e-bigger.e-small .e-calendar .e-content td.e-focused-date.e-today:focus span.e-day {
762
762
  background-color: #edebe9;
763
763
  border: none;
764
- border-radius: 2px;
764
+ border-radius: 0;
765
765
  color: #fff;
766
766
  background-color: #0078d4;
767
767
  border-radius: 50%;
@@ -832,7 +832,7 @@ ejs-calendar {
832
832
  .e-bigger.e-small .e-calendar .e-content td:focus span.e-day {
833
833
  background-color: #f3f2f1;
834
834
  border: none;
835
- border-radius: 2px;
835
+ border-radius: 0;
836
836
  color: #201f1e;
837
837
  }
838
838
  .e-calendar .e-content td:focus span.e-day,
@@ -840,7 +840,7 @@ ejs-calendar {
840
840
  background-color: #edebe9;
841
841
  color: #201f1e;
842
842
  border: none;
843
- border-radius: 2px;
843
+ border-radius: 0;
844
844
  border-radius: 50%;
845
845
  }
846
846
  .e-calendar .e-content td.e-disabled span.e-day, .e-calendar .e-content td.e-disabled:hover span.e-day, .e-calendar .e-content td.e-disabled:focus span.e-day,
@@ -863,7 +863,7 @@ ejs-calendar {
863
863
  .e-bigger.e-small .e-calendar .e-content td.e-selected span.e-day {
864
864
  background-color: #edebe9;
865
865
  border: none;
866
- border-radius: 2px;
866
+ border-radius: 0;
867
867
  color: #201f1e;
868
868
  }
869
869
  .e-calendar .e-content td.e-selected:not(.e-focused-date) span.e-day,
@@ -898,7 +898,7 @@ ejs-calendar {
898
898
  .e-bigger.e-small .e-calendar .e-content td.e-selected:hover span.e-day {
899
899
  background-color: #edebe9;
900
900
  border: none;
901
- border-radius: 2px;
901
+ border-radius: 0;
902
902
  color: #201f1e;
903
903
  }
904
904
  .e-calendar .e-content td.e-selected.e-focused-date span.e-day,
@@ -1019,9 +1019,9 @@ ejs-calendar {
1019
1019
  color: #a19f9d;
1020
1020
  }
1021
1021
 
1022
- .e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
1022
+ .e-calendar .e-calendar-content-table .e-cell.e-focused-cell span.e-day {
1023
1023
  box-shadow: 0 0 0 1px #605e5c;
1024
- border-radius: 2px;
1024
+ border-radius: 0;
1025
1025
  }
1026
1026
 
1027
1027
  /* stylelint-disable property-no-vendor-prefix */
@@ -843,7 +843,7 @@ ejs-calendar {
843
843
  transform: scale(1);
844
844
  }
845
845
  }
846
- .e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
846
+ .e-calendar .e-calendar-content-table .e-cell.e-focused-cell span.e-day {
847
847
  box-shadow: 0 0 0 1px #fff;
848
848
  border-radius: 0;
849
849
  }
@@ -853,7 +853,7 @@ ejs-calendar {
853
853
  transform: scale(1);
854
854
  }
855
855
  }
856
- .e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
856
+ .e-calendar .e-calendar-content-table .e-cell.e-focused-cell span.e-day {
857
857
  box-shadow: 0 0 0 1px #fff;
858
858
  border-radius: 0;
859
859
  }