@capillarytech/creatives-library 8.0.242-alpha.1 → 8.0.242-alpha.11

package/v2Containers/WebPush/Create/preview/styles/_android-mobile-edge.scss

@@ -0,0 +1,12 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables';
+
+/**
+ * Android (Mobile) + Edge Notification Styles
+ * Reuses Android Chrome styles since they have the same UI
+ */
+
+.notification-container.android-mobile-edge {
+  @extend .notification-container.android-mobile-chrome;
+}
+
+

package/v2Containers/WebPush/Create/preview/styles/_android-mobile-firefox.scss

@@ -0,0 +1,12 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables';
+
+/**
+ * Android (Mobile) + Firefox Notification Styles
+ * Reuses Android Chrome styles since they have the same UI
+ */
+
+.notification-container.android-mobile-firefox {
+  @extend .notification-container.android-mobile-chrome;
+}
+
+

package/v2Containers/WebPush/Create/preview/styles/_android-mobile-opera.scss

@@ -0,0 +1,12 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables';
+
+/**
+ * Android (Mobile) + Opera Notification Styles
+ * Reuses Android Chrome styles since they have the same UI
+ */
+
+.notification-container.android-mobile-opera {
+  @extend .notification-container.android-mobile-chrome;
+}
+
+

package/v2Containers/WebPush/Create/preview/styles/_android-tablet-chrome.scss

@@ -0,0 +1,47 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables';
+
+/**
+ * Android (Tablet) + Chrome Notification Styles
+ * Extends Android Mobile Chrome styles with tablet-specific overrides
+ */
+
+.notification-container.android-tablet-chrome {
+  @extend .notification-container.android-mobile-chrome;
+
+  &.collapsed {
+    width: 480px; // Override mobile width (326px)
+
+    .android-mobile-chrome-content {
+      .notification-body {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        line-clamp: 2;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+
+  &.expanded {
+    width: 480px; // Override mobile width (326px)
+    padding: 17.6px; // Override mobile padding (12px)
+
+    .android-mobile-expanded-body {
+      .android-mobile-expanded-body-text {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 4;
+        line-clamp: 4;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .android-mobile-expanded-media {
+        .android-mobile-expanded-media-image {
+          height: 168px; // Override mobile height (192px)
+        }
+      }
+    }
+  }
+}

package/v2Containers/WebPush/Create/preview/styles/_android-tablet-edge.scss

@@ -0,0 +1,11 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables';
+
+/**
+ * Android (Tablet) + Edge Notification Styles
+ * Reuses Android Tablet Chrome styles since they have the same UI
+ */
+
+.notification-container.android-tablet-edge {
+  @extend .notification-container.android-tablet-chrome;
+}
+

package/v2Containers/WebPush/Create/preview/styles/_android-tablet-firefox.scss

@@ -0,0 +1,11 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables';
+
+/**
+ * Android (Tablet) + Firefox Notification Styles
+ * Reuses Android Tablet Chrome styles since they have the same UI
+ */
+
+.notification-container.android-tablet-firefox {
+  @extend .notification-container.android-tablet-chrome;
+}
+

package/v2Containers/WebPush/Create/preview/styles/_android-tablet-opera.scss

@@ -0,0 +1,11 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables';
+
+/**
+ * Android (Tablet) + Opera Notification Styles
+ * Reuses Android Tablet Chrome styles since they have the same UI
+ */
+
+.notification-container.android-tablet-opera {
+  @extend .notification-container.android-tablet-chrome;
+}
+

package/v2Containers/WebPush/Create/preview/styles/_base.scss

@@ -0,0 +1,207 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables';
+
+/**
+ * Base Notification Container Styles
+ * 
+ * Common styles shared across all platform + browser combinations.
+ * These styles define the base structure and common elements.
+ */
+
+// Base notification container styles
+.notification-container {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+
+  // Common notification header structure
+  .notification-header {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    width: 100%;
+
+    .notification-icon-container {
+      flex-shrink: 0;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .notification-icon {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+    }
+
+    .notification-content {
+      flex: 1;
+      width: 0; // to prevent the children from increasing the parent's width
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+
+      .notification-title {
+        margin: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .notification-url {
+        margin: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .notification-body {
+        margin: 0;
+        word-break: break-word;
+      }
+    }
+
+    .notification-brand-icon-container {
+      flex-shrink: 0;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 35px;
+      height: 35px;
+
+      .notification-brand-icon {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+
+    .notification-header-actions {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-left: 8px;
+
+      .notification-action-menu {
+        font-size: $FONT_SIZE_M;
+        color: $FONT_COLOR_01;
+        line-height: 1;
+        cursor: default;
+        user-select: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .notification-action-menu-icon {
+          height: $FONT_SIZE_M;
+          width: auto;
+          display: block;
+        }
+      }
+
+      .notification-action-arrow {
+        font-size: $FONT_SIZE_M;
+        color: $FONT_COLOR_01;
+        line-height: 1;
+        cursor: default;
+        user-select: none;
+        transform: rotate(0deg) translateY(-4px);
+        margin-bottom: -7px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .notification-action-arrow-icon {
+          height: $FONT_SIZE_M;
+          width: auto;
+          display: block;
+        }
+      }
+    }
+  }
+
+  // Expanded state content
+  .notification-expanded-content {
+    width: 100%;
+    margin-top: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+
+    .notification-media {
+      width: 100%;
+      border-radius: 8px;
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .notification-media-image {
+        width: 100%;
+        max-width: 100%;
+          height: 168px; // Fixed height limit
+        object-fit: cover; // Ensures image covers the area without distortion
+        object-position: center; // Centers the image
+        display: block;
+        box-sizing: border-box;
+      }
+    }
+
+    .notification-actions {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+
+      .notification-action-item {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+
+        .notification-action-divider {
+          width: 100%;
+          height: 1px;
+          background-color: $CAP_G08;
+        }
+
+        .notification-action-button {
+          width: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 8px;
+          padding: 8px 12px;
+          background-color: transparent;
+          border: none;
+          border-radius: 8px;
+          cursor: pointer;
+          text-align: center;
+          font-size: $FONT_SIZE_S;
+          font-weight: 500;
+          color: $FONT_COLOR_01;
+          transition: background-color 0.2s ease;
+
+          &:hover {
+            background-color: $CAP_G09;
+          }
+
+          &:active {
+            background-color: $CAP_G08;
+          }
+
+          .notification-action-icon {
+            font-size: $FONT_SIZE_M;
+            flex-shrink: 0;
+          }
+
+          .notification-action-label {
+            flex-shrink: 0;
+          }
+        }
+      }
+    }
+  }
+}
+

package/v2Containers/WebPush/Create/preview/styles/_ios.scss

@@ -0,0 +1,153 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables';
+
+/**
+ * iOS Notification Styles
+ * Applies to all browsers on iOS: Chrome, Safari, Firefox, Edge, Opera
+ * 
+ * iOS notifications are simple and clean:
+ * - Browser icon on the left
+ * - Title and "now" timestamp on the same row
+ * - Body text below
+ * - NO brand icon
+ * - NO URL display
+ * - NO expanded state
+ */
+
+.notification-container.ios-chrome,
+.notification-container.ios-safari,
+.notification-container.ios-firefox,
+.notification-container.ios-edge,
+.notification-container.ios-opera {
+  background-color: $CAP_WHITE;
+  border: 1px solid $CAP_G08;
+  border-radius: 12px;
+  padding: 12px;
+  box-sizing: border-box;
+
+  &.collapsed {
+    width: 326px;
+    height: 78px;
+
+    .notification-header {
+      display: flex;
+      gap: 12px;
+      height: 100%;
+    }
+
+    .notification-header.ios-header {
+      align-items: center;
+    }
+
+    .notification-icon-container {
+      width: 28px;
+      height: 28px;
+      padding: 2px;
+      border-radius: 50%;
+      flex-shrink: 0;
+    }
+
+    .notification-icon {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+
+    .ios-content {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      min-width: 0;
+      flex: 1;
+
+      .notification-title-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 8px;
+        min-width: 0;
+
+        .notification-title {
+          font-weight: 600;
+          font-size: $FONT_SIZE_S;
+          color: $FONT_COLOR_01;
+          margin: 0;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          flex: 1;
+          min-width: 0;
+        }
+
+        .notification-time {
+          font-size: $FONT_SIZE_S;
+          color: $CAP_G05;
+          flex-shrink: 0;
+        }
+      }
+
+      .notification-body {
+        font-size: $FONT_SIZE_S;
+        color: $FONT_COLOR_01;
+        margin: 0;
+        line-height: 1.2;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+      }
+
+      .notification-url {
+        display: none;
+      }
+    }
+  }
+}
+
+// Wrapper for iOS notification + CTA container (iOS + Collapsed only)
+.ios-notification-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+
+  .ios-cta-container {
+    width: 195.6px; // 60% of 326px (notification width)
+    background-color: $CAP_WHITE;
+    border: 1px solid $CAP_G08;
+    border-radius: 12px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+
+    .ios-cta-button {
+      width: 100%;
+      padding: 12px 16px;
+      background-color: transparent;
+      border: none;
+      border-top: 1px solid $CAP_G22;
+      cursor: pointer;
+      text-align: center;
+      font-size: $FONT_SIZE_S;
+      font-weight: 500;
+      color: $FONT_COLOR_01;
+      transition: background-color 0.2s ease;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      &:first-child {
+        border-top: none;
+      }
+
+      &:hover {
+        background-color: $CAP_G09;
+      }
+
+      &:active {
+        background-color: $CAP_G08;
+      }
+    }
+  }
+}
+

package/v2Containers/WebPush/Create/preview/styles/_ipados.scss

@@ -0,0 +1,107 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables';
+
+/**
+ * iPadOS Notification Styles
+ * Applies to all browsers on iPadOS: Chrome, Safari, Firefox, Edge, Opera
+ * 
+ * iPadOS notifications follow the same design as iOS but with wider dimensions:
+ * - Browser icon on the left
+ * - Title and "now" timestamp on the same row
+ * - Body text below
+ * - NO brand icon
+ * - NO URL display
+ * - NO expanded state
+ * - WIDER width than iOS (tablet format)
+ */
+
+.notification-container.ipados-chrome,
+.notification-container.ipados-safari,
+.notification-container.ipados-firefox,
+.notification-container.ipados-edge,
+.notification-container.ipados-opera {
+  background-color: $CAP_WHITE;
+  border: 1px solid $CAP_G08;
+  border-radius: 12px;
+  padding: 12px;
+  box-sizing: border-box;
+
+  &.collapsed {
+    width: 480px;
+    height: 78px;
+
+    .notification-header {
+      display: flex;
+      gap: 12px;
+      height: 100%;
+    }
+
+    .notification-header.ios-header {
+      align-items: center;
+    }
+
+    .notification-icon-container {
+      width: 28px;
+      height: 28px;
+      padding: 2px;
+      border-radius: 50%;
+      flex-shrink: 0;
+    }
+
+    .notification-icon {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+
+    .ios-content {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      min-width: 0;
+      flex: 1;
+
+      .notification-title-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 8px;
+        min-width: 0;
+
+        .notification-title {
+          font-weight: 600;
+          font-size: $FONT_SIZE_S;
+          color: $FONT_COLOR_01;
+          margin: 0;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          flex: 1;
+          min-width: 0;
+        }
+
+        .notification-time {
+          font-size: $FONT_SIZE_S;
+          color: $CAP_G05;
+          flex-shrink: 0;
+        }
+      }
+
+      .notification-body {
+        font-size: $FONT_SIZE_S;
+        color: $FONT_COLOR_01;
+        margin: 0;
+        line-height: 1.2;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+      }
+
+      .notification-url {
+        display: none;
+      }
+    }
+  }
+}
+

package/v2Containers/WebPush/Create/preview/styles/_macos-chrome.scss

@@ -0,0 +1,101 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables';
+
+/**
+ * macOS + Chrome Notification Styles
+ */
+
+.notification-container.macos-chrome {
+  width: 100%;
+  max-width: 348px;
+  background-color: $CAP_WHITE;
+  border: 1px solid $CAP_G07;
+  border-radius: 12px;
+  padding: 12px;
+
+  .notification-header {
+    .notification-icon-container {
+      width: 40px;
+      height: 40px;
+      background-color: $CAP_G09;
+      border-radius: 12px;
+      padding: 8px;
+    }
+
+    .notification-content {
+      .notification-title {
+        font-family: "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+        font-weight: 590;
+        font-size: $FONT_SIZE_S;
+        line-height: 16px;
+        min-height: 16px;
+        color: $FONT_COLOR_01;
+        letter-spacing: 0;
+      }
+
+      .notification-url {
+        font-family: "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+        font-weight: 510;
+        font-size: $FONT_SIZE_S;
+        line-height: 16px;
+        min-height: 16px;
+        color: $FONT_COLOR_01;
+        letter-spacing: 0;
+      }
+
+      .notification-body {
+        font-family: "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+        font-weight: 400;
+        font-size: $FONT_SIZE_S;
+        line-height: 16px;
+        min-height: 16px;
+        color: $FONT_COLOR_01;
+        letter-spacing: 0;
+        
+        // Limit notification body to 3 lines as per macOS notification behavior
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 3;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+
+  // Collapsed state - ensure header aligns center vertically
+  &.collapsed .notification-header {
+    align-items: center;
+
+    .notification-brand-icon-container {
+      .notification-brand-icon {
+        border-radius: 5px;
+      }
+    }
+  }
+
+  // Expanded state - CTA button typography
+  &.expanded {
+    .notification-expanded-content {
+      .notification-actions {
+        .notification-action-item {
+          .notification-action-button {
+            font-family: "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+            font-weight: 510;
+            font-size: 12px;
+            line-height: 16px;
+            letter-spacing: 0;
+            padding: 8px 12px;
+
+            .notification-action-label {
+              font-family: "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+              font-weight: 510;
+              font-size: 12px;
+              line-height: 16px;
+              letter-spacing: 0;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+