@oslokommune/punkt-css 11.9.4 → 11.10.0

package/dist/css/pkt.css

@@ -13565,7 +13565,7 @@ a:active, a.pkt-link--active,
 }
 .pkt-link--external::after {
   content: " ";
-  --svg: url(https://punkt-cdn.oslo.kommune.no/11.9/icons/new-window-small.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/11.10/icons/new-window-small.svg);
   background-image: var(--svg);
   background-repeat: no-repeat;
   background-size: 18px 18px;
@@ -17431,7 +17431,7 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
   outline-color: var(--pkt-color-input-border-hover);
 }
 .pkt-input-check__input-checkbox:checked[type=checkbox] {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/11.9/icons/check-medium.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/11.10/icons/check-medium.svg);
   position: relative;
   background-color: var(--pkt-color-input-border-normal);
 }
@@ -17491,7 +17491,7 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
   cursor: not-allowed;
 }
 .pkt-input-check__input-checkbox:disabled[type=checkbox][role=switch]:checked:after {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/11.9/icons/check-medium.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/11.10/icons/check-medium.svg);
   --pkt-color-input-check-border: var(
     --pkt-color-input-border-normal
   );
@@ -17719,7 +17719,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 }
 .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/11.9/icons/chevron-thin-down.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/11.10/icons/chevron-thin-down.svg);
   background-image: var(--svg);
   background-repeat: no-repeat;
   background-position: right 0.7rem top 50%;
@@ -19794,7 +19794,89 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 .pkt-loader--large .pkt-loader__svg:not(.pkt-loader__shapes) svg {
   width: 3.5rem;
 }
+.pkt-loader .egg-loader {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 8em;
+  font-size: 0.4rem;
+  width: 25em;
+  height: 5em;
+}
+.pkt-loader--small .egg-loader {
+  font-size: 0.2rem;
+}
+.pkt-loader--large .egg-loader {
+  font-size: 0.6rem;
+}
+.pkt-loader .egg {
+  position: absolute;
+  width: 5em;
+  height: 6.5em;
+  left: 0em;
+  background: repeating-linear-gradient(#ff8274, #ff8274 1em, #f9c66b 1em, #f9c66b 2em);
+  border-radius: 50% 50% 50% 50%/55% 55% 45% 45%;
+  transform: translate3d(0, 0, 0);
+  animation-name: eggroll;
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  animation-delay: 0;
+  opacity: 0;
+}
+.pkt-loader .egg.two {
+  background: repeating-linear-gradient(#6fe9ff, #6fe9ff 1em, #ff8274 1em, #ff8274 2em);
+  animation-delay: 0.5s;
+}
+.pkt-loader .egg.three {
+  background: repeating-linear-gradient(#43f8b6, #43f8b6 1em, #f9c66b 1em, #f9c66b 2em);
+  animation-delay: 1s;
+}
+.pkt-loader .egg.four {
+  background: repeating-linear-gradient(#43f8b6, #43f8b6 1em, #ff8274 1em, #ff8274 2em);
+  animation-delay: 1.5s;
+}
 
+@keyframes eggroll {
+  0% {
+    transform: translate3d(0, 0, 0) rotate(0deg);
+    opacity: 0;
+  }
+  12.5% {
+    transform: translate3d(50%, 1em, 0) rotate(90deg);
+  }
+  25% {
+    transform: translate3d(100%, 0, 0) rotate(180deg);
+  }
+  37.5% {
+    transform: translate3d(150%, 1em, 0) rotate(270deg);
+  }
+  46% {
+    transform: translate3d(200%, 0, 0) rotate(380deg);
+  }
+  50% {
+    transform: translate3d(200%, 0, 0) rotate(360deg);
+    opacity: 1;
+  }
+  54% {
+    transform: translate3d(200%, 0, 0) rotate(340deg);
+  }
+  62.5% {
+    transform: translate3d(250%, 1em, 0) rotate(450deg);
+  }
+  70% {
+    transform: translate3d(300%, 0, 0) rotate(540deg);
+  }
+  75% {
+    transform: translate3d(350%, 1em, 0) rotate(630deg);
+    opacity: 1;
+  }
+  100% {
+    transform: translate3d(400%, 0, 0) rotate(720deg);
+    opacity: 0;
+  }
+}
 /* 
  * Textinput component 
  *