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

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

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

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

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