wip fix date picker

klippa-app · Aug 19, 2024 · 1657dba · 1657dba
1 parent 0065d17
commit 1657dba
Showing 1 changed file with 30 additions and 19 deletions.
diff --git a/...lippa/ngx-enhancy-forms/src/lib/elements/date-time-picker/date-time-picker.component.scss b/...lippa/ngx-enhancy-forms/src/lib/elements/date-time-picker/date-time-picker.component.scss
@@ -5,47 +5,53 @@
  display: block;
  // patching some styling in the native material date picker so it is inline with our own styling
  ::ng-deep {
- mat-form-field {
+ .mat-mdc-form-field {
  display: block;
  height: 100%;
- /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
- .mat-form-field-label {
+ .mat-mdc-text-field-wrapper, .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-focus-overlay {
+ background-color: unset;
+ &:hover {
+ background-color: unset;
+ }
+ }
+
+ .mat-mdc-form-field-subscript-wrapper {
+ display: none
+ }
+
+ .mdc-line-ripple::before, .mdc-line-ripple::after {
+ display: none;
+ }
+
+ .mat-mdc-form-field-label {
  color: $default-gray-faded-dark;
  }
- /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
- &.mat-focused .mat-form-field-label {
+ &.mat-mdc-focused .mat-mdc-form-field-label {
  color: $default-gray-faded-dark;
  }
  }
- .mat-datepicker-toggle-active {
+ .mat-mdc-datepicker-toggle-active {
  color: $default-gray-dark;
  }
- /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
- .mat-form-field-wrapper {
+ .mat-mdc-form-field-wrapper {
  padding-bottom: 0;
  }
- /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
- .mat-form-field-flex {
+ .mat-mdc-form-field-flex {
  flex-direction: row-reverse;
  }
- /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
- .mat-form-field-infix {
+ .mat-mdc-form-field-infix {
  border-top: none;
  width: auto;
  }
- /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
- /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
- .mat-form-field-suffix {
+ .mat-mdc-form-field-suffix {
  margin-right: $spacing-small;
  &:hover {
- /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/
- .mat-button-focus-overlay {
+ .mat-mdc-button-focus-overlay {
  opacity: 0.1;
  }
  }
  }
- /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
- .mat-form-field-underline {
+ .mat-mdc-form-field-underline {
  display: none;
  }
  .daysSelectedCaption {
@@ -57,6 +63,11 @@
  .inputForMultipleDays {
  display: none;
  }
+
+ .mat-mdc-form-field.mat-focused .mat-mdc-form-field-focus-overlay {
+ opacity: unset;
+ background-color: unset;
+ }
  }
 }