podo-ui 0.8.0 → 0.8.2

package/vanilla/datepicker.css

@@ -0,0 +1,481 @@
+/**
+ * Podo UI DatePicker - Vanilla CSS
+ * @version 0.8.0
+ * @license MIT
+ */
+
+/* ============================================
+   CSS Variables
+   - Uses podo-ui.css variables if available (--color-*)
+   - Falls back to standalone values if podo-ui.css is not loaded
+   ============================================ */
+.podo-datepicker {
+  /* Colors from podo-ui.css with fallbacks */
+  --podo-bg-block: var(--color-bg-block, #ffffff);
+  --podo-bg-modal: var(--color-bg-modal, #ffffff);
+  --podo-bg-disabled: var(--color-bg-disabled, #f5f5f5);
+  --podo-border: var(--color-border, #e0e0e0);
+  --podo-border-hover: var(--color-border-hover, #bdbdbd);
+  --podo-text-body: var(--color-text-body, #212121);
+  --podo-text-sub: var(--color-text-sub, #757575);
+  --podo-text-disabled: var(--color-text-disabled, #9e9e9e);
+  --podo-primary: var(--color-primary, #7c3aed);
+  --podo-primary-hover: var(--color-primary-hover, #6d28d9);
+  --podo-primary-fill: var(--color-primary-fill, rgba(124, 58, 237, 0.1));
+  --podo-primary-reverse: var(--color-primary-reverse, #ffffff);
+  --podo-default: var(--color-default, #f5f5f5);
+  --podo-default-fill: var(--color-default-fill, #eeeeee);
+  --podo-default-hover: var(--color-default-hover, #e0e0e0);
+  --podo-default-reverse: var(--color-default-reverse, #212121);
+  --podo-radius-sm: var(--radius-2, 4px);
+  --podo-radius-md: var(--radius-3, 8px);
+  --podo-spacing-1: var(--spacing-1, 4px);
+  --podo-spacing-2: var(--spacing-2, 8px);
+  --podo-spacing-3: var(--spacing-3, 12px);
+  --podo-spacing-4: var(--spacing-4, 16px);
+  --podo-spacing-5: var(--spacing-5, 20px);
+  --podo-font-size-sm: 13px;
+  --podo-font-size-md: 14px;
+  --podo-font-size-lg: 16px;
+}
+
+/* ============================================
+   Container
+   ============================================ */
+.podo-datepicker {
+  position: relative;
+  display: inline-block;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-size: var(--podo-font-size-md);
+  line-height: 1.5;
+}
+
+/* ============================================
+   Input
+   ============================================ */
+.podo-datepicker__input {
+  display: flex;
+  align-items: center;
+  gap: var(--podo-spacing-2);
+  padding: var(--podo-spacing-3) var(--podo-spacing-4);
+  background: var(--podo-bg-block);
+  border: 1px solid var(--podo-border);
+  border-radius: var(--podo-radius-md);
+  cursor: pointer;
+  transition: border-color 0.2s;
+}
+
+.podo-datepicker__input:hover {
+  border-color: var(--podo-border-hover);
+}
+
+.podo-datepicker__input--active {
+  border-color: var(--podo-primary);
+}
+
+.podo-datepicker__input--disabled {
+  background: var(--podo-bg-disabled);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.podo-datepicker__input-content {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--podo-spacing-2);
+}
+
+/* ============================================
+   Input Parts
+   ============================================ */
+.podo-datepicker__part {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  padding: 0 var(--podo-spacing-2);
+  background: none;
+  border: none;
+  border-radius: var(--podo-radius-sm);
+  cursor: pointer;
+  transition: background 0.2s;
+  color: var(--podo-text-body);
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+  font-family: inherit;
+  font-size: var(--podo-font-size-md);
+}
+
+.podo-datepicker__part:hover {
+  background: var(--podo-default);
+}
+
+.podo-datepicker__part--active {
+  background: var(--podo-default-fill);
+}
+
+.podo-datepicker__part--placeholder {
+  color: var(--podo-text-disabled);
+}
+
+.podo-datepicker__separator {
+  color: var(--podo-text-body);
+  padding: 0 var(--podo-spacing-1);
+  font-size: var(--podo-font-size-md);
+}
+
+/* ============================================
+   Time Section
+   ============================================ */
+.podo-datepicker__time-section {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0;
+}
+
+.podo-datepicker__time-select {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background: none;
+  border: none;
+  padding: 0 var(--podo-spacing-2);
+  flex: 1;
+  text-align: center;
+  text-align-last: center;
+  color: var(--podo-text-body);
+  cursor: pointer;
+  border-radius: var(--podo-radius-sm);
+  transition: background 0.2s;
+  font-variant-numeric: tabular-nums;
+  font-family: inherit;
+  font-size: var(--podo-font-size-md);
+}
+
+.podo-datepicker__time-select:hover {
+  background: var(--podo-default);
+}
+
+.podo-datepicker__time-select:focus {
+  outline: none;
+  background: var(--podo-default-fill);
+}
+
+.podo-datepicker__time-select--placeholder {
+  color: var(--podo-text-disabled);
+}
+
+.podo-datepicker__time-select:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.podo-datepicker__time-separator {
+  color: var(--podo-text-body);
+  font-size: var(--podo-font-size-md);
+}
+
+/* ============================================
+   Icon
+   ============================================ */
+.podo-datepicker__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  font-size: 20px;
+  line-height: 1;
+  color: var(--podo-text-sub);
+  flex-shrink: 0;
+}
+
+/* ============================================
+   Dropdown
+   ============================================ */
+.podo-datepicker__dropdown {
+  position: absolute;
+  top: calc(100% + var(--podo-spacing-2));
+  left: 0;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: var(--podo-spacing-5);
+  background: var(--podo-bg-modal);
+  border-radius: var(--podo-radius-md);
+  box-shadow: 0 6px 18px -3px rgba(50, 50, 50, 0.12);
+}
+
+.podo-datepicker__dropdown--right {
+  left: auto;
+  right: 0;
+}
+
+/* ============================================
+   Calendar
+   ============================================ */
+.podo-datepicker__calendar {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 280px;
+}
+
+/* Navigation */
+.podo-datepicker__calendar-nav {
+  display: flex;
+  align-items: center;
+  gap: var(--podo-spacing-4);
+  height: 40px;
+}
+
+.podo-datepicker__nav-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  background: var(--podo-default);
+  border: none;
+  border-radius: var(--podo-radius-md);
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.podo-datepicker__nav-button:hover {
+  background: var(--podo-default-hover);
+}
+
+.podo-datepicker__nav-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.podo-datepicker__nav-button i {
+  font-size: 20px;
+  color: var(--podo-text-body);
+}
+
+.podo-datepicker__nav-title {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--podo-spacing-1);
+}
+
+.podo-datepicker__nav-select-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.podo-datepicker__nav-select-wrapper::after {
+  content: '';
+  position: absolute;
+  right: var(--podo-spacing-2);
+  top: 50%;
+  transform: translateY(-50%);
+  width: 0;
+  height: 0;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 5px solid var(--podo-text-body);
+  pointer-events: none;
+}
+
+.podo-datepicker__nav-select {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background: none;
+  border: none;
+  padding: var(--podo-spacing-2) 24px var(--podo-spacing-2) var(--podo-spacing-2);
+  border-radius: var(--podo-radius-sm);
+  cursor: pointer;
+  transition: background 0.2s;
+  color: var(--podo-text-body);
+  font-family: inherit;
+  font-size: var(--podo-font-size-lg);
+  font-weight: 600;
+}
+
+.podo-datepicker__nav-select:hover {
+  background: var(--podo-default);
+}
+
+.podo-datepicker__nav-select:focus {
+  outline: none;
+  background: var(--podo-default-fill);
+}
+
+/* Calendar Grid */
+.podo-datepicker__calendar-grid {
+  display: flex;
+  flex-direction: column;
+  gap: var(--podo-spacing-2);
+  padding-top: var(--podo-spacing-3);
+  border-top: 1px solid var(--podo-border);
+}
+
+.podo-datepicker__calendar-row {
+  display: flex;
+  width: 100%;
+}
+
+.podo-datepicker__calendar-cell {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  font-size: var(--podo-font-size-md);
+  background: none;
+  border: none;
+  border-radius: var(--podo-radius-md);
+  cursor: pointer;
+  transition: background 0.2s;
+  font-family: inherit;
+  color: var(--podo-text-body);
+}
+
+.podo-datepicker__calendar-cell--header {
+  color: var(--podo-text-sub);
+  cursor: default;
+  font-weight: 500;
+}
+
+.podo-datepicker__calendar-cell--other {
+  color: var(--podo-text-disabled);
+}
+
+.podo-datepicker__calendar-cell--today {
+  font-weight: 600;
+  color: var(--podo-primary);
+}
+
+.podo-datepicker__calendar-cell--selected {
+  background: var(--podo-primary);
+  color: var(--podo-primary-reverse);
+  font-weight: 600;
+}
+
+.podo-datepicker__calendar-cell--in-range {
+  background: var(--podo-primary-fill);
+  border-radius: 0;
+}
+
+.podo-datepicker__calendar-cell--range-start {
+  background: var(--podo-primary);
+  color: var(--podo-primary-reverse);
+  font-weight: 600;
+  border-radius: var(--podo-radius-md);
+}
+
+.podo-datepicker__calendar-cell--range-end {
+  background: var(--podo-primary);
+  color: var(--podo-primary-reverse);
+  font-weight: 600;
+  border-radius: var(--podo-radius-md);
+}
+
+.podo-datepicker__calendar-cell--disabled {
+  color: var(--podo-text-disabled);
+  background: var(--podo-default);
+  border: none;
+  border-radius: 0;
+  outline: none;
+  cursor: not-allowed;
+}
+
+.podo-datepicker__calendar-cell--disabled:hover {
+  background: var(--podo-default);
+}
+
+.podo-datepicker__calendar-cell:not(.podo-datepicker__calendar-cell--header):not(.podo-datepicker__calendar-cell--selected):not(.podo-datepicker__calendar-cell--disabled):not(.podo-datepicker__calendar-cell--range-start):not(.podo-datepicker__calendar-cell--range-end):not(.podo-datepicker__calendar-cell--in-range):hover {
+  background: var(--podo-default);
+}
+
+/* ============================================
+   Period Calendars
+   ============================================ */
+.podo-datepicker__period-calendars {
+  display: flex;
+  gap: var(--podo-spacing-4);
+}
+
+.podo-datepicker__period-calendar-left,
+.podo-datepicker__period-calendar-right {
+  flex: 1;
+}
+
+/* ============================================
+   Actions
+   ============================================ */
+.podo-datepicker__actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--podo-spacing-3);
+  padding-top: var(--podo-spacing-3);
+  border-top: 1px solid var(--podo-border);
+}
+
+.podo-datepicker__period-text {
+  font-size: var(--podo-font-size-md);
+  color: var(--podo-primary);
+  flex: 1;
+}
+
+.podo-datepicker__action-buttons {
+  display: flex;
+  gap: var(--podo-spacing-3);
+  flex-shrink: 0;
+}
+
+.podo-datepicker__action-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--podo-spacing-2);
+  padding: var(--podo-spacing-3) var(--podo-spacing-4);
+  border-radius: var(--podo-radius-md);
+  cursor: pointer;
+  transition: background 0.2s;
+  white-space: nowrap;
+  font-family: inherit;
+  font-size: var(--podo-font-size-md);
+}
+
+.podo-datepicker__action-button i {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  font-size: 18px;
+  line-height: 1;
+}
+
+.podo-datepicker__action-button--reset {
+  background: var(--podo-default-fill);
+  border: 1px solid var(--podo-border);
+  color: var(--podo-default-reverse);
+}
+
+.podo-datepicker__action-button--reset:hover {
+  background: var(--podo-default-hover);
+}
+
+.podo-datepicker__action-button--apply {
+  background: var(--podo-primary);
+  border: none;
+  color: var(--podo-primary-reverse);
+}
+
+.podo-datepicker__action-button--apply:hover {
+  background: var(--podo-primary-hover);
+}