@oslokommune/punkt-css 12.10.2 → 12.11.0

package/dist/scss/abstracts/variables/_index.scss

@@ -6,7 +6,7 @@
 @forward 'spacing';
 
 // Default icon path
-$icon-path: 'https://punkt-cdn.oslo.kommune.no/12.10/icons' !default;
+$icon-path: 'https://punkt-cdn.oslo.kommune.no/12.11/icons' !default;
 
 // Borders
 $border-width: (

package/dist/scss/components/_calendar.scss

@@ -125,6 +125,9 @@ pkt-calendar {
     .pkt-btn {
       background-color: var(--pkt-color-surface-default-light-blue);
     }
+    ::after {
+      background-color: transparent;
+    }
     .pkt-btn {
       border-color: var(--pkt-color-surface-default-light-blue);
     }

package/dist/scss/components/_index.scss

@@ -11,6 +11,7 @@
 @forward 'inputwrapper';
 @forward 'linkcard';
 @forward 'loader';
+@forward 'modal';
 @forward 'messagebox';
 @forward 'preview';
 @forward 'progressbar';

package/dist/scss/components/_modal.scss

@@ -0,0 +1,166 @@
+/*
+ * Modal component
+ */
+@use 'sass:map';
+@use '../abstracts/variables';
+@use '../abstracts/mixins/breakpoints' as *;
+@use '../abstracts/' as *;
+
+.pkt-modal {
+  &[open] {
+    padding: map.get(variables.$spacing, 'size-24') map.get(variables.$spacing, 'size-40');
+    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-16');
+    align-items: center;
+    position: fixed;
+
+    max-height: 80vh;
+
+    &::backdrop {
+      background-color: rgba(0, 0, 0, 0.55);
+    }
+
+    .pkt-modal__header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+    }
+
+    .pkt-modal__headingText {
+      margin-bottom: 0;
+      margin-right: 3rem;
+    }
+
+    .pkt-modal__closeButton {
+      position: absolute;
+      right: 1.25rem;
+      top: 1.25rem;
+    }
+
+    .pkt-modal__content {
+      display: flex;
+      flex-direction: column;
+      gap: map.get(variables.$spacing, 'size-16');
+      overflow: auto;
+      overscroll-behavior: contain;
+      position: relative;
+      background:
+        linear-gradient(var(--pkt-color-white) 30%, transparent) top,
+        linear-gradient(transparent, var(--pkt-color-border-subtle) 60%) bottom,
+        radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.3), transparent) top,
+        radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.3), transparent) bottom;
+      background-attachment: local, local, scroll, scroll;
+      background-repeat: no-repeat;
+      background-size:
+        100% 40px,
+        100% 50px,
+        100% 16px,
+        100% 16px;
+      padding: 1rem 0;
+    }
+  }
+}
+
+// Prevent scroll when modal is open
+body.pkt-modal--open {
+  overflow: hidden;
+  scrollbar-gutter: stable;
+}
+
+//  SIZES
+.pkt-modal--small {
+  width: 480px;
+  padding: map.get(variables.$spacing, 'size-16') map.get(variables.$spacing, 'size-32');
+}
+
+.pkt-modal--medium {
+  width: map.get(variables.$breakpoints, 'phablet');
+}
+
+.pkt-modal--large {
+  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;
+  }
+}
+
+@media screen and (max-width: 640px) {
+  .pkt-modal {
+    &[open] {
+      gap: map.get(variables.$spacing, 'size-16') 0;
+
+      .pkt-modal__headingText {
+        font-size: map.get(variables.$font-size, 'size-20');
+        letter-spacing: map.get(variables.$letter-spacing, 'tight');
+        line-height: map.get(variables.$line-height, 'lh-24');
+      }
+
+      .pkt-modal__content {
+        font-size: map.get(variables.$font-size, 'size-16');
+        letter-spacing: map.get(variables.$letter-spacing, 'tight');
+        line-height: map.get(variables.$line-height, 'lh-24');
+      }
+    }
+
+    &--large {
+      position: absolute;
+      width: 100vh;
+      padding: map.get(variables.$spacing, 'size-16') map.get(variables.$spacing, 'size-24');
+    }
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .pkt-modal {
+    &--small {
+      position: absolute;
+      width: 100vh;
+    }
+  }
+}
+
+@media screen and (max-width: map.get(variables.$breakpoints, 'phablet')) {
+  .pkt-modal {
+    &--medium {
+      position: absolute;
+      width: 100vh;
+    }
+  }
+}
+
+// Make sure the buttons are centered and stacked on mobile
+@media screen and (max-width: 480px) {
+  .pkt-modal__btn {
+    &--wrapper {
+      flex-direction: column-reverse;
+      justify-content: center;
+      align-items: center;
+    }
+
+    &--right-side {
+      justify-content: center;
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-css",
-  "version": "12.10.2",
+  "version": "12.11.0",
   "description": "CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -54,5 +54,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "c3c82ba78515d746439b3b180886a8b0e6d4c358"
+  "gitHead": "727c8399a34e90ebfb7e843f0adfe0c4f828fa9f"
 }