@openlettermarketing/olc-react-sdk 2.1.7 → 2.1.8

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

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