Your IP : 216.73.217.77

Current Path : /home/users/unlimited/www/foodbank.codeskitter.site/public/frontend/sass/4-layouts/
Upload File :
Current File : /home/users/unlimited/www/foodbank.codeskitter.site/public/frontend/sass/4-layouts/_shop-modal.scss

.shop-modal {
    .modal-dialog {
        width: 100%;
        max-width: 550px;
        margin: 30px auto;

        @include mobile-breakpoint {
            margin: 10px auto;
            padding: 0px 10px;
        }
    }

    .modal-content {
        border: none;
        display: block;
        overflow: hidden;
        border-radius: 16px;
    }
}

.shop-modal-header {
    position: relative;

    img {
        width: 100%;
    }

    button {
        position: absolute;
        cursor: pointer;
        top: 16px;
        right: 16px;
        font-size: 16px;
        @include center(32px, 32px, 50%);
        background-color: var(--white);
        color: var(--red);
        @include transition-linear;
        box-shadow: 0px 4px 16px rgba(126, 133, 142, 0.16);

        &:hover {
            color: var(--white);
            background-color: var(--red);
        }
    }
}

.shop-modal-meta {
    padding: 16px;

    h3 {
        @include font(22px, 700);
        text-transform: capitalize;
        margin-bottom: 10px;
    }

    h4 {
        @include font(12px, 400);
        color: var(--text);
        margin-bottom: 8px;
    }

    p {
        @include font(12px, 400);
        color: var(--text);
    }
}

.shop-modal {
    .nav-tabs {
        border-top: 1px solid var(--border-slate);
        border-bottom: 1px solid var(--border-slate);

        .nav-link {
            margin: 0px 16px;
            padding: 10px 0px;
            border-radius: 0px;
            @include font(14px, 500);
            text-transform: capitalize;
            position: relative;
            isolation: isolate;
            border: none;
            color: var(--text);

            &::after {
                content: '';
                position: absolute;
                bottom: 0px;
                left: 0px;
                width: 100%;
                height: 3px;
                border-top-left-radius: 5px;
                border-top-right-radius: 5px;
            }

            &.active {
                color: var(--heading);

                &::after {
                    background-color: var(--primary);
                }
            }
        }
    }
}

.shop-modal {
    .tab-pane {
        padding: 16px;
    }
}

.shop-modal-about {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 24px;

    ul {
        display: flex;
        flex-direction: column;
        gap: 24px;

        li {
            h3 {
                @include font(14px, 500);
                text-transform: capitalize;
                margin-bottom: 8px;
                line-height: 20px;
            }

            p {
                @include font(12px, 400);
            }
        }
    }

    img {
        width: 140px;
        flex-shrink: 0;
    }
}

.shop-modal-review {
    display: flex;
    flex-direction: column;
    gap: 16px;
    
    li {
        padding: 12px;
        border-radius: 8px;
        background-color: var(--white);
        border: 1px solid #EFF0F6;

        h3 {
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 5px;
            text-transform: capitalize;
        }

        dl {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
            gap: 12px;

            dt {
                display: flex;
                align-items: center;
                margin-bottom: 0px;
                gap: 3px;

                i {
                    font-size: 12px;
                    color: var(--yellow);
                }
            }

            dd {
                font-size: 12px;
                font-weight: 400;
                margin-bottom: 0px;
            }
        }

        p {
            font-size: 12px;
            font-weight: 300;
        }
    }
}