@oneluiz/dual-datepicker 3.2.0 → 3.3.0
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.
- package/README.md +26 -1
- package/THEMING.md +313 -0
- package/dual-datepicker.component.d.ts +3 -1
- package/esm2022/dual-datepicker.component.mjs +7 -4
- package/esm2022/public-api.mjs +1 -1
- package/fesm2022/oneluiz-dual-datepicker.mjs +6 -3
- package/fesm2022/oneluiz-dual-datepicker.mjs.map +1 -1
- package/package.json +1 -1
- package/public-api.d.ts +1 -1
- package/src/themes/bootstrap.scss +202 -0
- package/src/themes/bulma.scss +209 -0
- package/src/themes/custom.scss +236 -0
- package/src/themes/foundation.scss +201 -0
- package/src/themes/tailwind.scss +109 -0
- package/themes/bootstrap.scss +202 -0
- package/themes/bulma.scss +209 -0
- package/themes/custom.scss +236 -0
- package/themes/foundation.scss +201 -0
- package/themes/tailwind.scss +109 -0
|
@@ -0,0 +1,201 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Foundation Theme for ng-dual-datepicker
|
|
3
|
+
*
|
|
4
|
+
* Import this file in your styles.scss to apply Foundation styling:
|
|
5
|
+
* @import '@oneluiz/dual-datepicker/themes/foundation';
|
|
6
|
+
*
|
|
7
|
+
* Make sure you have Foundation CSS already loaded in your project.
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
.datepicker-wrapper.theme-foundation {
|
|
11
|
+
|
|
12
|
+
.datepicker-input {
|
|
13
|
+
display: block;
|
|
14
|
+
width: 100%;
|
|
15
|
+
height: 2.4375rem;
|
|
16
|
+
padding: 0.5rem;
|
|
17
|
+
font-size: 1rem;
|
|
18
|
+
font-weight: normal;
|
|
19
|
+
line-height: 1.5;
|
|
20
|
+
color: #0a0a0a;
|
|
21
|
+
background-color: #fefefe;
|
|
22
|
+
border: 1px solid #cacaca;
|
|
23
|
+
border-radius: 0;
|
|
24
|
+
box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
|
|
25
|
+
transition: border-color 0.25s ease-in-out, box-shadow 0.5s;
|
|
26
|
+
cursor: pointer;
|
|
27
|
+
|
|
28
|
+
&:hover {
|
|
29
|
+
border-color: #8a8a8a;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
&:focus {
|
|
33
|
+
border-color: #1779ba;
|
|
34
|
+
background-color: #fefefe;
|
|
35
|
+
outline: 0;
|
|
36
|
+
box-shadow: 0 0 5px #cacaca;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&::placeholder {
|
|
40
|
+
color: #cacaca;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
&:disabled,
|
|
44
|
+
&[readonly] {
|
|
45
|
+
background-color: #e6e6e6;
|
|
46
|
+
cursor: not-allowed;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.date-picker-dropdown {
|
|
51
|
+
background: #fefefe;
|
|
52
|
+
border: 1px solid #cacaca;
|
|
53
|
+
border-radius: 0;
|
|
54
|
+
box-shadow: 0 0 10px rgba(10, 10, 10, 0.1);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.date-picker-presets {
|
|
58
|
+
button {
|
|
59
|
+
background-color: #1779ba;
|
|
60
|
+
border: none;
|
|
61
|
+
color: #fefefe;
|
|
62
|
+
padding: 0.85em 1em;
|
|
63
|
+
border-radius: 0;
|
|
64
|
+
font-size: 0.9rem;
|
|
65
|
+
font-weight: normal;
|
|
66
|
+
cursor: pointer;
|
|
67
|
+
transition: background-color 0.25s ease-out, color 0.25s ease-out;
|
|
68
|
+
|
|
69
|
+
&:hover {
|
|
70
|
+
background-color: #14679e;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
&:focus {
|
|
74
|
+
outline: 0;
|
|
75
|
+
box-shadow: 0 0 0 2px rgba(23, 121, 186, 0.5);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.btn-close-calendar {
|
|
80
|
+
background-color: #cc4b37;
|
|
81
|
+
color: #fefefe;
|
|
82
|
+
|
|
83
|
+
&:hover {
|
|
84
|
+
background-color: #a53b2a;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.date-picker-header {
|
|
90
|
+
button {
|
|
91
|
+
background-color: #e6e6e6;
|
|
92
|
+
border: none;
|
|
93
|
+
color: #0a0a0a;
|
|
94
|
+
border-radius: 0;
|
|
95
|
+
padding: 0.5em 0.75em;
|
|
96
|
+
|
|
97
|
+
&:hover {
|
|
98
|
+
background-color: #d0d0d0;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
&:focus {
|
|
102
|
+
outline: 0;
|
|
103
|
+
box-shadow: 0 0 0 2px rgba(23, 121, 186, 0.5);
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.day {
|
|
109
|
+
color: #0a0a0a;
|
|
110
|
+
border-radius: 0;
|
|
111
|
+
|
|
112
|
+
&:hover:not(.disabled):not(.selected):not(.in-range) {
|
|
113
|
+
background-color: #e6e6e6;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
&.selected {
|
|
117
|
+
background-color: #1779ba;
|
|
118
|
+
color: #fefefe;
|
|
119
|
+
font-weight: bold;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
&.in-range {
|
|
123
|
+
background-color: rgba(23, 121, 186, 0.1);
|
|
124
|
+
color: #1779ba;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
&.today {
|
|
128
|
+
border: 2px solid #1779ba;
|
|
129
|
+
font-weight: bold;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
&.disabled {
|
|
133
|
+
color: #cacaca;
|
|
134
|
+
background-color: transparent;
|
|
135
|
+
cursor: not-allowed;
|
|
136
|
+
opacity: 0.5;
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.selected-ranges {
|
|
141
|
+
.range-tag {
|
|
142
|
+
background-color: #1779ba;
|
|
143
|
+
color: #fefefe;
|
|
144
|
+
border: none;
|
|
145
|
+
border-radius: 0;
|
|
146
|
+
padding: 0.5em 1em;
|
|
147
|
+
font-size: 0.875rem;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.btn-remove {
|
|
151
|
+
background-color: transparent;
|
|
152
|
+
border: none;
|
|
153
|
+
color: #fefefe;
|
|
154
|
+
|
|
155
|
+
&:hover {
|
|
156
|
+
color: #cc4b37;
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.date-picker-footer {
|
|
162
|
+
border-top: 1px solid #cacaca;
|
|
163
|
+
|
|
164
|
+
.btn-clear,
|
|
165
|
+
.btn-cancel {
|
|
166
|
+
background-color: #e6e6e6;
|
|
167
|
+
border: none;
|
|
168
|
+
color: #0a0a0a;
|
|
169
|
+
padding: 0.85em 1em;
|
|
170
|
+
border-radius: 0;
|
|
171
|
+
|
|
172
|
+
&:hover {
|
|
173
|
+
background-color: #d0d0d0;
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.btn-apply {
|
|
178
|
+
background-color: #1779ba;
|
|
179
|
+
border: none;
|
|
180
|
+
color: #fefefe;
|
|
181
|
+
padding: 0.85em 1em;
|
|
182
|
+
border-radius: 0;
|
|
183
|
+
font-weight: normal;
|
|
184
|
+
|
|
185
|
+
&:hover {
|
|
186
|
+
background-color: #14679e;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
&:focus {
|
|
190
|
+
outline: 0;
|
|
191
|
+
box-shadow: 0 0 0 2px rgba(23, 121, 186, 0.5);
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
&:disabled {
|
|
195
|
+
background-color: #cacaca;
|
|
196
|
+
opacity: 0.5;
|
|
197
|
+
cursor: not-allowed;
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
}
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Tailwind CSS Theme for ng-dual-datepicker
|
|
3
|
+
*
|
|
4
|
+
* Import this file in your styles.scss to apply Tailwind styling:
|
|
5
|
+
* @import '@oneluiz/dual-datepicker/themes/tailwind';
|
|
6
|
+
*
|
|
7
|
+
* Make sure you have Tailwind CSS already configured in your project.
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
.datepicker-wrapper.theme-tailwind {
|
|
11
|
+
|
|
12
|
+
.datepicker-input {
|
|
13
|
+
@apply block w-full px-3 py-2 text-base font-normal leading-6 text-gray-900 bg-white border border-gray-300 rounded-md cursor-pointer;
|
|
14
|
+
@apply transition duration-150 ease-in-out;
|
|
15
|
+
@apply hover:border-gray-400;
|
|
16
|
+
@apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
|
|
17
|
+
|
|
18
|
+
&::placeholder {
|
|
19
|
+
@apply text-gray-500;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
&:disabled,
|
|
23
|
+
&[readonly] {
|
|
24
|
+
@apply bg-gray-100 cursor-not-allowed opacity-100;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.date-picker-dropdown {
|
|
29
|
+
@apply bg-white border border-gray-200 rounded-lg shadow-lg;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.date-picker-presets {
|
|
33
|
+
button {
|
|
34
|
+
@apply bg-white border border-gray-300 text-blue-600 px-3 py-2 rounded-md text-sm font-medium cursor-pointer;
|
|
35
|
+
@apply transition duration-150 ease-in-out;
|
|
36
|
+
@apply hover:bg-blue-600 hover:text-white hover:border-blue-600;
|
|
37
|
+
@apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.btn-close-calendar {
|
|
41
|
+
@apply bg-white border border-gray-300 text-red-600;
|
|
42
|
+
@apply hover:bg-red-600 hover:text-white hover:border-red-600;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.date-picker-header {
|
|
47
|
+
button {
|
|
48
|
+
@apply bg-white border border-gray-300 text-gray-700 rounded-md px-2 py-1;
|
|
49
|
+
@apply hover:bg-gray-100 hover:border-gray-400;
|
|
50
|
+
@apply focus:outline-none focus:ring-2 focus:ring-blue-500;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.day {
|
|
55
|
+
@apply text-gray-900 rounded-md;
|
|
56
|
+
|
|
57
|
+
&:hover:not(.disabled):not(.selected):not(.in-range) {
|
|
58
|
+
@apply bg-gray-100;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
&.selected {
|
|
62
|
+
@apply bg-blue-600 text-white font-semibold;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
&.in-range {
|
|
66
|
+
@apply bg-blue-50 text-blue-600;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
&.today {
|
|
70
|
+
@apply border-2 border-blue-600 font-semibold;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
&.disabled {
|
|
74
|
+
@apply text-gray-400 bg-transparent cursor-not-allowed opacity-50;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.selected-ranges {
|
|
79
|
+
.range-tag {
|
|
80
|
+
@apply bg-blue-600 text-white rounded-md px-3 py-1 text-sm border-none;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.btn-remove {
|
|
84
|
+
@apply bg-transparent border-none text-white;
|
|
85
|
+
@apply hover:text-red-500;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.date-picker-footer {
|
|
90
|
+
@apply border-t border-gray-200;
|
|
91
|
+
|
|
92
|
+
.btn-clear,
|
|
93
|
+
.btn-cancel {
|
|
94
|
+
@apply bg-white border border-gray-300 text-gray-600 px-3 py-2 rounded-md;
|
|
95
|
+
@apply hover:bg-gray-100 hover:text-gray-700;
|
|
96
|
+
@apply focus:outline-none focus:ring-2 focus:ring-gray-500;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.btn-apply {
|
|
100
|
+
@apply bg-blue-600 border border-blue-600 text-white px-3 py-2 rounded-md font-medium;
|
|
101
|
+
@apply hover:bg-blue-700 hover:border-blue-700;
|
|
102
|
+
@apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
|
|
103
|
+
|
|
104
|
+
&:disabled {
|
|
105
|
+
@apply bg-gray-400 border-gray-400 opacity-65 cursor-not-allowed;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
}
|
|
@@ -0,0 +1,202 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Bootstrap Theme for ng-dual-datepicker
|
|
3
|
+
*
|
|
4
|
+
* Import this file in your styles.scss to apply Bootstrap styling:
|
|
5
|
+
* @import '@oneluiz/dual-datepicker/themes/bootstrap';
|
|
6
|
+
*
|
|
7
|
+
* Make sure you have Bootstrap CSS already loaded in your project.
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
.datepicker-wrapper.theme-bootstrap {
|
|
11
|
+
|
|
12
|
+
.datepicker-input {
|
|
13
|
+
display: block;
|
|
14
|
+
width: 100%;
|
|
15
|
+
padding: 0.375rem 0.75rem;
|
|
16
|
+
font-size: 1rem;
|
|
17
|
+
font-weight: 400;
|
|
18
|
+
line-height: 1.5;
|
|
19
|
+
color: #212529;
|
|
20
|
+
background-color: #fff;
|
|
21
|
+
background-clip: padding-box;
|
|
22
|
+
border: 1px solid #dee2e6;
|
|
23
|
+
border-radius: 0.375rem;
|
|
24
|
+
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
|
25
|
+
cursor: pointer;
|
|
26
|
+
|
|
27
|
+
&:hover {
|
|
28
|
+
border-color: #86b7fe;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
&:focus {
|
|
32
|
+
color: #212529;
|
|
33
|
+
background-color: #fff;
|
|
34
|
+
border-color: #86b7fe;
|
|
35
|
+
outline: 0;
|
|
36
|
+
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&::placeholder {
|
|
40
|
+
color: #6c757d;
|
|
41
|
+
opacity: 1;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
&:disabled,
|
|
45
|
+
&[readonly] {
|
|
46
|
+
background-color: #e9ecef;
|
|
47
|
+
opacity: 1;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.date-picker-dropdown {
|
|
52
|
+
background: #fff;
|
|
53
|
+
border: 1px solid #dee2e6;
|
|
54
|
+
border-radius: 0.375rem;
|
|
55
|
+
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.date-picker-presets {
|
|
59
|
+
button {
|
|
60
|
+
background-color: #fff;
|
|
61
|
+
border: 1px solid #dee2e6;
|
|
62
|
+
color: #0d6efd;
|
|
63
|
+
padding: 0.375rem 0.75rem;
|
|
64
|
+
border-radius: 0.375rem;
|
|
65
|
+
font-size: 0.875rem;
|
|
66
|
+
font-weight: 500;
|
|
67
|
+
cursor: pointer;
|
|
68
|
+
transition: all 0.15s ease-in-out;
|
|
69
|
+
|
|
70
|
+
&:hover {
|
|
71
|
+
background-color: #0d6efd;
|
|
72
|
+
border-color: #0d6efd;
|
|
73
|
+
color: #fff;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
&:active,
|
|
77
|
+
&:focus {
|
|
78
|
+
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.btn-close-calendar {
|
|
83
|
+
background-color: #fff;
|
|
84
|
+
border: 1px solid #dee2e6;
|
|
85
|
+
color: #dc3545;
|
|
86
|
+
|
|
87
|
+
&:hover {
|
|
88
|
+
background-color: #dc3545;
|
|
89
|
+
border-color: #dc3545;
|
|
90
|
+
color: #fff;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.date-picker-header {
|
|
96
|
+
button {
|
|
97
|
+
background-color: #fff;
|
|
98
|
+
border: 1px solid #dee2e6;
|
|
99
|
+
color: #212529;
|
|
100
|
+
border-radius: 0.375rem;
|
|
101
|
+
padding: 0.25rem 0.5rem;
|
|
102
|
+
|
|
103
|
+
&:hover {
|
|
104
|
+
background-color: #e9ecef;
|
|
105
|
+
border-color: #dee2e6;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.day {
|
|
111
|
+
color: #212529;
|
|
112
|
+
border-radius: 0.375rem;
|
|
113
|
+
|
|
114
|
+
&:hover:not(.disabled):not(.selected):not(.in-range) {
|
|
115
|
+
background-color: #e9ecef;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
&.selected {
|
|
119
|
+
background-color: #0d6efd;
|
|
120
|
+
color: #fff;
|
|
121
|
+
font-weight: 600;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
&.in-range {
|
|
125
|
+
background-color: rgba(13, 110, 253, 0.1);
|
|
126
|
+
color: #0d6efd;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
&.today {
|
|
130
|
+
border: 2px solid #0d6efd;
|
|
131
|
+
font-weight: 600;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
&.disabled {
|
|
135
|
+
color: #6c757d;
|
|
136
|
+
background-color: transparent;
|
|
137
|
+
cursor: not-allowed;
|
|
138
|
+
opacity: 0.5;
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.selected-ranges {
|
|
143
|
+
.range-tag {
|
|
144
|
+
background-color: #0d6efd;
|
|
145
|
+
color: #fff;
|
|
146
|
+
border: none;
|
|
147
|
+
border-radius: 0.375rem;
|
|
148
|
+
padding: 0.25rem 0.75rem;
|
|
149
|
+
font-size: 0.875rem;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.btn-remove {
|
|
153
|
+
background-color: transparent;
|
|
154
|
+
border: none;
|
|
155
|
+
color: #fff;
|
|
156
|
+
|
|
157
|
+
&:hover {
|
|
158
|
+
color: #dc3545;
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.date-picker-footer {
|
|
164
|
+
border-top: 1px solid #dee2e6;
|
|
165
|
+
|
|
166
|
+
.btn-clear,
|
|
167
|
+
.btn-cancel {
|
|
168
|
+
background-color: #fff;
|
|
169
|
+
border: 1px solid #dee2e6;
|
|
170
|
+
color: #6c757d;
|
|
171
|
+
padding: 0.375rem 0.75rem;
|
|
172
|
+
border-radius: 0.375rem;
|
|
173
|
+
|
|
174
|
+
&:hover {
|
|
175
|
+
background-color: #e9ecef;
|
|
176
|
+
border-color: #dee2e6;
|
|
177
|
+
color: #495057;
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.btn-apply {
|
|
182
|
+
background-color: #0d6efd;
|
|
183
|
+
border: 1px solid #0d6efd;
|
|
184
|
+
color: #fff;
|
|
185
|
+
padding: 0.375rem 0.75rem;
|
|
186
|
+
border-radius: 0.375rem;
|
|
187
|
+
font-weight: 500;
|
|
188
|
+
|
|
189
|
+
&:hover {
|
|
190
|
+
background-color: #0b5ed7;
|
|
191
|
+
border-color: #0a58ca;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
&:disabled {
|
|
195
|
+
background-color: #6c757d;
|
|
196
|
+
border-color: #6c757d;
|
|
197
|
+
opacity: 0.65;
|
|
198
|
+
cursor: not-allowed;
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
}
|
|
@@ -0,0 +1,209 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Bulma Theme for ng-dual-datepicker
|
|
3
|
+
*
|
|
4
|
+
* Import this file in your styles.scss to apply Bulma styling:
|
|
5
|
+
* @import '@oneluiz/dual-datepicker/themes/bulma';
|
|
6
|
+
*
|
|
7
|
+
* Make sure you have Bulma CSS already loaded in your project.
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
.datepicker-wrapper.theme-bulma {
|
|
11
|
+
|
|
12
|
+
.datepicker-input {
|
|
13
|
+
display: block;
|
|
14
|
+
width: 100%;
|
|
15
|
+
padding: calc(0.5em - 1px) calc(0.75em - 1px);
|
|
16
|
+
font-size: 1rem;
|
|
17
|
+
line-height: 1.5;
|
|
18
|
+
color: #363636;
|
|
19
|
+
background-color: #fff;
|
|
20
|
+
border: 1px solid #dbdbdb;
|
|
21
|
+
border-radius: 4px;
|
|
22
|
+
box-shadow: inset 0 0.0625em 0.125em rgba(10, 10, 10, 0.05);
|
|
23
|
+
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
|
24
|
+
cursor: pointer;
|
|
25
|
+
|
|
26
|
+
&:hover {
|
|
27
|
+
border-color: #b5b5b5;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
&:focus {
|
|
31
|
+
border-color: #3273dc;
|
|
32
|
+
box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
|
|
33
|
+
outline: 0;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
&::placeholder {
|
|
37
|
+
color: #b5b5b5;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
&:disabled,
|
|
41
|
+
&[readonly] {
|
|
42
|
+
background-color: #f5f5f5;
|
|
43
|
+
border-color: #f5f5f5;
|
|
44
|
+
box-shadow: none;
|
|
45
|
+
color: #7a7a7a;
|
|
46
|
+
opacity: 1;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.date-picker-dropdown {
|
|
51
|
+
background: #fff;
|
|
52
|
+
border: 1px solid #dbdbdb;
|
|
53
|
+
border-radius: 6px;
|
|
54
|
+
box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.02);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.date-picker-presets {
|
|
58
|
+
button {
|
|
59
|
+
background-color: #fff;
|
|
60
|
+
border: 1px solid #dbdbdb;
|
|
61
|
+
color: #3273dc;
|
|
62
|
+
padding: calc(0.5em - 1px) 1em;
|
|
63
|
+
border-radius: 4px;
|
|
64
|
+
font-size: 0.875rem;
|
|
65
|
+
font-weight: 600;
|
|
66
|
+
cursor: pointer;
|
|
67
|
+
transition: all 0.15s ease-in-out;
|
|
68
|
+
|
|
69
|
+
&:hover {
|
|
70
|
+
background-color: #3273dc;
|
|
71
|
+
border-color: #3273dc;
|
|
72
|
+
color: #fff;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
&:active,
|
|
76
|
+
&:focus {
|
|
77
|
+
box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
|
|
78
|
+
outline: 0;
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.btn-close-calendar {
|
|
83
|
+
background-color: #fff;
|
|
84
|
+
border: 1px solid #dbdbdb;
|
|
85
|
+
color: #f14668;
|
|
86
|
+
|
|
87
|
+
&:hover {
|
|
88
|
+
background-color: #f14668;
|
|
89
|
+
border-color: #f14668;
|
|
90
|
+
color: #fff;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.date-picker-header {
|
|
96
|
+
button {
|
|
97
|
+
background-color: #fff;
|
|
98
|
+
border: 1px solid #dbdbdb;
|
|
99
|
+
color: #363636;
|
|
100
|
+
border-radius: 4px;
|
|
101
|
+
padding: 0.25em 0.5em;
|
|
102
|
+
|
|
103
|
+
&:hover {
|
|
104
|
+
background-color: #f5f5f5;
|
|
105
|
+
border-color: #b5b5b5;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
&:focus {
|
|
109
|
+
border-color: #3273dc;
|
|
110
|
+
box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.day {
|
|
116
|
+
color: #363636;
|
|
117
|
+
border-radius: 4px;
|
|
118
|
+
|
|
119
|
+
&:hover:not(.disabled):not(.selected):not(.in-range) {
|
|
120
|
+
background-color: #f5f5f5;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
&.selected {
|
|
124
|
+
background-color: #3273dc;
|
|
125
|
+
color: #fff;
|
|
126
|
+
font-weight: 600;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
&.in-range {
|
|
130
|
+
background-color: rgba(50, 115, 220, 0.1);
|
|
131
|
+
color: #3273dc;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
&.today {
|
|
135
|
+
border: 2px solid #3273dc;
|
|
136
|
+
font-weight: 600;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
&.disabled {
|
|
140
|
+
color: #b5b5b5;
|
|
141
|
+
background-color: transparent;
|
|
142
|
+
cursor: not-allowed;
|
|
143
|
+
opacity: 0.5;
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.selected-ranges {
|
|
148
|
+
.range-tag {
|
|
149
|
+
background-color: #3273dc;
|
|
150
|
+
color: #fff;
|
|
151
|
+
border: none;
|
|
152
|
+
border-radius: 4px;
|
|
153
|
+
padding: 0.25em 0.75em;
|
|
154
|
+
font-size: 0.875rem;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.btn-remove {
|
|
158
|
+
background-color: transparent;
|
|
159
|
+
border: none;
|
|
160
|
+
color: #fff;
|
|
161
|
+
|
|
162
|
+
&:hover {
|
|
163
|
+
color: #f14668;
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.date-picker-footer {
|
|
169
|
+
border-top: 1px solid #dbdbdb;
|
|
170
|
+
|
|
171
|
+
.btn-clear,
|
|
172
|
+
.btn-cancel {
|
|
173
|
+
background-color: #fff;
|
|
174
|
+
border: 1px solid #dbdbdb;
|
|
175
|
+
color: #7a7a7a;
|
|
176
|
+
padding: calc(0.5em - 1px) 1em;
|
|
177
|
+
border-radius: 4px;
|
|
178
|
+
|
|
179
|
+
&:hover {
|
|
180
|
+
background-color: #f5f5f5;
|
|
181
|
+
border-color: #b5b5b5;
|
|
182
|
+
color: #363636;
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.btn-apply {
|
|
187
|
+
background-color: #3273dc;
|
|
188
|
+
border: 1px solid transparent;
|
|
189
|
+
color: #fff;
|
|
190
|
+
padding: calc(0.5em - 1px) 1em;
|
|
191
|
+
border-radius: 4px;
|
|
192
|
+
font-weight: 600;
|
|
193
|
+
|
|
194
|
+
&:hover {
|
|
195
|
+
background-color: #2366d1;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
&:focus {
|
|
199
|
+
box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
&:disabled {
|
|
203
|
+
background-color: #7a7a7a;
|
|
204
|
+
opacity: 0.5;
|
|
205
|
+
cursor: not-allowed;
|
|
206
|
+
}
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
}
|