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

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

@@ -0,0 +1,300 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables';
+
+/**
+ * Android (Mobile) + Chrome Notification Styles
+ */
+
+.notification-container.android-mobile-chrome {
+  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.android-mobile-chrome-header {
+      align-items: center;
+    }
+
+    .notification-icon-container {
+      width: 1.75rem;
+      height: 1.75rem;
+      padding: 0.125rem;
+      border-radius: 50%;
+    }
+
+    .android-mobile-chrome-content {
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+      min-width: 0;
+
+      .notification-title-row {
+        display: flex;
+        align-items: center;
+        gap: 0.375rem;
+        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;
+      }
+    }
+
+    .notification-right-rail {
+      display: flex;
+      gap: 0.5rem;
+      margin-left: 0.5rem;
+      flex-shrink: 0;
+
+      .android-mobile-chrome-brand-icon {
+        width: 1.875rem;
+        height: 1.875rem;
+        padding: 0;
+        background-color: transparent;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .notification-brand-icon {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          border-radius: 0.25rem;
+        }
+      }
+
+      .android-mobile-chrome-arrow {
+        font-size: $FONT_SIZE_M;
+        color: $CAP_G05;
+        line-height: 1;
+        margin-top: 0;
+        padding-top: 0;
+      }
+    }
+  }
+
+  &.expanded {
+    width: 20.375rem;
+    min-height: 4.875rem;
+    padding: 0.75rem;
+    display: flex;
+    flex-direction: row;
+    gap: 0.5rem;
+    position: relative;
+
+    // Browser icon as separate column, aligned to top
+    .android-mobile-expanded-icon {
+      padding: 0.125rem;
+      border-radius: 50%;
+      flex-shrink: 0;
+      align-self: flex-start;
+
+      .notification-icon-container {
+        width: 1rem;
+        height: 1rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .notification-icon {
+        width: 1rem;
+        height: 1rem;
+      }
+    }
+
+    .android-mobile-expanded-wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+      flex: 1;
+      min-width: 0;
+    }
+
+    .android-mobile-expanded-top {
+      display: flex;
+      align-items: flex-start;
+      gap: 0.75rem;
+      width: 100%;
+    }
+
+    .android-mobile-expanded-top-content {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      flex: 1;
+      min-width: 0;
+    }
+
+    .android-mobile-expanded-title {
+      font-weight: 600;
+      font-size: $FONT_SIZE_S;
+      color: $FONT_COLOR_01;
+      margin: 0;
+      line-height: 1.2;
+      word-break: break-word;
+    }
+
+    // Top container: Browser name, URL, time (all inline) | Brand icon
+    .android-mobile-expanded-header {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      width: 100%;
+
+      .android-mobile-expanded-header-content {
+        display: flex;
+        align-items: center;
+        gap: 0.375rem;
+        flex: 1;
+        min-width: 0;
+        font-family: Roboto, sans-serif;
+        font-size: 0.625rem;
+        line-height: 0.8125rem;
+        letter-spacing: 0;
+        overflow: hidden;
+
+        .android-mobile-expanded-browser-name {
+          font-weight: 400;
+          color: $CAP_G04;
+          flex-shrink: 0;
+        }
+
+        .android-mobile-expanded-domain-time {
+          display: inline-flex;
+          align-items: center;
+          gap: 0.375rem;
+          min-width: 0;
+          overflow: hidden;
+
+          .android-mobile-expanded-domain {
+            color: $CAP_G04;
+            font-weight: 400;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .android-mobile-expanded-time {
+            color: $CAP_G04;
+            font-weight: 400;
+            flex-shrink: 0;
+          }
+        }
+      }
+    }
+
+    .android-mobile-chrome-brand-icon {
+      width: 2.143rem;
+      height: 2.143rem;
+      padding: 0;
+      background-color: transparent;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+
+      .notification-brand-icon {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        border-radius: 0.286rem;
+      }
+    }
+
+    // Arrow icon positioned as sibling to wrapper
+    .android-mobile-expanded-arrow {
+      font-size: $FONT_SIZE_M;
+      color: $CAP_G05;
+      line-height: 1;
+      flex-shrink: 0;
+      align-self: flex-start;
+    }
+
+    // Body container: body text, media
+    .android-mobile-expanded-body {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      width: 100%;
+
+      // Body text (limited to 4 lines)
+      .android-mobile-expanded-body-text {
+        font-size: $FONT_SIZE_S;
+        color: $FONT_COLOR_01;
+        margin: 0;
+        line-height: 1.4;
+        word-break: break-word;
+        
+        // Limit notification body to 4 lines with ellipsis
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 4;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      // Media image at bottom (if visible)
+      .android-mobile-expanded-media {
+        width: 100%;
+        margin-top: 0.25rem;
+        border-radius: 0.5rem;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .android-mobile-expanded-media-image {
+          width: 100%;
+          max-width: 100%;
+          height: 12rem; // 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;
+        }
+      }
+    }
+  }
+}
+

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,303 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables';
+
+/**
+ * Android (Tablet) + Chrome Notification Styles
+ * Similar UI to Android Mobile, but with larger dimensions for tablet screen
+ */
+
+.notification-container.android-tablet-chrome {
+  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.android-mobile-chrome-header {
+      align-items: center;
+    }
+
+    .notification-icon-container {
+      width: 1.75rem;
+      height: 1.75rem;
+      padding: 0.125rem;
+      border-radius: 50%;
+    }
+
+    .android-mobile-chrome-content {
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+      min-width: 0;
+
+      .notification-title-row {
+        display: flex;
+        align-items: center;
+        gap: 0.375rem;
+        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;
+        line-clamp: 2;
+      }
+
+      .notification-url {
+        display: none;
+      }
+    }
+
+    .notification-right-rail {
+      display: flex;
+      gap: 0.5rem;
+      margin-left: 0.5rem;
+      flex-shrink: 0;
+
+      .android-mobile-chrome-brand-icon {
+        width: 1.875rem;
+        height: 1.875rem;
+        padding: 0;
+        background-color: transparent;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .notification-brand-icon {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          border-radius: 0.25rem;
+        }
+      }
+
+      .android-mobile-chrome-arrow {
+        font-size: $FONT_SIZE_M;
+        color: $CAP_G05;
+        line-height: 1;
+        margin-top: 0;
+        padding-top: 0;
+      }
+    }
+  }
+
+  &.expanded {
+    width: 30rem;
+    min-height: 4.875rem;
+    padding: 0.75rem;
+    display: flex;
+    flex-direction: row;
+    gap: 0.5rem;
+    position: relative;
+
+    // Browser icon as separate column, aligned to top
+    .android-mobile-expanded-icon {
+      padding: 0.125rem;
+      border-radius: 50%;
+      flex-shrink: 0;
+      align-self: flex-start;
+
+      .notification-icon-container {
+        width: 1rem;
+        height: 1rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .notification-icon {
+        width: 1rem;
+        height: 1rem;
+      }
+    }
+
+    .android-mobile-expanded-wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+      flex: 1;
+      min-width: 0;
+    }
+
+    .android-mobile-expanded-top {
+      display: flex;
+      align-items: flex-start;
+      gap: 0.75rem;
+      width: 100%;
+    }
+
+    .android-mobile-expanded-top-content {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      flex: 1;
+      min-width: 0;
+    }
+
+    .android-mobile-expanded-title {
+      font-weight: 600;
+      font-size: $FONT_SIZE_S;
+      color: $FONT_COLOR_01;
+      margin: 0;
+      line-height: 1.2;
+      word-break: break-word;
+    }
+
+    // Top container: Browser name, URL, time (all inline) | Brand icon
+    .android-mobile-expanded-header {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      width: 100%;
+
+      .android-mobile-expanded-header-content {
+        display: flex;
+        align-items: center;
+        gap: 0.375rem;
+        flex: 1;
+        min-width: 0;
+        font-family: Roboto, sans-serif;
+        font-size: 0.625rem;
+        line-height: 0.8125rem;
+        letter-spacing: 0;
+        overflow: hidden;
+
+        .android-mobile-expanded-browser-name {
+          font-weight: 400;
+          color: $CAP_G04;
+          flex-shrink: 0;
+        }
+
+        .android-mobile-expanded-domain-time {
+          display: inline-flex;
+          align-items: center;
+          gap: 0.375rem;
+          min-width: 0;
+          overflow: hidden;
+
+          .android-mobile-expanded-domain {
+            color: $CAP_G04;
+            font-weight: 400;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .android-mobile-expanded-time {
+            color: $CAP_G04;
+            font-weight: 400;
+            flex-shrink: 0;
+          }
+        }
+      }
+    }
+
+    .android-mobile-chrome-brand-icon {
+      width: 2.143rem;
+      height: 2.143rem;
+      padding: 0;
+      background-color: transparent;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+
+      .notification-brand-icon {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        border-radius: 0.286rem;
+      }
+    }
+
+    // Arrow icon positioned as sibling to wrapper
+    .android-mobile-expanded-arrow {
+      font-size: $FONT_SIZE_M;
+      color: $CAP_G05;
+      line-height: 1;
+      flex-shrink: 0;
+      align-self: flex-start;
+    }
+
+    // Body container: body text, media
+    .android-mobile-expanded-body {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      width: 100%;
+
+      // Body text (limited to 4 lines)
+      .android-mobile-expanded-body-text {
+        font-size: $FONT_SIZE_S;
+        color: $FONT_COLOR_01;
+        margin: 0;
+        line-height: 1.4;
+        word-break: break-word;
+        
+        // Limit notification body to 4 lines with ellipsis
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 4;
+        line-clamp: 4;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      // Media image at bottom (if visible)
+      .android-mobile-expanded-media {
+        width: 100%;
+        margin-top: 0.25rem;
+        border-radius: 0.5rem;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .android-mobile-expanded-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;
+        }
+      }
+    }
+  }
+}
+

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;
+}
+