@oslokommune/punkt-css 11.13.13 → 11.14.0

package/dist/css/pkt.css

@@ -13568,7 +13568,7 @@ a:active, a.pkt-link--active,
 .pkt-link--external::after {
   display: inline-block;
   content: " ";
-  --svg: url(https://punkt-cdn.oslo.kommune.no/11.13/icons/new-window-small.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/11.14/icons/new-window-small.svg);
   background-image: var(--svg);
   background-repeat: no-repeat;
   background-size: 18px 18px;
@@ -17434,7 +17434,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.13/icons/check-medium.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/11.14/icons/check-medium.svg);
   position: relative;
   background-color: var(--pkt-color-input-border-normal);
 }
@@ -17494,7 +17494,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.13/icons/check-medium.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/11.14/icons/check-medium.svg);
   --pkt-color-input-check-border: var(
     --pkt-color-input-border-normal
   );
@@ -17737,7 +17737,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.13/icons/chevron-thin-down.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/11.14/icons/chevron-thin-down.svg);
   background-image: var(--svg);
   background-repeat: no-repeat;
   background-position: right 0.7rem top 50%;
@@ -20337,4 +20337,62 @@ pkt-el-icon--large {
   -webkit-box-orient: vertical;
   overflow: hidden;
   hyphens: auto;
+}
+
+.pkt-progressbar {
+  --pkt-progress-width: 0%;
+  --pkt-progress-label-width: 5rem;
+}
+.pkt-progressbar__container {
+  margin: 0;
+}
+.pkt-progressbar__title {
+  display: block;
+  margin: 0;
+  margin-bottom: 8px;
+  text-align: left;
+  font-weight: 500;
+  font-size: 0.875rem;
+}
+.pkt-progressbar__title-center {
+  text-align: center;
+}
+.pkt-progressbar__bar-wrapper {
+  background-color: var(--pkt-color-grays-gray-100);
+  height: 8px;
+  overflow: hidden;
+}
+.pkt-progressbar__bar {
+  background-color: var(--pkt-color-brand-dark-blue-1000);
+  display: block;
+  width: var(--pkt-progress-width);
+  height: 100%;
+  transition: width 0.5s ease;
+}
+.pkt-progressbar__bar--dark-blue {
+  background-color: var(--pkt-color-brand-dark-blue-1000);
+}
+.pkt-progressbar__bar--green {
+  background-color: var(--pkt-color-brand-green-1000);
+}
+.pkt-progressbar__bar--light-blue {
+  background-color: var(--pkt-color-brand-blue-1000);
+}
+.pkt-progressbar__bar--red {
+  background-color: var(--pkt-color-brand-red-1000);
+}
+.pkt-progressbar__status {
+  margin-top: 8px;
+  position: relative;
+  white-space: nowrap;
+  font-weight: 400;
+  font-size: 0.75rem;
+}
+.pkt-progressbar__status--center {
+  width: 100% !important;
+  text-align: center;
+}
+.pkt-progressbar__status-placement--following {
+  margin-left: max(0%, min(100% - var(--pkt-progress-label-width), var(--pkt-progress-width) - var(--pkt-progress-label-width) / 2));
+  transition: margin-left 0.5s ease;
 }