Amal 17:11|24-04-2019

angular.json

@@ -29,6 +29,7 @@
                         "styles": [
                             "src/styles.scss",
                             "node_modules/bootstrap/dist/css/bootstrap.min.css",
+                            "node_modules/font-awesome/css/font-awesome.css",
                             "src/assets/css/responsive.scss",
                             "node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css",
                             "node_modules/ngx-bootstrap/datepicker/bs-datepicker.css"

package.json

@@ -28,14 +28,17 @@
     "angular-wizard-form": "^0.4.1",
     "bootstrap": "^4.1.3",
     "core-js": "^2.5.4",
+    "font-awesome": "^4.7.0",
     "hammerjs": "^2.0.8",
-    "jquery": "^3.3.1",
+    "jquery": "^3.4.0",
     "malihu-custom-scrollbar-plugin": "^3.1.5",
     "mt-latlon": "^0.1.1",
     "ng2-archwizard": "^2.1.0",
     "ng2-file-upload": "^1.3.0",
+    "ng5-slider": "^1.1.14",
     "ngx-bootstrap": "^3.2.0",
     "ngx-carousel": "^1.3.5",
+    "ngx-gallery": "^5.9.1",
     "ngx-google-places-autocomplete": "^2.0.3",
     "ngx-malihu-scrollbar": "^7.0.0",
     "ngx-slick": "^0.2.1",
@@ -47,8 +50,8 @@
     "zone.js": "~0.8.26"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.13.6",
-    "@angular/cli": "~7.1.2",
+    "@angular-devkit/build-angular": "^0.13.8",
+    "@angular/cli": "^7.3.8",
     "@angular/compiler-cli": "^7.2.10",
     "@angular/language-service": "~7.1.0",
     "@types/googlemaps": "^3.30.16",

src/app/app.module.ts

@@ -3,7 +3,8 @@ import { NgModule } from '@angular/core';
 import { AppRoutingModule } from './app-routing.module';
 import { HttpClientModule } from '@angular/common/http';
 import { AppComponent } from './app.component';
-import { HomeModule} from './home/home.module';
+import { HomeModule } from './home/home.module';
+import { PurchaseModule } from './purchase/purchase.module';
 import { NavbarComponent } from './navbar/navbar.component';
 import { FooterComponent } from './footer/footer.component';
 import { ReactiveFormsModule } from '@angular/forms';
@@ -22,6 +23,7 @@ import { ForgotComponent } from './forgot/forgot.component';
     BrowserModule,
     AppRoutingModule,
     HomeModule,
+    PurchaseModule,
     ReactiveFormsModule,
     HttpClientModule,
     MalihuScrollbarModule.forRoot()

src/app/navbar/navbar.component.html

@@ -20,6 +20,16 @@
         <div class="collapse navbar-collapse" id="collapsibleNavbar">
             <ul class="navbar-nav ml-auto">
                 <li class="nav-item">
+                    <a class="nav-link" (click)="goToPage('index')">
+                        HOME
+                    </a>
+                </li>
+                <li class="nav-item">
+                        <a class="nav-link" (click)="goToPage('productlist')">
+                            PURCHASE
+                        </a>
+                    </li>
+                <li class="nav-item">
                     <a class="nav-link base_arrow dropdown">
                         <div class="dropdown-toggle" data-toggle="dropdown">
                             CAR OWNERS
@@ -76,8 +86,6 @@
 
 <!-- NAVBAR-ENDS -->
 
-
-
 <!-- SIGNUP-MODAL-STARTS-->
 
 <div class="modal" id="signup" style="z-index: 99999 !important;">

src/app/navbar/navbar.component.scss

@@ -2,6 +2,7 @@
     position: fixed;
     transition-duration: 1s;
     transition-timing-function: ease;
+    background: #2655bf;
     top: 0px;
     left: 0px;
     right: 0px;
@@ -35,7 +36,7 @@
                     background:url("../../assets/images/asset_down_white_arrow.png");
                     background-repeat: no-repeat;
                     background-position: right;
-                    background-size: 30px;
+                    background-size: 25px;
                     padding-right: 30px;
                     .dropdown-toggle::after{
                         display: none;

src/app/purchase/productdetails/productdetails.component.scss

+.purchase_wrapper{
+    .purchase_content_wrapper{
+        .product_gallery{
+            background: #ffff;
+            padding:20px;
+            .product_gallery_inner{
+            }
+        }
+        .product_details{
+            background: #ffff;
+            padding:30px;
+            margin-bottom:20px;
+            h1{
+                margin: 0px;
+                padding:0px;
+                font-size: 20px;
+            }
+            h2{
+                margin: 0px;
+                padding:0px;
+                color: #92a1b1;
+                font-size: 16px;
+                padding-top:5px;
+                
+            }
+            h3{
+               color: #000000;
+               font-weight: 600;
+               padding-top:10px;
+               padding-bottom: 0px;
+               margin: 0px;
+            }
+            h4{
+                margin: 0px;
+                padding:0px;
+                color: #000000;
+                font-size: 16px;
+                padding-top: 30px;
+                font-weight: 600;
+                padding-bottom: 15px;
+            }
+
+            p{
+                margin: 0px;
+                padding: 0px;
+                color: #92a1b1;
+                font-size: 13px;
+            }
+            .row{
+                padding-bottom: 10px;    
+            }
+            h6{
+                margin: 0px;
+                padding: 0px; 
+                font-size: 13px; 
+                color: #000000;
+            }
+            .rate_review{
+                ul{
+                    margin:0px;
+                    padding: 0px;
+                    li{
+                        list-style: none;
+                        border-bottom: 1px solid #eeeeee;
+                        padding-top: 15px;
+                        padding-bottom: 15px;
+                    }
+                }
+            }
+            .counter_wrapper{
+               .count_btn{
+                display: inline-block;
+                width:40px;
+                height:40px;
+                color: #2655bf;
+                border:1px solid #d0d0d0;
+                background: transparent;
+                cursor: pointer;
+                text-align: center;
+                border-radius: 50%;
+                margin:5px;
+                font-size:25px;
+                padding:0px;
+               } 
+               .counter_value{
+                display: inline-block;
+                width:40px;
+                height:40px;
+                border:1px solid #2655bf;
+                background: transparent;
+                cursor: pointer;
+                text-align: center;
+                border-radius: 50%;
+                margin:5px;
+                font-size: 20px;
+                padding: 4px;
+               }
+            }
+            .btn_bay{
+                padding-top: 30px;
+
+                .btn{  
+                    border-radius: 0px;
+                    height:45px;
+                    padding-left:5%;
+                    padding-right:5%;
+                    margin-right: 20px;
+                    &:focus{
+                        outline: none !important;
+                    }
+                    &:hover{
+                        outline: none !important; 
+                    }
+                }
+               .btn_cart{
+                background: #fef160;
+                color: #000000;
+                border:none;
+                
+                
+               } 
+               .btn_buy{
+                background: #2655bf;
+                color:#fff;
+                border:none;
+               }    
+            }
+            ul{
+                margin:0px;
+                padding-left: 20px;
+                li{
+                    color: #464646;
+                    font-weight:300;
+                }
+            }
+            .rating_div{
+                .rating { 
+                    border: none;
+                    float: left;
+                  }
+                  
+                  .rating > input { display: none; } 
+                  .rating > label:before { 
+                    margin: 2px;
+                    font-size: 24px;
+                    font-family: FontAwesome;
+                    display: inline-block;
+                    content: "\f005";
+                  }
+                  
+                  .rating > .half:before { 
+                    content: "\f089";
+                    position: absolute;
+                  }
+                  
+                  .rating > label { 
+                    color: #ddd; 
+                   float: right; 
+                   margin:0px;
+                  }
+                  
+                  /***** CSS Magic to Highlight Stars on Hover *****/
+                  
+                  .rating > input:checked ~ label, /* show gold star when clicked */
+                  .rating:not(:checked) > label:hover, /* hover current star */
+                  .rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */
+                  
+                  .rating > input:checked + label:hover, /* hover current star when changing rating */
+                  .rating > input:checked ~ label:hover,
+                  .rating > label:hover ~ input:checked ~ label, /* lighten current selection */
+                  .rating > input:checked ~ label:hover ~ label { color: #FFED85;  } 
+            }
+            .big_rating_div{
+                .rating { 
+                    border: none;
+                    float: left;
+                  }
+                  
+                  .rating > input { display: none; } 
+                  .rating > label:before { 
+                    margin: 7px;
+                    font-size: 40px;
+                    font-family: FontAwesome;
+                    display: inline-block;
+                    content: "\f005";
+                  }
+                  
+                  .rating > .half:before { 
+                    content: "\f089";
+                    position: absolute;
+                  }
+                  
+                  .rating > label { 
+                    color: #ddd; 
+                   float: right; 
+                   margin:0px;
+                  }
+                  
+                  /***** CSS Magic to Highlight Stars on Hover *****/
+                  
+                  .rating > input:checked ~ label, /* show gold star when clicked */
+                  .rating:not(:checked) > label:hover, /* hover current star */
+                  .rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */
+                  
+                  .rating > input:checked + label:hover, /* hover current star when changing rating */
+                  .rating > input:checked ~ label:hover,
+                  .rating > label:hover ~ input:checked ~ label, /* lighten current selection */
+                  .rating > input:checked ~ label:hover ~ label { color: #FFED85;  } 
+            }
+
+            .feed_rating{
+                float: right;
+                .rating { 
+                    border: none;
+                    float: left;
+                  }
+                  
+                  .rating > input { display: none; } 
+                  .rating > label:before { 
+                    margin:3px;
+                    font-size:18px;
+                    font-family: FontAwesome;
+                    display: inline-block;
+                    content: "\f005";
+                  }
+                  
+                  .rating > .half:before { 
+                    content: "\f089";
+                    position: absolute;
+                  }
+                  
+                  .rating > label { 
+                    color: #ddd; 
+                   float: right; 
+                   margin:0px;
+                  }
+                  
+                  /***** CSS Magic to Highlight Stars on Hover *****/
+                  
+                  .rating > input:checked ~ label, /* show gold star when clicked */
+                  .rating:not(:checked) > label:hover, /* hover current star */
+                  .rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */
+                  
+                  .rating > input:checked + label:hover, /* hover current star when changing rating */
+                  .rating > input:checked ~ label:hover,
+                  .rating > label:hover ~ input:checked ~ label, /* lighten current selection */
+                  .rating > input:checked ~ label:hover ~ label { color: #FFED85;  } 
+            }
+        }
+    }
+}
\ No newline at end of file

src/app/purchase/productdetails/productdetails.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProductdetailsComponent } from './productdetails.component';
+
+describe('ProductdetailsComponent', () => {
+  let component: ProductdetailsComponent;
+  let fixture: ComponentFixture<ProductdetailsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ProductdetailsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProductdetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/purchase/productdetails/productdetails.component.ts

+import { Component, OnInit } from '@angular/core';
+import { Router,ActivatedRoute } from '@angular/router';
+import { NgxGalleryOptions, NgxGalleryImage, NgxGalleryAnimation } from 'ngx-gallery';
+import * as $ from 'jquery';
+
+@Component({
+  selector: 'app-productdetails',
+  templateUrl: './productdetails.component.html',
+  styleUrls: ['./productdetails.component.scss']
+})
+export class ProductdetailsComponent implements OnInit {
+  count:any;
+  constructor(
+    private router        : Router, 
+    private route         : ActivatedRoute
+  ) {
+    this.count = 0;
+   }
+
+
+
+add(){
+  this.count = this.count + 1;
+}
+
+minus(){
+  this.count = this.count - 1;
+  if(this.count < 0){
+    this.count = 0;
+  }
+}
+
+
+ galleryOptions: NgxGalleryOptions[];
+    galleryImages: NgxGalleryImage[];
+
+    ngOnInit(): void {
+      
+        this.galleryOptions = [
+            {
+                width: '100%',
+                height: '570px',
+                thumbnailsColumns: 4,
+                imageAnimation: NgxGalleryAnimation.Slide
+            },
+            // max-width 800
+            {
+                breakpoint: 1440,
+                width: '100%',
+                height: '400px',
+                imagePercent: 80,
+                thumbnailsPercent: 20,
+                thumbnailsMargin: 20,
+                thumbnailMargin: 20
+            },
+            // max-width 400
+            {
+                breakpoint: 400,
+                preview: false
+            }
+        ];
+
+        this.galleryImages = [
+            {
+                small: 'assets/images/tyre_shot1.png',
+                medium: 'assets/images/tyre_shot1.png',
+                big: 'assets/images/tyre_shot1.png'
+            },
+            {
+              small: 'assets/images/tyre_shot2.png',
+              medium: 'assets/images/tyre_shot2.png',
+              big: 'assets/images/tyre_shot2.png'
+          },
+          {
+            small: 'assets/images/tyre_shot3.png',
+            medium: 'assets/images/tyre_shot3.png',
+            big: 'assets/images/tyre_shot3.png'
+        },
+        {
+          small: 'assets/images/tyre_shot4.png',
+          medium: 'assets/images/tyre_shot4.png',
+          big: 'assets/images/tyre_shot4.png'
+      }
+            
+        ];
+    }
+  goToPage(path,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+}

src/app/purchase/productlist/productlist.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProductlistComponent } from './productlist.component';
+
+describe('ProductlistComponent', () => {
+  let component: ProductlistComponent;
+  let fixture: ComponentFixture<ProductlistComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ProductlistComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProductlistComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/purchase/productlist/productlist.component.ts

+import { Component, OnInit } from '@angular/core';
+import { Router,ActivatedRoute } from '@angular/router';
+import { Options } from 'ng5-slider';
+
+@Component({
+  selector: 'app-productlist',
+  templateUrl: './productlist.component.html',
+  styleUrls: ['./productlist.component.scss']
+})
+export class ProductlistComponent implements OnInit {
+
+  constructor(
+    private router        : Router, 
+    private route         : ActivatedRoute
+  ) { }
+
+  value: number = 40;
+  highValue: number = 60;
+  options: Options = {
+    floor: 0,
+    ceil: 100
+  };
+
+  ngOnInit() {
+  }
+
+  goToPage(path,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+}

src/app/purchase/purchase.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ProductlistComponent } from './productlist/productlist.component';
+import { ProductdetailsComponent } from './productdetails/productdetails.component';
+import { moduleRouting } from './purchase.routing';
+import { SearchbarComponent } from './searchbar/searchbar.component';
+import { Ng5SliderModule } from 'ng5-slider';
+import { NgxGalleryModule } from 'ngx-gallery';
+
+
+@NgModule({
+  declarations: [ProductlistComponent, ProductdetailsComponent, SearchbarComponent],
+  imports: [
+    CommonModule,
+    moduleRouting,
+    Ng5SliderModule,
+    NgxGalleryModule
+  ]
+})
+export class PurchaseModule { }

src/app/purchase/purchase.routing.ts

+import { ModuleWithProviders } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { ProductlistComponent } from './productlist/productlist.component';
+import { ProductdetailsComponent } from './productdetails/productdetails.component';
+
+const ModuleRoutes: Routes = [
+    { path: 'productlist', component: ProductlistComponent},
+    { path: 'productdetails', component: ProductdetailsComponent}
+];
+
+export const moduleRouting: ModuleWithProviders = RouterModule.forChild(ModuleRoutes)
+

src/app/purchase/searchbar/searchbar.component.html

+<div class="purchase_taskbar">
+  <div class="purchase_searchbar">
+    <div class="purchase_inner_search_bar">
+      <input class="" type="text" placeholder="Search here">
+      <button class="search_btn">Search</button>
+      <div class="clear"></div>
+    </div>
+  </div>
+  <div class="purchase_other">
+    <ul>
+      <li>
+          <img src="assets/images/asset_location.png">
+          Orlando, USA
+      </li>
+      <li>
+          <img src="assets/images/asset_cart.png">
+          My Order
+      </li>
+      <li>
+          <img src="assets/images/asset_order.png">
+          My Cart
+      </li>
+    </ul>
+  </div>
+  <div class="clear"></div>
+</div>

src/app/purchase/searchbar/searchbar.component.scss

+.purchase_taskbar{
+    width:100%;
+    padding-top: 30px;
+    padding-bottom: 30px;
+    .purchase_searchbar{
+        width:calc(100% - 35%);
+        float: left;
+        
+        .purchase_inner_search_bar{
+            background: #ffffff;
+            border-radius: 30px;
+
+            input{
+                width: calc(100% - 120px);
+                float: left;
+                height: 45px;
+                border:none;
+                border-radius: 30px;
+                padding-left:30px;
+                font-size: 18px;
+                font-weight: 300;
+                &:focus{
+                    outline: none;
+                }
+                &::placeholder{
+                    color: #cad2db;
+                }
+
+            }
+            .search_btn{
+                width:120px;
+                float: right;
+                height: 45px;
+                border-radius: 30px;
+                background: #2655bf;
+                color: #ffffff;
+                border:none;
+                &:focus{
+                    outline: none;
+                }
+            }
+
+        }
+    }
+    .purchase_other{
+        width: 35%;
+        float: right;
+        padding: 10px;
+        ul
+        {
+            margin:0px;
+            padding:0px;
+            text-align: right;
+            li{
+                padding-left: 10%;
+                display: inline-block;
+                text-align: right;
+                img{
+                    margin-right: 10px;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file

src/app/purchase/searchbar/searchbar.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SearchbarComponent } from './searchbar.component';
+
+describe('SearchbarComponent', () => {
+  let component: SearchbarComponent;
+  let fixture: ComponentFixture<SearchbarComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SearchbarComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SearchbarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/purchase/searchbar/searchbar.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-searchbar',
+  templateUrl: './searchbar.component.html',
+  styleUrls: ['./searchbar.component.scss']
+})
+export class SearchbarComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/assets/css/responsive.scss

@@ -36,6 +36,38 @@
 /* 01. Smartphones (portrait and landscape) ----------- */
 
 @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
+
+    .purchase_filter_section{
+        width: 100% !important;
+    }
+    .purchase_content_section{
+        width:100% !important;
+        height: auto !important;
+        .search_listing_content{
+            ul{
+                li{
+                    width:100% !important;
+                }
+            }
+        }
+    }
+    .purchase_taskbar{
+        .purchase_searchbar{
+            width:100% !important;
+        }
+        .purchase_other{
+            width:100% !important;
+            ul{
+                li{
+                    width:100% !important;
+                    text-align: left !important;
+                }
+            }
+        }
+    }
+    .purchase_wrapper .container-fluid {
+        max-width: calc(100% - 1%);
+    }
     .navbar {
         padding: 20px;
         background: #2655bf !important;
@@ -214,7 +246,9 @@
 
 /* 07.0 Desktops and laptops ----------- */
 
-@media only screen and (min-width: 1000px) and (max-device-width: 1280px) {
+	/* LOW RESOLUTION ----------- */
+
+    @media only screen and (min-width: 900px) and (max-device-width: 1249px) {
         .login_modal_content {
             top: 0px !important;
         }
@@ -230,7 +264,103 @@
         .service_check p {
             height: 100px;
         }
-}
+
+        .purchase_wrapper{
+            .purchase_content_wrapper{
+                .purchase_content_section{
+                    .search_listing_content{
+                        ul{
+                            li {
+                                list-style: none;
+                                padding: 10px;
+                                width: calc(100% - 67%);
+                                display: inline-block;
+                            }
+                            
+                        }
+            
+                    } 
+                }  
+            }
+        } 
+    }
+
+    @media only screen and (min-width: 1250px) and (max-device-width: 1359px) {
+        .login_modal_content {
+            top: 0px !important;
+        }
+        .how_it_works h4 {
+            height: 70px;
+        }
+        .how_it_works p {
+            height: 100px;
+        }
+        .service_check h4 {
+            height: 70px;
+        }
+        .service_check p {
+            height: 100px;
+        }
+        .purchase_wrapper{
+            .purchase_content_wrapper{
+                .purchase_content_section{
+                    .search_listing_content{
+                        ul{
+                            li {
+                                list-style: none;
+                                padding: 10px;
+                                width: calc(100% - 67%) !important;
+                                display: inline-block;
+                            }
+                            
+                        }
+            
+                    } 
+                }  
+            }
+        }
+    }
+    @media only screen and (min-width: 1360px) and (max-device-width: 1399px) {
+        .purchase_wrapper{
+            .purchase_content_wrapper{
+                .purchase_content_section{
+                    .search_listing_content{
+                        ul{
+                            li {
+                                list-style: none;
+                                padding: 10px;
+                                width: calc(100% - 67%) !important;
+                                display: inline-block;
+                            }
+                            
+                        }
+            
+                    } 
+                }  
+            }
+        }
+    }
+    @media only screen and (min-width: 1400px) and (max-device-width: 1600px) {
+        .purchase_wrapper{
+            .purchase_content_wrapper{
+                .purchase_content_section{
+                    .search_listing_content{
+                        ul{
+                            li {
+                                list-style: none;
+                                padding: 10px;
+                                width: calc(100% - 75%) !important;
+                                display: inline-block;
+                            }
+                            
+                        }
+            
+                    } 
+                }  
+            }
+        }
+    }
+
 
 
 /* 08.0 Large screens ----------- */

src/styles.scss

@@ -31,6 +31,7 @@
 --------------------------------*/
 
 @import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i');
+@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
 * {
     font-family: 'Lato', sans-serif;
     -webkit-font-smoothing: antialiased;
@@ -80,6 +81,13 @@ body {
     font-family: 'Lato', sans-serif !important;
 }
 
+.purchase_wrapper{
+    padding-top:85px;
+    background: #f1f3f6;
+    .container-fluid {
+        max-width: calc(100% - 15%);
+    }
+}
 
 
 .modal-full {
@@ -201,6 +209,10 @@ body {
     background-color: rgba(243, 243, 243, 0.6) !important;
 }
 
+.backgroundNone{
+    background: none !important;
+}
+
 .primary_background {
     background: #D94350;
 }
@@ -691,3 +703,62 @@ bs-datepicker-container{
       }
   }
 
+  .purchase_filter_section{
+    .ng5-slider{
+        .ng5-slider-bar{
+            height:2px !important;
+        }
+        .ng5-slider-selection{
+            background: #2655bf;
+        }
+        .ng5-slider-pointer{
+            width:20px;
+            height:20px;
+            top:-10px;
+            background: #2655bf;
+            &:focus{
+                outline: none;
+            }
+            &:after {
+                content: '';
+                width: 8px;
+                height: 8px;
+                position: absolute;
+                top:9px;
+                left:9px;
+                border-radius: 4px;
+                background: #2655bf !important;
+            }
+        }
+    }
+    span{
+        color: #92a1b1;
+    }
+  }
+
+  .product_gallery_inner{
+    ngx-gallery{
+        ngx-gallery-image{
+            border:1px solid #eeeeee;
+            .ngx-gallery-image-wrapper{
+                .ngx-gallery-image{
+                    background-size: 90% !important;
+                    z-index: 99 !important;
+                }
+            }
+        }
+        ngx-gallery-thumbnails{
+            .ngx-gallery-thumbnails-wrapper{
+                .ngx-gallery-thumbnail{
+                    background-size: 90% !important; 
+                    border:1px solid #eeeeee;
+                }
+                .ngx-gallery-active{
+                    border:1px solid #2655bf !important;
+                }
+            }
+        }
+    }
+  }
+
+