Port PrimeNG theme overrides for PrimeReact

5511-line PrimeNG theme adapted for PrimeReact: Angular element selectors replaced with class selectors, ng-dirty/ng-invalid validation patterns replaced with PrimeReact's .p-invalid class. Calendar component styles ported with updated asset paths.
2026-04-15 17:31:00 +03:00
parent 4c2b5c4bd1
commit 4d5fd14ba8
2 changed files with 5694 additions and 0 deletions
@@ -0,0 +1,183 @@
+// Adapted from Angular p-calendar element selector to class-based selectors for PrimeReact
+.p-calendar {
+    cursor: pointer;
+
+    .p-datepicker-header {
+        .p-datepicker-prev {
+            background-image: url('/assets/img/arrow-left.svg');
+            background-position: center center;
+            background-repeat: no-repeat;
+
+            span {
+                display: none;
+            }
+        }
+
+        .p-datepicker-title {
+            .p-datepicker-month,
+            .p-datepicker-year {
+                border: none;
+                color: $blue;
+                font-weight: $font-bold;
+                -webkit-appearance: none;
+                background: transparent !important;
+            }
+
+            .p-datepicker-year {
+                margin-left: $space-m;
+            }
+        }
+
+        .p-datepicker-next {
+            background-image: url('/assets/img/arrow-right.svg');
+            background-position: center center;
+            background-repeat: no-repeat;
+
+            span {
+                display: none;
+            }
+        }
+
+        .p-datepicker-prev,
+        .p-datepicker-next {
+            width: 1.8em;
+            height: 1.8em;
+        }
+    }
+
+    .p-datepicker-calendar-container {
+        .p-datepicker-calendar {
+            margin-top: $space-m;
+
+            th {
+                font-size: 10px;
+                font-weight: $font-medium;
+                padding: 2px;
+                padding-bottom: $space-m;
+                color: $gray;
+            }
+
+            td {
+                padding: 2px;
+
+                &.p-datepicker-today {
+                    a,
+                    span {
+                        border: 1px solid $blue;
+                        background-color: $white;
+
+                        &:hover {
+                            background-color: $blue-icon;
+                        }
+
+                        &.p-highlight {
+                            background-color: $blue-icon;
+                            color: $extra-blue;
+                        }
+                    }
+                }
+
+                a,
+                span {
+                    padding: 5px 6px;
+                    font-size: 12px;
+                    font-weight: $font-medium;
+                    color: $extra-blue;
+
+                    &.p-highlight {
+                        background-color: $blue-icon;
+                        color: $extra-blue;
+                    }
+
+                    &.p-highlight {
+                        background-color: $white;
+                    }
+
+                    &:not(.p-highlight):hover {
+                        background-color: $blue-icon;
+                    }
+                }
+
+                span.p-disabled {
+                    color: $gray;
+                    opacity: 0.5;
+
+                    &:hover {
+                        background-color: transparent;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.calendar--mobile {
+    display: none;
+
+    @media (max-width: $media-breakpoint-mobile) {
+        display: flex;
+    }
+
+    margin-bottom: $space-m;
+    justify-content: space-between;
+
+    .digit {
+        width: 100%;
+        @include control-border-shadow();
+        display: flex;
+        flex-direction: column;
+        padding: $space-m;
+        background-color: $white;
+        @include font-overflow();
+
+        &.selected {
+            background-color: $blue-extra-light;
+            border-color: $border-blue;
+
+            &:focus,
+            &:hover {
+                background-color: $blue-extra-light !important;
+                border-color: $border-blue !important;
+            }
+        }
+
+        &:focus,
+        &:hover {
+            border: 1px solid $border-input !important;
+            background-color: $white !important;
+        }
+
+        .p-button-label {
+            display: none;
+        }
+
+        .date-day {
+            display: flex;
+            flex-direction: row;
+            align-items: flex-end;
+
+            .date {
+                color: $text-color;
+                font-size: $font-size-xl3;
+            }
+
+            .day {
+                @include font-small();
+                margin-bottom: $text-margin-bottom;
+                margin-left: $space-s;
+            }
+        }
+
+        .month {
+            @include font-overflow();
+            margin-top: $text-margin-bottom;
+            @include font-small();
+            width: 100%;
+            text-align: left;
+        }
+
+        & + .digit {
+            margin-left: $space-m;
+        }
+    }
+}