@capillarytech/creatives-library 8.0.250-alpha.2 → 8.0.251

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

@@ -1,351 +0,0 @@
-@import '~@capillarytech/cap-ui-library/styles/_variables';
-@import './notification-container';
-
-.webpush-preview-container {
-  .preview-controls {
-    display: flex;
-    margin-bottom: 16px;
-
-    .preview-control-os,
-    .preview-control-browser,
-    .preview-control-state {
-      flex: 1;
-      min-width: 0;
-      
-      > * {
-        max-width: 100%;
-      }
-    }
-
-    .preview-control-browser {
-      margin-left: 16px;
-    }
-
-    .preview-control-label {
-      margin-bottom: 8px;
-      display: block;
-      color: $FONT_COLOR_01;
-    }
-  }
-
-  .preview-controls-compact {
-    display: block;
-    margin-bottom: 16px;
-
-    .preview-control {
-      display: inline-block;
-      vertical-align: top;
-      margin-right: 12px;
-      width: auto;
-
-      &:last-child {
-        margin-right: 0;
-      }
-
-      > * {
-        max-width: none;
-      }
-    }
-
-    .preview-control-os,
-    .preview-control-browser,
-    .preview-control-state {
-      flex: none;
-      min-width: 0;
-    }
-
-    .preview-control-browser {
-      margin-left: 0;
-    }
-
-    .preview-control-label {
-      margin-bottom: 8px;
-      display: block;
-      color: $FONT_COLOR_01;
-    }
-  }
-
-  .preview-controls-state {
-    // Additional spacing below State dropdown when shown
-    // This ensures proper spacing between State dropdown and notification preview
-    margin-bottom: 16px;
-
-    .preview-control-state {
-      > * {
-        max-width: 100%;
-      }
-    }
-
-    .preview-control-label {
-      margin-bottom: 8px;
-      display: block;
-      color: $FONT_COLOR_01;
-    }
-  }
-
-  .preview-content {
-    margin-bottom: 16px;
-
-    .preview-content-wrapper {
-      width: 100%;
-    }
-
-    .preview-placeholder {
-      padding: 20px;
-      background-color: $CAP_G09;
-      border-radius: 8px;
-      min-height: 200px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: $CAP_G05;
-      font-size: $FONT_SIZE_S;
-    }
-
-    // Notification preview wrapper - styles for preview area container only
-    // This class handles positioning, background, padding, and layout constraints
-    // The actual notification styles are in notification-container.scss
-    .notification-preview {
-      background-color: $CAP_G09;
-      border-radius: 8px;
-      padding: 20px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      // Additional positioning/container styles can be added here
-      // but NOT styles for .notification-container itself
-      &.preview-unavailable {
-        background-color: transparent;
-        border: 1px dashed $CAP_G06;
-        min-height: 84px;
-      }
-
-      .notification-container {
-        width: 100%;
-      }
-    }
-  }
-
-  .preview-disclaimer {
-    .disclaimer-text {
-      color: $CAP_G05;
-      font-size: $FONT_SIZE_S;
-      line-height: 1.5;
-      text-align: center;
-    }
-  }
-
-  .preview-all-devices-button {
-    margin-top: 16px;
-    text-align: center;
-
-    .preview-all-devices-trigger {
-      border: none;
-      background: transparent;
-      color: map-get($CAP_SECONDARY, base);
-      font-weight: $FONT_WEIGHT_MEDIUM;
-      border-radius: 8px;
-      padding: 8px 16px;
-
-      &:hover:not(:disabled) {
-        background: $CAP_G09;
-      }
-
-      &:disabled {
-        color: $CAP_G05;
-        cursor: not-allowed;
-        background: transparent;
-      }
-    }
-  }
-}
-
-// Make the backdrop transparent for the preview slidebox
-// This prevents double-darkening when it opens over an existing slidebox
-.webpush-preview-slidebox.cap-slide-box-v2 {
-  background: transparent;
-}
-
-// ============================================================================
-// Device Preview Container Styles
-// ============================================================================
-
-/**
- * Device Preview Container
- * 
- * Background container for device frame previews in the SlideBox.
- * 
- * Specifications:
- * - Width: 100% (responsive)
- * - Height: Determined by device frame content (auto)
- * - Background: $CAP_G09
- * - Padding: 24px 16px 16px 16px (top right bottom left)
- */
-.device-preview-container {
-  width: 100%;
-  background-color: $CAP_G09;
-  padding: 24px 16px 16px 16px;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  margin: 0 auto;
-  // Height is determined by the device frame content
-
-  /**
-   * Device Frame Wrapper
-   * 
-   * Wraps the device frame SVG and positions it centered within the container.
-   * This wrapper will also serve as the positioning reference for notifications
-   * in later phases.
-   */
-  .device-frame-wrapper {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    // Height determined by device frame image
-
-      /**
-       * Device Frame Asset
-       *
-       * Wraps the frame image and provides the positioning context for the
-       * notification overlay. Anchors notification coordinates to the frame image
-       * itself instead of the background container.
-       */
-      .device-frame-asset {
-        position: relative;
-        display: inline-block;
-        max-width: 100%;
-        width: auto;
-        height: auto;
-        line-height: 0; // remove inline-block whitespace
-      }
-
-    .device-frame {
-      filter: none;
-      transition: none;
-      transform: none;
-      
-      &:hover {
-        filter: none;
-        transform: none;
-      }
-      
-      max-width: 100%;
-      width: auto;
-      height: auto;
-      display: block;
-      object-fit: contain;
-    }
-
-    /**
-     * Device Notification Wrapper
-     * 
-     * Wraps the notification container and positions it relative to the device frame.
-     * This ensures the notification is anchored to the device frame, not the background container.
-     */
-    .device-notification-wrapper {
-      position: absolute;
-      z-index: 10;
-      line-height: normal; // prevent zero line-height inheritance from frame asset
-      // Position is set inline via style prop for precise control
-      &.preview-unavailable {
-        width: 16px;
-        height: 16px;
-        border: 1px dashed $CAP_G06;
-        border-radius: 4px;
-        background: transparent;
-      }
-    }
-
-  }
-
-  .device-notification-wrapper .notification-container.macos-chrome {
-    width: 336px;
-  }
-  .device-notification-wrapper .notification-container.macos-safari {
-    width: 336px;
-  }
-  .device-notification-wrapper .notification-container.windows-chrome {
-    width: 336px;
-  }
-  .device-notification-wrapper .notification-container.android-mobile-chrome.collapsed,
-  .device-notification-wrapper .notification-container.android-mobile-firefox.collapsed,
-  .device-notification-wrapper .notification-container.android-mobile-edge.collapsed,
-  .device-notification-wrapper .notification-container.android-mobile-opera.collapsed {
-    width: 326px;
-    height: 78px;
-  }
-
-  .device-notification-wrapper .notification-container.android-mobile-chrome.collapsed .notification-header.android-mobile-chrome-header,
-  .device-notification-wrapper .notification-container.android-mobile-firefox.collapsed .notification-header.android-mobile-chrome-header,
-  .device-notification-wrapper .notification-container.android-mobile-edge.collapsed .notification-header.android-mobile-chrome-header,
-  .device-notification-wrapper .notification-container.android-mobile-opera.collapsed .notification-header.android-mobile-chrome-header {
-    align-items: center;
-  }
-
-  .device-notification-wrapper .notification-container.android-tablet-chrome.collapsed,
-  .device-notification-wrapper .notification-container.android-tablet-firefox.collapsed,
-  .device-notification-wrapper .notification-container.android-tablet-edge.collapsed,
-  .device-notification-wrapper .notification-container.android-tablet-opera.collapsed {
-    width: 480px;
-    height: 78px;
-  }
-
-  .device-notification-wrapper .notification-container.android-tablet-chrome.collapsed .notification-header.android-mobile-chrome-header,
-  .device-notification-wrapper .notification-container.android-tablet-firefox.collapsed .notification-header.android-mobile-chrome-header,
-  .device-notification-wrapper .notification-container.android-tablet-edge.collapsed .notification-header.android-mobile-chrome-header,
-  .device-notification-wrapper .notification-container.android-tablet-opera.collapsed .notification-header.android-mobile-chrome-header {
-    align-items: center;
-  }
-
-  .device-notification-wrapper .notification-container.android-tablet-chrome.expanded,
-  .device-notification-wrapper .notification-container.android-tablet-firefox.expanded,
-  .device-notification-wrapper .notification-container.android-tablet-edge.expanded,
-  .device-notification-wrapper .notification-container.android-tablet-opera.expanded {
-    width: 480px;
-    min-height: 78px;
-  }
-
-  .device-notification-wrapper .notification-container.ios-chrome.collapsed,
-  .device-notification-wrapper .notification-container.ios-safari.collapsed,
-  .device-notification-wrapper .notification-container.ios-firefox.collapsed,
-  .device-notification-wrapper .notification-container.ios-edge.collapsed,
-  .device-notification-wrapper .notification-container.ios-opera.collapsed {
-    width: 326px;
-    height: 78px;
-  }
-
-  .device-notification-wrapper .notification-container.ios-chrome.collapsed .notification-header.ios-header,
-  .device-notification-wrapper .notification-container.ios-safari.collapsed .notification-header.ios-header,
-  .device-notification-wrapper .notification-container.ios-firefox.collapsed .notification-header.ios-header,
-  .device-notification-wrapper .notification-container.ios-edge.collapsed .notification-header.ios-header,
-  .device-notification-wrapper .notification-container.ios-opera.collapsed .notification-header.ios-header {
-    align-items: center;
-  }
-
-  .device-notification-wrapper .notification-container.ipados-chrome.collapsed,
-  .device-notification-wrapper .notification-container.ipados-safari.collapsed,
-  .device-notification-wrapper .notification-container.ipados-firefox.collapsed,
-  .device-notification-wrapper .notification-container.ipados-edge.collapsed,
-  .device-notification-wrapper .notification-container.ipados-opera.collapsed {
-    width: 480px;
-    height: 78px;
-  }
-
-  .device-notification-wrapper .notification-container.ipados-chrome.collapsed .notification-header.ios-header,
-  .device-notification-wrapper .notification-container.ipados-safari.collapsed .notification-header.ios-header,
-  .device-notification-wrapper .notification-container.ipados-firefox.collapsed .notification-header.ios-header,
-  .device-notification-wrapper .notification-container.ipados-edge.collapsed .notification-header.ios-header,
-  .device-notification-wrapper .notification-container.ipados-opera.collapsed .notification-header.ios-header {
-    align-items: center;
-  }
-
-  .device-notification-wrapper .notification-title {
-    line-height: 1.2;
-  }
-}
-

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

@@ -1,370 +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: 12px;
-  padding: 12px;
-  box-sizing: border-box;
-
-  &.collapsed {
-    width: 326px;
-    height: 78px;
-
-    .notification-header {
-      display: flex;
-      gap: 12px;
-      height: 100%;
-    }
-
-    .notification-header.android-mobile-chrome-header {
-      align-items: center;
-    }
-
-    .notification-icon-container {
-      width: 28px;
-      height: 28px;
-      padding: 2px;
-      border-radius: 50%;
-    }
-
-    .android-mobile-chrome-content {
-      display: flex;
-      flex-direction: column;
-      gap: 4px;
-      min-width: 0;
-
-      .notification-title-row {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        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: 8px;
-      margin-left: 8px;
-      flex-shrink: 0;
-
-      .android-mobile-chrome-brand-icon {
-        width: 30px;
-        height: 30px;
-        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: 4px;
-        }
-      }
-
-      .android-mobile-chrome-arrow {
-        font-size: 5.92px;
-        color: $CAP_G05;
-        line-height: 1;
-        margin-top: 0;
-        padding-top: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        .android-mobile-chrome-arrow-icon {
-          height: 5.92px;
-          width: auto;
-          display: block;
-        }
-      }
-    }
-  }
-
-  &.expanded {
-    width: 326px;
-    min-height: 78px;
-    padding: 12px;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: 8px;
-    position: relative;
-
-    // Browser icon as separate column, aligned to top
-    .android-mobile-expanded-icon {
-      padding: 2px;
-      border-radius: 50%;
-      flex-shrink: 0;
-      align-self: flex-start;
-
-      .notification-icon-container {
-        width: 16px;
-        height: 16px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-
-      .notification-icon {
-        width: 16px;
-        height: 16px;
-      }
-    }
-
-    .android-mobile-expanded-wrapper {
-      display: flex;
-      flex-direction: column;
-      gap: 12px;
-      flex: 1;
-      min-width: 0;
-    }
-
-    .android-mobile-expanded-top {
-      display: flex;
-      align-items: flex-start;
-      gap: 12px;
-      width: 100%;
-    }
-
-    .android-mobile-expanded-top-content {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-      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: 12px;
-      width: 100%;
-
-      .android-mobile-expanded-header-content {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        flex: 1;
-        min-width: 0;
-        font-family: Roboto, sans-serif;
-        font-size: 10px;
-        line-height: 13px;
-        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: 6px;
-          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: 34.288px;
-      height: 34.288px;
-      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: 4.576px;
-      }
-    }
-
-    // Arrow icon positioned as sibling to wrapper
-    .android-mobile-expanded-arrow {
-      font-size: 5.92px;
-      color: $CAP_G05;
-      line-height: 1;
-      flex-shrink: 0;
-      align-self: flex-start;
-      margin-top: 10px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      .android-mobile-expanded-arrow-icon {
-        height: 5.92px;
-        width: auto;
-        display: block;
-      }
-    }
-
-    // Body container: body text, media
-    .android-mobile-expanded-body {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-      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: 4px;
-        border-radius: 8px;
-        overflow: hidden;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        .android-mobile-expanded-media-image {
-          width: 100%;
-          max-width: 100%;
-          height: 192px; // 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;
-        }
-      }
-    }
-
-    // CTA buttons container - direct child of notification-container, below the three vertical components
-    .android-mobile-expanded-cta-container {
-      display: flex;
-      align-items: center;
-      width: 100%;
-      flex-basis: 100%;
-      box-sizing: border-box;
-      padding-top: 9.6px;
-      margin-left: 0;
-      margin-right: 0;
-    }
-
-    .android-mobile-expanded-cta-divider {
-      width: 1px;
-      height: 100%;
-      background-color: $CAP_G07; // #DFE2E7
-      flex-shrink: 0;
-      align-self: stretch;
-    }
-
-    .android-mobile-expanded-cta-button {
-      flex: 1;
-      background: transparent;
-      border: none;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      min-width: 0;
-      box-sizing: border-box;
-
-      &.android-mobile-expanded-cta-button-single {
-        flex: 1;
-        width: 100%;
-      }
-
-      .android-mobile-expanded-cta-button-text {
-        font-family: $FONT_FAMILY; // Roboto
-        font-weight: $FONT_WEIGHT_MEDIUM; // 500
-        font-size: $FONT_SIZE_S; // 12px
-        line-height: 16px;
-        color: $FONT_COLOR_01; // #091E42
-        letter-spacing: 0;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        max-width: 100%;
-      }
-    }
-  }
-}
-