Skip to content

Commit a2372be

Browse files
OhsweddOhswedd
committed
Stable Datetime Picker Component Release
1 parent ce5cbe1 commit a2372be

File tree

4 files changed

+116
-89
lines changed

4 files changed

+116
-89
lines changed

‎demo.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -350,17 +350,17 @@ <h3 class="font-md text-secondary mt-8 mb-4 text-center">Scrollable Cards</h3>
350350
<h2 class="font-lg text-primary my-4">DateTime Picker Component Showcase</h2>
351351

352352
<!-- Containers for each DateTimePicker instance with specific data attributes -->
353-
<div id="picker-primary" class="datetime-picker-container" data-variant="primary" data-format="YYYY-MM-DD HH:mm" data-time="true"></div>
353+
<div id="picker-primary" class="kroma-datetime-picker-container" data-variant="primary" data-format="YYYY-MM-DD HH:mm" data-time="true"></div>
354354

355-
<div id="picker-secondary" class="datetime-picker-container my-4" data-variant="secondary" data-format="YYYY-MM-DD" data-time="false"></div>
355+
<div id="picker-secondary" class="kroma-datetime-picker-container my-4" data-variant="secondary" data-format="YYYY-MM-DD" data-time="false"></div>
356356

357-
<div id="picker-success" class="datetime-picker-container" data-variant="success" data-format="YYYY-MM-DD HH:mm" data-time="true"></div>
357+
<div id="picker-success" class="kroma-datetime-picker-container" data-variant="success" data-format="YYYY-MM-DD HH:mm" data-time="true"></div>
358358

359-
<div id="picker-warning" class="datetime-picker-container my-4" data-variant="warning" data-format="YYYY-MM-DD HH:mm" data-time="true"></div>
359+
<div id="picker-warning" class="kroma-datetime-picker-container my-4" data-variant="warning" data-format="YYYY-MM-DD HH:mm" data-time="true"></div>
360360

361-
<div id="picker-danger" class="datetime-picker-container" data-variant="danger" data-format="YYYY-MM-DD" data-time="false"></div>
361+
<div id="picker-danger" class="kroma-datetime-picker-container" data-variant="danger" data-format="YYYY-MM-DD" data-time="false"></div>
362362

363-
<div id="picker-info" class="datetime-picker-container my-4" data-variant="info" data-format="YYYY-MM-DD HH:mm" data-time="true"></div>
363+
<div id="picker-info" class="kroma-datetime-picker-container my-4" data-variant="info" data-format="YYYY-MM-DD HH:mm" data-time="true"></div>
364364
</section>
365365

366366
<section class="p-4 bg-neutral-50 shadow-md rounded my-6">

‎src/css/components/datetime-picker.css‎

Lines changed: 87 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,134 +1,162 @@
1-
/* Container and Font Setup */
2-
.datetime-picker-container {
1+
/* Base Container Styling */
2+
.kroma-datetime-picker-container {
33
position: relative;
44
display: inline-block;
55
width: 100%;
66
max-width: 400px;
77
font-family: var(--font-sans);
88
}
99

10-
/* Input Styling */
11-
.datetime-input {
10+
/* Input Field Styling */
11+
.kroma-datetime-input {
1212
width: 100%;
1313
padding: clamp(8px, var(--space-2), 12px);
1414
border-radius: var(--radius-md);
1515
font-size: 1rem;
1616
outline: none;
17-
border: 1px solid var(--variant-border);
18-
background-color: var(--variant-bg);
19-
color: var(--variant-text);
17+
border: 1px solid var(--variant-border, var(--neutral-300));
18+
background-color: var(--variant-bg, var(--neutral-50));
19+
color: var(--variant-text, var(--neutral-900));
2020
transition: border-color var(--transition-colors), box-shadow var(--transition-all);
2121
}
2222

23-
.datetime-input::placeholder {
24-
color: var(--variant-text);
25-
opacity: 0.7;
23+
.kroma-datetime-input::placeholder {
24+
color: var(--variant-text-light, rgba(255, 255, 255, 0.7));
2625
}
2726

28-
.datetime-input:focus {
29-
box-shadow: 0px 0px 0px 3px var(--variant-hover-bg);
27+
.kroma-datetime-input:focus {
28+
box-shadow: 0 0 0 3px var(--variant-hover-bg, var(--neutral-200));
3029
}
3130

32-
/* Date Picker Popup */
33-
.datetime-picker {
31+
/* Picker Popup Styling */
32+
.kroma-datetime-picker {
3433
display: none;
3534
position: absolute;
3635
top: calc(100% + var(--space-1));
3736
left: 0;
3837
width: 100%;
39-
background-color: var(--variant-bg);
40-
border: 1px solid var(--variant-border);
38+
background-color: var(--variant-bg, var(--neutral-50));
39+
border: 1px solid var(--variant-border, var(--neutral-300));
4140
border-radius: var(--radius-md);
42-
box-shadow: var(--variant-shadow);
41+
box-shadow: var(--variant-shadow, var(--shadow-lg));
4342
z-index: var(--z-30);
4443
padding: var(--space-3);
44+
opacity: 0;
45+
transform: scale(0.95);
4546
transition: transform 0.3s ease, opacity 0.3s ease;
4647
}
4748

48-
.datetime-picker.active {
49+
.kroma-datetime-picker.kroma-active {
4950
display: block;
5051
transform: scale(1);
5152
opacity: 1;
5253
}
5354

5455
/* Calendar Header */
55-
.calendar-header {
56+
.kroma-calendar-header {
5657
display: flex;
5758
justify-content: space-between;
5859
align-items: center;
5960
margin-bottom: var(--space-2);
60-
position: relative;
61-
z-index: var(--z-40);
6261
}
6362

64-
.calendar-header button {
63+
.kroma-calendar-header button {
6564
background: none;
6665
border: none;
6766
font-size: clamp(1.25rem, 1.5vw, 1.5rem);
6867
cursor: pointer;
6968
padding: var(--space-1);
70-
color: var(--variant-text);
69+
color: var(--variant-text, var(--neutral-900));
7170
transition: color var(--transition-colors);
7271
}
7372

73+
.kroma-calendar-header button:hover {
74+
color: var(--variant-hover-bg, var(--neutral-700));
75+
}
76+
7477
/* Calendar Grid */
75-
.calendar-grid {
78+
.kroma-calendar-grid {
7679
display: grid;
7780
grid-template-columns: repeat(7, 1fr);
7881
gap: var(--space-1);
7982
}
8083

81-
.calendar-day {
84+
.kroma-calendar-day {
8285
padding: var(--space-1);
8386
text-align: center;
8487
cursor: pointer;
8588
border-radius: var(--radius-sm);
8689
transition: background-color var(--transition-colors), color var(--transition-colors);
8790
}
8891

89-
/* Hover Effect for Calendar Day */
90-
.calendar-day:hover {
91-
background-color: var(--variant-hover-bg);
92+
/* Day Hover Effect */
93+
.kroma-calendar-day:hover {
94+
background-color: var(--variant-hover-bg, var(--neutral-200));
9295
color: #fff;
9396
}
9497

95-
/* Current and Selected Day Styles */
96-
.calendar-day.current-day {
97-
background-color: var(--variant-light-bg);
98-
color: var(--variant-text);
98+
/* Special Day Styles */
99+
.kroma-calendar-day.current-day {
100+
background-color: var(--variant-light-bg, var(--neutral-300));
101+
color: var(--variant-text, var(--neutral-900));
99102
}
100103

101-
.calendar-day.selected-day {
102-
background-color: var(--variant-bg);
103-
color: var(--variant-text);
104+
.kroma-calendar-day.selected-day {
105+
background-color: var(--variant-bg, var(--neutral-700));
106+
color: var(--variant-text, var(--neutral-50));
104107
}
105108

106109
/* Quick Select Buttons */
107-
.quick-select {
110+
.kroma-quick-select {
108111
display: flex;
109112
flex-wrap: wrap;
110113
gap: var(--space-1);
111114
margin-top: var(--space-2);
112115
justify-content: space-between;
113116
}
114117

115-
.quick-select button {
118+
.kroma-quick-select button {
116119
flex: 1 1 30%;
117120
padding: var(--space-1) var(--space-2);
118121
border-radius: var(--radius-md);
119-
background-color: var(--variant-light-bg);
122+
background-color: var(--variant-light-bg, var(--neutral-300));
120123
cursor: pointer;
121124
font-size: 0.875rem;
122125
transition: background-color var(--transition-colors), color var(--transition-colors);
123126
}
124127

125-
.quick-select button:hover {
126-
background-color: var(--variant-hover-bg);
128+
.kroma-quick-select button:hover {
129+
background-color: var(--variant-hover-bg, var(--neutral-400));
127130
color: #fff;
128131
}
129132

133+
/* Time Selector */
134+
.kroma-time-selector {
135+
margin-top: var(--space-2);
136+
display: flex;
137+
gap: var(--space-2);
138+
justify-content: center;
139+
}
140+
141+
.kroma-time-selector input {
142+
width: clamp(36px, 3vw, 48px);
143+
padding: var(--space-1);
144+
border-radius: var(--radius-md);
145+
font-size: 0.875rem;
146+
text-align: center;
147+
outline: none;
148+
border: 1px solid var(--variant-border, var(--neutral-300));
149+
background-color: var(--variant-light-bg, var(--neutral-100));
150+
color: var(--variant-text, var(--neutral-900));
151+
transition: border-color var(--transition-colors);
152+
}
153+
154+
.kroma-time-selector input:focus {
155+
border-color: var(--variant-hover-bg, var(--neutral-400));
156+
}
157+
130158
/* Confirm Button */
131-
.confirm-button {
159+
.kroma-confirm-button {
132160
width: 100%;
133161
padding: var(--space-2);
134162
font-size: 0.875rem;
@@ -137,28 +165,28 @@
137165
border: none;
138166
border-radius: var(--radius-md);
139167
margin-top: var(--space-2);
140-
background-color: var(--variant-bg);
168+
background-color: var(--variant-bg, var(--neutral-700));
141169
color: #fff;
142170
transition: background-color var(--transition-colors);
143171
}
144172

145-
/* Time Selector */
146-
.time-selector {
147-
margin-top: var(--space-2);
148-
display: flex;
149-
gap: var(--space-2);
150-
justify-content: center;
173+
.kroma-confirm-button:hover {
174+
background-color: var(--variant-hover-bg, var(--neutral-800));
151175
}
152176

153-
.time-selector input {
154-
width: clamp(36px, 3vw, 48px);
155-
padding: var(--space-1);
156-
border-radius: var(--radius-md);
157-
font-size: 0.875rem;
158-
text-align: center;
159-
outline: none;
160-
border: 1px solid var(--variant-border);
161-
background-color: var(--variant-light-bg);
162-
color: var(--variant-text);
163-
transition: border-color var(--transition-colors);
177+
/* Responsive Adjustments */
178+
@media (max-width: 768px) {
179+
.kroma-datetime-picker {
180+
width: 100%;
181+
left: 0;
182+
padding: var(--space-2);
183+
}
184+
185+
.kroma-calendar-grid {
186+
grid-template-columns: repeat(7, minmax(20px, 1fr));
187+
}
188+
189+
.kroma-quick-select button {
190+
flex: 1 1 45%;
191+
}
164192
}

0 commit comments

Comments
 (0)