Default page

View File Name : _header8.scss

.type_8{
    .header-top{height: 36px; background-color:#444;
    .header-top-left{overflow: hidden; height: 36px;
        .welcome-msg {margin-top: 6px; height: 24px; overflow: hidden; 
            .label-msg {margin: 0;display: inline-block;position: relative;color: #fff; font-weight: normal;    
                background: #e67e22; padding: 0 10px;border-radius: 2px; line-height: 20px;  
            }
            a {display: inline-block;margin: 0;padding: 0 6px; color: #bababa;}
            .list-msg .label-msg, .list-msg a{ font-size: 12px;} 
        }
    }
    .header-top-right{text-align:$right;}
    
    }
    .header-center{   padding: 39px 0 31px; background: url("#{$base-url-theme}icons/bg-header.jpg") repeat top $left;
        .phone-contact{ margin-top: 6px ;background: url("#{$base-url-theme}icons/hot-line-icon-2.png") no-repeat $left top; 
            float: $left; text-align: $left; padding-#{$left}: 30px;
            h2{ font-weight: bold; margin-bottom: 2px;font-size: 100%;margin: 0;color: #666; text-transform: uppercase;display: inline-block; }
            p{margin: 0;display: inline-block;}
        }
        .navbar-logo { text-align: center; }
    }
    .header-bottom{ 
        text-align: center;
        background: url("#{$base-url-theme}icons/bg-header.jpg") repeat bottom $left;
        box-shadow: 0 4px 2px -2px rgba(192,192,192,0.6);
        position: relative;
        .header-bottom-inner {
            .header_search,
            .header-bottom-menu{ padding: 0; }
        }
    }
    &.navbar-compact{
        .header-top{display: none;}
        .header-bottom{display: none;}
        .header-center{padding: 10px 0;}
    }
    #main-content,#content{margin-bottom: 30px;}
    .header-top-right {display: inline-block;
        ul.top-link{list-style: none;margin:0; vertical-align:top;
            > li{padding: 0; display: inline-block; position: relative; list-style: outside none none; border-#{$left}: 1px solid rgba(255, 255, 255, 0.1); 
               &.currency{ border-#{$right}: 1px solid rgba(255, 255, 255, 0.1); }
                > a {display: block; padding: 0 13px; position: relative; height: 36px; line-height: 36px; color: #bababa; font-size: 12px;
                    &:before{font-family: 'FontAwesome'; margin-#{$right}: 7px;}
                        span.fa-angle-down{position: relative; #{$left}: 5px;}
                }
                a.btn{
                    display: block; padding: 0 13px; position: relative; height: 36px; line-height: 36px; color: #bababa; font-size: 12px;
                    &:hover{
                        color: $linkColor;
                    }
                }
                &.account > a:before{content: "\f007";} 
                &.wishlist{
                    a:before{content: "\f004"; }
                }
                &.checkout{
                    a:before{content: "\f045";}
                }

                &:hover{
                    > a{color: $linkColor;}
                }
                ul.dropdown-link{position: absolute; background: #fff; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);  opacity: 0; padding: 0px 10px; 
                    top: 33px;  transition:top 0.3s ease 0s, opacity 0.3s ease 0s; width: 200px; z-index: -1; text-align: $left; #{$left}: 0;
                    li{display: block; border-#{$left}: 0;
                    a{display: block; padding: 5px 0 4px; border-bottom: solid 1px #efefef; font-size: 11px; line-height: 18px; color: $textBody;border-#{$right}: 0;
                        &:hover{color: $linkColor;}
                        &:after{display: none;}
                    }
                    
                    &:last-child a{border-bottom: 0;}
                    }
                }
                &.account:hover  {
                    ul.dropdown-link {top: 34px; z-index: 9999; opacity: 1; border-top: 1px solid rgba(200, 199, 199, 0.3);}
                }
                .btn-group .btn-link{ color: #bababa; }
            }
        }
    }
    #sosearchpro.so-search{margin: 0; width: 100%;  padding: 0; 
        &.open{
            .dropdown-menu{
                opacity: 1!important;
                top: 100%;
            }
        }
        .bt-search{
            border: none;
            width: 35px;
            height: 35px;
            line-height: 35px;
            text-align: center;
            color: #fff;
            background: $background;
        }
        .search.input-group{
            position: relative;
            width: 250px;
            @media (min-width: 991px){
                width: 400px;
            }
        }
        .select_category{
            width: 120px;
            border-width: 0 1px 0 1px;
            border-style: solid;
            border-color: #ddd; 
            display: inline-block;  
            position: absolute;
            height: 35px;
            padding: 0 ;  
            #{$right}: 40px; 

            select{ height: 35px; line-height: 35px; padding: 0 15px;
                border: none;
                float: $left;
                width: 100%;
                background-color: transparent;
                background-image: none;
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
                &:focus{border: 0;}
                &:after{ display: none; }
            }
                
        }
        .autosearch-input{
            border: 0; 
            height: 35px; 
            line-height: 35px;
            width: 240px;
            background: transparent;
            padding-#{$left}: 20px;  
        }
        .button-search{background: transparent; border: 0;font-size: 16px; height: 35px; padding: 0; min-width: 40px; position: relative;
            i{color: $linkColor; font-size: 16px;}
                &:hover i{color: darken($linkColor, 10%);}
        }
        .input-group-btn {
            position: absolute;
            white-space: nowrap;
            display: inline-block;
            top: 0;
            display: block;
            #{$right}: 35px;
        }
        .dropdown-menu-search{
            padding: 0;
            margin: 0;
            overflow: visible;
            background: #fff;
            border: 4px solid #ccc;
            display: block;
            opacity: 0;
            width: auto;
            top: 140%;
            @include transition(all .3s ease 0s);
            #{$right}: 0;
            #{$left}: auto;
            .dropdown-menu{ width: 400px; top: 40px!important }
            .media:hover{background: #fdfbfb}
            .media-left{
                height: 70px;
                margin: 6px 10px;
                width: 70px;
            }
            .media-body{
                a{font-size: 14px;font-weight: bold;float: none;color: #666;&:hover{color: $linkColor;}}
                .price span.price{font-size: 14px;}
            }
        }
        .icon-select:after{content: "\f0d7";background-color: transparent; position: absolute; line-height: 30px; font-family: "FontAwesome"; width: 20px;  top: 2px; #{$right}: 10px; color: #444;}
    }
    .shopping_cart{
        .btn-shopping-cart{
            display: block;font-size: 13px; cursor: pointer;width: auto; padding: 0;
            .shopcart{
                width: 35px;
                height: 35px;
                line-height: 35px;
                position: relative;
                background: $background1;
                display: inline-block;
                text-align: center;
                margin-#{$left}: 15px;
            }
            .text-shopping-cart-home5,
            .text-shopping-cart{ display: none; }
            a.top_cart{color: #fff;
                .text-shopping-cart-mobi{ display: block!important; }
                .shopcart .text-shopping-cart-mobi{color: #fff; i{font-size: 14px;}}
                .shopcart .total-shopping-cart{
                    position: absolute;
                    padding: 0px;
                    color: #fff;
                    font-size: 12px;
                    text-transform: uppercase;
                    font-weight: bold;
                    margin: 0;
                    width: 22px;
                    height: 22px;
                    text-align: center;
                    background: #e67e22;
                    line-height: 22px;
                    border-radius: 100%;
                    top: -11px;
                    overflow: hidden;
                    #{$right}: -11px;
                }
                
                &:hover{
                    color: $linkColor;
                }
            }                     
        } 
        .dropdown-menu{margin: 5px 0; top: 40px; #{$right}: 0; #{$left}: auto;}
        .shoppingcart-box:before{right: 5px;}
    }

    /*MENU MEGA*/
    .megamenu-style-dev{ border-top: 1px solid rgba(0, 0, 0, 0.1);   padding: 12px 0;
        .navbar-default{ background: transparent; }
        .horizontal{
            ul.megamenu > li.active > a, ul.megamenu > li.home > a, ul.megamenu > li:hover > a{ background: #222; color: #fff; border-radius: 3px; }
            ul.megamenu > li > a{
                color: #222; font-size: 13px; height: auto; padding: 0px 15px; line-height: 28px;
                text-transform: uppercase; text-shadow: none;  font-weight: bold; @include transition(all .3s ease 0s);
                strong{ font-weight: bold;  }
            }
            ul.megamenu > li {  margin: 0; float: none; display: inline-block; text-align: $left;
                &.buy_color{ display: none; }
            }
        }
    }
}