@blinkpage/composer-tools 1.0.0

package/editor-components/e-commerce/e-commerce7/e-commerce7.module.scss

@@ -0,0 +1,688 @@
+@use "../../../composer-base-components/base/utitilities/viewports.module.scss" as *;
+.container{
+    position: relative;
+    .max-content{
+        display: flex;
+        gap: calc(var(--composer-gap-lg) * 2);        
+        .left-container{
+            display: flex;
+            gap: calc(var(--composer-gap-lg) * 2);
+            flex-direction: row;
+            width: 50%;
+            flex: 1;
+            height: 100%;
+            height: 600px;
+            .small-image-slider{
+                width: 150px;
+                .small-images-container, .small-images-container-mobile{
+                    height: 100%;
+                    > div {
+                        height: 600px !important;
+                        > div {
+                          > div {
+                            > div {
+                              display: block;
+                            }
+                          }
+                        }
+                      }
+          
+                    .small-image{
+                        position: relative;
+                        overflow: hidden;
+                        height: 100%;
+                        outline: none;
+                        aspect-ratio: 1 / 1;
+                        opacity: 0.5;
+                        
+                        &.active {
+                            opacity: 1;
+                        }
+                        
+                        .image{
+                            width: 100%;
+                            height: 100%;
+                            object-fit: cover;
+                            border-radius: var(--composer-border-radius-xs);
+                            aspect-ratio: 1 / 1 !important;
+                        }
+                        .overlay{
+                            position: absolute;
+                            background-color: var(--composer-font-color-secondary);
+                            opacity: 0.5;
+                            top: 0px;
+                            left: 0px;
+                            width: 100%;
+                            height: clac(100% - var(--composer-gap-sm));
+                            border-radius: var(--composer-border-radius-xs);
+                            &.selected-image{
+                                background-color: transparent;
+                            }
+                        }
+                    }
+    
+                }
+                .small-images-container-mobile{
+                    display: none;
+                }
+                .arrow-buttons{
+                    display: flex;
+                    gap: var(--composer-gap-md);
+                    padding-top: var(--composer-gap-md);
+                    .image-down-arrow, .image-up-arrow{
+                        flex: 1;
+                        border: 1px solid var(--composer-font-color-primary);
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        cursor: pointer;
+                        .icon{
+                            font-size: 2rem;
+                            color: var(--composer-font-color-primary);
+                            transform: translateY(2px);
+                        }
+                    }
+                }
+            }
+
+            .slider-parent{
+                flex: 1;
+                position: relative;
+                cursor:zoom-in;
+                overflow: hidden;
+                .slider-container{
+                    width: 100%;
+                    height: 100%;
+                    >div{
+                        height: 100% !important;
+                        >div{
+                            height: 100%;
+                            >div{
+                                >div{
+                                    height: 100%;
+                                }
+                            }
+                        }
+                    }
+                    .slider{
+                        height: 100%;
+                        .big-image-container{
+                            width: 100%;
+                            height: 100%;
+                            .big-image{
+                                height: 100%;
+                                width: 100%;
+                                object-fit: cover;
+                                border-radius: var(--composer-border-radius-xs);
+                            }
+                        }
+                    }
+
+
+                }
+                .image-icon-left, .image-icon-right{
+                    position: absolute;
+                    top: 50%;
+                    transform: translateY(-50%);
+                    z-index: 2;
+                    cursor: pointer;
+                    .icon{
+                        font-size: 3rem;
+                        color: var(--composer-html-background);
+                        opacity: 0.5;
+                        transition: all 0.5s ease;
+                    }
+                }
+                .image-icon-left{
+                    left: var(--composer-gap-sm);
+                    transition: all 0.5s ease;
+                    &:hover{
+                        left: var(--composer-gap-xs);
+                        .icon{
+                            opacity: 1;
+                        }
+                    }
+                }
+                .image-icon-right{
+                    right: var(--composer-gap-sm);
+                    transition: all 0.5s ease;
+                    &:hover{
+                        right: var(--composer-gap-xs);
+                        .icon{
+                            opacity: 1;
+                        }
+                    }
+                }
+            }
+
+        }
+        .right-container{
+            width: 50%;
+            flex: 1;
+            max-height: 100%;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+            gap: var(--composer-gap-md);
+            .divider{
+                width: 100%;
+                height: 1px;
+                background-color: var(--composer-tertiary-color);
+            }
+            .upper-container{
+                align-items: start;
+                .header{
+                    display: flex;
+                    width: 100%;
+                    .title{
+                        flex: 1;
+                        text-align: left;
+                        margin: 0;
+                    }
+                    .share-container{
+                        color: var(--composer-font-color-primary);
+                        position: relative;
+                        &.without-title{
+                            width: 100%;
+                            display: flex;
+                            justify-content: end;
+                        }
+                        &:hover{
+                            .socials {
+                                display: flex;
+                                opacity: 1;
+                            }
+                    
+                            .share-wrapper {
+                                opacity: 1;
+                    
+                                .title {
+                                    &::after {
+                                        width: 100%;
+                                    }
+                                }
+                            }
+                        }
+                        .share-wrapper{
+                            display: flex;
+                            gap: var(--composer-gap-sm);
+                            align-items: center;
+                            justify-content: center;
+                            opacity: 0.5;
+                            .share-icon{
+                                font-size: 2rem;
+                            }
+                            .title{
+                                position: relative;
+                                &::after{
+                                    content: "";
+                                    background-color: var(--composer-primary-color);
+                                    height: 1px;
+                                    width: 0;
+                                    position: absolute;
+                                    bottom: 0px;
+                                    left: 0px;
+                                    transition: all 0.5s ease;
+                                }
+                            }
+                        }
+
+                        .socials{
+                            display: none;
+                            flex-direction: column;
+                            gap: var(--composer-gap-md);
+                            border: 1px solid var(--composer-font-color-primary);
+                            padding: var(--composer-gap-md) var(--composer-gap-lg);
+                            position: absolute;
+                            top: 2rem;
+                            right: 0px;
+                            background-color: var(--composer-html-background);
+                            z-index: 2;
+                            margin: var(--composer-gap-xs) 0px;
+                            opacity: 0;
+                            transition: all 0.5s ease;
+                            .social{
+                                display: flex;
+                                align-items: center;
+                                gap: var(--composer-gap-sm);
+        
+                                .social-icon{
+                                    font-size: 1rem;
+                                    min-width: 1rem;
+                                    color: var(--composer-font-color-primary);
+                                }
+                                .social-text{
+                                    color: var(--composer-font-color-primary);
+                                    position: relative;
+                                    cursor: pointer;
+                                    &::after{
+                                        content: "";
+                                        background-color: var(--composer-primary-color);
+                                        height: 1px;
+                                        width: 0;
+                                        position: absolute;
+                                        bottom: 0px;
+                                        left: 0px;
+                                        transition: all 0.5s ease;
+                                    }
+                                    &:hover{
+                                        &::after{
+                                            width: 100%;
+                                        }
+                                    }
+                   
+                                }
+                            }
+                        }
+                    }
+
+                }
+                .cost{
+                    color: var(--composer-font-color-primary);
+                    display: flex;
+                    gap: var(--composer-gap-xs);
+                    .value, .currency-code{
+                        content: "";
+                    }
+                }
+            }
+            .size-container{
+                display: flex;
+                flex-direction: column;
+                gap: var(--composer-gap-sm);
+                .label{
+                    color: var(--composer-font-color-primary);
+                    text-align: left;
+                }
+                .size-selects{
+                    display: flex;
+                    gap: var(--composer-gap-md);
+                    .size-select{
+                        display: flex;
+                        color: var(--composer-font-color-primary);
+                        gap: var(--composer-gap-xs);
+                        position: relative;
+                        cursor: pointer;
+                        &::after{
+                            content: "";
+                            position: absolute;
+                            width: 0px;
+                            height: 1px;
+                            bottom: 0px;
+                            left: 0px;
+                            background-color: var(--composer-font-color-primary);
+                            transition: all 0.5s ease;
+                        }
+                        .size, .type{
+                            content: '';
+                        }
+
+                        &.active{
+                            &::after{
+                                width: 100%;
+                            }
+                        }
+                        &:hover{
+                            &::after{
+                                width: 100%;
+                            }
+                        }
+                    }
+                }
+            }
+            .count-container{
+                display: flex;
+                gap: var(--composer-gap-md);
+                .count{
+                    display: flex;
+                    color: var(--composer-font-color-primary);
+                    border: solid 1px var(--composer-font-color-primary);
+                    align-items: center;
+                    justify-content: center;
+                    flex: 1;
+                    .minus-icon, .add-icon{
+                        height: 100%; 
+                        position: relative; 
+                        width: 50%;
+                        .icon {
+                            position: absolute;
+                            top: 50%;
+                            transform: translateY(-50%);
+                            font-size: 1rem;
+                        }
+                    }
+                    .minus-icon{
+                        .icon{
+                            left: var(--composer-gap-sm);
+                        }
+                        
+                    }
+                    .add-icon{
+                        .icon{
+                            right: var(--composer-gap-sm);
+                        }   
+                    }
+                    .number{
+                        background-color: transparent;
+                        outline: none;
+                        color: var(--composer-font-color-primary);
+                        font-size: 1rem;
+                        text-align: center;
+                        border: none;
+                        width: 100%;
+                    }
+                }
+                .add-button{
+                    flex: 3;
+                    .button{
+                        width: 100%;
+                        justify-content: center;
+                        .button-text{
+                            text-align: center;
+                        }
+                    } 
+                }
+            }
+            .delivery-types{
+                display: flex;
+                flex-direction: column;
+                gap: var(--composer-gap-xs);
+                .delivery-type{
+                    display: flex;
+                    align-items: center;
+                    gap: var(--composer-gap-sm);
+                    .radio{
+                        display: block;
+                        appearance: auto;
+                        -webkit-appearance: auto;
+                        width: 16px;
+                        height: 16px;
+                        cursor: pointer;
+                        accent-color: var(--composer-primary-color) !important;
+                    }
+                    .delivery{
+                        color: var(--composer-font-color-primary);
+                        text-align: left;
+                    }
+                }
+            }
+            .item-detail-wrapper{
+                .item-detail-title{
+                    color: var(--composer-font-color-primary);
+                    position: relative;
+                    text-align: left;
+                    padding-bottom: var(--composer-gap-sm);
+                    &::after{
+                        content: "";
+                        position: absolute;
+                        bottom: 0;
+                        left: 0;
+                        width: 100%;
+                        height: 1px;
+                        background-color: var(--composer-tertiary-color);
+                        display: flex;
+                    }
+                }
+                .item-detail-container{
+                    .sections{
+                        display: flex;
+                        flex-direction: column;                   
+                        .section{
+                            color: var(--composer-font-color-primary);
+                            position: relative;
+                            padding: var(--composer-gap-sm) 0px;
+                            display: flex;
+                            flex-direction: column;
+                            .section-container{
+                                display: flex;
+                                align-items: center;
+                                gap: var(--composer-gap-sm);
+                                .section-title{
+                                    flex: 1;
+                                    text-align: left;
+                                }
+                                .icon{
+                                    font-size: 1.5rem;
+                                }
+                            }
+    
+                            .description{
+                                max-height: 0px;
+                                overflow: hidden;
+                                padding-top:0;
+                                transition: all 0.8s ease;
+                                .text{
+                                    margin-top: var(--composer-gap-sm);
+                                    text-align: left;
+                                }
+                                &.active{
+                                    max-height: 120px;
+                                    overflow: auto;
+                                }
+                            }
+                            &::after{
+                                content: "";
+                                position: absolute;
+                                bottom: 0;
+                                left: 0;
+                                width: 100%;
+                                height: 1px;
+                                background-color: var(--composer-tertiary-color);
+                                display: flex;
+                            }
+                        }
+                    }
+                }
+            }
+
+        }
+    }
+    .zoom-image{
+        .close-icon{
+            position: absolute;
+            top: var(--composer-gap-md);
+            right: var(--composer-gap-xl);
+            cursor: pointer;
+            &:hover {
+                .icon {
+                  transform: rotate(180deg);
+                }
+              }
+            .icon{
+                font-size: 3rem;
+                transition: transform 0.5s ease; 
+                color: white;
+            }
+        }
+        .left-icon, .right-icon{
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);   
+            .icon{
+                font-size: 3rem;
+                color: white;
+            }
+        }
+        .left-icon{
+            left:var(--composer-gap-md);
+            transition: all 0.5s ease;
+            &:hover{
+                left: var(--composer-gap-sm);
+            }
+        }
+        .right-icon{
+            right: var(--composer-gap-md);
+            transition: all 0.5s ease;
+            &:hover{
+                right: var(--composer-gap-sm);
+            }
+        }
+        .dots{
+            display: flex;
+            bottom: var(--composer-gap-md);
+            position: absolute;
+            .dot{
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                .icon{
+                    font-size: 1.5rem;
+                    margin: var(--composer-gap-sm);
+                    transition: all 0.5s ease;
+                    color: white;
+                    &.active{
+                        color: var(--composer-tertiary-color);
+                    }
+                }
+                &:hover{
+                    .icon{
+                        color: var(--composer-tertiary-color);
+                    }
+                }
+            }
+        }
+        .image{
+            height: 80%;
+            cursor:zoom-in;
+            overflow: hidden;
+            object-fit: cover;
+            &.zoom{
+                transform: scale(1.5);  
+            }
+        }
+    }
+}
+@container (max-width: #{$composer-tablet-width}) {
+    .container {
+      .max-content {
+        gap: var(--composer-gap-xl);
+        .left-container{
+            flex-direction: column-reverse;
+            gap: var(--composer-gap-md);
+            height: auto;
+            .small-image-slider{
+                width: 100%;
+                position: relative;
+                display: flex;
+                justify-content: center;
+                transform: none;
+                .small-images-container{
+                    display: none;
+                }
+                .small-images-container-mobile{
+                    display: flex;
+                    width: 85%;
+                    margin-left: calc(-1 * var(--composer-gap-md));
+                    > div {
+                        height: auto !important;
+                        > div {
+                          > div {
+                            padding-top: 0px;
+                            padding-bottom: 0px;
+                            padding-left: var(--composer-gap-md);
+                          }
+                        }
+                    }
+                }
+                .arrow-buttons{
+                    .image-down-arrow, .image-up-arrow{
+                        .icon{
+                            font-size: 1.5rem;
+                            transform: rotate(90deg);
+                            transform: translate(1px);
+                        }
+                    }
+                    .image-up-arrow{
+                        position: absolute;
+                        right: 0px;
+                        top: 0;
+                        height: 100%;
+                    }
+                    .image-down-arrow{
+                        position: absolute;
+                        left: 0px;
+                        top: 0;
+                        height: 100%;
+                    }
+                }
+            }
+ 
+        }
+        .right-container{
+            .upper-container {
+                .header {
+                    flex-direction: column;
+                    gap: var(--composer-gap-sm);
+                }
+            }
+            .count-container{
+                .add-button{
+                    flex: 2;
+                }
+            }
+        }
+      }
+    }
+}
+
+@container (max-width: #{$composer-phone-width}) {
+    .container {
+      .max-content {
+        flex-direction: column;
+        .left-container{
+            width: 100%;
+            height: 500px;
+            flex: auto;
+            .small-image-slider{
+                .small-images-container-mobile{
+                    display: flex;
+                    margin-left: calc(-1 * var(--composer-gap-xs));
+                    > div {
+                        > div {
+                          > div {
+                            padding-left: var(--composer-gap-xs);
+                            height: 100px;
+                          }
+                        }
+                    }
+                }
+
+            }
+        }
+        .right-container{
+            width: 100%;
+          .upper-container{
+            .header{
+              .share-container{
+                .share-wrapper{
+                  .share-icon{
+                    font-size: 1rem;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+      .zoom-image {
+          .close-icon {
+              right: var(--composer-gap-xs);
+              .icon{
+                font-size: 2rem;
+              }
+          }
+          
+          .image {
+              height: 40%;
+          }
+          
+          .left-icon {
+              left: var(--composer-gap-xs);
+          }
+          
+          .right-icon {
+              right: var(--composer-gap-xs);
+          }
+      }
+    }
+}