ezfw-core 1.0.0

package/components/datepicker/EzDatePicker.module.scss

@@ -0,0 +1,348 @@
+.datepicker {
+    position: relative;
+    display: inline-flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.isOpen {
+    .trigger {
+        border-color: var(--ez-primary, #2563eb);
+        box-shadow: 0 0 0 2px var(--ez-primary-light, rgba(37, 99, 235, 0.15));
+    }
+
+    .dropdown {
+        opacity: 1;
+        visibility: visible;
+        transform: translateY(0);
+    }
+}
+
+.trigger {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    background: var(--ez-input-bg, #ffffff);
+    border: 1px solid var(--ez-input-border, #e2e8f0);
+    border-radius: var(--ez-radius-md, 6px);
+
+    padding: 0 12px;
+    height: 36px;
+    cursor: pointer;
+
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+
+    &:hover {
+        border-color: var(--ez-text-tertiary, #94a3b8);
+    }
+}
+
+
+.input {
+    flex: 1;
+    min-width: 0;
+    height: 100%;
+    padding: 0;
+
+    font-family: inherit;
+    font-size: 13px;
+    color: var(--ez-input-text, #1e293b);
+
+    background: transparent;
+    border: none;
+    outline: none;
+    cursor: pointer;
+
+    &::placeholder {
+        color: var(--ez-input-placeholder, #94a3b8);
+    }
+}
+
+.icon {
+    color: var(--ez-text-tertiary, #94a3b8);
+    font-size: 14px;
+    flex-shrink: 0;
+}
+
+.dropdown {
+    position: fixed;
+    z-index: 1000;
+
+    background: var(--ez-surface-secondary, #ffffff);
+    border: 1px solid var(--ez-border, #e2e8f0);
+    border-radius: var(--ez-radius-md, 8px);
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+
+    padding: 12px;
+    min-width: 280px;
+
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-8px);
+    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
+}
+
+
+.header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 12px;
+}
+
+.navBtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 28px;
+    height: 28px;
+    padding: 0;
+
+    background: transparent;
+    border: none;
+    border-radius: var(--ez-radius-sm, 4px);
+
+    color: var(--ez-text-secondary, #64748b);
+    cursor: pointer;
+    transition: all 0.15s ease;
+
+    &:hover {
+        background: var(--ez-surface-primary, #f1f5f9);
+        color: var(--ez-text-primary, #1e293b);
+    }
+}
+
+.title {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--ez-text-primary, #1e293b);
+}
+
+.weekdays {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 2px;
+    margin-bottom: 8px;
+}
+
+.weekday {
+    font-size: 11px;
+    font-weight: 500;
+    color: var(--ez-text-tertiary, #94a3b8);
+    text-align: center;
+    padding: 4px 0;
+}
+
+.grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 2px;
+}
+
+.day {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 32px;
+    height: 32px;
+    padding: 0;
+
+    font-size: 13px;
+    color: var(--ez-text-primary, #1e293b);
+
+    background: transparent;
+    border: none;
+    border-radius: var(--ez-radius-sm, 4px);
+
+    cursor: pointer;
+    transition: all 0.15s ease;
+
+    &:hover:not(.disabled):not(.selected) {
+        background: var(--ez-surface-primary, #f1f5f9);
+    }
+
+    &.empty {
+        cursor: default;
+    }
+
+    &.disabled {
+        color: var(--ez-text-disabled, #cbd5e1);
+        cursor: not-allowed;
+    }
+
+    &.today {
+        font-weight: 600;
+        color: var(--ez-primary, #2563eb);
+        position: relative;
+
+        &::after {
+            content: '';
+            position: absolute;
+            bottom: 2px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 4px;
+            height: 4px;
+            border-radius: 50%;
+            background: var(--ez-primary, #2563eb);
+        }
+    }
+
+    &.selected {
+        background: var(--ez-primary, #2563eb);
+        color: #ffffff;
+        font-weight: 500;
+
+        &::after {
+            background: #ffffff;
+        }
+    }
+
+    // Range selection styles
+    &.inRange {
+        background: var(--ez-primary-light, rgba(37, 99, 235, 0.15));
+        border-radius: 0;
+    }
+
+    &.rangeStart {
+        border-radius: var(--ez-radius-sm, 4px) 0 0 var(--ez-radius-sm, 4px);
+    }
+
+    &.rangeEnd {
+        border-radius: 0 var(--ez-radius-sm, 4px) var(--ez-radius-sm, 4px) 0;
+    }
+
+    &.rangeStart.rangeEnd {
+        border-radius: var(--ez-radius-sm, 4px);
+    }
+}
+
+.footer {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 12px;
+    padding-top: 12px;
+    border-top: 1px solid var(--ez-border, #e2e8f0);
+}
+
+.todayBtn,
+.clearBtn {
+    padding: 6px 12px;
+
+    font-size: 12px;
+    font-weight: 500;
+
+    background: transparent;
+    border: 1px solid var(--ez-border, #e2e8f0);
+    border-radius: var(--ez-radius-sm, 4px);
+
+    color: var(--ez-text-secondary, #64748b);
+    cursor: pointer;
+    transition: all 0.15s ease;
+
+    &:hover {
+        background: var(--ez-surface-primary, #f1f5f9);
+        border-color: var(--ez-text-tertiary, #94a3b8);
+    }
+}
+
+.todayBtn {
+    background: var(--ez-primary, #2563eb);
+    border-color: var(--ez-primary, #2563eb);
+    color: #ffffff;
+
+    &:hover {
+        background: var(--ez-primary-dark, #1d4ed8);
+        border-color: var(--ez-primary-dark, #1d4ed8);
+    }
+}
+
+// Disabled state
+.disabled {
+    .trigger {
+        background: var(--ez-surface-primary, #f8fafc);
+        cursor: not-allowed;
+
+        &:hover {
+            border-color: var(--ez-input-border, #e2e8f0);
+        }
+    }
+
+    .input {
+        color: var(--ez-text-tertiary, #94a3b8);
+        cursor: not-allowed;
+    }
+
+    .icon {
+        opacity: 0.5;
+    }
+}
+
+// Error state
+.hasError {
+    .trigger {
+        border-color: var(--ez-danger, #dc2626);
+
+        &:focus-within {
+            border-color: var(--ez-danger, #dc2626);
+            box-shadow: 0 0 0 2px var(--ez-danger-light, rgba(220, 38, 38, 0.15));
+        }
+    }
+}
+
+.fieldError {
+    display: none;
+    font-size: 12px;
+    color: var(--ez-danger, #dc2626);
+    padding-left: 2px;
+}
+
+.fieldErrorVisible {
+    display: block;
+}
+
+// Sizes
+.sm {
+    .trigger {
+        height: 30px;
+        padding: 0 10px;
+    }
+
+    .input {
+        font-size: 12px;
+    }
+
+    .icon {
+        font-size: 12px;
+    }
+}
+
+.lg {
+    .trigger {
+        height: 44px;
+        padding: 0 14px;
+    }
+
+    .input {
+        font-size: 14px;
+    }
+
+    .icon {
+        font-size: 16px;
+    }
+}
+
+// Dropup (opens above)
+.isDropup {
+    .dropdown {
+        box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.1);
+        transform: translateY(8px);
+    }
+
+    &.isOpen .dropdown {
+        transform: translateY(0);
+    }
+}