@openlettermarketing/olc-react-sdk 2.1.4 → 2.1.5-beta.2

package/src/components/CreateTemplate/V2/styles.scss

@@ -0,0 +1,372 @@
+.create-template-container{
+    padding: 0 40px;
+    position: relative;
+
+    @media (max-width: 1400px){
+        margin-bottom: 120px;
+    }
+    
+    .create-template-content-container{
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        gap: 32px;
+        height: calc(100vh - 10px);
+        
+        @media (max-width: 890px) {
+            flex-wrap: wrap;
+            height: auto;
+        }
+
+        .product-selection-container{
+            width: 612px;
+
+            @media (max-width: 1400px){
+                width: 50%;
+            }
+            
+            @media (max-width: 1000px){
+                width: 100%;
+            }
+            .products-container {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 12px;
+                margin-bottom: 32px;
+
+                @media (max-width: 700px) {
+                    width: 100%;
+                }
+                
+                .product-card {
+                    display: flex;
+                    align-items: center;
+                    justify-content: flex-start;
+                    padding: 20px;
+                    gap: 16px;
+                    width: 100%;
+                    max-width: 300px;
+                    height: 84px;
+                    border-radius: 8px;
+                    border: 0.5px solid var(--border-color);
+                    box-shadow: 2px 2px 4px 0px #0000000A;
+                    transition: all 0.2s ease-in-out;
+
+                    @media (max-width: 1400px) {
+                        max-width: 100%;
+                    }
+
+                    @media (max-width: 890px) {
+                        flex: 0 0 290px;
+                    }
+                    
+                    @media (max-width: 700px) {
+                        flex: 0 0 100%;
+                    }
+        
+                    &:hover, &.active {
+                        border-color: var(--primary-color);
+                        background-color: var(--primary-color-hover);
+                        cursor: pointer;
+                    }
+                    
+                    img {
+                        width: 44px;
+                        height: 44px;
+                        object-fit: contain;
+                    }
+                }
+            }
+            
+            .size-selection-container {
+                margin-top: 24px;
+                
+                // Typography styling for "Postcard Size" label
+                > div:first-child {
+                    margin-bottom: 16px;
+                }
+                
+                .radio-buttons-container {
+                    display: flex;
+                    align-items: center;
+                    gap: 32px;
+                    flex-wrap: wrap;
+                    
+                    .radio-button-wrapper {
+                        display: flex;
+                        align-items: center;
+                        gap: 8px;
+                        cursor: pointer;
+                        user-select: none;
+                        transition: all 0.2s ease-in-out;
+                        
+                        // Hide the default radio input
+                        .radio-input {
+                            position: absolute;
+                            opacity: 0;
+                            cursor: pointer;
+                            height: 0;
+                            width: 0;
+                        }
+                        
+                        // Custom radio button
+                        .radio-button {
+                            position: relative;
+                            width: 16px;
+                            height: 16px;
+                            border: 1px solid #9CA3AF;
+                            border-radius: 50%;
+                            background-color: #ffffff;
+                            transition: all 0.2s ease-in-out;
+                            flex-shrink: 0;
+                            
+                            // Inner circle when selected
+                            &::after {
+                                content: '';
+                                position: absolute;
+                                top: 50%;
+                                left: 50%;
+                                transform: translate(-50%, -50%) scale(0);
+                                width: 6px;
+                                height: 6px;
+                                border-radius: 50%;
+                                background-color: var(--notification-text-color);
+                                transition: transform 0.2s ease-in-out;
+                            }
+                        }
+                        
+                        // Typography for the label
+                        div {
+                            margin: 0;
+                            font-weight: 400;
+                            color: var(--text-color, #1F2937);
+                            transition: color 0.2s ease-in-out;
+                        }
+                        
+                        // Hover state
+                        // &:hover {
+                        //     .radio-button {
+                        //         border-color: var(--primary-color, #FF6B35);
+                        //         box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
+                        //     }
+                        // }
+                        
+                        // Selected state
+                        &.selected {
+                            .radio-button {
+                                border-color: var(--primary-color);
+                                background-color: #ffffff;
+                                border: 5px solid var(--primary-color);
+                                
+                                &::after {
+                                    transform: translate(-50%, -50%) scale(1);
+                                }
+                            }
+                            
+                            div {
+                                color: var(--primary-color);
+                                font-weight: 500;
+                            }
+                        }
+                        
+                        // Focus state for accessibility
+                        .radio-input:focus + .radio-button {
+                            outline: none;
+                        }
+                        
+                        // Active state
+                        &:active .radio-button {
+                            transform: scale(0.95);
+                        }
+                    }
+                }
+            }
+        }
+
+
+        .product-thumbnail-container{
+
+            @media (max-width: 1400px){
+                width: 50%;
+            }
+            
+            @media (max-width: 1000px){
+                width: 100%;
+            }
+            .product-thumbnail-card{
+                border: 0.5px solid var(--border-color);
+                padding: 28px;
+                border-radius: 8px;
+
+                // Slider Styles
+                .thumbail-slider{
+
+                    .thumbail-slider-image{
+                        position: relative;
+                        height: 586px;
+                        width: 586px;
+
+                        @media (max-width: 1400px) {
+                            height: auto;
+                            width: 100%;
+                        }
+
+                        @media (max-width: 1000px){
+                            display: flex;
+                            justify-content: center;
+                            align-items: center;
+                        }
+
+                        .image-loader {
+                            display: flex;
+                            justify-content: center;
+                            align-items: center;
+                            width: 100%;
+                            height: 500px;
+
+                            @media (max-width: 1400px) {
+                                min-height: 400px;
+                            }
+                        }
+
+                        img{
+                            width: 100%;
+                            max-width: 586px;
+                            height: 100%;
+                            max-height: 586px;
+                            object-fit: contain;
+                            border-radius: 8px;
+                            transition: all 0.2s ease-in-out;
+                            animation: fadeIn 0.2s ease-in-out;
+
+                            &:focus{
+                                outline: none;
+                            }
+                        }
+                        .slider-arrow-left{
+                            position: absolute;
+                            cursor: pointer;
+                            left: 15px;
+                            top: 50%;
+                            transform: translateY(-50%);
+                            width: 40px;
+                            height: 40px;
+                            background-color: var(--notification-text-color);
+                            border-radius: 50%;
+                            box-shadow: 0px 4px 16px 0px #00000029;
+                            
+                            &.disabled {
+                                opacity: 0.5;
+                                cursor: not-allowed;
+                                pointer-events: none;
+                            }
+                        }
+                        .slider-arrow-right{
+                            position: absolute;
+                            cursor: pointer;
+                            right: 15px;
+                            top: 50%;
+                            transform: translateY(-50%);
+                            width: 40px;
+                            height: 40px;
+                            background-color: var(--notification-text-color);
+                            border-radius: 50%;
+                            box-shadow: 0px 4px 16px 0px #00000029;
+                            
+                            &.disabled {
+                                opacity: 0.5;
+                                cursor: not-allowed;
+                                pointer-events: none;
+                            }
+                        }
+                    }
+                }
+            }
+            .product-thumbnail-details{
+                display: flex;
+                column-gap: 24px;
+                margin-top: 17px;
+                width: 643px;
+                flex-wrap: wrap;
+                row-gap: 10px;
+
+                @media (max-width: 1400px){
+                    width: 500px;
+                    flex-wrap: wrap;
+                }
+
+
+
+                span{
+                    font-weight: 400;
+                }
+            }
+        }
+    }
+    
+    .buttons-container{
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-end;
+        gap: 12px;
+        margin-top: 24px;
+        border-top: 0.5px solid var(--border-color);
+        padding: 24px 40px;
+        background-color: #ffffff;
+
+        button{
+            width: 100%;
+            max-width: 157px;
+            height: 50px;
+            border-radius: 8px;
+            font-size: 16px;
+            font-weight: 600;
+            background-color: var(--primary-color);
+            color: var(--notification-text-color);
+            border: none;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            font-family: var(--font-family);
+            
+            &:disabled{
+                opacity: 0.5;
+                cursor: not-allowed;
+            }
+            
+            &:focus{
+                outline: none;
+            }
+
+            &:hover{
+                background-color: #DD5026;
+            }
+
+            &:last-child{
+                background-color: var(--secondary-color);
+                color: #000;
+                border: 0.5px solid var(--secondary-color);
+
+                &:hover{
+                    background-color: #fff;
+                    border: 0.5px solid #00000029;
+                }
+
+            }
+        }
+    }
+}
+
+
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}