@oslokommune/punkt-css 15.2.0 → 15.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -14410,7 +14410,7 @@ a:active, a.pkt-link--active,
14410
14410
  .pkt-link--external::after {
14411
14411
  display: inline-block;
14412
14412
  content: " ";
14413
- --svg: url(https://punkt-cdn.oslo.kommune.no/15.2/icons/new-window-small.svg);
14413
+ --svg: url(https://punkt-cdn.oslo.kommune.no/15.4/icons/new-window-small.svg);
14414
14414
  background-image: var(--svg);
14415
14415
  background-repeat: no-repeat;
14416
14416
  background-size: 18px 18px;
@@ -18452,7 +18452,7 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
18452
18452
  outline-color: var(--pkt-color-input-border-hover);
18453
18453
  }
18454
18454
  .pkt-input-check__input-checkbox:indeterminate[type=checkbox]:not([role=switch]) {
18455
- --svg: url(https://punkt-cdn.oslo.kommune.no/15.2/icons/minus-sign.svg);
18455
+ --svg: url(https://punkt-cdn.oslo.kommune.no/15.4/icons/minus-sign.svg);
18456
18456
  position: relative;
18457
18457
  background-color: var(--pkt-color-input-border-normal);
18458
18458
  }
@@ -18478,7 +18478,7 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
18478
18478
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(271deg) brightness(105%) contrast(101%);
18479
18479
  }
18480
18480
  .pkt-input-check__input-checkbox:checked[type=checkbox] {
18481
- --svg: url(https://punkt-cdn.oslo.kommune.no/15.2/icons/check-medium.svg);
18481
+ --svg: url(https://punkt-cdn.oslo.kommune.no/15.4/icons/check-medium.svg);
18482
18482
  position: relative;
18483
18483
  background-color: var(--pkt-color-input-border-normal);
18484
18484
  }
@@ -18536,7 +18536,7 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
18536
18536
  cursor: not-allowed;
18537
18537
  }
18538
18538
  .pkt-input-check__input-checkbox:disabled[type=checkbox][role=switch]:checked:after {
18539
- --svg: url(https://punkt-cdn.oslo.kommune.no/15.2/icons/check-medium.svg);
18539
+ --svg: url(https://punkt-cdn.oslo.kommune.no/15.4/icons/check-medium.svg);
18540
18540
  --pkt-color-input-check-border: var(--pkt-color-input-border-normal);
18541
18541
  filter: grayscale(100%) brightness(400%);
18542
18542
  }
@@ -18754,7 +18754,7 @@ pkt-select {
18754
18754
  }
18755
18755
  .pkt-input:is(select):not([multiple]), .pkt-textinput__input:is(select):not([multiple]), .pkt-select select:is(select):not([multiple]),
18756
18756
  .pkt-select:is(select):not([multiple]) {
18757
- --svg: url(https://punkt-cdn.oslo.kommune.no/15.2/icons/chevron-thin-down.svg);
18757
+ --svg: url(https://punkt-cdn.oslo.kommune.no/15.4/icons/chevron-thin-down.svg);
18758
18758
  background-image: var(--svg);
18759
18759
  background-repeat: no-repeat;
18760
18760
  background-position: right 0.7rem top 50%;
@@ -20878,6 +20878,7 @@ pkt-fileupload__queue-display:has(.pkt-fileupload__queue-display__item__thumbnai
20878
20878
  display: grid;
20879
20879
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
20880
20880
  gap: 1rem;
20881
+ max-width: 100%;
20881
20882
  }
20882
20883
  pkt-fileupload__queue-display:has(.pkt-fileupload__queue-display__item__thumbnail) .pkt-fileupload__queue-display__item:has(.pkt-fileupload__queue-display__item__thumbnail),
20883
20884
  .pkt-fileupload__queue-display:has(.pkt-fileupload__queue-display__item__thumbnail) .pkt-fileupload__queue-display__item:has(.pkt-fileupload__queue-display__item__thumbnail) {
@@ -20913,17 +20914,17 @@ pkt-fileupload__queue-display:has(.pkt-fileupload__queue-display__item__thumbnai
20913
20914
  pkt-fileupload__queue-display__item,
20914
20915
  .pkt-fileupload__queue-display__item {
20915
20916
  display: grid;
20916
- grid-template-columns: auto 1fr;
20917
+ grid-template-columns: auto minmax(0, 1fr);
20917
20918
  align-items: center;
20918
20919
  gap: 0.5rem;
20919
20920
  padding: 1rem;
20920
20921
  border: 2px solid var(--pkt-color-border-subtle);
20922
+ container-type: inline-size;
20921
20923
  }
20922
20924
  @media screen and (min-width: 64rem) {
20923
20925
  pkt-fileupload__queue-display__item,
20924
20926
  .pkt-fileupload__queue-display__item {
20925
- grid-template-columns: auto 1fr auto auto;
20926
- align-items: end;
20927
+ grid-template-columns: auto minmax(0, 1fr) auto auto;
20927
20928
  }
20928
20929
  }
20929
20930
  pkt-fileupload__queue-display__item__icon,
@@ -20946,6 +20947,8 @@ pkt-fileupload__queue-display__item__title,
20946
20947
  max-width: 100%;
20947
20948
  overflow: hidden;
20948
20949
  white-space: normal;
20950
+ overflow-wrap: anywhere;
20951
+ word-break: break-word;
20949
20952
  align-self: center;
20950
20953
  margin: 0;
20951
20954
  }
@@ -21354,6 +21357,29 @@ pkt-fileupload__queue-display__item--in-progress .pkt-fileupload__queue-display_
21354
21357
  grid-row: 2;
21355
21358
  }
21356
21359
 
21360
+ .pkt-fileupload__queue-display__item {
21361
+ container-type: inline-size;
21362
+ }
21363
+
21364
+ @container (max-width: 560px) {
21365
+ .pkt-fileupload__queue-display__item__actions {
21366
+ flex-direction: column;
21367
+ gap: 0.5rem;
21368
+ }
21369
+ .pkt-fileupload__queue-display__item__title {
21370
+ -webkit-line-clamp: 2;
21371
+ display: -webkit-box;
21372
+ -webkit-box-orient: vertical;
21373
+ overflow: hidden;
21374
+ }
21375
+ }
21376
+ .pkt-fileupload-wrapper--full-width {
21377
+ width: 100%;
21378
+ }
21379
+ .pkt-fileupload-wrapper--full-width .pkt-inputwrapper__fieldset {
21380
+ width: 100%;
21381
+ align-items: stretch;
21382
+ }
21357
21383
  .pkt-fileupload-wrapper .pkt-inputwrapper__fieldset {
21358
21384
  margin-bottom: 0;
21359
21385
  }
@@ -21419,7 +21445,7 @@ pkt-fileupload__queue-display__item--in-progress .pkt-fileupload__queue-display_
21419
21445
  gap: 1rem;
21420
21446
  }
21421
21447
  .pkt-fileupload__image-preview__content {
21422
- height: 75vh;
21448
+ min-height: 75vh;
21423
21449
  grid-area: prev-start/prev-start/next-end/next-end;
21424
21450
  display: flex;
21425
21451
  align-items: center;
@@ -23698,11 +23724,12 @@ body.pkt-modal--open {
23698
23724
  .pkt-modal__btn-wrapper {
23699
23725
  display: grid;
23700
23726
  grid-template-columns: 1fr;
23701
- justify-content: center;
23727
+ justify-items: center;
23702
23728
  align-items: center;
23729
+ gap: 0.5rem;
23703
23730
  }
23704
- .pkt-modal__btn-wrapper .pkt-btn {
23705
- justify-content: center;
23731
+ .pkt-modal__btn-wrapper--buttonsFullWidthOnMobile .pkt-btn {
23732
+ width: 100%;
23706
23733
  }
23707
23734
  }
23708
23735
  .pkt-modal--noShadow {
@@ -23853,6 +23880,9 @@ pkt-messagebox {
23853
23880
  .pkt-preview__component--fullwidth > div {
23854
23881
  width: 100%;
23855
23882
  }
23883
+ .pkt-preview__component--fullwidth > div > .pkt-fileupload, .pkt-preview__component--fullwidth > div > .pkt-fileupload-wrapper {
23884
+ width: 100%;
23885
+ }
23856
23886
  .pkt-preview__component-container {
23857
23887
  position: relative;
23858
23888
  border: 2px solid var(--pkt-color-border-gray);
@@ -23868,9 +23898,6 @@ pkt-messagebox {
23868
23898
  flex: 1 1 0;
23869
23899
  min-width: 0;
23870
23900
  }
23871
- .pkt-preview__component-container .pkt-preview__component div {
23872
- justify-self: center;
23873
- }
23874
23901
  .pkt-preview__component-container .pkt-preview__panel {
23875
23902
  flex: 0 0 auto;
23876
23903
  min-width: 20rem;
@@ -23878,6 +23905,11 @@ pkt-messagebox {
23878
23905
  width: 100%;
23879
23906
  }
23880
23907
  }
23908
+ .pkt-preview__component__inner-container {
23909
+ display: flex;
23910
+ justify-content: center;
23911
+ width: 100%;
23912
+ }
23881
23913
  .pkt-preview__panel {
23882
23914
  display: flex;
23883
23915
  flex-direction: column;