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

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

@@ -1,188 +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: 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

@@ -1,106 +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: 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

@@ -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: 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

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

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