// NAVBARS .navbar { background: transparent; box-shadow: none !important; @media(max-width: 768px) { .col-md-5 { width: 25% !important; } .col-md-7 { width: 75% !important; } ul { position: absolute; li { &.cart_btn{ // position: absolute; // top: 45px; // left: 0px; @media(min-width: 320px) and (max-width: 480px){ // position: relative !important; // top: 0px !important; // left: 5px !important; } } &.download_app_btn { position: absolute; top: 45px; left: 5px; } } @media(max-width:768px){ position: relative !important; } @media(min-width:320px) and (max-width: 480px){ position: relative !important; } } } .top-bar { background: color('shades', 'white'); border-bottom: 1px solid rgba($text-color, 0.1); padding: 2px 5px 5px; margin: -8px -15px 10px; font-size: 0.8rem; color: $text-color; .login-info { text-align: center; // font-weight: 300; } .language-select { text-align: right; a { color: $secondary-color; vertical-align: middle; &:hover { color: $primary-color; } &.nl_img { background: url(../img/Flag_sprite.png) 0px 0px no-repeat; padding: 0px 5px 0px 22px; margin: 0 5px 0 0; } &.en_img { background: url(../img/Flag_sprite.png) 0px 0px no-repeat; padding: 0px 5px 0px 22px; } } } } .nav { margin-top: 7px; @media(max-width: 767px) { float: none; } .nav-item+.nav-item { margin-left: 0.2rem; @media(max-width: 568px) { margin-left: 0; } } li { @media(max-width: 1024px){ &.cart_btn{ // position: absolute !important; // top: 45px; // left: 45px; } } @media(max-width: 768px){ &.cart_btn{ // position: absolute !important; // top: 45px; // left: 5px; } } @media(min-width: 320px) and (max-width: 568px){ position: relative !important; top: 0px !important; left: 5px !important; } @media(max-width: 768px) { border-bottom: 1px solid rgba(color('shades', 'white'), .1); line-height: 20px; &:last-child { border-bottom: 0; } } a { color: #000; padding: 8px 16px; ; line-height: 18px; display: inline-block; font-size: 14px; @media(max-width: 1024px) { padding: 8px 16px; } @media(max-width:768px) { line-height: 18px; margin: 0px; padding: 8px 16px; } &.redeem, &.header-user-info { padding-right: 5px; } &:hover { background: rgba(color('shades', 'white'), .5); color: $secondary-color; border-radius: 4px; } @media (max-width:1025px) { padding: 0 4px; width: 100%; margin-top: 5px; // font-size: 0.7rem; font-size: 14px; } @media (max-width:768px) { font-size: 12px; } .material-icons { vertical-align: middle; color: #6a7070; &:hover { color: $text-color; } } .badge { font-size: 12px; padding: 0 6px 0; border-radius: 50%; border: 2px solid #f5f5f5; left: 23px; top: 0px; position: absolute; line-height: 16px; min-width: 18px; min-height: 18px; box-shadow: none; color: #fff; background: #e65019 !important; @extend .z-depth-1; @media (max-width: 768px) { left:17px; } &.deep-orange { background: #e65019; } } &.dropdown-item { color: $primary-color; padding: 5px 10px; text-transform: uppercase; font-size: 14px; line-height: 22px; &:hover { background: #e9e9e9 !important; border-radius: 2px; color: $secondary-color; } } &.header-notification { padding-left: 12px; padding-right: 12px; &::after { display: none; } } &:first-letter { text-transform: uppercase; } } &.active a { background: rgba(lighten($primary-color, 65%), .1); border-radius: 4px; font-weight: 300; // color: $link-hover-color; color: #e65019; @media(max-width: 768px) { line-height: 30px; margin: 0px; background: transparent; } } &.nav-item { position: relative; a { &.nav-link { @media (max-width: 1024px) { padding: 8px 16px !important; } @media (max-width:768px) { padding: 8px 12px !important; font-size: 14px; } } &.download_app{ background: #e65019; // height: 36px; border-radius: 2px; color: #fff; box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.1), 1px 1px 5px 0px rgba(0, 0, 0, 0.1); font-size: 12px; height: auto; &:hover{ background: #f1602b !important; } @media(max-width:1024px){ position: relative; /* margin: 0 0 0 10px; */ width: 132px; display: none; } @media(max-width:768px){ margin: 0 0 0 50px; width: 132px; position: relative; display: none; } @media(min-width: 320px) and (max-width: 560px){ display: none; } } } .dropdown.open a { background: rgba(lighten($primary-color, 55%), .1); border-radius: 2px; } .redeem-dropdown { padding: 0px; margin: 0; min-width: 120px; form { position: relative; } input { background-color: #eee; padding: 0 25px 0 5px; float: left; width: 100px; } button { border: 0; background: none; padding: 0 3px 0 0; position: absolute; float: right; margin: 0; top: 5px; right: 0; opacity: 0.5; .material-icons { font-size: 16px; } } } button{ &.cart-count{ background: #fff; border: 0; } .material-icons{ font-size: 30px; } span{ &.badge{ top: 0px; position: absolute; left: 22px; background-color: #e65019 !important; border-radius: 50%; height: 50%; width: 40%; color: #fff; } } } } .header-notification-dropdown { width: 300px; max-height: 300px; padding: 0; margin: 0; .notification-scroll { overflow-y: auto; max-height: 200px; &::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); } &::-webkit-scrollbar { width: 5px; } &::-webkit-scrollbar-thumb { background-color: lighten($secondary-color, 25%); border-radius: 5px; } } li { .notification_header { background: #FAFAFA; padding: 10px 15px; border-bottom: 1px solid rgba(0, 0, 0, 0.05); margin-bottom: 2px; h3 { font-size: 13px; margin: 0; } } .notification_desc { display: block; padding: 3px 15px; clear: both; font-weight: normal; text-transform: none; line-height: 1.42857143; color: #333; white-space: initial; p { margin: 0; font-size: 0.8rem; span { font-size: 11px; } } .btn.action { background: transparent; box-shadow: none; padding: 0px 5px; color: $secondary-color; margin: 0; font-size: 0.8rem; font-weight: 600; float: right; min-width: 35px; &:hover { color: lighten($primary-color, 35%); } } } .notification_bottom { background: lighten($secondary-color, 45%); padding: 4px 0; text-align: center; margin-top: 2px; } &:nth-child(odd) { background: lighten($primary-color, 72%); } &:hover { background: lighten($primary-color, 70%); } } } &.nav-item{ button{ &.cart-count{ background: #fff; border: 0; } .material-icons{ font-size: 30px; } } } } } .navbar-brand { background: url($brand-logo-path) 0px 0px no-repeat; width: 100%; height: 50px !important; background-size: contain !important; margin-right: 0; padding: 0px; @media (max-width: 330px) { width:180px; } } .navbar-toggler { float: right; &:focus { background-color: inherit; } } .breadcrumb { margin: 0; background-color: inherit; } &.navbar-dark { .breadcrumb { a { color: #fff; } .active { color: #90caf9; } } .navbar-toggler { color: #fff; } } &.navbar-light { .breadcrumb { a { color: #000; } .active { color: #757575; } } .navbar-toggler { color: #000; } } @media (max-width: 544px) { .navbar-toggleable-xs { .navbar-brand { float: none; } ul { float: none; clear: both; margin-top: 15px; padding: 8px 12px; border: 1px solid #c7c7c7; border-radius: 2px; // min-height: 400px; } ul li { float: none; a { &.nav-link { padding: 8px 16px !important; } &.cart-count { padding: 8px 16px !important; span { &.badge { left: 28px; } } } } } form { float: left; } .nav-item { margin-left: 0; } } form { .header-search-wrapper { width: 20rem; .search-input { width: 16rem; display: inline-block; } } } } @media (max-width: 768px) { .navbar-toggleable-sm { .navbar-brand { float: none; } ul { float: none; clear: both; } ul li { float: none; } form { float: left; padding-left: 4px; } .nav-item { margin-left: 0; } } .navbar-toggler { color: #e65019; } } ul{ &.nav{ li{ &.cart_btn{ @media(min-width:320px) and (max-width:568px){ position: relative !important; } } } } } .container-fluid{ .col-lg-3{ width: 15% !important; } .col-lg-9{ width: 85% !important; } @media(max-width: 1024px){ .col-lg-3{ width: 20% !important; margin-right: 25px; } .col-lg-9{ width: 72% !important; margin-top: -20px; } } @media(max-width: 768px){ .col-lg-3{ width: 20% !important; margin-right: 25px; } .col-lg-9{ width: 75% !important; margin-top: -20px; } } @media(min-width:320px) and (max-width: 560px){ .col-lg-9{ width: 100% !important; margin-top: 0; } } } @media(min-width:320px) and (max-width: 560px){ .navbar-toggler{ z-index: 10; position: relative; } } } @media only screen and (max-width: 992px) { .double-nav.navbar-fixed-top { position: relative; } } .ui-widget.ui-widget-content.ui-autocomplete { font-family: "Arial", sans-serif; font-size: 13px; border: 0px; box-shadow: 0px 7px 10px rgba($secondary-color, 0.4); border-radius: 0px; padding: 0 15px 15px; .ui-autocomplete-category { padding: 7px; font-weight: 300; border-bottom: 1px solid rgba($secondary-color, 0.5); } .ui-menu-item { padding: 5px 7px; border-bottom: 1px dotted rgba($secondary-color, 0.1); &:hover { outline: none; background: $primary-color; } .ui-menu-item-wrapper.ui-state-active { outline: none; background: $primary-color; border: 0; } } } .navbar { background: transparent; box-shadow: none !important; } @media (max-width: 768px) { .navbar .col-md-5 { width: 25% !important; } .navbar .col-md-7 { width: 75% !important; } .navbar ul { position: absolute; } .navbar ul li.download_app_btn { position: absolute !important; top: 45px; left: 5px; } } .navbar .top-bar { background: #FFFFFF; border-bottom: 1px solid rgba(37, 37, 37, 0.1); padding: 2px 5px 5px; margin: -8px -15px 10px; font-size: 0.8rem; color: #252525; } .navbar .top-bar .login-info { text-align: center; } .navbar .top-bar .language-select { text-align: right; } .navbar .top-bar .language-select a { color: #e65019; vertical-align: middle; } .navbar .top-bar .language-select a:hover { color: #e65019; } .navbar .top-bar .language-select a.nl_img { background: url(../img/Flag_sprite.png) 0px 0px no-repeat; padding: 0px 5px 0px 22px; margin: 0 5px 0 0; } .navbar .top-bar .language-select a.en_img { background: url(../img/Flag_sprite.png) 0px 0px no-repeat; padding: 0px 5px 0px 22px; } .navbar .nav { margin-top: 7px; } @media (max-width: 767px) { .navbar .nav { float: none; } } .navbar .nav .nav-item+.nav-item { margin-left: 0.2rem; } @media (max-width: 568px) { .navbar .nav .nav-item+.nav-item { margin-left: 0; } } @media (max-width: 768px) { .navbar .nav li { border-bottom: 1px solid rgba(255, 255, 255, 0.1); line-height: 20px; } .navbar .nav li:last-child { border-bottom: 0; } } .navbar .nav li a { color: #000; padding: 8px 16px; line-height: 18px; display: inline-block; font-size: 14px; } @media (max-width: 1024px) { .navbar .nav li a { padding: 8px 16px; } } @media (max-width: 768px) { .navbar .nav li a { line-height: 18px; margin: 0px; padding: 8px 16px; } } .navbar .nav li a.redeem, .navbar .nav li a.header-user-info { padding-right: 5px; } .navbar .nav li a:hover { background: rgba(255, 255, 255, 0.5); color: #e65019; border-radius: 4px; } @media (max-width: 1025px) { .navbar .nav li a { padding: 8px 16px; width: 100%; margin-top: 5px; font-size: 14px; } } @media (max-width: 768px) { .navbar .nav li a { font-size: 12px; } } .navbar .nav li a .material-icons { vertical-align: middle; color: #e65019; } .navbar .nav li a .material-icons:hover { color: #252525; } .navbar .nav li a .badge { font-size: 12px; padding: 0 6px 0; border-radius: 50%; border: 2px solid #f5f5f5; left: 23px; top: 0px; position: absolute; line-height: 16px; min-width: 18px; min-height: 18px; box-shadow: none; color: #fff; background: #e65019 !important; } @media (max-width: 768px) { .navbar .nav li a .badge { left: 17px; } } .navbar .nav li a .badge.deep-orange { background: #e65019; } .navbar .nav li a.dropdown-item { color: #e65019; padding: 5px 10px; text-transform: uppercase; font-size: 14px; line-height: 22px; } .navbar .nav li a.dropdown-item:hover { background: #e9e9e9 !important; border-radius: 2px; color: #e65019; } .navbar .nav li a.header-notification { padding-left: 12px; padding-right: 12px; } .navbar .nav li a.header-notification::after { display: none; } .navbar .nav li a:first-letter { text-transform: uppercase; } .navbar .nav li.active a { background: rgba(237, 251, 255, 0.1); border-radius: 4px; font-weight: 300; color: #e65019; } @media (max-width: 768px) { .navbar .nav li.active a { line-height: 30px; margin: 0px; background: transparent; } } .navbar .nav li.nav-item { position: relative; } .navbar .nav li.nav-item a { // background: #e65019; height: 36px; border-radius: 2px; font-weight: 300; // color: #fff; // box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.1), 1px 1px 5px 0px rgba(0, 0, 0, 0.1); } .navbar .nav li.nav-item a.download_app:hover { background: #e65019; } .navbar .nav li.nav-item a.download_app:focus { background: #e65019 !important; outline: #e65019; } .navbar .nav li.nav-item a.download_app.active { background: #e65019; } @media (max-width: 544px) { .navbar .nav li.nav-item a.download_app { text-align: center; display: none; } } @media (max-width: 1024px) { .navbar .nav li.nav-item a.nav-link { padding: 8px 16px !important; } } @media (max-width: 768px) { .navbar .nav li.nav-item a.nav-link { padding: 8px 10px !important; font-size: 14px; } } .navbar .nav li.nav-item .dropdown.open a { background: rgba(187, 238, 253, 0.1); border-radius: 2px; display: block; } .navbar .nav li.nav-item .redeem-dropdown { padding: 0px; margin: 0; min-width: 120px; } .navbar .nav li.nav-item .redeem-dropdown form { position: relative; } .navbar .nav li.nav-item .redeem-dropdown input { background-color: #eee; padding: 0 25px 0 5px; float: left; width: 100px; } .navbar .nav li.nav-item .redeem-dropdown button { border: 0; background: none; padding: 0 3px 0 0; position: absolute; float: right; margin: 0; top: 5px; right: 0; opacity: 0.5; } .navbar .nav li.nav-item .redeem-dropdown button .material-icons { font-size: 16px; } .navbar .nav li .header-notification-dropdown { width: 300px; max-height: 300px; padding: 0; margin: 0; } @media (max-width: 360px) { .navbar .nav li .header-notification-dropdown { width: 230px; } } @media (max-width: 320px) { .navbar .nav li .header-notification-dropdown { width: 200px; } } .navbar .nav li .header-notification-dropdown .notification-scroll { overflow-y: auto; max-height: 200px; } .navbar .nav li .header-notification-dropdown .notification-scroll::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); } .navbar .nav li .header-notification-dropdown .notification-scroll::-webkit-scrollbar { width: 5px; } .navbar .nav li .header-notification-dropdown .notification-scroll::-webkit-scrollbar-thumb { background-color: #66c6f2; border-radius: 5px; } .navbar .nav li .header-notification-dropdown li .notification_header { background: #FAFAFA; padding: 10px 15px; border-bottom: 1px solid rgba(0, 0, 0, 0.05); margin-bottom: 2px; } .navbar .nav li .header-notification-dropdown li .notification_header h3 { font-size: 13px; margin: 0; } @media (max-width: 1024px) { .navbar .nav li .header-notification-dropdown li .notification_header h3 { font-size: 12px; } } @media (max-width: 320px) { .navbar .nav li .header-notification-dropdown li .notification_header h3 { font-size: 12px; } } @media (max-width: 1024px) { .navbar .nav li .header-notification-dropdown li .notification_header { padding: 10px 5px; } } @media (max-width: 768px) { .navbar .nav li .header-notification-dropdown li .notification_header { padding: 10px 5px; } } @media (max-width: 320px) { .navbar .nav li .header-notification-dropdown li .notification_header { padding: 10px 5px; } } .navbar .nav li .header-notification-dropdown li .notification_desc { display: block; padding: 3px 15px; clear: both; font-weight: normal; text-transform: none; line-height: 1.42857143; color: #333; white-space: initial; } .navbar .nav li .header-notification-dropdown li .notification_desc p { margin: 0; font-size: 0.8rem; } .navbar .nav li .header-notification-dropdown li .notification_desc p span { font-size: 11px; } .navbar .nav li .header-notification-dropdown li .notification_desc .btn.action { background: transparent; box-shadow: none; padding: 0px 5px; color: #e65019; margin: 0; font-size: 0.8rem; font-weight: 600; float: right; min-width: 35px; } .navbar .nav li .header-notification-dropdown li .notification_desc .btn.action:hover { color: #58d6fb; } .navbar .nav li .header-notification-dropdown li .notification_bottom { background: #c4e9fa; padding: 4px 0; text-align: center; margin-top: 2px; } .navbar .nav li .header-notification-dropdown li:nth-child(odd) { background: white; } .navbar .nav li .header-notification-dropdown li:hover { background: white; } .navbar .navbar-brand { background: url("../spark/img/ipc_logo.png") 0px 0px no-repeat; width: 100%; height: 70px; background-size: contain !important; margin-right: 0; padding: 0px; } @media(max-width:1024px){ .navbar .navbar-brand{ width: 200px; top: 10px; } } @media(max-width:768px){ .navbar .navbar-brand{ width: 160px; top: 10px; } } @media (min-width: 320px) and (max-width:480px) { .navbar .navbar-brand { width: 200px; height: 40px; top: 12px; } } .navbar .navbar-toggler { float: right; } .navbar .navbar-toggler:focus { background-color: inherit; } .navbar .breadcrumb { margin: 0; background-color: inherit; } .navbar.navbar-dark .breadcrumb a { color: #fff; } .navbar.navbar-dark .breadcrumb .active { color: #90caf9; } .navbar.navbar-dark .navbar-toggler { color: #fff; } .navbar.navbar-light .breadcrumb a { color: #000; } .navbar.navbar-light .breadcrumb .active { color: #757575; } .navbar.navbar-light .navbar-toggler { color: #000; } @media (max-width: 544px) { .navbar .navbar-toggleable-xs .navbar-brand { float: none; } .navbar .navbar-toggleable-xs ul { float: none; clear: both; margin-top: 15px; padding: 8px 12px; border: 1px solid #c7c7c7; border-radius: 2px; } .navbar .navbar-toggleable-xs ul li { float: none; } .navbar .navbar-toggleable-xs ul li a.nav-link { padding: 8px 16px !important; } .navbar .navbar-toggleable-xs ul li a.cart-count { padding: 8px 16px !important; } .navbar .navbar-toggleable-xs ul li a.cart-count span.badge { left: 28px; } .navbar .navbar-toggleable-xs form { float: left; } .navbar .navbar-toggleable-xs .nav-item { margin-left: 0; } .navbar form .header-search-wrapper { width: 20rem; } .navbar form .header-search-wrapper .search-input { width: 16rem; display: inline-block; } } @media (max-width: 768px) { .navbar .navbar-toggleable-sm .navbar-brand { float: none; } .navbar .navbar-toggleable-sm ul { float: none; clear: both; } .navbar .navbar-toggleable-sm ul li { float: none; } .navbar .navbar-toggleable-sm form { float: left; padding-left: 4px; } .navbar .navbar-toggleable-sm .nav-item { margin-left: 0; } .navbar .navbar-toggler { color: #e65019; } } @media only screen and (max-width: 992px) { .double-nav.navbar-fixed-top { position: relative; } } .ui-widget.ui-widget-content.ui-autocomplete { font-family: "Arial", sans-serif; font-size: 13px; border: 0px; box-shadow: 0px 7px 10px rgba(17, 142, 200, 0.4); border-radius: 0px; padding: 0 15px 25px; } .ui-widget.ui-widget-content.ui-autocomplete .ui-autocomplete-category { padding: 7px; font-weight: 300; border-bottom: 1px solid rgba(17, 142, 200, 0.5); } .ui-widget.ui-widget-content.ui-autocomplete .ui-menu-item { padding: 5px 7px; border-bottom: 1px dotted rgba(17, 142, 200, 0.1); } .ui-widget.ui-widget-content.ui-autocomplete .ui-menu-item:hover { outline: none; background: #f1602b; } .ui-widget.ui-widget-content.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.ui-state-active { outline: none; background: #f1602b; border: 0; } .navbar-toggleable-xs{ ul{ &.nav{ li{ &.cart_btn{ @media(min-width: 320px) and (max-width: 568px){ position: relative !important; } } } } } }