@oslokommune/punkt-css 13.6.10 → 13.9.0

package/dist/css/pkt.css

@@ -14218,7 +14218,7 @@ a:active, a.pkt-link--active,
 .pkt-link--external::after {
   display: inline-block;
   content: " ";
-  --svg: url(https://punkt-cdn.oslo.kommune.no/13.6/icons/new-window-small.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/13.9/icons/new-window-small.svg);
   background-image: var(--svg);
   background-repeat: no-repeat;
   background-size: 18px 18px;
@@ -18025,17 +18025,17 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
 /* TODO: Contemplate and decide if this should be split up to multiple files or not.
  * button is only one without pkt-form prefix. Is that ok???
  */
-.pkt-form {
-  /* EXPLICIT LABEL (recommended for use)
-   * - the label is connected to an input via "for" and "id"
-   */
-}
 .pkt-form-group {
   margin-bottom: 1.5rem;
 }
 .pkt-form-group:focus-within {
   color: var(--pkt-color-brand-warm-blue-1000);
 }
+.pkt-form {
+  /* EXPLICIT LABEL (recommended for use)
+   * - the label is connected to an input via "for" and "id"
+   */
+}
 .pkt-form-label {
   width: 100%;
 }
@@ -18081,9 +18081,6 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
   padding: 0.4375rem 0.5rem;
   position: relative;
   width: 100%;
-  /* Placeholder
-   * 1. Override Firefox's default opacity
-   */
 }
 .pkt-form-input:focus, .pkt-form-textarea:focus {
   background-color: var(--pkt-color-brand-neutrals-white);
@@ -18092,6 +18089,11 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
   color: var(--pkt-color-brand-warm-blue-1000);
   outline: 2px solid var(--pkt-color-brand-warm-blue-1000);
 }
+.pkt-form-input, .pkt-form-textarea {
+  /* Placeholder
+   * 1. Override Firefox's default opacity
+   */
+}
 .pkt-form-input::placeholder, .pkt-form-textarea::placeholder {
   color: var(--pkt-color-grays-gray-300);
   opacity: 1;
@@ -18234,7 +18236,7 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
   outline-color: var(--pkt-color-input-border-hover);
 }
 .pkt-input-check__input-checkbox:checked[type=checkbox] {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/13.6/icons/check-medium.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/13.9/icons/check-medium.svg);
   position: relative;
   background-color: var(--pkt-color-input-border-normal);
 }
@@ -18292,7 +18294,7 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
   cursor: not-allowed;
 }
 .pkt-input-check__input-checkbox:disabled[type=checkbox][role=switch]:checked:after {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/13.6/icons/check-medium.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/13.9/icons/check-medium.svg);
   --pkt-color-input-check-border: var(--pkt-color-input-border-normal);
   filter: grayscale(100%) brightness(400%);
 }
@@ -18338,10 +18340,6 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
   border: 2px solid var(--pkt-color-border-subtle);
   width: 21.875rem;
   position: relative;
-  /* TODO - Wait on firefox-support!
-  &:has(:checked) {
-    border-color: var(--choice-checked-rb-bc);
-  }*/
 }
 .pkt-input-check__input--tile .pkt-input-check__input-label:before {
   content: "";
@@ -18363,6 +18361,12 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
   border: 2px solid var(--pkt-color-border-default);
   pointer-events: none;
 }
+.pkt-input-check__input--tile {
+  /* TODO - Wait on firefox-support!
+  &:has(:checked) {
+    border-color: var(--choice-checked-rb-bc);
+  }*/
+}
 .pkt-input-check__input--tile:focus-within {
   background-color: var(--pkt-color-input-background-normal);
   border-color: var(--pkt-color-border-states-active);
@@ -18545,7 +18549,7 @@ pkt-select {
 }
 .pkt-input:is(select):not([multiple]), .pkt-textinput__input:is(select):not([multiple]), .pkt-select select:is(select):not([multiple]),
 .pkt-select:is(select):not([multiple]) {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/13.6/icons/chevron-thin-down.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/13.9/icons/chevron-thin-down.svg);
   background-image: var(--svg);
   background-repeat: no-repeat;
   background-position: right 0.7rem top 50%;
@@ -18581,8 +18585,8 @@ pkt-select {
 }
 .pkt-input:disabled, .pkt-textinput__input:disabled, .pkt-select select:disabled,
 .pkt-select:disabled:is(select), .pkt-input:disabled::placeholder, .pkt-textinput__input:disabled::placeholder, .pkt-select select:disabled::placeholder,
-.pkt-select:disabled:is(select)::placeholder, .pkt-input[readonly], [readonly].pkt-textinput__input, .pkt-select select[readonly],
-[readonly].pkt-select:is(select) {
+.pkt-select:disabled:is(select)::placeholder, .pkt-input[readonly]:not(.ios-readonly-hack), [readonly].pkt-textinput__input:not(.ios-readonly-hack), .pkt-select select[readonly]:not(.ios-readonly-hack),
+[readonly].pkt-select:not(.ios-readonly-hack):is(select) {
   opacity: 1;
   background-color: var(--pkt-color-surface-default-gray);
   border-color: var(--pkt-color-input-border-disabled);
@@ -18867,16 +18871,6 @@ pkt-select {
   margin: 1rem 0;
   padding: 0.75rem;
   background-color: #2a2859;
-  /*
-  @if luminance($backgroundColor) < 0.4 {
-    color: white;
-
-    a:not([class^='ok-btn']) {
-      color: white;
-      text-decoration: underline;
-    }
-  }
-  */
 }
 @media screen and (min-width: 35.938rem) {
   .pkt-section--dark {
@@ -18888,15 +18882,7 @@ pkt-select {
     padding: 1.5rem;
   }
 }
-.pkt-section--dark a.pkt-btn--ter {
-  color: white;
-}
-
-.pkt-section--danger {
-  color: black;
-  margin: 1rem 0;
-  padding: 0.75rem;
-  background-color: #ff8274;
+.pkt-section--dark {
   /*
   @if luminance($backgroundColor) < 0.4 {
     color: white;
@@ -18908,6 +18894,16 @@ pkt-select {
   }
   */
 }
+.pkt-section--dark a.pkt-btn--ter {
+  color: white;
+}
+
+.pkt-section--danger {
+  color: black;
+  margin: 1rem 0;
+  padding: 0.75rem;
+  background-color: #ff8274;
+}
 @media screen and (min-width: 35.938rem) {
   .pkt-section--danger {
     padding: 1rem;
@@ -18918,15 +18914,7 @@ pkt-select {
     padding: 1.5rem;
   }
 }
-.pkt-section--danger a.pkt-btn--ter {
-  color: black;
-}
-
-.pkt-section--gray,
-.pkt-section--grey {
-  margin: 1rem 0;
-  padding: 0.75rem;
-  background-color: #f2f2f2;
+.pkt-section--danger {
   /*
   @if luminance($backgroundColor) < 0.4 {
     color: white;
@@ -18938,6 +18926,16 @@ pkt-select {
   }
   */
 }
+.pkt-section--danger a.pkt-btn--ter {
+  color: black;
+}
+
+.pkt-section--gray,
+.pkt-section--grey {
+  margin: 1rem 0;
+  padding: 0.75rem;
+  background-color: #f2f2f2;
+}
 @media screen and (min-width: 35.938rem) {
   .pkt-section--gray,
   .pkt-section--grey {
@@ -18950,12 +18948,8 @@ pkt-select {
     padding: 1.5rem;
   }
 }
-
-.pkt-section--success {
-  color: black;
-  margin: 1rem 0;
-  padding: 0.75rem;
-  background-color: #43f8b6;
+.pkt-section--gray,
+.pkt-section--grey {
   /*
   @if luminance($backgroundColor) < 0.4 {
     color: white;
@@ -18967,6 +18961,13 @@ pkt-select {
   }
   */
 }
+
+.pkt-section--success {
+  color: black;
+  margin: 1rem 0;
+  padding: 0.75rem;
+  background-color: #43f8b6;
+}
 @media screen and (min-width: 35.938rem) {
   .pkt-section--success {
     padding: 1rem;
@@ -18977,14 +18978,7 @@ pkt-select {
     padding: 1.5rem;
   }
 }
-.pkt-section--success a.pkt-btn--ter {
-  color: black;
-}
-
-.pkt-section--warning {
-  margin: 1rem 0;
-  padding: 0.75rem;
-  background-color: #f9c66b;
+.pkt-section--success {
   /*
   @if luminance($backgroundColor) < 0.4 {
     color: white;
@@ -18996,6 +18990,15 @@ pkt-select {
   }
   */
 }
+.pkt-section--success a.pkt-btn--ter {
+  color: black;
+}
+
+.pkt-section--warning {
+  margin: 1rem 0;
+  padding: 0.75rem;
+  background-color: #f9c66b;
+}
 @media screen and (min-width: 35.938rem) {
   .pkt-section--warning {
     padding: 1rem;
@@ -19006,11 +19009,7 @@ pkt-select {
     padding: 1.5rem;
   }
 }
-
-.pkt-section--info {
-  margin: 1rem 0;
-  padding: 0.75rem;
-  background-color: #b3f5ff;
+.pkt-section--warning {
   /*
   @if luminance($backgroundColor) < 0.4 {
     color: white;
@@ -19022,6 +19021,12 @@ pkt-select {
   }
   */
 }
+
+.pkt-section--info {
+  margin: 1rem 0;
+  padding: 0.75rem;
+  background-color: #b3f5ff;
+}
 @media screen and (min-width: 35.938rem) {
   .pkt-section--info {
     padding: 1rem;
@@ -19032,15 +19037,7 @@ pkt-select {
     padding: 1.5rem;
   }
 }
-.pkt-section--info a.pkt-btn--ter {
-  color: black;
-}
-
-.pkt-section--frame {
-  border: 1px solid #2c2c2c;
-  margin: 1rem 0;
-  padding: 0.75rem;
-  background-color: white;
+.pkt-section--info {
   /*
   @if luminance($backgroundColor) < 0.4 {
     color: white;
@@ -19052,6 +19049,16 @@ pkt-select {
   }
   */
 }
+.pkt-section--info a.pkt-btn--ter {
+  color: black;
+}
+
+.pkt-section--frame {
+  border: 1px solid #2c2c2c;
+  margin: 1rem 0;
+  padding: 0.75rem;
+  background-color: white;
+}
 @media screen and (min-width: 35.938rem) {
   .pkt-section--frame {
     padding: 1rem;
@@ -19062,6 +19069,18 @@ pkt-select {
     padding: 1.5rem;
   }
 }
+.pkt-section--frame {
+  /*
+  @if luminance($backgroundColor) < 0.4 {
+    color: white;
+
+    a:not([class^='ok-btn']) {
+      color: white;
+      text-decoration: underline;
+    }
+  }
+  */
+}
 
 [class*=ok-section-] > [class^=ok-title-] {
   margin-top: 0;
@@ -19962,6 +19981,12 @@ pkt-datepicker .pkt-datepicker__tags .pkt-tag {
   margin: 0 0.25rem 0.5rem 0;
 }
 
+pkt-datepicker-single,
+pkt-datepicker-range,
+pkt-datepicker-multiple {
+  display: block;
+}
+
 .pkt-datepicker__inputs {
   width: 100%;
   position: relative;
@@ -22478,6 +22503,11 @@ pkt-messagebox {
   min-width: 2rem;
 }
 
+pkt-tabs,
+pkt-tab-item {
+  display: block;
+}
+
 .pkt-tabs {
   --pkt-tabs-bg: var(--pkt-color-background-default);
   background-color: var(--pkt-tabs-bg);