@syncfusion/ej2-calendars 19.4.55 → 20.1.52

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 (169) hide show
  1. package/dist/ej2-calendars.umd.min.js +2 -2
  2. package/dist/ej2-calendars.umd.min.js.map +1 -1
  3. package/dist/es6/ej2-calendars.es2015.js +2 -2
  4. package/dist/es6/ej2-calendars.es2015.js.map +1 -1
  5. package/dist/es6/ej2-calendars.es5.js +2 -2
  6. package/dist/es6/ej2-calendars.es5.js.map +1 -1
  7. package/dist/global/ej2-calendars.min.js +2 -2
  8. package/dist/global/ej2-calendars.min.js.map +1 -1
  9. package/dist/global/index.d.ts +1 -1
  10. package/package.json +10 -10
  11. package/src/datepicker/datepicker.js +1 -1
  12. package/src/maskbase/masked-date-time.js +1 -1
  13. package/src/timepicker/timepicker.d.ts +4 -4
  14. package/styles/bootstrap-dark.css +82 -31
  15. package/styles/bootstrap.css +82 -31
  16. package/styles/bootstrap4.css +82 -31
  17. package/styles/bootstrap5-dark.css +140 -45
  18. package/styles/bootstrap5.css +134 -39
  19. package/styles/calendar/_bootstrap-dark-definition.scss +9 -4
  20. package/styles/calendar/_bootstrap-definition.scss +9 -4
  21. package/styles/calendar/_bootstrap4-definition.scss +9 -5
  22. package/styles/calendar/_bootstrap5-definition.scss +29 -19
  23. package/styles/calendar/_fabric-dark-definition.scss +8 -1
  24. package/styles/calendar/_fabric-definition.scss +8 -1
  25. package/styles/calendar/_fluent-dark-definition.scss +1 -0
  26. package/styles/calendar/_fluent-definition.scss +49 -37
  27. package/styles/calendar/_highcontrast-definition.scss +8 -1
  28. package/styles/calendar/_highcontrast-light-definition.scss +9 -1
  29. package/styles/calendar/_layout.scss +174 -5
  30. package/styles/calendar/_material-dark-definition.scss +9 -0
  31. package/styles/calendar/_material-definition.scss +9 -0
  32. package/styles/calendar/_tailwind-definition.scss +61 -25
  33. package/styles/calendar/_theme.scss +189 -13
  34. package/styles/calendar/bootstrap-dark.css +9 -5
  35. package/styles/calendar/bootstrap.css +9 -5
  36. package/styles/calendar/bootstrap4.css +9 -5
  37. package/styles/calendar/bootstrap5-dark.css +62 -14
  38. package/styles/calendar/bootstrap5.css +58 -10
  39. package/styles/calendar/fabric-dark.css +4 -0
  40. package/styles/calendar/fabric.css +4 -0
  41. package/styles/calendar/fluent-dark.css +1189 -0
  42. package/styles/calendar/fluent-dark.scss +5 -0
  43. package/styles/calendar/fluent.css +1189 -0
  44. package/styles/calendar/fluent.scss +5 -0
  45. package/styles/calendar/highcontrast-light.css +4 -0
  46. package/styles/calendar/highcontrast.css +4 -0
  47. package/styles/calendar/icons/_fluent-dark.scss +1 -0
  48. package/styles/calendar/icons/_fluent.scss +2 -2
  49. package/styles/calendar/icons/_tailwind.scss +4 -5
  50. package/styles/calendar/material-dark.css +4 -0
  51. package/styles/calendar/material.css +4 -0
  52. package/styles/calendar/tailwind-dark.css +158 -34
  53. package/styles/calendar/tailwind.css +158 -34
  54. package/styles/datepicker/_bootstrap-dark-definition.scss +6 -0
  55. package/styles/datepicker/_bootstrap-definition.scss +6 -0
  56. package/styles/datepicker/_bootstrap4-definition.scss +6 -0
  57. package/styles/datepicker/_bootstrap5-definition.scss +6 -0
  58. package/styles/datepicker/_fabric-dark-definition.scss +6 -0
  59. package/styles/datepicker/_fabric-definition.scss +6 -0
  60. package/styles/datepicker/_fluent-dark-definition.scss +1 -0
  61. package/styles/datepicker/_fluent-definition.scss +9 -2
  62. package/styles/datepicker/_highcontrast-definition.scss +6 -0
  63. package/styles/datepicker/_highcontrast-light-definition.scss +6 -0
  64. package/styles/datepicker/_layout.scss +6 -6
  65. package/styles/datepicker/_material-dark-definition.scss +6 -0
  66. package/styles/datepicker/_material-definition.scss +6 -0
  67. package/styles/datepicker/_tailwind-definition.scss +7 -1
  68. package/styles/datepicker/_theme.scss +6 -1
  69. package/styles/datepicker/bootstrap-dark.css +12 -2
  70. package/styles/datepicker/bootstrap.css +12 -2
  71. package/styles/datepicker/bootstrap4.css +12 -2
  72. package/styles/datepicker/bootstrap5-dark.css +12 -2
  73. package/styles/datepicker/bootstrap5.css +12 -2
  74. package/styles/datepicker/fabric-dark.css +12 -2
  75. package/styles/datepicker/fabric.css +12 -2
  76. package/styles/datepicker/fluent-dark.css +189 -0
  77. package/styles/datepicker/fluent-dark.scss +7 -0
  78. package/styles/datepicker/fluent.css +189 -0
  79. package/styles/datepicker/fluent.scss +7 -0
  80. package/styles/datepicker/highcontrast-light.css +12 -2
  81. package/styles/datepicker/highcontrast.css +12 -2
  82. package/styles/datepicker/icons/_fluent-dark.scss +1 -0
  83. package/styles/datepicker/icons/_fluent.scss +2 -2
  84. package/styles/datepicker/icons/_tailwind.scss +2 -2
  85. package/styles/datepicker/material-dark.css +12 -2
  86. package/styles/datepicker/material.css +12 -2
  87. package/styles/datepicker/tailwind-dark.css +15 -5
  88. package/styles/datepicker/tailwind.css +15 -5
  89. package/styles/daterangepicker/_bootstrap-dark-definition.scss +1 -0
  90. package/styles/daterangepicker/_bootstrap-definition.scss +1 -0
  91. package/styles/daterangepicker/_bootstrap4-definition.scss +1 -0
  92. package/styles/daterangepicker/_bootstrap5-definition.scss +4 -3
  93. package/styles/daterangepicker/_fabric-dark-definition.scss +1 -0
  94. package/styles/daterangepicker/_fabric-definition.scss +1 -0
  95. package/styles/daterangepicker/_fluent-dark-definition.scss +1 -0
  96. package/styles/daterangepicker/_fluent-definition.scss +13 -6
  97. package/styles/daterangepicker/_highcontrast-definition.scss +1 -0
  98. package/styles/daterangepicker/_highcontrast-light-definition.scss +1 -0
  99. package/styles/daterangepicker/_layout.scss +99 -18
  100. package/styles/daterangepicker/_material-dark-definition.scss +1 -0
  101. package/styles/daterangepicker/_material-definition.scss +1 -0
  102. package/styles/daterangepicker/_tailwind-definition.scss +44 -22
  103. package/styles/daterangepicker/_theme.scss +104 -18
  104. package/styles/daterangepicker/bootstrap-dark.css +60 -24
  105. package/styles/daterangepicker/bootstrap.css +60 -24
  106. package/styles/daterangepicker/bootstrap4.css +60 -24
  107. package/styles/daterangepicker/bootstrap5-dark.css +65 -29
  108. package/styles/daterangepicker/bootstrap5.css +63 -27
  109. package/styles/daterangepicker/fabric-dark.css +60 -24
  110. package/styles/daterangepicker/fabric.css +60 -24
  111. package/styles/daterangepicker/fluent-dark.css +1055 -0
  112. package/styles/daterangepicker/fluent-dark.scss +7 -0
  113. package/styles/daterangepicker/fluent.css +1055 -0
  114. package/styles/daterangepicker/fluent.scss +7 -0
  115. package/styles/daterangepicker/highcontrast-light.css +60 -24
  116. package/styles/daterangepicker/highcontrast.css +60 -24
  117. package/styles/daterangepicker/icons/_fluent-dark.scss +1 -0
  118. package/styles/daterangepicker/icons/_fluent.scss +7 -7
  119. package/styles/daterangepicker/icons/_tailwind.scss +13 -9
  120. package/styles/daterangepicker/material-dark.css +60 -24
  121. package/styles/daterangepicker/material.css +60 -24
  122. package/styles/daterangepicker/tailwind-dark.css +137 -93
  123. package/styles/daterangepicker/tailwind.css +137 -93
  124. package/styles/datetimepicker/_fluent-dark-definition.scss +1 -0
  125. package/styles/datetimepicker/fluent-dark.css +205 -0
  126. package/styles/datetimepicker/fluent-dark.scss +8 -0
  127. package/styles/datetimepicker/fluent.css +205 -0
  128. package/styles/datetimepicker/fluent.scss +8 -0
  129. package/styles/datetimepicker/icons/_fluent-dark.scss +1 -0
  130. package/styles/datetimepicker/icons/_fluent.scss +1 -1
  131. package/styles/datetimepicker/icons/_tailwind.scss +2 -1
  132. package/styles/datetimepicker/tailwind-dark.css +1 -1
  133. package/styles/datetimepicker/tailwind.css +1 -1
  134. package/styles/fabric-dark.css +77 -26
  135. package/styles/fabric.css +77 -26
  136. package/styles/fluent-dark.css +2864 -0
  137. package/styles/fluent-dark.scss +5 -0
  138. package/styles/fluent.css +2864 -0
  139. package/styles/fluent.scss +5 -0
  140. package/styles/highcontrast-light.css +77 -26
  141. package/styles/highcontrast.css +77 -26
  142. package/styles/material-dark.css +77 -26
  143. package/styles/material.css +77 -26
  144. package/styles/tailwind-dark.css +316 -137
  145. package/styles/tailwind.css +316 -137
  146. package/styles/timepicker/_fluent-dark-definition.scss +1 -0
  147. package/styles/timepicker/_fluent-definition.scss +3 -3
  148. package/styles/timepicker/_tailwind-definition.scss +3 -3
  149. package/styles/timepicker/_theme.scss +1 -0
  150. package/styles/timepicker/bootstrap-dark.css +1 -0
  151. package/styles/timepicker/bootstrap.css +1 -0
  152. package/styles/timepicker/bootstrap4.css +1 -0
  153. package/styles/timepicker/bootstrap5-dark.css +1 -0
  154. package/styles/timepicker/bootstrap5.css +1 -0
  155. package/styles/timepicker/fabric-dark.css +1 -0
  156. package/styles/timepicker/fabric.css +1 -0
  157. package/styles/timepicker/fluent-dark.css +222 -0
  158. package/styles/timepicker/fluent-dark.scss +6 -0
  159. package/styles/timepicker/fluent.css +222 -0
  160. package/styles/timepicker/fluent.scss +6 -0
  161. package/styles/timepicker/highcontrast-light.css +1 -0
  162. package/styles/timepicker/highcontrast.css +1 -0
  163. package/styles/timepicker/icons/_fluent-dark.scss +1 -0
  164. package/styles/timepicker/icons/_fluent.scss +1 -1
  165. package/styles/timepicker/icons/_tailwind.scss +2 -1
  166. package/styles/timepicker/material-dark.css +1 -0
  167. package/styles/timepicker/material.css +1 -0
  168. package/styles/timepicker/tailwind-dark.css +5 -4
  169. package/styles/timepicker/tailwind.css +5 -4
@@ -155,13 +155,23 @@
155
155
  }
156
156
 
157
157
  .e-datepicker.e-popup-wrapper,
158
- .e-bigger.e-small .e-datepicker.e-popup-wrapper {
158
+ .e-bigger.e-small .e-datepicker.e-popup-wrapper,
159
+ .e-bigger .e-datepicker.e-popup-wrapper,
160
+ .e-small .e-datepicker.e-popup-wrapper,
161
+ .e-bigger.e-small.e-datepicker.e-popup-wrapper,
162
+ .e-bigger.e-datepicker.e-popup-wrapper,
163
+ .e-small.e-datepicker.e-popup-wrapper {
159
164
  border: 1px solid #444c54;
160
165
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.175);
161
166
  }
162
167
 
163
168
  .e-datepicker .e-calendar,
164
- .e-bigger.e-small .e-datepicker .e-calendar {
169
+ .e-bigger.e-small .e-datepicker .e-calendar,
170
+ .e-bigger .e-datepicker .e-calendar,
171
+ .e-small .e-datepicker .e-calendar,
172
+ .e-bigger.e-small.e-datepicker .e-calendar,
173
+ .e-bigger.e-datepicker .e-calendar,
174
+ .e-small.e-datepicker .e-calendar {
165
175
  background-color: #343a40;
166
176
  border: none;
167
177
  }
@@ -155,13 +155,23 @@
155
155
  }
156
156
 
157
157
  .e-datepicker.e-popup-wrapper,
158
- .e-bigger.e-small .e-datepicker.e-popup-wrapper {
158
+ .e-bigger.e-small .e-datepicker.e-popup-wrapper,
159
+ .e-bigger .e-datepicker.e-popup-wrapper,
160
+ .e-small .e-datepicker.e-popup-wrapper,
161
+ .e-bigger.e-small.e-datepicker.e-popup-wrapper,
162
+ .e-bigger.e-datepicker.e-popup-wrapper,
163
+ .e-small.e-datepicker.e-popup-wrapper {
159
164
  border: 1px solid #dee2e6;
160
165
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.175);
161
166
  }
162
167
 
163
168
  .e-datepicker .e-calendar,
164
- .e-bigger.e-small .e-datepicker .e-calendar {
169
+ .e-bigger.e-small .e-datepicker .e-calendar,
170
+ .e-bigger .e-datepicker .e-calendar,
171
+ .e-small .e-datepicker .e-calendar,
172
+ .e-bigger.e-small.e-datepicker .e-calendar,
173
+ .e-bigger.e-datepicker .e-calendar,
174
+ .e-small.e-datepicker .e-calendar {
165
175
  background-color: #fff;
166
176
  border: none;
167
177
  }
@@ -150,13 +150,23 @@
150
150
  }
151
151
 
152
152
  .e-datepicker.e-popup-wrapper,
153
- .e-bigger.e-small .e-datepicker.e-popup-wrapper {
153
+ .e-bigger.e-small .e-datepicker.e-popup-wrapper,
154
+ .e-bigger .e-datepicker.e-popup-wrapper,
155
+ .e-small .e-datepicker.e-popup-wrapper,
156
+ .e-bigger.e-small.e-datepicker.e-popup-wrapper,
157
+ .e-bigger.e-datepicker.e-popup-wrapper,
158
+ .e-small.e-datepicker.e-popup-wrapper {
154
159
  border: 1px solid #414040;
155
160
  box-shadow: none;
156
161
  }
157
162
 
158
163
  .e-datepicker .e-calendar,
159
- .e-bigger.e-small .e-datepicker .e-calendar {
164
+ .e-bigger.e-small .e-datepicker .e-calendar,
165
+ .e-bigger .e-datepicker .e-calendar,
166
+ .e-small .e-datepicker .e-calendar,
167
+ .e-bigger.e-small.e-datepicker .e-calendar,
168
+ .e-bigger.e-datepicker .e-calendar,
169
+ .e-small.e-datepicker .e-calendar {
160
170
  background-color: #282727;
161
171
  border: none;
162
172
  }
@@ -151,13 +151,23 @@
151
151
  }
152
152
 
153
153
  .e-datepicker.e-popup-wrapper,
154
- .e-bigger.e-small .e-datepicker.e-popup-wrapper {
154
+ .e-bigger.e-small .e-datepicker.e-popup-wrapper,
155
+ .e-bigger .e-datepicker.e-popup-wrapper,
156
+ .e-small .e-datepicker.e-popup-wrapper,
157
+ .e-bigger.e-small.e-datepicker.e-popup-wrapper,
158
+ .e-bigger.e-datepicker.e-popup-wrapper,
159
+ .e-small.e-datepicker.e-popup-wrapper {
155
160
  border: 1px solid #eaeaea;
156
161
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
157
162
  }
158
163
 
159
164
  .e-datepicker .e-calendar,
160
- .e-bigger.e-small .e-datepicker .e-calendar {
165
+ .e-bigger.e-small .e-datepicker .e-calendar,
166
+ .e-bigger .e-datepicker .e-calendar,
167
+ .e-small .e-datepicker .e-calendar,
168
+ .e-bigger.e-small.e-datepicker .e-calendar,
169
+ .e-bigger.e-datepicker .e-calendar,
170
+ .e-small.e-datepicker .e-calendar {
161
171
  background-color: #fff;
162
172
  border: none;
163
173
  }
@@ -0,0 +1,189 @@
1
+ /*! calendar bootstrap5 theme variables */
2
+ /*! component icons */
3
+ .e-input-group-icon.e-date-icon,
4
+ *.e-control-wrapper .e-input-group-icon.e-date-icon {
5
+ font-size: 18px;
6
+ margin: 0;
7
+ min-height: 18px;
8
+ min-width: 30px;
9
+ outline: none;
10
+ }
11
+
12
+ .e-input-group-icon.e-date-icon::before,
13
+ *.e-control-wrapper .e-input-group-icon.e-date-icon::before {
14
+ content: '\e75e';
15
+ font-family: 'e-icons';
16
+ }
17
+
18
+ .e-input-group-icon.e-date-icon:focus,
19
+ *.e-control-wrapper .e-input-group-icon.e-date-icon:focus {
20
+ background: #f3f2f1;
21
+ border-radius: 50%;
22
+ }
23
+
24
+ .e-bigger .e-input-group-icon.e-date-icon,
25
+ *.e-control-wrapper.e-bigger .e-input-group-icon.e-date-icon,
26
+ *.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
27
+ font-size: 22px;
28
+ margin: 0;
29
+ min-height: 18px;
30
+ min-width: 36px;
31
+ }
32
+
33
+ .e-bigger .e-input-group-icon.e-date-icon::before,
34
+ *.e-control-wrapper.e-bigger .e-input-group-icon.e-date-icon::before,
35
+ *.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon::before {
36
+ content: '\e75e';
37
+ font-family: 'e-icons';
38
+ }
39
+
40
+ .e-bigger .e-input-group-icon.e-date-icon:focus,
41
+ *.e-control-wrapper.e-bigger .e-input-group-icon.e-date-icon:focus,
42
+ *.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon:focus {
43
+ background: #f3f2f1;
44
+ border-radius: 50%;
45
+ }
46
+
47
+ .e-small .e-input-group-icon.e-date-icon,
48
+ *.e-control-wrapper.e-small .e-input-group-icon.e-date-icon,
49
+ *.e-small .e-control-wrapper .e-input-group-icon.e-date-icon {
50
+ font-size: 16px;
51
+ }
52
+
53
+ .e-small.e-bigger .e-input-group-icon.e-date-icon,
54
+ *.e-control-wrapper.e-small.e-bigger .e-input-group-icon.e-date-icon,
55
+ *.e-small.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
56
+ font-size: 20px;
57
+ }
58
+
59
+ .e-input-group.e-control-wrapper.e-date-wrapper.e-non-edit.e-input-focus .e-input:focus ~ .e-clear-icon,
60
+ .e-float-input.e-control-wrapper.e-input-group.e-date-wrapper.e-non-edit.e-input-focus input:focus ~ .e-clear-icon {
61
+ display: -ms-flexbox;
62
+ display: flex;
63
+ }
64
+
65
+ .e-datepicker .e-calendar .e-content table tbody tr.e-month-hide:last-child {
66
+ display: none;
67
+ }
68
+
69
+ .e-datepicker.e-popup-wrapper {
70
+ border-radius: 6px;
71
+ overflow-y: hidden;
72
+ pointer-events: auto;
73
+ }
74
+
75
+ .e-datepicker.e-date-modal {
76
+ background-color: rgba(0, 0, 0, 0.4);
77
+ height: 100%;
78
+ left: 0;
79
+ opacity: .5;
80
+ pointer-events: auto;
81
+ position: fixed;
82
+ top: 0;
83
+ width: 100%;
84
+ z-index: 999;
85
+ }
86
+
87
+ .e-datepicker .e-model-header {
88
+ background-color: #8a8886;
89
+ color: #fff;
90
+ cursor: default;
91
+ display: block;
92
+ padding: 10px 10px 10px 15px;
93
+ }
94
+
95
+ .e-datepicker .e-model-header .e-model-year {
96
+ font-size: 14px;
97
+ font-weight: 600;
98
+ line-height: 22px;
99
+ margin: 0;
100
+ }
101
+
102
+ .e-datepicker .e-model-month,
103
+ .e-datepicker .e-model-day {
104
+ font-size: 18px;
105
+ font-weight: 600;
106
+ line-height: 28px;
107
+ margin: 0;
108
+ }
109
+
110
+ .e-date-overflow {
111
+ overflow: hidden !important;
112
+ }
113
+
114
+ .e-datepick-mob-popup-wrap {
115
+ -ms-flex-align: center;
116
+ align-items: center;
117
+ display: -ms-flexbox;
118
+ display: flex;
119
+ -ms-flex-direction: column;
120
+ flex-direction: column;
121
+ height: 100%;
122
+ -ms-flex-pack: center;
123
+ justify-content: center;
124
+ left: 0;
125
+ max-height: 100%;
126
+ position: fixed;
127
+ top: 0;
128
+ width: 100%;
129
+ z-index: 1002;
130
+ }
131
+
132
+ .e-datepick-mob-popup-wrap .e-datepicker.e-popup-wrapper.e-lib.e-popup.e-control.e-popup-open {
133
+ position: relative;
134
+ top: 0 !important;
135
+ left: 0 !important;
136
+ }
137
+
138
+ .e-content-placeholder.e-datepicker.e-placeholder-datepicker {
139
+ background-size: 250px 33px;
140
+ min-height: 33px;
141
+ }
142
+
143
+ .e-bigger .e-content-placeholder.e-datepicker.e-placeholder-datepicker,
144
+ .e-bigger.e-content-placeholder.e-datepicker.e-placeholder-datepicker {
145
+ background-size: 250px 40px;
146
+ min-height: 40px;
147
+ }
148
+
149
+ @media screen and (orientation: landscape) and (max-height: 360px) {
150
+ .e-datepicker .e-calendar.e-device .e-month table tbody {
151
+ display: inline-block;
152
+ height: 130px;
153
+ overflow: auto;
154
+ }
155
+ }
156
+
157
+ .e-datepicker.e-popup-wrapper,
158
+ .e-bigger.e-small .e-datepicker.e-popup-wrapper,
159
+ .e-bigger .e-datepicker.e-popup-wrapper,
160
+ .e-small .e-datepicker.e-popup-wrapper,
161
+ .e-bigger.e-small.e-datepicker.e-popup-wrapper,
162
+ .e-bigger.e-datepicker.e-popup-wrapper,
163
+ .e-small.e-datepicker.e-popup-wrapper {
164
+ border: 0 solid #292827;
165
+ box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108);
166
+ }
167
+
168
+ .e-datepicker .e-calendar,
169
+ .e-bigger.e-small .e-datepicker .e-calendar,
170
+ .e-bigger .e-datepicker .e-calendar,
171
+ .e-small .e-datepicker .e-calendar,
172
+ .e-bigger.e-small.e-datepicker .e-calendar,
173
+ .e-bigger.e-datepicker .e-calendar,
174
+ .e-small.e-datepicker .e-calendar {
175
+ background-color: #252423;
176
+ border: none;
177
+ }
178
+
179
+ *.e-input-group.e-date-wrapper.e-dateinput-active:active:not(.e-success):not(.e-warning):not(.e-error) {
180
+ border: none;
181
+ }
182
+
183
+ .e-date-wrapper span.e-input-group-icon.e-date-icon.e-icons.e-active {
184
+ color: #a19f9d;
185
+ }
186
+
187
+ .e-date-wrapper span.e-input-group-icon.e-date-icon.e-icons.e-active {
188
+ color: #a19f9d;
189
+ }
@@ -0,0 +1,7 @@
1
+ @import 'ej2-base/styles/fluent-dark-definition.scss';
2
+ @import 'ej2-inputs/styles/input/fluent-dark-definition.scss';
3
+ @import 'ej2-popups/styles/popup/fluent-dark-definition.scss';
4
+ @import '../calendar/fluent-dark-definition.scss';
5
+ @import 'fluent-dark-definition.scss';
6
+ @import 'icons/fluent-dark.scss';
7
+ @import 'all.scss';
@@ -0,0 +1,189 @@
1
+ /*! calendar bootstrap5 theme variables */
2
+ /*! component icons */
3
+ .e-input-group-icon.e-date-icon,
4
+ *.e-control-wrapper .e-input-group-icon.e-date-icon {
5
+ font-size: 18px;
6
+ margin: 0;
7
+ min-height: 18px;
8
+ min-width: 30px;
9
+ outline: none;
10
+ }
11
+
12
+ .e-input-group-icon.e-date-icon::before,
13
+ *.e-control-wrapper .e-input-group-icon.e-date-icon::before {
14
+ content: '\e75e';
15
+ font-family: 'e-icons';
16
+ }
17
+
18
+ .e-input-group-icon.e-date-icon:focus,
19
+ *.e-control-wrapper .e-input-group-icon.e-date-icon:focus {
20
+ background: #323130;
21
+ border-radius: 50%;
22
+ }
23
+
24
+ .e-bigger .e-input-group-icon.e-date-icon,
25
+ *.e-control-wrapper.e-bigger .e-input-group-icon.e-date-icon,
26
+ *.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
27
+ font-size: 22px;
28
+ margin: 0;
29
+ min-height: 18px;
30
+ min-width: 36px;
31
+ }
32
+
33
+ .e-bigger .e-input-group-icon.e-date-icon::before,
34
+ *.e-control-wrapper.e-bigger .e-input-group-icon.e-date-icon::before,
35
+ *.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon::before {
36
+ content: '\e75e';
37
+ font-family: 'e-icons';
38
+ }
39
+
40
+ .e-bigger .e-input-group-icon.e-date-icon:focus,
41
+ *.e-control-wrapper.e-bigger .e-input-group-icon.e-date-icon:focus,
42
+ *.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon:focus {
43
+ background: #323130;
44
+ border-radius: 50%;
45
+ }
46
+
47
+ .e-small .e-input-group-icon.e-date-icon,
48
+ *.e-control-wrapper.e-small .e-input-group-icon.e-date-icon,
49
+ *.e-small .e-control-wrapper .e-input-group-icon.e-date-icon {
50
+ font-size: 16px;
51
+ }
52
+
53
+ .e-small.e-bigger .e-input-group-icon.e-date-icon,
54
+ *.e-control-wrapper.e-small.e-bigger .e-input-group-icon.e-date-icon,
55
+ *.e-small.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
56
+ font-size: 20px;
57
+ }
58
+
59
+ .e-input-group.e-control-wrapper.e-date-wrapper.e-non-edit.e-input-focus .e-input:focus ~ .e-clear-icon,
60
+ .e-float-input.e-control-wrapper.e-input-group.e-date-wrapper.e-non-edit.e-input-focus input:focus ~ .e-clear-icon {
61
+ display: -ms-flexbox;
62
+ display: flex;
63
+ }
64
+
65
+ .e-datepicker .e-calendar .e-content table tbody tr.e-month-hide:last-child {
66
+ display: none;
67
+ }
68
+
69
+ .e-datepicker.e-popup-wrapper {
70
+ border-radius: 6px;
71
+ overflow-y: hidden;
72
+ pointer-events: auto;
73
+ }
74
+
75
+ .e-datepicker.e-date-modal {
76
+ background-color: rgba(0, 0, 0, 0.4);
77
+ height: 100%;
78
+ left: 0;
79
+ opacity: .5;
80
+ pointer-events: auto;
81
+ position: fixed;
82
+ top: 0;
83
+ width: 100%;
84
+ z-index: 999;
85
+ }
86
+
87
+ .e-datepicker .e-model-header {
88
+ background-color: #8a8886;
89
+ color: #fff;
90
+ cursor: default;
91
+ display: block;
92
+ padding: 10px 10px 10px 15px;
93
+ }
94
+
95
+ .e-datepicker .e-model-header .e-model-year {
96
+ font-size: 14px;
97
+ font-weight: 600;
98
+ line-height: 22px;
99
+ margin: 0;
100
+ }
101
+
102
+ .e-datepicker .e-model-month,
103
+ .e-datepicker .e-model-day {
104
+ font-size: 18px;
105
+ font-weight: 600;
106
+ line-height: 28px;
107
+ margin: 0;
108
+ }
109
+
110
+ .e-date-overflow {
111
+ overflow: hidden !important;
112
+ }
113
+
114
+ .e-datepick-mob-popup-wrap {
115
+ -ms-flex-align: center;
116
+ align-items: center;
117
+ display: -ms-flexbox;
118
+ display: flex;
119
+ -ms-flex-direction: column;
120
+ flex-direction: column;
121
+ height: 100%;
122
+ -ms-flex-pack: center;
123
+ justify-content: center;
124
+ left: 0;
125
+ max-height: 100%;
126
+ position: fixed;
127
+ top: 0;
128
+ width: 100%;
129
+ z-index: 1002;
130
+ }
131
+
132
+ .e-datepick-mob-popup-wrap .e-datepicker.e-popup-wrapper.e-lib.e-popup.e-control.e-popup-open {
133
+ position: relative;
134
+ top: 0 !important;
135
+ left: 0 !important;
136
+ }
137
+
138
+ .e-content-placeholder.e-datepicker.e-placeholder-datepicker {
139
+ background-size: 250px 33px;
140
+ min-height: 33px;
141
+ }
142
+
143
+ .e-bigger .e-content-placeholder.e-datepicker.e-placeholder-datepicker,
144
+ .e-bigger.e-content-placeholder.e-datepicker.e-placeholder-datepicker {
145
+ background-size: 250px 40px;
146
+ min-height: 40px;
147
+ }
148
+
149
+ @media screen and (orientation: landscape) and (max-height: 360px) {
150
+ .e-datepicker .e-calendar.e-device .e-month table tbody {
151
+ display: inline-block;
152
+ height: 130px;
153
+ overflow: auto;
154
+ }
155
+ }
156
+
157
+ .e-datepicker.e-popup-wrapper,
158
+ .e-bigger.e-small .e-datepicker.e-popup-wrapper,
159
+ .e-bigger .e-datepicker.e-popup-wrapper,
160
+ .e-small .e-datepicker.e-popup-wrapper,
161
+ .e-bigger.e-small.e-datepicker.e-popup-wrapper,
162
+ .e-bigger.e-datepicker.e-popup-wrapper,
163
+ .e-small.e-datepicker.e-popup-wrapper {
164
+ border: 0 solid #edebe9;
165
+ box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108);
166
+ }
167
+
168
+ .e-datepicker .e-calendar,
169
+ .e-bigger.e-small .e-datepicker .e-calendar,
170
+ .e-bigger .e-datepicker .e-calendar,
171
+ .e-small .e-datepicker .e-calendar,
172
+ .e-bigger.e-small.e-datepicker .e-calendar,
173
+ .e-bigger.e-datepicker .e-calendar,
174
+ .e-small.e-datepicker .e-calendar {
175
+ background-color: #fff;
176
+ border: none;
177
+ }
178
+
179
+ *.e-input-group.e-date-wrapper.e-dateinput-active:active:not(.e-success):not(.e-warning):not(.e-error) {
180
+ border: none;
181
+ }
182
+
183
+ .e-date-wrapper span.e-input-group-icon.e-date-icon.e-icons.e-active {
184
+ color: #605e5c;
185
+ }
186
+
187
+ .e-date-wrapper span.e-input-group-icon.e-date-icon.e-icons.e-active {
188
+ color: #605e5c;
189
+ }
@@ -0,0 +1,7 @@
1
+ @import 'ej2-base/styles/fluent-definition.scss';
2
+ @import 'ej2-inputs/styles/input/fluent-definition.scss';
3
+ @import 'ej2-popups/styles/popup/fluent-definition.scss';
4
+ @import '../calendar/fluent-definition.scss';
5
+ @import 'fluent-definition.scss';
6
+ @import 'icons/fluent.scss';
7
+ @import 'all.scss';
@@ -150,13 +150,23 @@
150
150
  }
151
151
 
152
152
  .e-datepicker.e-popup-wrapper,
153
- .e-bigger.e-small .e-datepicker.e-popup-wrapper {
153
+ .e-bigger.e-small .e-datepicker.e-popup-wrapper,
154
+ .e-bigger .e-datepicker.e-popup-wrapper,
155
+ .e-small .e-datepicker.e-popup-wrapper,
156
+ .e-bigger.e-small.e-datepicker.e-popup-wrapper,
157
+ .e-bigger.e-datepicker.e-popup-wrapper,
158
+ .e-small.e-datepicker.e-popup-wrapper {
154
159
  border: 1px solid #757575;
155
160
  box-shadow: none;
156
161
  }
157
162
 
158
163
  .e-datepicker .e-calendar,
159
- .e-bigger.e-small .e-datepicker .e-calendar {
164
+ .e-bigger.e-small .e-datepicker .e-calendar,
165
+ .e-bigger .e-datepicker .e-calendar,
166
+ .e-small .e-datepicker .e-calendar,
167
+ .e-bigger.e-small.e-datepicker .e-calendar,
168
+ .e-bigger.e-datepicker .e-calendar,
169
+ .e-small.e-datepicker .e-calendar {
160
170
  background-color: #fff;
161
171
  border: none;
162
172
  }
@@ -151,13 +151,23 @@
151
151
  }
152
152
 
153
153
  .e-datepicker.e-popup-wrapper,
154
- .e-bigger.e-small .e-datepicker.e-popup-wrapper {
154
+ .e-bigger.e-small .e-datepicker.e-popup-wrapper,
155
+ .e-bigger .e-datepicker.e-popup-wrapper,
156
+ .e-small .e-datepicker.e-popup-wrapper,
157
+ .e-bigger.e-small.e-datepicker.e-popup-wrapper,
158
+ .e-bigger.e-datepicker.e-popup-wrapper,
159
+ .e-small.e-datepicker.e-popup-wrapper {
155
160
  border: 1px solid #969696;
156
161
  box-shadow: none;
157
162
  }
158
163
 
159
164
  .e-datepicker .e-calendar,
160
- .e-bigger.e-small .e-datepicker .e-calendar {
165
+ .e-bigger.e-small .e-datepicker .e-calendar,
166
+ .e-bigger .e-datepicker .e-calendar,
167
+ .e-small .e-datepicker .e-calendar,
168
+ .e-bigger.e-small.e-datepicker .e-calendar,
169
+ .e-bigger.e-datepicker .e-calendar,
170
+ .e-small.e-datepicker .e-calendar {
161
171
  background-color: #000;
162
172
  border: none;
163
173
  }
@@ -0,0 +1 @@
1
+ @import './fluent.scss';
@@ -10,7 +10,7 @@
10
10
  outline: none;
11
11
 
12
12
  #{if(&, '&', '*')}::before {
13
- content: '\e721';
13
+ content: '\e75e';
14
14
  font-family: 'e-icons';
15
15
  }
16
16
 
@@ -29,7 +29,7 @@
29
29
  min-width: $datepicker-bigger-icon-container-min-width;
30
30
 
31
31
  #{if(&, '&', '*')}::before {
32
- content: '\e721';
32
+ content: '\e75e';
33
33
  font-family: 'e-icons';
34
34
  }
35
35
 
@@ -10,7 +10,7 @@
10
10
  outline: none;
11
11
 
12
12
  #{if(&, '&', '*')}::before {
13
- content: '\e742';
13
+ content: '\e75e';
14
14
  font-family: 'e-icons';
15
15
  }
16
16
 
@@ -29,7 +29,7 @@
29
29
  min-width: $datepicker-bigger-icon-container-min-width;
30
30
 
31
31
  #{if(&, '&', '*')}::before {
32
- content: '\e742';
32
+ content: '\e75e';
33
33
  font-family: 'e-icons';
34
34
  }
35
35
 
@@ -194,13 +194,23 @@
194
194
  }
195
195
 
196
196
  .e-datepicker.e-popup-wrapper,
197
- .e-bigger.e-small .e-datepicker.e-popup-wrapper {
197
+ .e-bigger.e-small .e-datepicker.e-popup-wrapper,
198
+ .e-bigger .e-datepicker.e-popup-wrapper,
199
+ .e-small .e-datepicker.e-popup-wrapper,
200
+ .e-bigger.e-small.e-datepicker.e-popup-wrapper,
201
+ .e-bigger.e-datepicker.e-popup-wrapper,
202
+ .e-small.e-datepicker.e-popup-wrapper {
198
203
  border: none;
199
204
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
200
205
  }
201
206
 
202
207
  .e-datepicker .e-calendar,
203
- .e-bigger.e-small .e-datepicker .e-calendar {
208
+ .e-bigger.e-small .e-datepicker .e-calendar,
209
+ .e-bigger .e-datepicker .e-calendar,
210
+ .e-small .e-datepicker .e-calendar,
211
+ .e-bigger.e-small.e-datepicker .e-calendar,
212
+ .e-bigger.e-datepicker .e-calendar,
213
+ .e-small.e-datepicker .e-calendar {
204
214
  background-color: #424242;
205
215
  border: none;
206
216
  }
@@ -204,13 +204,23 @@
204
204
  }
205
205
 
206
206
  .e-datepicker.e-popup-wrapper,
207
- .e-bigger.e-small .e-datepicker.e-popup-wrapper {
207
+ .e-bigger.e-small .e-datepicker.e-popup-wrapper,
208
+ .e-bigger .e-datepicker.e-popup-wrapper,
209
+ .e-small .e-datepicker.e-popup-wrapper,
210
+ .e-bigger.e-small.e-datepicker.e-popup-wrapper,
211
+ .e-bigger.e-datepicker.e-popup-wrapper,
212
+ .e-small.e-datepicker.e-popup-wrapper {
208
213
  border: none;
209
214
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
210
215
  }
211
216
 
212
217
  .e-datepicker .e-calendar,
213
- .e-bigger.e-small .e-datepicker .e-calendar {
218
+ .e-bigger.e-small .e-datepicker .e-calendar,
219
+ .e-bigger .e-datepicker .e-calendar,
220
+ .e-small .e-datepicker .e-calendar,
221
+ .e-bigger.e-small.e-datepicker .e-calendar,
222
+ .e-bigger.e-datepicker .e-calendar,
223
+ .e-small.e-datepicker .e-calendar {
214
224
  background-color: #fff;
215
225
  border: none;
216
226
  }