@capillarytech/creatives-library 8.0.255-alpha.4 → 8.0.256

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

@@ -1,12 +0,0 @@
-@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

@@ -1,12 +0,0 @@
-@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

@@ -1,12 +0,0 @@
-@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

@@ -1,47 +0,0 @@
-@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

@@ -1,11 +0,0 @@
-@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

@@ -1,11 +0,0 @@
-@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

@@ -1,11 +0,0 @@
-@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

@@ -1,207 +0,0 @@
-@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

@@ -1,153 +0,0 @@
-@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

@@ -1,107 +0,0 @@
-@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

@@ -1,101 +0,0 @@
-@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;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-