@oslokommune/punkt-css 12.21.6 → 12.23.0

package/dist/scss/components/_modal.scss

@@ -6,54 +6,109 @@
 @use '../abstracts/mixins/breakpoints' as *;
 @use '../abstracts/' as *;
 
+$pkt-modal-gap: map.get(variables.$spacing, 'size-32');
+$pkt-modal-padding-sides: map.get(variables.$spacing, 'size-40');
+
 .pkt-modal {
   &[open] {
-    padding: map.get(variables.$spacing, 'size-24') map.get(variables.$spacing, 'size-40');
+    background-color: transparent;
     border: none;
-    background: white;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    max-height: max-content;
-    display: flex;
-    flex-direction: column;
-    gap: map.get(variables.$spacing, 'size-32');
-    align-items: center;
-    position: fixed;
-
-    max-height: 80vh;
+    padding: 0;
+    min-height: 30vh;
+    max-height: 90vh;
 
-    &::backdrop {
+    &::backdrop,
+    & + .backdrop {
       background-color: rgba(0, 0, 0, 0.55);
     }
 
+    .pkt-modal__container {
+      padding-top: $pkt-modal-gap;
+      background: var(--pkt-color-background-default);
+      overflow-y: auto;
+      max-height: calc(100vh - 4rem);
+    }
+
     .pkt-modal__header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
+      display: grid;
+      grid-template-columns: 1fr auto;
+      grid-template-rows: auto;
+      justify-content: flex-start;
       width: 100%;
     }
 
-    .pkt-modal__headingText {
-      margin-bottom: 0;
-      margin-right: 3rem;
+    .pkt-modal__header-background {
+      background: var(--pkt-color-background-default);
+      grid-column: 1 / 2;
+      grid-row: 1 / 2;
+
+      width: 100%;
+      height: 100%;
     }
 
-    &.pkt-modal--noHeadingText {
-      gap: 5rem;
+    .pkt-modal__headingText {
+      grid-column: 1 / 2;
+      grid-row: 1 / 2;
+      padding: $pkt-modal-gap 0 0 $pkt-modal-padding-sides;
+      margin: 0;
+      color: var(--pkt-color-text-body-default);
     }
 
     .pkt-modal__closeButton {
-      position: absolute;
-      right: 1.25rem;
-      top: 1.25rem;
+      grid-column: 2 / 3;
+      grid-row: 1 / 2;
+
+      display: flex;
+      flex-direction: row-reverse;
+      align-self: flex-start;
+    }
+
+    .pkt-modal__closeButton--blue {
+      height: 100%;
+      background: var(--pkt-color-background-default);
+      .pkt-btn {
+        margin: map.get(variables.$spacing, 'size-4');
+      }
+    }
+
+    .pkt-modal__closeButton--yellow-filled {
+      .pkt-btn {
+        height: 4rem;
+        width: 4rem;
+        justify-content: center;
+        align-items: center;
+        border: none;
+        border-radius: 50%;
+        color: var(--pkt-color-surface-strong-dark-blue);
+        background-color: var(--pkt-color-brand-yellow-1000);
+
+        &:hover,
+        &:focus {
+          background-color: var(--pkt-color-brand-warm-blue-1000);
+          color: var(--pkt-color-background-default);
+          .pkt-icon {
+            color: var(--pkt-color-background-default);
+          }
+        }
+
+        .pkt-link__icon {
+          width: unset;
+          height: 1.75rem;
+        }
+      }
     }
 
     .pkt-modal__content {
       display: flex;
       flex-direction: column;
+      flex-grow: 1;
       gap: map.get(variables.$spacing, 'size-16');
-      overflow: auto;
-      overscroll-behavior: contain;
+      overflow-y: auto;
+      padding: map.get(variables.$spacing, 'size-32') map.get(variables.$spacing, 'size-40');
+      padding-top: 0;
       position: relative;
+      color: var(--pkt-color-text-body-default);
       background:
         linear-gradient(var(--pkt-color-white) 30%, transparent) top,
         linear-gradient(transparent, var(--pkt-color-border-subtle) 60%) bottom,
@@ -66,6 +121,7 @@
         100% 50px,
         100% 16px,
         100% 16px;
+      max-height: calc(100vh - 10rem);
     }
   }
 }
@@ -90,25 +146,17 @@ body.pkt-modal--open {
   width: 640px;
 }
 
-.pkt-modal__btn {
-  &--wrapper {
-    padding-top: map.get(variables.$spacing, 'size-24');
-    display: flex;
-    justify-content: space-between;
-    gap: map.get(variables.$spacing, 'size-16');
-    flex-wrap: wrap;
-    width: 100%;
-    justify-self: flex-end;
-  }
-
-  &--right-side {
-    display: flex;
-    justify-self: flex-end;
-    gap: map.get(variables.$spacing, 'size-16');
-    flex-wrap: wrap;
-  }
+.pkt-modal__btn-wrapper {
+  padding-top: map.get(variables.$spacing, 'size-24');
+  display: flex;
+  justify-content: flex-start;
+  gap: map.get(variables.$spacing, 'size-16');
+  flex-wrap: wrap;
+  width: 100%;
 }
 
+// Small screen
+
 @media screen and (max-width: 640px) {
   .pkt-modal {
     &[open] {
@@ -119,6 +167,10 @@ body.pkt-modal--open {
         font-size: map.get(variables.$font-size, 'size-22');
       }
 
+      .pkt-modal__closeButton {
+        background-color: var(--pkt-color-background-default);
+      }
+
       .pkt-modal__content {
         letter-spacing: map.get(variables.$letter-spacing, 'tight');
         font-size: map.get(variables.$font-size, 'size-16');
@@ -154,18 +206,47 @@ body.pkt-modal--open {
 // Make sure the buttons are centered and stacked on mobile
 @media screen and (max-width: 480px) {
   .pkt-modal__btn {
-    &--wrapper {
-      flex-direction: column-reverse;
+    &-wrapper {
+      display: grid;
+      grid-template-columns: 1fr;
       justify-content: center;
       align-items: center;
-    }
 
-    &--right-side {
-      justify-content: center;
+      .pkt-btn {
+        justify-content: center;
+      }
     }
   }
 }
 
+// Adjustments for padding
+
 .pkt-modal.pkt-modal--removePadding {
-  padding: 0;
+  .pkt-modal__headingText,
+  .pkt-modal__content,
+  .pkt-modal__container {
+    padding: 0;
+  }
+}
+
+.pkt-modal.pkt-modal--noHeadingText {
+  .pkt-modal__container {
+    padding-top: 1rem;
+  }
+}
+
+// Make sure the header has a background color if the close button is not yellow
+// :has() is not supported in Safari thus we must set :is so that it is ignored in Safari and not crash at least.
+.pkt-modal__header:is(:has(.pkt-modal__closeButton:not(.pkt-modal__closeButton--yellow-filled))) {
+  background-color: var(--pkt-color-background-default);
+}
+
+// In Modal docs, margin is being added on buttons because of some global style, thus we need to override it here so that our docs example is consistent with the component.
+.pkt-modal
+  .pkt-modal__container
+  .pkt-modal__btn-wrapper
+  button.pkt-btn:not(.pkt-inputwrapper__helptext-expandable > .pkt-btn):not(.pkt-header__user-btn):not(
+    .pkt-searchinput__button
+  ) {
+  margin: 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-css",
-  "version": "12.21.6",
+  "version": "12.23.0",
   "description": "CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -20,7 +20,7 @@
     "preview": "astro preview"
   },
   "devDependencies": {
-    "@oslokommune/punkt-assets": "^12.21.6",
+    "@oslokommune/punkt-assets": "^12.23.0",
     "edit-json-file": "^1.8.0",
     "fs-extra": "^11.2.0",
     "prettier": "^3.3.3",
@@ -54,5 +54,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "0b53324d0e11eec7173a25d118c25d8c209d114c"
+  "gitHead": "98a44ae9962af8297e125fefb09a6c6f7e65ef74"
 }