tee3apps-cms-sdk-react 0.0.1

package/src/PageComponents/Visual-Components/tab.css

@@ -0,0 +1,697 @@
+.media-box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #f4f4f4;
+    overflow: hidden;
+  }
+  
+  .media-content {
+    height: 100%;
+    width: 100%;
+    object-fit: fill;
+  }
+  
+  /* Video specific styles */
+  video.media-content {
+    object-fit: cover;
+    background-color: #000;
+  }
+  
+  video.media-content::-webkit-media-controls {
+    background-color: rgba(0, 0, 0, 0.3);
+  }
+  
+  video.media-content::-webkit-media-controls-panel {
+    background-color: rgba(0, 0, 0, 0.3);
+  }
+   /* Base Card */
+ .product-card {
+     display: flex;
+     width: 100%;
+     height: 100%;
+     min-height: 200px;
+     background: #fff;
+     border-radius: 16px;
+     box-shadow: 0 6px 30px rgba(0, 0, 0, 0.06);
+     overflow: hidden;
+     transition: all 0.3s ease-in-out;
+     border: 1px solid #d1fae5;
+     flex-shrink: 0;
+   }
+   
+   .product-card:hover {
+     transform: translateY(-3px);
+     box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
+   }
+   
+   /* Image */
+   .product-image-container {
+     flex: 0 0 45%;
+     min-height: 200px;
+     padding: 20px;
+     display: flex;
+     align-items: center;
+     justify-content: center;
+     overflow: hidden;
+     flex-shrink: 0;
+   }
+   
+   .product-image {
+     width: 100%;
+     height: 100%;
+     object-fit: contain;
+     transition: transform 0.3s ease-in-out;
+     max-width: 100%;
+     max-height: 100%;
+   }
+   
+   .product-image:hover {
+     transform: scale(1.07);
+   }
+   
+   /* Details */
+   .product-details {
+     flex: 1;
+     padding: 20px;
+     display: flex;
+     flex-direction: column;
+     justify-content: flex-start;
+     overflow-y: auto;
+   }
+  
+  /* Header */
+  .product-header {
+    margin-bottom: 16px;
+  }
+  
+  .product-brand {
+    font-size: 13px;
+    font-weight: 700;
+    text-transform: uppercase;
+    margin-bottom: 6px;
+    letter-spacing: 0.5px;
+    color: #6b7280;
+  }
+  
+  .product-name {
+    font-size: 20px;
+    font-weight: 800;
+    color: #111827;
+    line-height: 1.3;
+    margin-bottom: 8px;
+  }
+  
+  .product-code {
+    font-size: 12px;
+    font-family: 'Courier New', monospace;
+    color: #6b7280;
+    margin-bottom: 0;
+  }
+  
+  /* Additional Details for 1x1 layout */
+  .product-description,
+  .product-manufacturer,
+  .product-category {
+    margin-bottom: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+  
+  .detail-label {
+    font-size: 11px;
+    color: #6b7280;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+  }
+  
+  .detail-value {
+    font-size: 13px;
+    color: #374151;
+    line-height: 1.4;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+  
+  /* Variant Tags */
+  .product-variants {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-bottom: 16px;
+  }
+  
+  .variant-tag {
+    color: #065f46;
+    border: 1px solid #212423;
+    padding: 6px 12px;
+    font-size: 12px;
+    font-weight: 600;
+    border-radius: 9999px;
+    text-transform: capitalize;
+    background-color: #f0f9ff;
+  }
+  
+  /* Pricing */
+  .product-pricing {
+    margin-bottom: 16px;
+  }
+  
+  .price-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex-wrap: wrap;
+  }
+  
+  .current-price {
+    font-size: 22px;
+    font-weight: 800;
+    color: #10b981;
+  }
+  
+  .original-price {
+    font-size: 16px;
+    color: #9ca3af;
+    text-decoration: line-through;
+  }
+  
+  .offer-badge {
+    background-color: #d1fae5;
+    color: #047857;
+    font-size: 12px;
+    font-weight: 700;
+    padding: 4px 8px;
+    border-radius: 999px;
+    border: 1px solid #6ee7b7;
+    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.2);
+  }
+  
+  /* Rating */
+  .product-rating {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 0;
+  }
+  
+  .stars {
+    display: flex;
+    gap: 2px;
+  }
+  
+  .star {
+    color: #fbbf24;
+    font-size: 16px;
+  }
+  
+  .star.empty {
+    color: #e5e7eb;
+  }
+  
+  .rating-text {
+    font-size: 13px;
+    color: #6b7280;
+  }
+  
+  /* Button (optional footer for CTA) */
+  .product-footer {
+    margin-top: 24px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-top: 1px solid #f3f4f6;
+    padding-top: 16px;
+  }
+
+   /* Layout-specific styles */
+   .product-card.carousel-mode {
+     flex-direction: row;
+     height: 100%;
+     min-height: 300px;
+     flex-shrink: 0;
+   }
+   
+   .product-card.carousel-mode .product-image-container {
+     flex: 0 0 50%;
+     min-height: 300px;
+     flex-shrink: 0;
+   }
+   
+   .product-card.carousel-mode .product-details {
+     flex: 1;
+     padding: 24px;
+     min-height: 300px;
+     display: flex;
+     flex-direction: column;
+     justify-content: flex-start;
+     overflow-y: auto;
+   }
+
+   /* Carousel mode specific spacing */
+   .product-card.carousel-mode .product-header {
+     margin-bottom: 20px;
+   }
+
+   .product-card.carousel-mode .product-variants {
+     margin-bottom: 20px;
+   }
+
+   .product-card.carousel-mode .product-pricing {
+     margin-bottom: 20px;
+   }
+
+   .product-card.carousel-mode .product-rating {
+     margin-bottom: 0;
+   }
+
+   /* 2x1 Layout (Horizontal compact) */
+   .product-card.layout-2x1 {
+     flex-direction: row;
+     height: 100%;
+     min-height: 140px;
+     cursor: pointer;
+     transition: all 0.3s ease;
+     flex-shrink: 0;
+   }
+   
+   .product-card.layout-2x1:hover {
+     transform: translateY(-2px);
+     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+   }
+   
+   .product-card.layout-2x1 .product-image-container {
+     flex: 0 0 42%;
+     min-height: 140px;
+     position: relative;
+     overflow: hidden;
+     flex-shrink: 0;
+     padding: 16px;
+     display: flex;
+     align-items: center;
+     justify-content: center;
+   }
+   
+   .product-card.layout-2x1 .product-details {
+     flex: 1;
+     min-height: 140px;
+     display: flex;
+     padding-left: 20px;
+     flex-direction: row;
+     justify-content: start;
+     align-items: center;
+     overflow: hidden;
+   }
+   
+   .product-card.layout-2x1 .product-header {
+     margin-bottom: 8px;
+   }
+   
+   .product-card.layout-2x1 .product-brand {
+     font-size: 11px;
+     color: #9ca3af;
+     margin-bottom: 3px;
+     font-weight: 600;
+   }
+   
+   .product-card.layout-2x1 .product-name {
+     font-size: 15px;
+     font-weight: 600;
+     margin-bottom: 4px;
+     line-height: 1.3;
+     display: -webkit-box;
+     -webkit-line-clamp: 2;
+     line-clamp: 2;
+     -webkit-box-orient: vertical;
+     overflow: hidden;
+     color: #111827;
+   }
+   
+   .product-card.layout-2x1 .product-code {
+     font-size: 10px;
+     color: #6b7280;
+     margin-bottom: 0;
+   }
+   
+   .product-card.layout-2x1 .product-pricing {
+     margin-bottom: 8px;
+   }
+   
+   .product-card.layout-2x1 .current-price {
+     font-size: 16px;
+     font-weight: 700;
+     color: #10b981;
+   }
+   
+   .product-card.layout-2x1 .original-price {
+     font-size: 13px;
+     color: #9ca3af;
+     text-decoration: line-through;
+   }
+   
+   .product-card.layout-2x1 .offer-badge {
+     font-size: 10px;
+     padding: 3px 7px;
+   }
+   
+   .product-card.layout-2x1 .product-rating {
+     margin-bottom: 0;
+     gap: 6px;
+   }
+   
+   .product-card.layout-2x1 .rating-text {
+     font-size: 11px;
+   }
+   
+   .product-card.layout-2x1 .stars {
+     gap: 2px;
+   }
+   
+   .product-card.layout-2x1 .star {
+     font-size: 13px;
+   }
+   
+   .product-card.layout-2x1 .product-variants {
+     display: none; /* Hide variants in 2x1 mode */
+   }
+   
+   .product-card.layout-2x1 .product-footer {
+     display: none; /* Hide footer in 2x1 mode */
+   }
+   
+   .product-card.grid-mode {
+     flex-direction: row;
+     height: 100%;
+     min-height: 120px;
+     cursor: pointer;
+     transition: all 0.3s ease;
+     flex-shrink: 0;
+   }
+   
+   .product-card.grid-mode:hover {
+     transform: translateY(-2px);
+     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+   }
+   
+   .product-card.grid-mode .product-image-container {
+     flex: 0 0 40%;
+     min-height: 120px;
+     position: relative;
+     overflow: hidden;
+     flex-shrink: 0;
+     padding: 12px;
+   }
+   
+   .product-card.grid-mode .product-details {
+     flex: 1;
+     padding: 16px;
+     min-height: 150px;
+     padding-top: 40px;
+     display: flex;
+     flex-direction: column;
+     justify-content: center;
+     overflow: hidden;
+   }
+   
+   .product-card.grid-mode .product-header {
+     margin-bottom: 1px;
+   }
+   
+   .product-card.grid-mode .product-name {
+     font-size: 14px;
+     font-weight: 600;
+     margin-bottom: 1px;
+     line-height: 1.2;
+     display: -webkit-box;
+     -webkit-line-clamp: 2;
+     line-clamp: 2;
+     -webkit-box-orient: vertical;
+     overflow: hidden;
+   }
+   
+   .product-card.grid-mode .product-code {
+     font-size: 10px;
+     color: #6b7280;
+     margin-bottom: 0;
+   }
+   
+   .product-card.grid-mode .product-brand {
+     font-size: 10px;
+     color: #9ca3af;
+     margin-bottom: 1px;
+   }
+   
+   .product-card.grid-mode .product-pricing {
+     margin-bottom: 1px;
+   }
+   
+   .product-card.grid-mode .current-price {
+     font-size: 14px;
+     font-weight: 700;
+     color: #10b981;
+   }
+   
+   .product-card.grid-mode .original-price {
+     font-size: 12px;
+     color: #9ca3af;
+     text-decoration: line-through;
+   }
+   
+   .product-card.grid-mode .offer-badge {
+     font-size: 10px;
+     padding: 2px 6px;
+   }
+   
+   .product-card.grid-mode .product-rating {
+     margin-bottom: 0;
+     gap: 6px;
+   }
+   
+   .product-card.grid-mode .rating-text {
+     font-size: 11px;
+   }
+   
+   .product-card.grid-mode .stars {
+     gap: 1px;
+   }
+   
+   .product-card.grid-mode .star {
+     font-size: 12px;
+   }
+   
+   .product-card.grid-mode .product-variants {
+     display: none; /* Hide variants in compact mode */
+   }
+   
+   .product-card.grid-mode .product-footer {
+     display: none; /* Hide footer in compact mode */
+   }
+
+   /* Responsive */
+   @media (max-width: 768px) {
+     .product-card.carousel-mode {
+       flex-direction: column;
+       min-height: 200px;
+     }
+   
+     .product-card.carousel-mode .product-image-container {
+       flex: 0 0 200px;
+       min-height: 200px;
+     }
+   
+     .product-card.carousel-mode .product-details {
+       padding: 16px;
+       min-height: auto;
+     }
+
+     .product-card.carousel-mode .product-header {
+       margin-bottom: 16px;
+     }
+
+     .product-card.carousel-mode .product-variants {
+       margin-bottom: 16px;
+     }
+
+     .product-card.carousel-mode .product-pricing {
+       margin-bottom: 16px;
+     }
+   
+     .product-card.carousel-mode .product-name {
+       font-size: 18px;
+     }
+   
+     .product-card.carousel-mode .current-price {
+       font-size: 18px;
+     }
+     
+     /* 2x1 Layout responsive */
+     .product-card.layout-2x1 {
+       min-height: 120px;
+     }
+     
+     .product-card.layout-2x1 .product-image-container {
+       flex: 0 0 38%;
+       min-height: 120px;
+       padding: 12px;
+     }
+     
+     .product-card.layout-2x1 .product-details {
+       padding: 12px 16px;
+       min-height: 120px;
+     }
+
+     .product-card.layout-2x1 .product-header {
+       margin-bottom: 6px;
+     }
+
+     .product-card.layout-2x1 .product-pricing {
+       margin-bottom: 6px;
+     }
+     
+     .product-card.layout-2x1 .product-name {
+       font-size: 14px;
+     }
+     
+     .product-card.layout-2x1 .current-price {
+       font-size: 14px;
+     }
+
+     /* Keep grid mode horizontal on mobile */
+     .product-card.grid-mode {
+       flex-direction: row;
+       min-height: 100px;
+     }
+     
+     .product-card.grid-mode .product-image-container {
+       flex: 0 0 35%;
+       min-height: 100px;
+       padding: 8px;
+     }
+     
+     .product-card.grid-mode .product-details {
+       padding: 12px;
+       min-height: 100px;
+     }
+
+     .product-card.grid-mode .product-header {
+       margin-bottom: 6px;
+     }
+
+     .product-card.grid-mode .product-pricing {
+       margin-bottom: 6px;
+     }
+     
+     .product-card.grid-mode .product-name {
+       font-size: 13px;
+     }
+     
+     .product-card.grid-mode .current-price {
+       font-size: 13px;
+     }
+   }
+   
+   @media (max-width: 480px) {
+     .product-card.carousel-mode {
+       min-height: 180px;
+     }
+     
+     .product-card.carousel-mode .product-image-container {
+       flex: 0 0 150px;
+       min-height: 150px;
+     }
+     
+     .product-card.carousel-mode .product-details {
+       padding: 12px;
+     }
+
+     .product-card.carousel-mode .product-header {
+       margin-bottom: 12px;
+     }
+
+     .product-card.carousel-mode .product-variants {
+       margin-bottom: 12px;
+     }
+
+     .product-card.carousel-mode .product-pricing {
+       margin-bottom: 12px;
+     }
+     
+     .product-card.carousel-mode .product-name {
+       font-size: 16px;
+     }
+     
+     .product-card.carousel-mode .current-price {
+       font-size: 16px;
+     }
+
+     /* 2x1 Layout on very small screens */
+     .product-card.layout-2x1 {
+       min-height: 100px;
+     }
+     
+     .product-card.layout-2x1 .product-image-container {
+       flex: 0 0 35%;
+       min-height: 100px;
+       padding: 8px;
+     }
+     
+     .product-card.layout-2x1 .product-details {
+       padding: 8px 12px;
+       min-height: 100px;
+     }
+
+     .product-card.layout-2x1 .product-header {
+       margin-bottom: 4px;
+     }
+
+     .product-card.layout-2x1 .product-pricing {
+       margin-bottom: 4px;
+     }
+     
+     .product-card.layout-2x1 .product-name {
+       font-size: 13px;
+     }
+     
+     .product-card.layout-2x1 .current-price {
+       font-size: 13px;
+     }
+     
+     /* Grid mode on very small screens */
+     .product-card.grid-mode {
+       min-height: 90px;
+     }
+     
+     .product-card.grid-mode .product-image-container {
+       flex: 0 0 32%;
+       min-height: 90px;
+       padding: 6px;
+     }
+     
+     .product-card.grid-mode .product-details {
+       padding: 8px;
+       min-height: 90px;
+     }
+
+     .product-card.grid-mode .product-header {
+       margin-bottom: 4px;
+     }
+
+     .product-card.grid-mode .product-pricing {
+       margin-bottom: 4px;
+     }
+     
+     .product-card.grid-mode .product-name {
+       font-size: 12px;
+     }
+     
+     .product-card.grid-mode .current-price {
+       font-size: 12px;
+     }
+   }