@progressiveui/styles 11.0.8 → 11.0.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progressiveui/styles",
   "description": "Styles for the Progressive UI Design System",
-  "version": "11.0.8",
+  "version": "11.0.9",
   "license": "Apache-2.0",
   "author": "Robert Gühne <polyxo.de>",
   "homepage": "https://www.polyxo.de",
@@ -35,5 +35,5 @@
     "@carbon/test-utils": "^10.3.0",
     "css": "^3.0.0"
   },
-  "gitHead": "0dd780df810c2d65d5bf05d87ca893b3cbe5527e"
+  "gitHead": "7ac338e858a7e2ea569ac819bba6334261771725"
 }

package/scss/components/modal/_modal.scss

@@ -1,9 +1,3 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
 @use "mixins" as *;
 @use "../../breakpoint" as *;
 @use "../../config" as *;
@@ -90,7 +84,7 @@ $modal-footer-background-color: $layer-primary !default; //TODO use $layer token
     flex-direction: column;
     background-color: $background-main;
     overflow: hidden;
-    &:before {
+    /*  &:before {
       position: absolute;
       top: 0;
       left: 0;
@@ -98,13 +92,13 @@ $modal-footer-background-color: $layer-primary !default; //TODO use $layer token
       height: 4px;
       content: "";
       background: $action-default-fill-primary-default;
-    }
+    } */
     //border-top: $modal-border-top;
     // border-radius: $modal-border-radius;
     min-width: 100%;
     //max-height: 100%;
     height: 100%;
-    padding: $spacing-08 $spacing-05 0rem $spacing-05;
+    // padding: $spacing-08 $spacing-05 0rem $spacing-05;
 
     @include breakpoint("md") {
       height: auto;
@@ -117,7 +111,7 @@ $modal-footer-background-color: $layer-primary !default; //TODO use $layer token
         min-width: 768px;
       }
 
-      padding: $spacing-08 $spacing-09 0 $spacing-09;
+      // padding: $spacing-08 $spacing-09 0 $spacing-09;
     }
 
     @media (min-width: 1024px) {
@@ -146,9 +140,37 @@ $modal-footer-background-color: $layer-primary !default; //TODO use $layer token
   }
 
   .#{$prefix}--modal-header {
-    margin-bottom: $spacing-06;
+    padding: $spacing-05;
+    @include breakpoint-up("md") {
+      padding: $spacing-07;
+      padding-top: calc($spacing-07 - 2px);
+    }
+    padding-bottom: 0;
+
     display: flex;
     justify-content: space-between;
+    position: relative;
+    z-index: 1;
+
+    &:after {
+      content: "";
+      display: block;
+      position: absolute;
+      left: 0;
+      bottom: -15px;
+      width: 100%;
+      height: 15px;
+      z-index: -1;
+      background-color: $background-main;
+      -webkit-mask-image: -webkit-gradient(
+        linear,
+        left top,
+        left bottom,
+        from(rgba(0, 0, 0, 1)),
+        to(rgba(0, 0, 0, 0))
+      );
+      margin-top: $spacing-08;
+    }
   }
 
   .#{$prefix}--modal-header__label {
@@ -170,7 +192,13 @@ $modal-footer-background-color: $layer-primary !default; //TODO use $layer token
 
   .#{$prefix}--modal-content {
     //overflow-y: auto;
-    margin-bottom: $spacing-08;
+    padding: $spacing-05;
+    padding-top: $spacing-05;
+    @include breakpoint-up("md") {
+      padding: $spacing-07;
+      padding-top: $spacing-05;
+    }
+
     color: $text-body-default;
 
     > * {
@@ -182,25 +210,31 @@ $modal-footer-background-color: $layer-primary !default; //TODO use $layer token
     margin-top: auto;
     text-align: right;
     background-color: $modal-footer-background-color;
-    margin-left: -$spacing-05; // calcRem(-24px);
-    margin-right: -$spacing-05; // calcRem(-24px);
-    padding: $spacing-05 $spacing-05;
+    //margin-left: -$spacing-05; // calcRem(-24px);
+    //margin-right: -$spacing-05; // calcRem(-24px);
+    padding: $spacing-05;
+
     border-radius: 0 0 $modal-border-radius $modal-border-radius;
     .#{$prefix}--link + .#{$prefix}--btn {
       margin-left: $spacing-05;
     }
 
     @include breakpoint("md") {
-      margin-left: calcRem(-48px);
-      margin-right: calcRem(-48px);
-      padding: $spacing-07 $spacing-09;
+      // margin-left: calcRem(-48px);
+      // margin-right: calcRem(-48px);
+      padding: $spacing-05 $spacing-06;
     }
   }
 
   .#{$prefix}--modal-close {
     position: absolute;
-    top: calcRem(16px);
-    right: calcRem(16px);
+    top: calcRem(8px);
+    right: calcRem(6px);
+    @include breakpoint-up("md") {
+      top: calcRem(22px);
+      right: calcRem(18px);
+    }
+
     padding: 0;
     overflow: hidden;
     cursor: pointer;
@@ -216,8 +250,8 @@ $modal-footer-background-color: $layer-primary !default; //TODO use $layer token
   .#{$prefix}--modal-close__icon {
     transition: 200ms;
     // fill: var(--ui-05); // TODO change $field-border
-    width: calcRem(12px);
-    height: calcRem(12px);
+    width: 1.5rem;
+    height: 1.5rem;
     color: $text-body-default;
   }
 
@@ -225,3 +259,104 @@ $modal-footer-background-color: $layer-primary !default; //TODO use $layer token
     background-size: cover;
   }
 }
+
+.#{$prefix}--modal--mobile-dialog {
+  .#{$prefix}--modal-container {
+    @include breakpoint-down("md") {
+      min-width: 50%;
+      width: 90%;
+      max-width: 90%;
+      height: auto;
+    }
+  }
+}
+
+.#{$prefix}--modal--scroll-inside {
+  .#{$prefix}--modal-content {
+    overflow-y: auto;
+  }
+  .#{$prefix}--modal-container {
+    // max-height: 90vh;
+  }
+}
+
+.#{$prefix}--modal--desktop-fullscreen {
+  @include breakpoint-up("md") {
+    .#{$prefix}--modal-inner {
+      align-self: center;
+      width: 100%;
+      height: 100%;
+      border-radius: 0;
+    }
+    .#{$prefix}--modal-container {
+      width: 100%;
+      height: 100%;
+      border-radius: 0;
+      max-width: 100%;
+
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+.#{$prefix}--modal--mobile-fullscreen {
+  @include breakpoint-down("md") {
+    .#{$prefix}--modal-header {
+      padding-bottom: calc(env(safe-area-inset-top) + $spacing-05);
+    }
+    .#{$prefix}--modal-close {
+      top: calc(env(safe-area-inset-top) + calcRem(8px));
+    }
+
+    .#{$prefix}--modal-inner {
+      align-self: center;
+      width: 100%;
+      height: 100%;
+      border-radius: 0;
+    }
+    .#{$prefix}--modal-container {
+      width: 100%;
+      height: 100%;
+      border-radius: 0;
+      max-width: 100%;
+
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+.#{$prefix}--modal--mobile-bottomsheet {
+  @include breakpoint-down("md") {
+    .#{$prefix}--modal-inner {
+      align-self: flex-end;
+      width: 100%;
+      height: auto;
+      border-radius: $modal-border-radius $modal-border-radius 0 0;
+    }
+    .#{$prefix}--modal-footer {
+      padding-bottom: calc(env(safe-area-inset-bottom) + $spacing-05);
+    }
+  }
+}
+
+/*
+
+@include breakpoint-down(lg) {
+  .wfp--modal--tall {
+    // padding-top: 0 !important;
+    .wfp--modal-header {
+      padding-top: calc(env(safe-area-inset-bottom) + 2rem) !important;
+    }
+
+    .wfp--modal-close {
+      top: calc(env(safe-area-inset-bottom) + 2rem) !important;
+    }
+  }
+
+  .wfp--modal-footer {
+    padding-bottom: calc(env(safe-area-inset-bottom) + 1rem);
+  }
+}
+  */