@oslokommune/punkt-css 12.11.3 → 12.11.5

package/dist/scss/components/_calendar.scss

@@ -156,6 +156,20 @@ pkt-datepicker {
 .pkt-datepicker__inputs {
   width: 100%;
   position: relative;
+  .pkt-input__container {
+    width: fit-content;
+  }
+  button.pkt-input-icon {
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
+  }
+  .pkt-datepicker__input {
+    padding-right: 0;
+    background-image: none;
+  }
+  .pkt-input-separator ~ .pkt-datepicker--range {
+    padding-left: 0.25rem;
+  }
 }
 .pkt-calendar-popup {
   top: 100%;
@@ -170,8 +184,25 @@ pkt-datepicker {
     0px 2px 4px -2px rgba(0, 0, 0, 0.1),
     0px 4px 6px -1px rgba(0, 0, 0, 0.1);
 }
+.pkt-datepicker__input:not(.pkt-datepicker--multiple) {
+  width: 8.3rem;
+}
 .pkt-datepicker__input::-webkit-inner-spin-button,
 .pkt-datepicker__input::-webkit-calendar-picker-indicator {
   display: none;
   -webkit-appearance: none;
 }
+
+// Firefox specific styles :(
+@-moz-document url-prefix() {
+  .pkt-datepicker__input:not(.pkt-datepicker--multiple) {
+    width: 10.5rem;
+  }
+  .pkt-datepicker__inputs button.pkt-input-icon {
+    display: none;
+  }
+  .pkt-datepicker__inputs
+    input.pkt-datepicker__input:has(~ button):not(:has(~ .pkt-input-separator)):not(:has(~ .pkt-input-prefix)) {
+    border-right-width: 2px !important;
+  }
+}

package/dist/scss/elements/_input.scss

@@ -70,8 +70,10 @@
     }
   }
 
-  &:not(textarea[cols]):not(input[size]):not(&--fullwidth),
-  &__container:not(:is(:has(textarea[cols]))):not(:is(:has(input[size]))):not(:is(:has(&--fullwidth))) {
+  &:not(textarea[cols]):not(input[size]):not(&--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)),
+  &__container:not(:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple)))):not(:is(:has(textarea[cols]))):not(
+      :is(:has(input[size]))
+    ):not(:is(:has(&--fullwidth))) {
     width: min(100%, 31rem);
   }
 
@@ -148,7 +150,8 @@
 
   &-prefix,
   &-suffix,
-  &-icon {
+  &-icon,
+  &-separator {
     @include typography.get-text('pkt-txt-18-light');
     display: flex;
     align-items: center;
@@ -197,10 +200,17 @@
     & svg {
       width: 1.5rem;
       height: 1.5rem;
+    }
+
+    &:not(button) svg {
       margin-left: 0.5rem;
     }
   }
 
+  &-separator {
+    padding: 0.5rem 0;
+  }
+
   &--counter-error,
   &--counter-error:focus {
     border-color: var(--pkt-color-input-border-error);
@@ -212,6 +222,7 @@
   }
 
   &__container {
+    width: fit-content;
     display: flex;
     align-items: center;
     align-self: stretch;
@@ -222,16 +233,16 @@
     }
 
     :first-child:not(:only-child) {
-      border-right: none;
+      border-right-width: 0;
     }
 
     :last-child:not(:only-child) {
-      border-left: none;
+      border-left-width: 0;
     }
 
     :not(:first-child):not(:last-child) {
-      border-left: none;
-      border-right: none;
+      border-left-width: 0;
+      border-right-width: 0;
     }
 
     p {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-css",
-  "version": "12.11.3",
+  "version": "12.11.5",
   "description": "CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -54,5 +54,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "6e3766c461f3ad153c396c51f84e12d6e69be979"
+  "gitHead": "1ac7645d35560a308696609a4d6743ed5f183452"
 }