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

package/v2Containers/WebPush/Create/preview/notification-container.scss

@@ -1,104 +0,0 @@
-/**
- * Notification Container Styles
- * 
- * Standalone, reusable notification container component.
- * Supports multiple platform + browser + state combinations.
- * 
- * Usage:
- *   <div className="notification-container macos-chrome expanded">
- *     <!-- notification content -->
- *   </div>
- * 
- * Modifiers:
- *   - Platform: macos, ios, ipados, windows, android-mobile, android-tablet
- *   - Browser: chrome, firefox, edge, safari, opera
- *   - State: expanded, collapsed
- * 
- * This file imports all platform-specific styles from the styles/ directory.
- */
-
-// Import base styles (common notification container structure)
-@import './styles/_base';
-
-// Import implemented platform + browser combinations
-@import './styles/_macos-chrome';
-@import './styles/_windows-chrome';
-@import './styles/_android-mobile-chrome';
-@import './styles/_android-mobile-firefox';
-@import './styles/_android-mobile-edge';
-@import './styles/_android-mobile-opera';
-@import './styles/_android-tablet-chrome';
-@import './styles/_android-tablet-firefox';
-@import './styles/_android-tablet-edge';
-@import './styles/_android-tablet-opera';
-@import './styles/_ios';
-@import './styles/_ipados';
-
-// ============================================================================
-// Placeholder styles for other platform + browser combinations
-// These can be implemented as needed
-// ============================================================================
-
-// macOS + Firefox
-.notification-container.macos-firefox {
-  // TODO: Implement macOS Firefox styles
-  @extend .notification-container.macos-chrome;
-}
-
-// macOS + Safari
-.notification-container.macos-safari {
-  // TODO: Implement macOS Safari styles
-  @extend .notification-container.macos-chrome;
-}
-
-// macOS + Edge
-.notification-container.macos-edge {
-  // TODO: Implement macOS Edge styles
-  @extend .notification-container.macos-chrome;
-}
-
-// macOS + Opera
-.notification-container.macos-opera {
-  // TODO: Implement macOS Opera styles
-  @extend .notification-container.macos-chrome;
-}
-
-// iOS and iPadOS styles are imported from _ios.scss and _ipados.scss
-// All browsers on iOS/iPadOS use the same simple notification style
-
-// Windows + Firefox - Reuse Windows Chrome styles
-.notification-container.windows-firefox {
-  @extend .notification-container.windows-chrome;
-}
-
-// Windows + Edge - Reuse Windows Chrome styles
-.notification-container.windows-edge {
-  @extend .notification-container.windows-chrome;
-}
-
-// Windows + Opera - Reuse Windows Chrome styles
-.notification-container.windows-opera {
-  @extend .notification-container.windows-chrome;
-}
-
-// Android (Mobile) + Firefox - Reuse Android Chrome styles
-// Styles are imported from _android-mobile-firefox.scss
-
-// Android (Mobile) + Edge - Reuse Android Chrome styles
-// Styles are imported from _android-mobile-edge.scss
-
-// Android (Mobile) + Opera - Reuse Android Chrome styles
-// Styles are imported from _android-mobile-opera.scss
-
-// Android (Tablet) + Chrome
-// Styles are imported from _android-tablet-chrome.scss
-
-// Android (Tablet) + Firefox - Reuse Android Tablet Chrome styles
-// Styles are imported from _android-tablet-firefox.scss
-
-// Android (Tablet) + Edge - Reuse Android Tablet Chrome styles
-// Styles are imported from _android-tablet-edge.scss
-
-// Android (Tablet) + Opera - Reuse Android Tablet Chrome styles
-// Styles are imported from _android-tablet-opera.scss
-

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

@@ -1,409 +0,0 @@
-@import '~@capillarytech/cap-ui-library/styles/_variables';
-@import './notification-container';
-
-.webpush-preview-container {
-  .preview-controls {
-    display: flex;
-    margin-bottom: 1rem;
-
-    .preview-control-os,
-    .preview-control-browser,
-    .preview-control-state {
-      flex: 1;
-      min-width: 0;
-      
-      > * {
-        max-width: 100%;
-      }
-    }
-
-    .preview-control-browser {
-      margin-left: 1rem;
-    }
-
-    .preview-control-label {
-      margin-bottom: 0.5rem;
-      display: block;
-      color: $FONT_COLOR_01;
-    }
-  }
-
-  .preview-controls-compact {
-    display: block;
-    margin-bottom: 1rem;
-
-    .preview-control {
-      display: inline-block;
-      vertical-align: top;
-      margin-right: 0.75rem;
-      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: 0.5rem;
-      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: 1rem;
-
-    .preview-control-state {
-      > * {
-        max-width: 100%;
-      }
-    }
-
-    .preview-control-label {
-      margin-bottom: 0.5rem;
-      display: block;
-      color: $FONT_COLOR_01;
-    }
-  }
-
-  .preview-content {
-    margin-bottom: 1rem;
-
-    .preview-content-wrapper {
-      width: 100%;
-    }
-
-    .preview-placeholder {
-      padding: 1.25rem;
-      background-color: $CAP_G09;
-      border-radius: 0.5rem;
-      min-height: 12.5rem;
-      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: 0.5rem;
-      padding: 1.25rem;
-      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: 5.25rem;
-      }
-
-      // ========================================================================
-      // Width Override for All Platforms in Sidebar Preview
-      // ========================================================================
-      // Override: Set width to 100% for all notification containers to prevent
-      // overflow in the small sidebar preview.
-      // Note: This override is necessary only for the sidebar preview.
-      // Users will select "Preview in all devices" to get the most accurate
-      // preview as written in the disclaimer.
-      .notification-container {
-        width: 100% !important;
-      }
-    }
-  }
-
-  .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: 1rem;
-    text-align: center;
-
-    .preview-all-devices-trigger {
-      border: none;
-      background: transparent;
-      color: map-get($CAP_SECONDARY, base);
-      font-weight: $FONT_WEIGHT_MEDIUM;
-      border-radius: 0.5rem;
-      padding: 0.5rem 1rem;
-
-      &: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: 1.5rem 1rem 1rem 1rem (top right bottom left)
- */
-.device-preview-container {
-  width: 100%;
-  background-color: $CAP_G09;
-  padding: 1.5rem 1rem 1rem 1rem;
-  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 Image
-     * 
-     * The SVG device frame asset. It should maintain its aspect ratio
-     * and be centered within the wrapper.
-     * 
-     * IMPORTANT - CSS Global Scope Override:
-     * This selector has increased specificity to override global styles from
-     * InAppPreviewPane component (_inAppPreviewPane.scss) which also uses .device-frame.
-     * The codebase uses global CSS extraction (not CSS modules), so styles leak between components.
-     * 
-     * HOVER/ANIMATION EFFECTS:
-     * If you need to remove hover effects, shadows, or animations on the device frame,
-     * look for the following CSS properties in this selector or its parent:
-     * - box-shadow (for shadow effects)
-     * - transition (for animation effects)
-     * - transform (for hover transformations)
-     * - filter (for hover effects like brightness, contrast)
-     */
-    .device-frame {
-      // Override InAppPreviewPane global styles with higher specificity
-      // These resets prevent style leakage from _inAppPreviewPane.scss
-      filter: none !important; // Override: Removes drop-shadow from InAppPreviewPane
-      transition: none !important; // Override: Removes transition from InAppPreviewPane
-      transform: none !important; // Override: Removes transform from InAppPreviewPane
-      
-      // Remove hover effects from InAppPreviewPane
-      &:hover {
-        filter: none !important; // HOVER EFFECT OVERRIDE - Removes InAppPreviewPane hover filter
-        transform: none !important; // HOVER EFFECT OVERRIDE - Removes InAppPreviewPane hover transform
-      }
-      
-      // WebPush-specific device frame styles
-      max-width: 100%;
-      width: auto;
-      height: auto;
-      display: block; // ensure the image defines the wrapping box size
-      object-fit: contain;
-      // Ensure the frame maintains its aspect ratio
-      // and is centered both horizontally and vertically
-      // Height is determined by the SVG's natural aspect ratio
-      
-      // HOVER/ANIMATION EFFECTS - None currently applied for WebPush preview
-      // If you need to add hover effects later, add them here and mark clearly:
-      // Example:
-      // transition: transform 0.3s ease; // HOVER EFFECT - Remove if incompatible
-      // &:hover {
-      //   transform: scale(1.02); // HOVER EFFECT - Remove if incompatible
-      //   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); // SHADOW EFFECT - Remove if incompatible
-      // }
-    }
-
-    /**
-     * 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: 1rem;
-        height: 1rem;
-        border: 1px dashed $CAP_G06;
-        border-radius: 0.25rem;
-        background: transparent;
-      }
-    }
-
-  }
-
-  /**
-   * Notification Container Width Override for Device Preview
-   * 
-   * In the device preview slidebox, the notification container should have
-   * a fixed width of 21rem instead of 100% to match the design requirements.
-   * This override only applies within the device-preview-container context.
-   * 
-   * Higher specificity selector ensures this overrides the default width
-   * from notification-container.scss without affecting the main preview.
-   */
-  .device-notification-wrapper .notification-container.macos-chrome {
-    width: 21rem !important;
-    // Override the default 100% width from notification-container.scss
-    // This only affects notifications in the device preview slidebox
-    // Using !important to ensure it overrides the base styles
-  }
-  .device-notification-wrapper .notification-container.macos-safari {
-    width: 21rem !important;
-  }
-  .device-notification-wrapper .notification-container.windows-chrome {
-    width: 21rem !important;
-  }
-  .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: 20.375rem !important;
-    height: 4.875rem !important;
-  }
-
-  .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: 30rem !important;
-    height: 4.875rem !important;
-  }
-
-  .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: 30rem !important;
-    min-height: 4.875rem !important;
-  }
-
-  // iOS notifications (mobile width)
-  .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: 20.375rem !important;
-    height: 4.875rem !important;
-  }
-
-  .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;
-  }
-
-  // iPadOS notifications (tablet width)
-  .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: 30rem !important;
-    height: 4.875rem !important;
-  }
-
-  .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;
-  }
-}
-