fix(styles): datepicker misaligned calendar icon (#3145)

swisspost · Jun 19, 2024 · ea3fa47 · ea3fa47
1 parent e2c21e1
commit ea3fa47
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 13 deletions.
diff --git a/.changeset/rich-buttons-complain.md b/.changeset/rich-buttons-complain.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Fixed the misaligned calendar icon in the datepicker input field.
diff --git a/packages/styles/src/components/datepicker.scss b/packages/styles/src/components/datepicker.scss
@@ -163,26 +163,14 @@ span.ngb-dp-navigation-chevron {
   }
 }
 
-.form-control-sm ~ .ngb-dp-open {
-  height: forms.$input-height-inner-sm;
-  width: forms.$input-height-inner-sm;
-
-  .pi-3203,
-  .pi-calendar,
-  post-icon {
-    width: datepicker.$ngb-dp-icon-size-sm;
-    height: datepicker.$ngb-dp-icon-size-sm;
-  }
-}
-
 .form-control-rg ~ .ngb-dp-open {
   height: forms.$input-height-inner-rg;
   width: forms.$input-height-inner-rg;
 }
 
 .form-floating > .ngb-dp-open,
 .form-control-lg ~ .ngb-dp-open {
-  height: forms.$input-height-inner-lg;
+  height: calc(#{forms.$form-floating-height} - #{forms.$input-border-width * 2});
   width: forms.$input-height-inner-lg;
 
   .pi-3203,
@@ -193,6 +181,10 @@ span.ngb-dp-navigation-chevron {
   }
 }
 
+.form-control-sm ~ .ngb-dp-open {
+  height: calc(#{forms.$form-floating-label-height-sm} - #{forms.$input-border-width * 2});
+}
+
 input[ngbDatepicker] {
   // Hide the x on IE/Edge input fields
   &::-ms-clear {