@capillarytech/creatives-library 8.0.241 → 8.0.242-alpha.0

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

@@ -0,0 +1,188 @@
+@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: 0.75rem;
+    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: 0.125rem;
+
+      .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: 2.1875rem;
+      height: 2.1875rem;
+
+      .notification-brand-icon {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+
+    .notification-header-actions {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      margin-left: 0.5rem;
+
+      .notification-action-menu {
+        font-size: $FONT_SIZE_M;
+        color: $FONT_COLOR_01;
+        line-height: 1;
+        cursor: default;
+        user-select: none;
+      }
+
+      .notification-action-arrow {
+        font-size: $FONT_SIZE_M;
+        color: $FONT_COLOR_01;
+        line-height: 1;
+        cursor: default;
+        user-select: none;
+        transform: rotate(0deg) translateY(-0.25rem);
+      }
+    }
+  }
+
+  // Expanded state content
+  .notification-expanded-content {
+    width: 100%;
+    margin-top: 0.75rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+
+    .notification-media {
+      width: 100%;
+      border-radius: 0.5rem;
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .notification-media-image {
+        width: 100%;
+        max-width: 100%;
+          height: 10.5rem; // 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: 0.0625rem;
+          background-color: $CAP_G08;
+        }
+
+        .notification-action-button {
+          width: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 0.5rem;
+          padding: 0.5rem 0.75rem;
+          background-color: transparent;
+          border: none;
+          border-radius: 0.5rem;
+          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,106 @@
+@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: 0.5rem;
+  padding: 0.75rem;
+  box-sizing: border-box;
+
+  &.collapsed {
+    width: 20.375rem;
+    height: 4.875rem;
+
+    .notification-header {
+      display: flex;
+      gap: 0.75rem;
+      height: 100%;
+    }
+
+    .notification-header.ios-header {
+      align-items: center;
+    }
+
+    .notification-icon-container {
+      width: 1.75rem;
+      height: 1.75rem;
+      padding: 0.125rem;
+      border-radius: 50%;
+      flex-shrink: 0;
+    }
+
+    .notification-icon {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+
+    .ios-content {
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+      min-width: 0;
+      flex: 1;
+
+      .notification-title-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 0.5rem;
+        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/_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: 0.5rem;
+  padding: 0.75rem;
+  box-sizing: border-box;
+
+  &.collapsed {
+    width: 30rem;
+    height: 4.875rem;
+
+    .notification-header {
+      display: flex;
+      gap: 0.75rem;
+      height: 100%;
+    }
+
+    .notification-header.ios-header {
+      align-items: center;
+    }
+
+    .notification-icon-container {
+      width: 1.75rem;
+      height: 1.75rem;
+      padding: 0.125rem;
+      border-radius: 50%;
+      flex-shrink: 0;
+    }
+
+    .notification-icon {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+
+    .ios-content {
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+      min-width: 0;
+      flex: 1;
+
+      .notification-title-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 0.5rem;
+        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,75 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables';
+
+/**
+ * macOS + Chrome Notification Styles
+ */
+
+.notification-container.macos-chrome {
+  width: 100%;
+  max-width: 21.75rem;
+  background-color: $CAP_WHITE;
+  border: 1px solid $CAP_G07;
+  border-radius: 0.75rem;
+  padding: 0.75rem;
+
+  .notification-header {
+    .notification-icon-container {
+      width: 2.5rem;
+      height: 2.5rem;
+      background-color: $CAP_G09;
+      border-radius: 0.75rem;
+      padding: 0.5rem;
+    }
+
+    .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: 1rem;
+        min-height: 1rem;
+        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: 1rem;
+        min-height: 1rem;
+        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: 1rem;
+        min-height: 1rem;
+        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: 0.3125rem;
+      }
+    }
+  }
+}
+

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

@@ -0,0 +1,174 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables';
+
+/**
+ * Windows + Chrome Notification Styles
+ * Also applies to Windows + Firefox/Edge/Opera (they extend this)
+ */
+
+.notification-container.windows-chrome {
+  // Inherit shared styles from macOS Chrome
+  @extend .notification-container.macos-chrome;
+
+  // Collapsed state - ensure header aligns center vertically and add brand icon border-radius
+  &.collapsed .notification-header {
+    align-items: center;
+
+    .notification-brand-icon-container {
+      .notification-brand-icon {
+        border-radius: 0.3125rem;
+      }
+    }
+  }
+
+  &.expanded {
+    width: 100%;
+    max-width: 22rem;
+    background: $CAP_G09;
+    border: 1px solid $CAP_G07;
+    border-radius: 0.25rem;
+    padding: 0;
+    box-sizing: border-box;
+    overflow: hidden;
+
+    .windows-chrome-expanded-wrapper {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      height: 100%;
+      gap: 0.625rem;
+    }
+
+    .windows-chrome-banner {
+      width: 100%;
+      line-height: 0;
+
+      .windows-chrome-banner-image {
+        width: 100%;
+        height: 9.4375rem;
+        object-fit: cover;
+        display: block;
+      }
+    }
+
+    .windows-chrome-body {
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+      padding: 0 0.75rem 0.75rem 0.75rem;
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    .windows-chrome-header-row {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      width: 100%;
+    }
+
+    .windows-chrome-browser-icon {
+      width: 2rem;
+      height: 2rem;
+      background: $CAP_G09;
+      border-radius: 0.375rem;
+      padding: 0.375rem;
+    }
+
+    .windows-chrome-browser-title {
+      flex: 1;
+      font-weight: 600;
+      font-size: $FONT_SIZE_S;
+      color: $FONT_COLOR_01;
+      margin: 0;
+      font-family: 'Roboto', 'Segoe UI', sans-serif;
+    }
+
+    .windows-chrome-header-actions {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+
+      .windows-chrome-menu-text {
+        font-weight: 500;
+        font-size: $FONT_SIZE_M;
+        margin-bottom: 0.3125rem;
+        color: $FONT_COLOR_01;
+        line-height: 1;
+        user-select: none;
+        font-family: 'Roboto', 'Segoe UI', sans-serif;
+      }
+
+      .windows-chrome-close-text {
+        font-weight: 500;
+        font-size: $FONT_SIZE_M;
+        color: $FONT_COLOR_01;
+        line-height: 1;
+        user-select: none;
+        font-family: 'Roboto', 'Segoe UI', sans-serif;
+      }
+    }
+
+    .windows-chrome-content-row {
+      display: flex;
+      align-items: flex-start;
+      gap: 0.75rem;
+      width: 100%;
+    }
+
+    .windows-chrome-brand-icon {
+      width: 2.625rem;
+      height: 2.625rem;
+      padding: 0;
+      border-radius: 0.25rem;
+      border: 1px solid $CAP_G07;
+      background: $CAP_WHITE;
+      flex-shrink: 0;
+
+      .notification-brand-icon {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+
+    .windows-chrome-text-block {
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+      min-width: 0;
+      width: 100%;
+      font-family: 'Roboto', 'Segoe UI', sans-serif;
+    }
+
+    .windows-chrome-title {
+      font-weight: 600;
+      font-size: $FONT_SIZE_S;
+      color: $FONT_COLOR_01;
+      margin: 0;
+      line-height: 0.875rem;
+      word-break: break-word;
+      font-family: 'Roboto', 'Segoe UI', sans-serif;
+    }
+
+    .windows-chrome-url {
+      font-weight: 500;
+      font-size: $FONT_SIZE_VS;
+      color: $FONT_COLOR_01;
+      margin: 0;
+      line-height: 0.75rem;
+      word-break: break-word;
+      font-family: 'Roboto', 'Segoe UI', sans-serif;
+    }
+
+    .windows-chrome-body-text {
+      font-weight: 400;
+      font-size: $FONT_SIZE_VS;
+      color: $FONT_COLOR_01;
+      margin: 0;
+      line-height: 0.75rem;
+      word-break: break-word;
+      font-family: 'Roboto', 'Segoe UI', sans-serif;
+    }
+  }
+}
+