primekit 1.0.8 → 1.0.10

package/src/lib/lib/atomix-daterange-calendar/atomix-daterange-calendar.component.scss

@@ -0,0 +1,266 @@
+::ng-deep {
+  .p-calendar {
+    button {
+      background-color: transparent !important;
+    }
+  }
+
+  .p-overlaypanel .p-overlaypanel-content {
+    margin-top: 0 !important;
+  }
+
+  .p-datepicker {
+    border: none !important;
+    border-radius: var(--global-border-radius);
+
+    .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+      color: #63b77e;
+      transition:
+        background-color 0.2s,
+        color 0.2s,
+        box-shadow 0.2s;
+      font-weight: 600;
+      padding: 0.5rem;
+    }
+
+    .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+    .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+      color: #63b77e;
+      transition:
+        background-color 0.2s,
+        color 0.2s,
+        box-shadow 0.2s;
+      font-weight: 600;
+      padding: 0.5rem;
+    }
+
+    .p-monthpicker .p-monthpicker-month.p-highlight {
+      color: #ffffff;
+      background: #63c984;
+      padding: 1rem !important;
+    }
+
+    .p-monthpicker .p-monthpicker-month {
+      padding: 1rem !important;
+    }
+
+    .p-yearpicker .p-yearpicker-year.p-highlight {
+      color: #ffffff;
+      background: #63b77e;
+      padding: 1rem !important;
+    }
+
+    .p-yearpicker .p-yearpicker-year {
+      padding: 1rem !important;
+    }
+
+    table th {
+      border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+      color: var(--text-gray-700);
+      font-weight: 400;
+      font-size: 0.875rem;
+    }
+
+    table td > span.p-highlight {
+      color: #ffffff;
+      background: #63c984;
+    }
+
+    table td {
+      padding: 0.2rem 0;
+    }
+
+    table td > span {
+      width: 2.8rem;
+      height: 2.8rem;
+      border-radius: 0%;
+      transition: none;
+    }
+
+    table td.p-datepicker-today > span {
+      box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.38);
+    }
+
+    table td > span.p-highlight.start-range {
+      border-top-left-radius: 10px;
+      border-bottom-left-radius: 10px;
+    }
+
+    table td > span.p-highlight.end-range {
+      border-top-right-radius: 10px;
+      border-bottom-right-radius: 10px;
+    }
+
+    table td > span.p-highlight.between-range {
+      background: #00c37dad !important;
+    }
+  }
+
+  .p-monthpicker-month {
+    width: 50% !important;
+  }
+
+  .p-yearpicker-year {
+    width: 50% !important;
+  }
+
+  .inline-calendar .p-datepicker table td > span {
+    width: 2.4rem;
+    height: 2.4rem;
+  }
+
+  .inline-calendar {
+    border-bottom: 1px solid #e5e5e5;
+  }
+
+  .atomix-date-range-overlay {
+    border-radius: var(--global-border-radius);
+  }
+}
+
+.overlay-inner {
+  display: flex;
+  gap: 1rem;
+  align-items: flex-start;
+  flex-wrap: nowrap;
+}
+
+.overlay-left {
+  padding: 0.75rem 0.75rem 2rem;
+  text-align: center;
+  border-right: 1px solid #e5e5e5;
+}
+
+.inline-calendar .overlay-left {
+  padding-bottom: 2rem;
+}
+
+.input-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  position: relative;
+}
+
+.input-wrapper input[readonly] {
+  cursor: pointer;
+  padding-right: 40px !important;
+  border-radius: var(--global-border-radius);
+}
+
+.input-wrapper input {
+  color: rgba(0, 0, 0, 0.87);
+}
+
+.input-wrapper input::placeholder {
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.input-icon {
+  cursor: pointer;
+  color: var(--primary-text-color) !important;
+  position: absolute;
+  right: 10px;
+}
+
+.input-clear-icon {
+  cursor: pointer;
+  color: var(--primary-text-color) !important;
+  position: absolute;
+  right: 27px;
+}
+
+.preset-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.preset-btn {
+  justify-content: flex-start;
+  text-align: left;
+  padding-left: 8px;
+}
+
+.inline-calendar .preset-btn {
+  padding: 0.3rem 0.8rem !important;
+}
+
+.inline-calendar {
+  gap: 0;
+}
+
+.preset-btn .p-button-label {
+  display: inline-block;
+}
+
+.preset-btn:not(.p-button-outlined) {
+  background-color: transparent;
+  color: var(--text-gray-700);
+  border-radius: var(--global-border-radius);
+}
+
+.preset-btn:hover {
+  background-color: #63b77e;
+}
+
+.preset-btn.active,
+.preset-btn.p-button.active,
+.preset-btn.custom-active,
+.preset-btn.p-button.custom-active {
+  background-color: #63b77e !important;
+  color: white !important;
+  font-weight: 700;
+  line-height: 17px;
+  border-radius: var(--global-border-radius);
+}
+
+.reset-link {
+  text-align: left;
+  cursor: pointer;
+  margin-top: 10px;
+  padding: 0.3rem 1.4rem !important;
+  color: #63b77e;
+  font-weight: 600;
+}
+
+.atomix-date-range-overlay .overlay-left .reset-link {
+  display: inline-block;
+  margin-top: 1rem;
+  color: #2196f3;
+  cursor: pointer;
+}
+
+.overlay-right {
+  flex: 1;
+  width: 230px;
+  max-width: 230px;
+}
+
+.overlay-inner.inline {
+  flex-direction: row;
+}
+
+/* Ensure inline mode in PrimeNG filter menus render side-by-side */
+:host ::ng-deep .p-column-filter-menu .overlay-inner.inline {
+  display: flex !important;
+  flex-direction: row !important;
+  flex-wrap: nowrap !important;
+}
+
+/* Also ensure overlay-inner when appended to body in overlayPanel respects sizing */
+:host ::ng-deep .p-overlaypanel .overlay-inner.inline {
+  display: flex !important;
+  flex-direction: row !important;
+}
+
+.overlay-actions {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: flex-end;
+  margin-top: 0.5rem;
+}
+
+.atomix-overlay-calendar ::ng-deep .p-datepicker {
+  width: 100%;
+}