OwlCyberSecurity - MANAGER

Edit File: woo-floating-bar.scss

/*------------------------------------------------------------------
Woo Floating Bar
-------------------------------------------------------------------*/

// Opacity
@mixin opacity($args) {
    -moz-opacity: $args;
    -webkit-opacity: $args;
    opacity: $args;
}

// Transition
@mixin transition($args) {
    -webkit-transition: $args;
    -moz-transition: $args;
    -ms-transition: $args;
    -o-transition: $args;
    transition: $args;
}

// Display Flex
@mixin display() {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

// Flex Wrap
@mixin flex-wrap($args) {
    -ms-flex-wrap: $args;
    -webkit-flex-wrap: $args;
    flex-wrap: $args;
}

// Align Items
@mixin align-items($args) {
    -webkit-align-items: $args;
    align-items: $args;
}

.owp-floating-bar {
    position: fixed;
    top: 0;
    background-color: #2c2c2c;
    width: 100%;
    height: 0;
    z-index: 9999;
    @include opacity(0);
    visibility: hidden;
    @include transition(all 0.3s);

&.show {
        height: 66px;
        @include opacity(1);
        visibility: visible;
    }

.container {
        @include display();
        @include flex-wrap(wrap);
        @include align-items(center);
        height: 66px;
    }

.left,
    .right {
        width: 50%;
    }

.right {
        text-align: right;
    }

p.selected {
        display: inline-block;
        margin-bottom: 0;
        margin-right: 12px;
        color: #fff;
        font-size: 16px;
        font-weight: 600;
    }

h2.entry-title {
        display: inline-block;
        color: #fff;
        font-size: 16px;
        font-weight: 300;
        margin: 0;
        padding: 0;
        border: 0;
    }

.product_price {
        display: inline-block;

p {
            font-size: 16px;
            font-weight: 600;
            margin: 0 30px 0 0;
        }

del {
            @include opacity(0.7);
        }

del .amount,
        .amount {
            color: #fff;
        }
    }

form.cart {
        display: inline-block;

.quantity {
            margin: 5px 15px 0 0;

.minus,
            .plus {
                background-color: rgba(255, 255, 255, 0.1);
                color: #fff;
                font-size: 20px;
                border: 0;

&:hover {
                    background-color: rgba(255, 255, 255, 0.2);
                }
            }

.qty {
                background-color: rgba(255, 255, 255, 0.2);
                color: #fff;
                border: 0;
            }
        }
    }

button.button {
        background-color: #fff;
        color: #000;
        font-size: 14px;
        height: 46px;
        padding: 0 40px;

&:hover,
        &:focus {
            background-color: #f1f1f1;
        }
    }

.added_to_cart {
        display: none;
    }

.out-of-stock {
        display: inline-block;
        margin: 0;
        color: #fff;
        font-size: 16px;
        font-weight: 600;
    }
}

.boxed-layout .owp-floating-bar {
    width: 1280px;
    max-width: 100%;
}

/* Responsive */
@media screen and (max-width: 1024px) {
    body {
        margin-bottom: 45px;
    }

.owp-floating-bar {
        top: auto !important;
        bottom: 0;

&.show,
        .container {
            height: 45px;
        }

.left,
        .right {
            width: 50%;
        }

.right {
            text-align: right;
        }

form.cart {
            vertical-align: bottom;

.quantity {
                margin-top: 0;
            }
        }

button.button {
            height: 36px;
            padding: 0 30px;
        }
    }

#scroll-top {
        bottom: 50px;
    }
}

@media screen and (max-width: 1191px) {
    .owp-floating-bar {
        .left {
            display: none;
        }

.right {
            width: 100%;
            text-align: center;
        }
    }
}

@media screen and (max-width: 700px) {
    .owp-floating-bar .product_price {
        display: none;
    }
}

@media screen and (max-width: 339px) {
    [class*="owp-floating-bar"] [class*="quantity"] {
        display: none;
    }
}

@media screen and (max-width: 300px) {
    .owp-floating-bar {
        display: none;
    }

body {
        margin-bottom: 0px;
    }
}