feat(ffe-datepicker): nytt format på datepicker input

SpareBank1 · Dec 13, 2024 · 2547231 · 2547231
1 parent 900811a
commit 2547231
Showing 1 changed file with 37 additions and 23 deletions.
diff --git a/packages/ffe-datepicker/less/dateinput.less b/packages/ffe-datepicker/less/dateinput.less
@@ -1,52 +1,64 @@
 .ffe-dateinput {
     position: relative;
     display: inline-block;
+    grid-column: 1 e('/') 3;
+    grid-row: 1 e('/') -1;
+    min-width: 210px;
 
     &--full-width {
         display: block;
     }
 
-    @media (hover: hover) and (pointer: fine) {
-        &:hover {
-            color: var(--ffe-g-primary-color);
-        }
+    &:has([aria-invalid='true']){
+        border-color: var(--ffe-g-error-color);
+        border-style: solid;
+    }
+
+    &.ffe-input-field {
+        display: flex;
+        align-items: center;
     }
 
     &__field {
-        min-width: 160px;
-        grid-column: 1 e('/') 3;
-        grid-row: 1 e('/') -1;
+        padding-block: var(--ffe-spacing-2xs);
+
+        &:focus {
+            background-color: var(--ffe-farge-frost-30);
+            outline: none;
+        }
+
         &::-ms-clear {
             display: none;
         }
 
-        &[aria-invalid='true'] {
-            border-color: var(--ffe-g-error-color);
-            border-style: solid;
+        &[role="spinbutton"][aria-invalid='true'] {
+            border-color: transparent;
+            border-style: none;
         }
-
-        @media (hover: hover) and (pointer: fine) {
-            /* stylelint-disable selector-max-specificity */
-            &:focus + .ffe-datepicker__button:hover {
-                border-color: transparent;
-                box-shadow: 0 0 0 2px var(--ffe-v-datepicker-border-hover-color);
-            }
-            /* stylelint-enable selector-max-specificity */
+        &[role="spinbutton"][aria-invalid='true']:focus {
+            box-shadow: none;
         }
     }
+    &--message {
+        padding-bottom: 0;
+    }
 }
 
+
+
 .ffe-datepicker {
-    display: inline-block;
     position: relative;
+    display: grid;
+    grid-template-columns: 1fr auto;
+    width: fit-content;
 
     &--full-width {
-        display: block;
+        width: 100%;
     }
 
-    &--wrapper {
-        display: grid;
-        grid-template-columns: 1fr auto;
+    .ffe-field-message {
+        position: absolute;
+        top: calc(100% + var(--ffe-spacing-xs));
     }
 
     &__button {
@@ -60,6 +72,8 @@
         transition: all var(--ffe-transition-duration) var(--ffe-ease);
         width: 56px;
         cursor: pointer;
+        z-index: 1;
+        isolation: isolate;
 
         &:focus,
         &:active {