@oslokommune/punkt-css 17.0.5 → 17.0.7

package/dist/scss/components/_footer.scss

@@ -79,8 +79,7 @@ $-footer-content-max-width: 75rem;
     }
 
     &--compact {
-      padding-top: map.get(variables.$spacing, 'size-32');
-      padding-bottom: map.get(variables.$spacing, 'size-32');
+      padding-block: map.get(variables.$spacing, 'size-32');
     }
   }
 
@@ -118,16 +117,16 @@ $-footer-content-max-width: 75rem;
     justify-content: space-between;
     align-items: center;
     gap: map.get(variables.$spacing, 'size-32');
-    margin-top: map.get(variables.$spacing, 'size-16');
+    margin-block-start: map.get(variables.$spacing, 'size-16');
 
     @include cq('pkt-footer', $cq-bp-tablet) {
       grid-column: -2 / -1;
-      margin-top: 0;
+      margin-block-start: 0;
     }
   }
 
   &__sections + &__bottom {
-    margin-top: map.get(variables.$spacing, 'size-32');
+    margin-block-start: map.get(variables.$spacing, 'size-32');
   }
 
   &__bottom-links {
@@ -167,7 +166,7 @@ $-footer-content-max-width: 75rem;
   }
 
   &__sections + &__consent {
-    margin-top: map.get(variables.$spacing, 'size-32');
+    margin-block-start: map.get(variables.$spacing, 'size-32');
   }
 }
 

package/dist/scss/components/_header-global.scss

@@ -31,14 +31,14 @@
   &__logo-area {
     align-items: center;
     display: inline-flex;
-    padding-left: map.get(variables.$spacing, 'size-32');
+    padding-inline-start: map.get(variables.$spacing, 'size-32');
 
     .pkt-header-global--tablet & {
-      padding-left: map.get(variables.$spacing, 'size-16');
+      padding-inline-start: map.get(variables.$spacing, 'size-16');
     }
 
     .pkt-header-global--mobile & {
-      padding-left: map.get(variables.$spacing, 'size-8');
+      padding-inline-start: map.get(variables.$spacing, 'size-8');
     }
   }
 
@@ -58,7 +58,7 @@
 
     .pkt-header-global--mobile & {
       column-gap: map.get(variables.$spacing, 'size-8');
-      padding-right: map.get(variables.$spacing, 'size-8');
+      padding-inline-end: map.get(variables.$spacing, 'size-8');
     }
   }
 
@@ -69,10 +69,10 @@
 
   &__user {
     justify-self: end;
-    padding-right: map.get(variables.$spacing, 'size-32');
+    padding-inline-end: map.get(variables.$spacing, 'size-32');
 
     .pkt-header-global--tablet:not(.pkt-header-global--mobile) & {
-      padding-right: map.get(variables.$spacing, 'size-16');
+      padding-inline-end: map.get(variables.$spacing, 'size-16');
     }
   }
 
@@ -171,7 +171,7 @@
   }
 
   &__search-panel-inner {
-    margin-left: var(--pkt-header-global-left, 0px);
+    margin-inline-start: var(--pkt-header-global-left, 0px);
     width: var(--pkt-header-global-width, 100%);
     background-color: var(--pkt-color-background-default);
     border-bottom: 1px solid var(--pkt-color-border-subtle);

package/dist/scss/components/_header-menu.scss

@@ -12,8 +12,8 @@ $pkt-header-menu-breakpoint: 48rem;
 @mixin pkt-header-menu-region-inner {
   max-width: 75rem;
   margin: 0 auto;
-  padding-top: map.get(variables.$spacing, 'size-32');
-  padding-bottom: map.get(variables.$spacing, 'size-16');
+  padding-block-start: map.get(variables.$spacing, 'size-32');
+  padding-block-end: map.get(variables.$spacing, 'size-16');
 
   @include cq('pkt-header-menu', $cq-bp-tablet) {
     padding: map.get(variables.$spacing, 'size-52');
@@ -52,7 +52,7 @@ $pkt-header-menu-breakpoint: 48rem;
   }
 
   &__services-title {
-    margin-bottom: map.get(variables.$spacing, 'size-32');
+    margin-block-end: map.get(variables.$spacing, 'size-32');
   }
 
   &__services-list {
@@ -77,7 +77,7 @@ $pkt-header-menu-breakpoint: 48rem;
       display: flex;
       gap: map.get(variables.$spacing, 'size-16');
       flex-wrap: wrap;
-      padding-top: 0;
+      padding-block-start: 0;
     }
 
     @include cq('pkt-header-menu', $cq-bp-tablet-big) {
@@ -232,11 +232,11 @@ $pkt-header-menu-breakpoint: 48rem;
           border-right: 1px solid currentColor;
           padding: 0 map.get(variables.$spacing, 'size-32');
           &:first-child {
-            padding-left: 0;
+            padding-inline-start: 0;
           }
           &:last-child {
             border-right: none;
-            padding-right: 0;
+            padding-inline-end: 0;
           }
         }
       }
@@ -285,10 +285,10 @@ $pkt-header-menu-breakpoint: 48rem;
     @include pkt-header-menu-region-inner;
     text-align: center;
     color: var(--pkt-color-text-body-default);
-    padding-bottom: map.get(variables.$spacing, 'size-48');
+    padding-block-end: map.get(variables.$spacing, 'size-48');
 
     @include cq('pkt-header-menu', $cq-bp-tablet) {
-      padding-bottom: map.get(variables.$spacing, 'size-52');
+      padding-block-end: map.get(variables.$spacing, 'size-52');
     }
   }
 }

package/dist/scss/components/_header-service-mobile.scss

@@ -34,7 +34,7 @@
     &__content {
       grid-column: 2;
       grid-row: 1;
-      padding-right: map.get(variables.$spacing, 'size-8');
+      padding-inline-end: map.get(variables.$spacing, 'size-8');
     }
 
     &__user {
@@ -134,10 +134,10 @@
         align-items: stretch;
         &,
         > ul {
-          margin-left: 0;
+          margin-inline-start: 0;
           gap: map.get(variables.$spacing, 'size-24');
           > * {
-            margin-left: 0;
+            margin-inline-start: 0;
           }
         }
       }

package/dist/scss/components/_header-service.scss

@@ -139,14 +139,14 @@
     grid-row: 1;
     align-items: center;
     display: inline-flex;
-    padding-left: map.get(variables.$spacing, 'size-32');
+    padding-inline-start: map.get(variables.$spacing, 'size-32');
 
     .pkt-header-service--tablet & {
-      padding-left: map.get(variables.$spacing, 'size-16');
+      padding-inline-start: map.get(variables.$spacing, 'size-16');
     }
 
     .pkt-header-service--mobile & {
-      padding-left: map.get(variables.$spacing, 'size-8');
+      padding-inline-start: map.get(variables.$spacing, 'size-8');
     }
   }
 
@@ -174,10 +174,10 @@
   &__user {
     grid-column: 3;
     justify-self: end;
-    padding-right: map.get(variables.$spacing, 'size-32');
+    padding-inline-end: map.get(variables.$spacing, 'size-32');
 
     .pkt-header-service--tablet & {
-      padding-right: map.get(variables.$spacing, 'size-16');
+      padding-inline-end: map.get(variables.$spacing, 'size-16');
     }
   }
 
@@ -206,7 +206,7 @@
   &__service-name {
     @include get-text('pkt-txt-22-medium');
 
-    padding-top: 4px;
+    padding-block-start: 4px;
     white-space: normal;
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -252,7 +252,7 @@
   &__search-input {
     background-color: var(--pkt-color-background-default);
     .pkt-input-icon:not(button) svg {
-      margin-left: 0;
+      margin-inline-start: 0;
     }
   }
 
@@ -269,13 +269,13 @@
     flex-direction: row;
     align-items: center;
     > * + * {
-      margin-left: map.get(variables.$spacing, 'size-32');
+      margin-inline-start: map.get(variables.$spacing, 'size-32');
     }
 
     > .pkt-link + .pkt-link,
     > pkt-link + pkt-link,
     > a + a {
-      margin-left: map.get(variables.$spacing, 'size-24');
+      margin-inline-start: map.get(variables.$spacing, 'size-24');
     }
   }
 

package/dist/scss/components/_header-user-menu.scss

@@ -84,7 +84,7 @@
   &__label {
     @include get-text('pkt-txt-14-medium');
     color: var(--pkt-color-text-placeholder);
-    margin-bottom: map.get(variables.$spacing, 'size-8');
+    margin-block-end: map.get(variables.$spacing, 'size-8');
   }
 
   &__name {
@@ -96,7 +96,7 @@
   }
 
   &__action {
-    margin-top: map.get(variables.$spacing, 'size-16');
+    margin-block-start: map.get(variables.$spacing, 'size-16');
   }
 
   &__button {
@@ -120,7 +120,7 @@
     }
 
     .pkt-link__icon {
-      margin-right: map.get(variables.$spacing, 'size-8');
+      margin-inline-end: map.get(variables.$spacing, 'size-8');
       align-self: baseline;
     }
   }

package/dist/scss/components/_header.scss

@@ -67,7 +67,7 @@
     }
 
     &-service {
-      padding-top: 0.3rem;
+      padding-block-start: 0.3rem;
       display: none;
       white-space: nowrap;
       text-overflow: ellipsis;
@@ -80,7 +80,7 @@
       }
 
       @include bp('laptop-up') {
-        padding-top: 0.6rem;
+        padding-block-start: 0.6rem;
         @include get-text('pkt-txt-24-light');
       }
     }
@@ -104,7 +104,7 @@
       gap: map.get(variables.$spacing, 'size-16');
 
       &-service {
-        padding-top: 0.28rem;
+        padding-block-start: 0.28rem;
         @include get-text('pkt-txt-18-light');
       }
 
@@ -137,7 +137,7 @@
 
     &-row {
       list-style: none;
-      padding-left: 0;
+      padding-inline-start: 0;
       margin: 0;
       display: flex;
       align-items: center;
@@ -153,10 +153,10 @@
     z-index: 2;
     position: absolute;
     margin: 0;
-    margin-top: map.get(variables.$spacing, 'size-12');
+    margin-block-start: map.get(variables.$spacing, 'size-12');
     right: 0;
     left: 0;
-    padding-left: 0;
+    padding-inline-start: 0;
     list-style: none;
     visibility: hidden;
     max-height: calc(100vh - 4.5rem);
@@ -165,7 +165,7 @@
     color: var(--pkt-color-text-body-dark);
 
     @include bp('tablet-up') {
-      margin-top: map.get(variables.$spacing, 'size-16');
+      margin-block-start: map.get(variables.$spacing, 'size-16');
       left: auto;
       right: 0;
       min-width: 23rem;
@@ -177,8 +177,7 @@
       background-color: var(--pkt-color-surface-subtle-white);
 
       &.footer {
-        padding-top: map.get(variables.$spacing, 'size-16');
-        padding-bottom: map.get(variables.$spacing, 'size-16');
+        padding-block: map.get(variables.$spacing, 'size-16');
       }
 
       &:nth-child(odd) {

package/dist/scss/components/_heading.scss

@@ -88,8 +88,7 @@ pkt-heading {
   }
 
   &--noSpacing {
-    margin-bottom: 0;
-    margin-top: 0;
+    margin-block: 0;
   }
 
   &--start {

package/dist/scss/components/_linkcard.scss

@@ -69,7 +69,7 @@ $-linkcard-spacing-big: map.get(variables.$spacing, 'size-24');
         width: 1.5rem;
         background-size: 1.5rem 1.5rem;
         background-position: center;
-        margin-left: 0.5rem;
+        margin-inline-start: 0.5rem;
         flex: 0 0 auto;
         align-self: flex-start;
       }
@@ -78,17 +78,17 @@ $-linkcard-spacing-big: map.get(variables.$spacing, 'size-24');
 
   > .pkt-icon.pkt-link__icon,
   pkt-icon.pkt-link__icon {
-    margin-right: 0;
+    margin-inline-end: 0;
   }
 
   &__text {
     grid-column: 2;
     p:first-of-type {
-      margin-top: 0;
+      margin-block-start: 0;
     }
 
     p:last-of-type {
-      margin-bottom: 0;
+      margin-block-end: 0;
     }
   }
 

package/dist/scss/components/_listbox.scss

@@ -60,7 +60,7 @@ pkt-listbox {
     }
 
     &-description {
-      padding-top: 0.25rem;
+      padding-block-start: 0.25rem;
       grid-area: description;
     }
 
@@ -76,14 +76,14 @@ pkt-listbox {
       padding: 0.75rem 0.5rem 0.75rem 0.75rem;
       column-gap: 0.5rem;
       &:focus {
-        padding-left: 10px;
+        padding-inline-start: 10px;
       }
     }
 
     &--selected {
-      padding-left: 0.25rem;
+      padding-inline-start: 0.25rem;
       &:focus {
-        padding-left: 2px;
+        padding-inline-start: 2px;
       }
     }
 
@@ -98,13 +98,13 @@ pkt-listbox {
   }
 
   .pkt-listbox__option {
-    margin-bottom: 0.125rem;
+    margin-block-end: 0.125rem;
     overflow-wrap: break-word;
     hyphens: auto;
     cursor: pointer;
 
     &:first-child:not(.pkt-listbox__search, .pkt-listbox__banners) {
-      margin-top: 0.125rem;
+      margin-block-start: 0.125rem;
     }
 
     &:hover:not(.pkt-listbox__search) {
@@ -184,7 +184,7 @@ pkt-listbox {
       cursor: default;
       display: flex;
       align-items: center;
-      padding-right: 0.25rem;
+      padding-inline-end: 0.25rem;
 
       .pkt-icon {
         width: 1.25rem;

package/dist/scss/components/_loader.scss

@@ -61,7 +61,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    margin-top: 8em;
+    margin-block-start: 8em;
     font-size: 0.4rem;
     width: 25em;
     height: 5em;

package/dist/scss/components/_messagebox.scss

@@ -70,10 +70,10 @@ $-border-thickness: map.get(variables.$spacing, 'size-4');
     @include get-text('pkt-txt-18-light');
 
     p {
-      margin-bottom: map.get(variables.$spacing, 'size-16');
+      margin-block-end: map.get(variables.$spacing, 'size-16');
 
       &:last-of-type {
-        margin-bottom: 0;
+        margin-block-end: 0;
       }
     }
   }

package/dist/scss/components/_modal.scss

@@ -75,7 +75,7 @@ $pkt-modal-padding-sides: map.get(variables.$spacing, 'size-40');
     &--right {
       left: auto;
       right: 0;
-      margin-right: 0;
+      margin-inline-end: 0;
       translate: 100% 0;
       @starting-style {
         &[open] {
@@ -86,7 +86,7 @@ $pkt-modal-padding-sides: map.get(variables.$spacing, 'size-40');
     &--left {
       left: 0;
       right: auto;
-      margin-left: 0;
+      margin-inline-start: 0;
       translate: -100% 0;
       @starting-style {
         &[open] {
@@ -125,8 +125,8 @@ $pkt-modal-padding-sides: map.get(variables.$spacing, 'size-40');
   }
 
   .pkt-modal__container {
-    padding-top: $pkt-modal-gap;
-    margin-top: -1px;
+    padding-block-start: $pkt-modal-gap;
+    margin-block-start: -1px;
     background: var(--pkt-color-background-default);
     display: flex;
     flex-direction: column;
@@ -218,7 +218,7 @@ $pkt-modal-padding-sides: map.get(variables.$spacing, 'size-40');
     overflow-y: auto;
     overscroll-behavior: contain;
     padding: map.get(variables.$spacing, 'size-32') map.get(variables.$spacing, 'size-40');
-    padding-top: 0;
+    padding-block-start: 0;
     position: relative;
     color: var(--pkt-color-text-body-default);
     background:
@@ -255,7 +255,7 @@ $pkt-modal-padding-sides: map.get(variables.$spacing, 'size-40');
 }
 
 .pkt-modal__btn-wrapper {
-  padding-top: map.get(variables.$spacing, 'size-24');
+  padding-block-start: map.get(variables.$spacing, 'size-24');
   display: flex;
   justify-content: flex-start;
   gap: map.get(variables.$spacing, 'size-16');
@@ -350,7 +350,7 @@ $pkt-modal-padding-sides: map.get(variables.$spacing, 'size-40');
 
 .pkt-modal.pkt-modal--noHeadingText {
   .pkt-modal__container {
-    padding-top: 1rem;
+    padding-block-start: 1rem;
   }
 }
 

package/dist/scss/components/_preview.scss

@@ -64,7 +64,7 @@
       display: flex;
       flex-direction: column;
       gap: 1rem;
-      margin-bottom: 1rem;
+      margin-block-end: 1rem;
     }
   }
   &__options {
@@ -89,13 +89,13 @@
   .hide-code-button {
     position: absolute;
     top: 100%;
-    margin-top: -1.5rem;
+    margin-block-start: -1.5rem;
     left: 0;
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: flex-end;
-    padding-bottom: 1rem;
+    padding-block-end: 1rem;
     z-index: 2;
   }
   &__code {
@@ -128,7 +128,7 @@
     pre {
       max-height: 30rem;
       overflow: auto;
-      margin-top: 0 !important;
+      margin-block-start: 0 !important;
       background-color: transparent !important;
       font-size: 1rem;
       padding: 2rem 0;
@@ -168,7 +168,7 @@
   }
   &__add-object {
     text-align: right;
-    margin-top: 0.5rem;
+    margin-block-start: 0.5rem;
   }
   &__remove-object {
     position: absolute;
@@ -177,7 +177,7 @@
   }
   &__specs {
     pre {
-      margin-top: 0 !important;
+      margin-block-start: 0 !important;
     }
   }
 }

package/dist/scss/components/_progressbar.scss

@@ -8,7 +8,7 @@
   &__title {
     display: block;
     margin: 0;
-    margin-bottom: 8px;
+    margin-block-end: 8px;
     text-align: left;
     font-weight: 500;
     font-size: 0.875rem;
@@ -43,7 +43,7 @@
   }
 
   &__status {
-    margin-top: 8px;
+    margin-block-start: 8px;
     position: relative;
     white-space: nowrap;
     font-weight: 400;
@@ -57,7 +57,7 @@
 
   &__status-placement {
     &--following {
-      margin-left: max(
+      margin-inline-start: max(
         0%,
         min(
           calc(100% - var(--pkt-progress-label-width)),

package/dist/scss/components/_searchinput.scss

@@ -80,7 +80,7 @@
 
   &--local .pkt-input__container--small .pkt-input,
   &--local .pkt-input__container--xsmall .pkt-input {
-    padding-right: 0;
+    padding-inline-end: 0;
   }
 
   &--local &__button {
@@ -88,7 +88,7 @@
       border-color: var(--pkt-color-input-border-disabled);
     }
     & svg {
-      margin-left: 0;
+      margin-inline-start: 0;
     }
     --pkt-color-button-border-hover: var(--pkt-color-input-border-active);
   }

package/dist/scss/components/_stepper.scss

@@ -39,7 +39,7 @@
 
     &__content {
       font-weight: map.get(variables.$font-weight, 'light');
-      padding-bottom: map.get(variables.$spacing, 'size-24');
+      padding-block-end: map.get(variables.$spacing, 'size-24');
       width: 100%;
     }
 
@@ -67,7 +67,7 @@
     &__nav-wrapper {
       display: flex;
       gap: 20px;
-      margin-top: map.get(variables.$spacing, 'size-16');
+      margin-block-start: map.get(variables.$spacing, 'size-16');
     }
   }
 }
@@ -91,11 +91,11 @@
         background-color: var(--pkt-color-surface-subtle-pale-blue);
       }
       .pkt-step__content {
-        padding-top: 0;
+        padding-block-start: 0;
       }
 
       .pkt-step__wrapper {
-        margin-bottom: map.get(variables.$spacing, 'size-24');
+        margin-block-end: map.get(variables.$spacing, 'size-24');
       }
     }
 

package/dist/scss/components/_tabs.scss

@@ -106,7 +106,7 @@ pkt-tab-item {
 
   &--with-separator {
     .pkt-tabs__list {
-      padding-right: 0.25rem;
+      padding-inline-end: 0.25rem;
       align-items: center;
     }
 

package/dist/scss/components/_tag.scss

@@ -88,13 +88,13 @@ pkt-tag > .pkt-tag {
   &__icon {
     width: 16px;
     height: 16px;
-    margin-right: map.get(variables.$spacing, 'size-8');
+    margin-inline-end: map.get(variables.$spacing, 'size-8');
   }
 
   &__close-btn {
     width: 16px;
     height: 16px;
-    margin-left: map.get(variables.$spacing, 'size-8');
+    margin-inline-start: map.get(variables.$spacing, 'size-8');
   }
 
   // Modifiers