Skip to content

G
getme
Commit d879de5e by muhsin
Options

conflict fix

parents edb13016 5fb85ba7
Showing with 1103 additions and 1165 deletions
src/app/app.component.html
<ion-app> <ion-app>
<ion-split-pane> <ion-split-pane>
<ion-menu> <ion-menu>
<ion-content> <ion-content>
<div class="side_menu_wrapper"> <div class="side_menu_wrapper">
<ion-menu-toggle *ngIf="userData"> <ion-menu-toggle *ngIf="userData">
<div class="top_banner"> <div class="top_banner">
<div class="top_image"> <div class="top_image">
<img <img [src]="userData.profilePhoto" onerror="this.src='./../assets/asset_avatar.png'" />
[src]="userData.profilePhoto" </div>
onerror="this.src='./../assets/asset_avatar.png'" <div class="top_detail">
/> <h4>{{ userData.name }}</h4>
</div> <p>{{ userData.emailId }}</p>
<div class="top_detail"> </div>
<h4>{{ userData.name }}</h4> <div class="clear"></div>
<p>{{ userData.emailId }}</p> </div>
</div> </ion-menu-toggle>
<div class="clear"></div> <div class="sidemenu_list">
</div> <ul>
</ion-menu-toggle> <ion-menu-toggle (click)="hideTab()">
<div class="sidemenu_list"> <li (click)="vieworder('home')">Shop</li>
<ul> </ion-menu-toggle>
<ion-menu-toggle (click)="hideTab()"> <!-- <li>About us</li> -->
<li (click)="vieworder('home')">Shop</li> <ion-menu-toggle>
</ion-menu-toggle> <li (click)="vieworder('myorder')">View Order</li>
<!-- <li>About us</li> --> </ion-menu-toggle>
<ion-menu-toggle>
<li (click)="vieworder('myorder')">View Order</li>
</ion-menu-toggle>
<div class="sub_menu"> <div class="sub_menu">
<ul *ngIf="categoryService.activecategories"> <ul *ngIf="categoryService.activecategories">
<ion-menu-toggle> <ion-menu-toggle>
<li <li *ngFor="let category of categoryService.activecategories" (click)="goToPage('catstorelist', category)">
*ngFor="let category of categoryService.activecategories" {{ category.catName }}
(click)="goToPage('catstorelist', category)" </li>
> </ion-menu-toggle>
{{ category.catName }} <!-- <li>Women's Fashion</li>
</li>
</ion-menu-toggle>
<!-- <li>Women's Fashion</li>
<li>Features</li> <li>Features</li>
<li>Bags</li> <li>Bags</li>
<li>Shoes</li> <li>Shoes</li>
<li>Electronics</li> --> <li>Electronics</li> -->
</ul> </ul>
</div> </div>
<ion-menu-toggle> <ion-menu-toggle>
<li (click)="vieworder('feedback')">Complaints & Feedback</li> <li (click)="vieworder('feedback')">Complaints & Feedback</li>
</ion-menu-toggle> </ion-menu-toggle>
<li> <li>
<span class="floatLeft" (click)="authService.SignOut()" <span class="floatLeft" (click)="authService.SignOut()">Logout</span>
>Logout</span <span class="floatRight version">Version 0.1.0.2</span>
> <div class="clear"></div>
<span class="floatRight version">Version 0.1.0.2</span> </li>
<div class="clear"></div> </ul>
</li> </div>
</ul> </div>
</div> </ion-content>
</div> </ion-menu>
</ion-content> <ion-router-outlet main></ion-router-outlet>
</ion-menu> </ion-split-pane>
<ion-router-outlet main></ion-router-outlet>
</ion-split-pane>
</ion-app> </ion-app>
<div class="common_tab" [hidden]="fetchCase() === true" *ngIf="!isSearchOpen"> <div class="common_tab" [hidden]="fetchCase() === true" *ngIf="!isSearchOpen">
<ul> <ul>
<li (click)="goToPage('home')"> <li (click)="goToPage('home')">
<div <div class="icon_sec m1_icon" [class.m1_icon_act]="sec_active1" (click)="setActive1()"></div>
class="icon_sec m1_icon" </li>
[class.m1_icon_act]="sec_active1" <li (click)="goToPage('catagory')">
(click)="setActive1()" <div class="icon_sec m2_icon" [class.m2_icon_act]="sec_active2" (click)="setActive2()"></div>
></div> </li>
</li> <li (click)="searchModal()">
<li (click)="goToPage('catagory')"> <div class="icon_sec m3_icon" [class.m3_icon_act]="sec_active3" (click)="setActive3()"></div>
<div </li>
class="icon_sec m2_icon" <li (click)="goToPage('cart')">
[class.m2_icon_act]="sec_active2"
(click)="setActive2()"
></div>
</li>
<li (click)="searchModal()">
<div
class="icon_sec m3_icon"
[class.m3_icon_act]="sec_active3"
(click)="setActive3()"
></div>
</li>
<!-- <li (click)="goToPage('cart')">
<div class="icon_sec m4_icon" [class.m4_icon_act]="sec_active4" (click)="setActive4()"></div> <div class="icon_sec m4_icon" [class.m4_icon_act]="sec_active4" (click)="setActive4()"></div>
</li> --> </li>
<li (click)="goToPage('myorder')"> <li (click)="goToPage('myorder')">
<div <div class="icon_sec m5_icon" [class.m5_icon_act]="sec_active5" (click)="setActive5()"></div>
class="icon_sec m5_icon" </li>
[class.m5_icon_act]="sec_active5" <li (click)="goToPage('profile')">
(click)="setActive5()" <div class="icon_sec m6_icon" [class.m6_icon_act]="sec_active6" (click)="setActive6()" menuClose></div>
></div> </li>
</li> </ul>
<li (click)="goToPage('profile')"> </div>
<div \ No newline at end of file
class="icon_sec m6_icon"
[class.m6_icon_act]="sec_active6"
(click)="setActive6()"
menuClose
></div>
</li>
</ul>
</div>
src/app/app.component.scss
@import url('https://fonts.googleapis.com/css?family=Abel&display=swap'); @import url('https://fonts.googleapis.com/css?family=Abel&display=swap');
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css); @import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
* { * {
font-family: 'Abel', sans-serif; font-family: 'Abel', sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
.side_menu_wrapper { .side_menu_wrapper {
background: rgba(41, 40, 91, 1); background: rgba(41, 40, 91, 1);
width: 100%; width: 100%;
height: 100vh; height: 100vh;
padding-left: 20px; padding-left: 20px;
padding-top: 20px; padding-top: 20px;
padding-right: 10px; padding-right: 10px;
.top_banner { .top_banner {
.top_image { .top_image {
width: 60px; width: 60px;
height: 60px; height: 60px;
float: left; float: left;
border-radius: 50%; border-radius: 50%;
background-color: #fff; background-color: #fff;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
object-position: center; object-position: center;
border-radius: 50%; border-radius: 50%;
} }
} }
.top_detail { .top_detail {
width: calc(100% - 60px); width: calc(100% - 60px);
float: left; float: left;
padding: 7px; padding: 7px;
padding-left: 15px; padding-left: 15px;
h4 { h4 {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
color: #fff; color: #fff;
} }
p { p {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
color: #fff; color: #fff;
color: rgba(176, 174, 199, 1); color: rgba(176, 174, 199, 1);
} }
}
} }
}
} }
.sidemenu_list { .sidemenu_list {
padding-top: 30px; padding-top: 30px;
ul { ul {
margin: 0px;
padding: 0px;
li {
list-style: none;
color: #fff;
font-weight: 200;
font-size: 15px;
padding: 10px;
font-size: 16px;
&:focus {
background-color: rgba(40, 36, 88, 1);
}
&:hover {
background-color: rgba(40, 36, 88, 1);
}
.version {
color: rgba(176, 174, 199, 1);
font-size: 14px;
}
}
.sub_menu {
padding-left: 25px;
margin-bottom: 40px;
padding-top: 10px;
ul {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
li { li {
list-style: none; list-style: none;
color: rgba(176, 174, 199, 1); color: #fff;
font-weight: 200;
font-size: 15px;
padding: 10px;
font-size: 16px;
&:focus {
background-color: rgba(40, 36, 88, 1);
}
&:hover {
background-color: rgba(40, 36, 88, 1);
}
.version {
color: rgba(176, 174, 199, 1);
font-size: 14px;
}
}
.sub_menu {
padding-left: 25px;
margin-bottom: 40px;
padding-top: 10px;
ul {
margin: 0px;
padding: 0px;
li {
list-style: none;
color: rgba(176, 174, 199, 1);
}
}
} }
}
} }
}
} }
.common_tab { .common_tab {
position: fixed; position: fixed;
bottom: 0px; bottom: 0px;
left: 0px; left: 0px;
right: 0px; right: 0px;
width: 100%;
height: 50px;
background-color: #fff;
-webkit-box-shadow: 0px 0px 5px 7px rgba(215, 213, 228, 0.5);
-moz-box-shadow: 0px 0px 5px 7px rgba(215, 213, 228, 0.5);
box-shadow: 0px 0px 5px 7px rgba(215, 213, 228, 0.5);
ul {
margin: 0px;
padding: 0px;
width: 100%; width: 100%;
height: 100%; height: 50px;
li { background-color: #fff;
list-style: none; -webkit-box-shadow: 0px 0px 5px 7px rgba(215, 213, 228, 0.5);
display: inline-block; -moz-box-shadow: 0px 0px 5px 7px rgba(215, 213, 228, 0.5);
width: 20%; box-shadow: 0px 0px 5px 7px rgba(215, 213, 228, 0.5);
height: 100%; ul {
text-align: center; margin: 0px;
background-repeat: no-repeat; padding: 0px;
background-position: center; width: 100%;
background-size: 25px; height: 100%;
} display: flex;
.icon_sec { justify-content: space-between;
width: 50px; li {
height: 50px; list-style: none;
background-image: url('../assets/icon_sprite.png'); display: inline-block;
margin: 0 auto; height: 100%;
background-repeat: no-repeat; text-align: center;
background-size: 450px; background-repeat: no-repeat;
} background-position: center;
.m1_icon { background-size: 25px;
background-position: top -6px left -249px; }
} .icon_sec {
.m1_icon_act { width: 50px;
background-image: url('../assets/icon_sprite_active.png') !important; height: 50px;
background-position: top -6px left -249px; background-image: url('../assets/icon_sprite.png');
} margin: 0 auto;
.m2_icon { background-repeat: no-repeat;
background-position: top -3px left -88px; background-size: 450px;
} }
.m2_icon_act { .m1_icon {
background-image: url('../assets/icon_sprite_active.png') !important; background-position: top -6px left -249px;
background-position: top -3px left -88px; }
} .m1_icon_act {
.m3_icon { background-image: url('../assets/icon_sprite_active.png') !important;
background-position: top -6px left -167px; background-position: top -6px left -249px;
} }
.m3_icon_act { .m2_icon {
background-image: url('../assets/icon_sprite_active.png') !important; background-position: top -3px left -88px;
background-position: top -6px left -167px; }
} .m2_icon_act {
.m4_icon { background-image: url('../assets/icon_sprite_active.png') !important;
background-position: top -6px left -5px; background-position: top -3px left -88px;
} }
.m4_icon_act { .m3_icon {
background-image: url('../assets/icon_sprite_active.png') !important; background-position: top -6px left -167px;
background-position: top -6px left -5px; }
} .m3_icon_act {
.m5_icon { background-image: url('../assets/icon_sprite_active.png') !important;
background-position: top -6px left -325px; background-position: top -6px left -167px;
} }
.m5_icon_act { .m4_icon {
background-image: url('../assets/icon_sprite_active.png') !important; background-position: top -6px left -5px;
background-position: top -6px left -325px; }
} .m4_icon_act {
.m6_icon { background-image: url('../assets/icon_sprite_active.png') !important;
background-position: top -6px left -398px; background-position: top -6px left -5px;
} }
.m6_icon_act { .m5_icon {
background-image: url('../assets/icon_sprite_active.png') !important; background-position: top -6px left -325px;
background-position: top -6px left -398px; }
.m5_icon_act {
background-image: url('../assets/icon_sprite_active.png') !important;
background-position: top -6px left -325px;
}
.m6_icon {
background-position: top -6px left -398px;
}
.m6_icon_act {
background-image: url('../assets/icon_sprite_active.png') !important;
background-position: top -6px left -398px;
}
} }
} }
} \ No newline at end of file
src/app/home/home.page.html
<div class="nav_header"> <div class="nav_header">
<ion-menu-toggle> <ion-menu-toggle>
<button class="nav_btn nav_menu floatLeft"></button> <button class="nav_btn nav_menu floatLeft"></button>
</ion-menu-toggle> </ion-menu-toggle>
<div class="nav_title floatLeft relative"> <div class="nav_title floatLeft relative">
<!-- <input class="search_bar" placeholder="Search here.. eg:shirts, retailers etc..." (click)="clickSearch()" (input)="searchFun($event.target.value)" #searchText> --> <!-- <input class="search_bar" placeholder="Search here.. eg:shirts, retailers etc..." (click)="clickSearch()" (input)="searchFun($event.target.value)" #searchText> -->
<input <input class="search_bar" placeholder="Search here.. eg:shirts, retailers etc..." (click)="searchModal()" />
class="search_bar" </div>
placeholder="Search here.. eg:shirts, retailers etc..." <button class="nav_btn nav_search floatRight" *ngIf="!searchShow" (click)="searchModal()"></button>
(click)="searchModal()" <button class="nav_btn nav_close floatRight" *ngIf="searchShow" (click)="searchClose()"></button>
/> <div class="clear"></div>
</div>
<button
class="nav_btn nav_search floatRight"
*ngIf="!searchShow"
(click)="searchModal()"
></button>
<button
class="nav_btn nav_close floatRight"
*ngIf="searchShow"
(click)="searchClose()"
></button>
<div class="clear"></div>
</div> </div>
<ion-content> <ion-content>
<div class="home_wrapper"> <div class="home_wrapper">
<div class="home_banner"> <div class="home_banner">
<div class="home_banner_title"> <div class="home_banner_title">
<ion-row> <ion-row>
<ion-col class="textLeft"> <ion-col class="textLeft">
<img src="../assets/Group 11_2.png" /> <img src="../assets/Group 11_2.png" />
</ion-col> </ion-col>
<ion-col class="textRight"> <ion-col class="textRight">
<p class="floatRight" (click)="istoggle()">{{address}}</p> <p class="floatRight" (click)="istoggle()">{{address}}</p>
</ion-col> </ion-col>
</ion-row> </ion-row>
</div>
<ion-slides
pager="true"
*ngIf="centerService.centers && centerService.centers.length > 0"
>
<ion-slide *ngFor="let center of centerService.centers">
<div class="banner_slide" (click)="goToPage('storelist', center)">
<h5>{{center.centerName}}</h5>
<p>{{center.description}}</p>
</div>
<img
[src]="center.centerImg"
onerror="this.src='./../../assets/getmi_malls/mall_banner/mall_4.png'"
/>
</ion-slide>
</ion-slides>
</div>
<div class="home_sub_header">
Featured Stores
</div>
<div class="featured_slider">
<ion-slides
pager="false"
[options]="slideOpts"
*ngIf="shopperService.activeshoppers && shopperService.activeshoppers.length > 0"
>
<ion-slide *ngFor="let shopper of shopperService.activeshoppers">
<div
class="feature_product"
(click)="goToPage('productlist', shopper)"
>
<img
[src]="shopper.featuredImage"
onerror="this.src='./../../assets/getmi_malls/featured/featured1.png'"
/>
<div class="feature_overlay">
<h5>{{shopper.name}}</h5>
<p>{{shopper.caption}}</p>
</div> </div>
</div> <ion-slides pager="true" *ngIf="centerService.centers && centerService.centers.length > 0">
</ion-slide> <ion-slide *ngFor="let center of centerService.centers">
<!-- <ion-slide> <div class="banner_slide" (click)="goToPage('storelist', center)">
<h5>{{center.centerName}}</h5>
<p>{{center.description}}</p>
</div>
<img [src]="center.centerImg" onerror="this.src='./../../assets/getmi_malls/mall_banner/mall_4.png'" />
</ion-slide>
</ion-slides>
</div>
<div class="home_sub_header">
Featured Stores
</div>
<div class="featured_slider">
<ion-slides pager="false" [options]="slideOpts" *ngIf="shopperService.activeshoppers && shopperService.activeshoppers.length > 0">
<ion-slide *ngFor="let shopper of shopperService.activeshoppers">
<div class="feature_product" (click)="goToPage('productlist', shopper)">
<img [src]="shopper.featuredImage" onerror="this.src='./../../assets/getmi_malls/featured/featured1.png'" />
<div class="feature_overlay">
<h5>{{shopper.name}}</h5>
<p>{{shopper.caption}}</p>
</div>
</div>
</ion-slide>
<!-- <ion-slide>
<div class="feature_product" (click)="goToPage('productlist')"> <div class="feature_product" (click)="goToPage('productlist')">
<img src="../assets/videoblocks-woman-using-phone-purchase-in-cool-sunglasses-and-black-dress-holding-black-shopping-bag-isolated-on-dark-background-in-black-friday-holid@3x.png"> <img src="../assets/videoblocks-woman-using-phone-purchase-in-cool-sunglasses-and-black-dress-holding-black-shopping-bag-isolated-on-dark-background-in-black-friday-holid@3x.png">
<div class="feature_overlay"> <div class="feature_overlay">
...@@ -86,122 +58,85 @@ ...@@ -86,122 +58,85 @@
</div> </div>
</div> </div>
</ion-slide> --> </ion-slide> -->
</ion-slides> </ion-slides>
</div> </div>
<div class="home_sub_header"> <div class="home_sub_header">
<span class="floatLeft">Nearby Shopping Centers</span> <span class="floatLeft">Nearby Shopping Centers</span>
<span class="floatRight"> <span class="floatRight">
<div class="nearby_icon" (click)="goToPage('nearby')"></div> <div class="nearby_icon" (click)="goToPage('nearby')"></div>
</span> </span>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<div class="nearby_shop_list"> <div class="nearby_shop_list">
<ul <ul *ngIf="centerService.nearcenters && centerService.nearcenters.length > 0">
*ngIf="centerService.nearcenters && centerService.nearcenters.length > 0" <li *ngFor="let center of centerService.nearcenters" (click)="goToPage('storelist', center)">
> <div class="nearby_image">
<li <img [src]="center.centerImg" onerror="this.src='./../../assets/getmi_malls/mall_298/mall2.png'" />
*ngFor="let center of centerService.nearcenters" </div>
(click)="goToPage('storelist', center)" <div class="nearby_detail">
> <h5>
<div class="nearby_image"> <span class="floatLeft">{{center.centerName}}</span>
<img <span class="floatRight">0
[src]="center.centerImg"
onerror="this.src='./../../assets/getmi_malls/mall_298/mall2.png'"
/>
</div>
<div class="nearby_detail">
<h5>
<span class="floatLeft">{{center.centerName}}</span>
<span class="floatRight"
>0
<img src="../assets/Path61_2.png" /> <img src="../assets/Path61_2.png" />
</span> </span>
<div class="clear"></div> <div class="clear"></div>
</h5> </h5>
<p>{{center.description}}</p> <p>{{center.description}}</p>
</div> </div>
<div class="clear"></div> <div class="clear"></div>
</li> </li>
</ul> </ul>
</div> </div>
<div class="home_sub_header"> <div class="home_sub_header">
Featured Catagories Featured Catagories
</div> </div>
<div class="featured_catagory_list"> <div class="featured_catagory_list">
<ul <ul *ngIf="categoriesService.activecategories && categoriesService.activecategories.length > 0">
*ngIf="categoriesService.activecategories && categoriesService.activecategories.length > 0" <li *ngFor="let categories of categoriesService.activecategories" (click)="goToPage('catstorelist', categories)">
> <img [src]="categories.catImage" onerror="this.src='../assets/handsome-man-outdoors-drinking-coffee-with-sunglasses-guy-with-beard-instagram-effect_1212-818@3x.png'" />
<li <div class="featured_overlay">
*ngFor="let categories of categoriesService.activecategories" <h4>{{categories.catName}}</h4>
(click)="goToPage('catstorelist', categories)" </div>
> </li>
<img </ul>
[src]="categories.catImage" </div>
onerror="this.src='../assets/handsome-man-outdoors-drinking-coffee-with-sunglasses-guy-with-beard-instagram-effect_1212-818@3x.png'"
/>
<div class="featured_overlay">
<h4>{{categories.catName}}</h4>
</div>
</li>
</ul>
</div> </div>
</div>
</ion-content> </ion-content>
<div *ngIf="isShow" [@slideInOut]> <div *ngIf="isShow" [@slideInOut]>
<div class="nav_header"> <div class="nav_header">
<button class="nav_btn nav_back floatLeft" (click)="istoggle()"> <button class="nav_btn nav_back floatLeft" (click)="istoggle()">
<img src="../assets/Group17_2.png" /> <img src="../assets/Group17_2.png" />
</button> </button>
<div class="nav_title floatLeft"> <div class="nav_title floatLeft">
<h4>CHANGE LOCATION</h4> <h4>CHANGE LOCATION</h4>
</div> </div>
<div class="clear"></div>
</div>
<ion-content class="sort_wrappper">
<agm-map
[zoom]="20"
[latitude]="lat"
[longitude]="lng"
[disableDefaultUI]="false"
[zoomControl]="false"
[backgroundColor]="'rgba(29, 27, 130,0.2)'"
>
<agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>
<div class="add_address_wrapper">
<h5>
<span class="floatLeft">NEW ADDRESS</span>
<span class="floatRight" (click)="istoggle(); goToPage('nearby')"
>ADD NEW</span
>
<div class="clear"></div> <div class="clear"></div>
</h5>
<ul
*ngIf="addressService.addressList && addressService.addressList.length > 0"
>
<li *ngFor="let address of addressService.addressList; let i = index">
<div class="floatLeft">
{{address.default}}
<input
class="styled-checkbox"
name="addressId"
id="styled-checkbox-{{i}}"
type="radio"
(click)="setDefault(address.addressId)"
[value]="address.addressId"
#addressType
[checked]="address.defaultVal == 1"
/>
<label for="styled-checkbox-{{i}}"> {{address.addressType}} </label>
</div>
<div class="floatLeft">
<p>
{{address.building}}, {{address.landmark}}, {{address.address}}
</p>
</div>
<div class="clear"></div>
</li>
</ul>
</div> </div>
</ion-content> <ion-content class="sort_wrappper">
</div> <agm-map [zoom]="20" [latitude]="lat" [longitude]="lng" [disableDefaultUI]="false" [zoomControl]="false" [backgroundColor]="'rgba(29, 27, 130,0.2)'">
<agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>
<div class="add_address_wrapper">
<h5>
<span class="floatLeft">NEW ADDRESS</span>
<span class="floatRight" (click)="istoggle(); goToPage('nearby')">ADD NEW</span>
<div class="clear"></div>
</h5>
<ul class="address-ul" *ngIf="addressService.addressList && addressService.addressList.length > 0">
<li *ngFor="let address of addressService.addressList; let i = index">
<div class="floatLeft">
{{address.default}}
<input class="styled-checkbox" name="addressId" id="styled-checkbox-{{i}}" type="radio" (click)="setDefault(address.addressId)" [value]="address.addressId" #addressType [checked]="address.defaultVal == 1" />
<label for="styled-checkbox-{{i}}"> {{address.addressType}} </label>
</div>
<div class="floatLeft">
<p>
{{address.building}}, {{address.landmark}}, {{address.address}}
</p>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
</ion-content>
</div>
\ No newline at end of file
src/app/home/home.page.scss
.home_wrapper { .home_wrapper {
width: 100%;
padding-bottom: 50px;
.home_banner {
width: 100%; width: 100%;
height: 300px; padding-bottom: 50px;
padding-top: 80px; .home_banner {
position: relative;
background-color: #fff;
.home_banner_title {
padding: 10px;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
img {
width: 100px;
}
p {
margin: 0px;
text-align: right;
background-image: url('../../assets/Path 55_2.png');
background-position: left;
background-repeat: no-repeat;
background-size: 12px;
padding-left: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 150px;
}
}
ion-slides {
width: 100%;
height: 100%;
ion-slide {
width: 100%; width: 100%;
height: 100%; height: 300px;
padding-top: 80px;
position: relative; position: relative;
img { background-color: #fff;
width: 100%; .home_banner_title {
height: 100%; padding: 10px;
object-fit: cover; position: absolute;
top: 0px;
left: 0px;
right: 0px;
img {
width: 100px;
}
p {
margin: 0px;
text-align: right;
background-image: url('../../assets/Path 55_2.png');
background-position: left;
background-repeat: no-repeat;
background-size: 12px;
padding-left: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 150px;
}
} }
.banner_slide { ion-slides {
position: absolute; width: 100%;
top: 0px; height: 100%;
left: 0px; ion-slide {
right: 0px; width: 100%;
bottom: 0px; height: 100%;
-webkit-box-shadow: inset 0px -128px 63px -45px rgba(0, 0, 0, 0.75); position: relative;
-moz-box-shadow: inset 0px -128px 63px -45px rgba(0, 0, 0, 0.75); img {
box-shadow: inset 0px -128px 63px -45px rgba(0, 0, 0, 0.75); width: 100%;
padding-top: 160px; height: 100%;
padding-left: 20px; object-fit: cover;
padding-right: 20px; }
h5 { .banner_slide {
color: #fff; position: absolute;
margin: 0px; top: 0px;
padding: 0px; left: 0px;
text-align: left; right: 0px;
font-weight: bold; bottom: 0px;
letter-spacing: 2px; -webkit-box-shadow: inset 0px -128px 63px -45px rgba(0, 0, 0, 0.75);
padding-bottom: 5px; -moz-box-shadow: inset 0px -128px 63px -45px rgba(0, 0, 0, 0.75);
font-size: 14px; box-shadow: inset 0px -128px 63px -45px rgba(0, 0, 0, 0.75);
white-space: nowrap; padding-top: 160px;
overflow: hidden; padding-left: 20px;
text-overflow: ellipsis; padding-right: 20px;
} h5 {
p { color: #fff;
color: #fff; margin: 0px;
margin: 0px; padding: 0px;
padding: 0px; text-align: left;
text-align: left; font-weight: bold;
font-size: 20px; letter-spacing: 2px;
font-weight: lighter; padding-bottom: 5px;
white-space: nowrap; font-size: 14px;
overflow: hidden; white-space: nowrap;
text-overflow: ellipsis; overflow: hidden;
} text-overflow: ellipsis;
}
p {
color: #fff;
margin: 0px;
padding: 0px;
text-align: left;
font-size: 20px;
font-weight: lighter;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
} }
}
}
}
.home_sub_header {
padding: 10px;
padding-top: 20px;
padding-bottom: 20px;
color: rgba(59, 57, 77, 1);
font-weight: 900;
.nearby_icon {
width: 25px;
height: 25px;
background-image: url('../../assets/location.png');
background-position: center;
background-size: contain;
} }
} .home_sub_header {
.featured_slider { padding: 10px;
padding-left: 10px; padding-top: 20px;
padding-right: 10px; padding-bottom: 20px;
.feature_product { color: rgba(59, 57, 77, 1);
width: 100%; font-weight: 900;
height: 130px; .nearby_icon {
position: relative; width: 25px;
background-color: #a8a8a8; height: 25px;
border: 2px solid #fff; background-image: url('../../assets/location.png');
img { background-position: center;
width: 100%; background-size: contain;
height: 100%;
object-fit: cover;
object-position: center;
}
.feature_overlay {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(0, 0, 0, 0.75);
padding: 15px;
padding-top: 60px;
h5 {
color: #fff;
margin: 0px;
padding: 0px;
text-align: left;
font-weight: bold;
letter-spacing: 2px;
padding-bottom: 2px;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
p {
color: #fff;
margin: 0px;
padding: 0px;
text-align: left;
font-size: 20px;
font-weight: lighter;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
}
} }
} .featured_slider {
.nearby_shop_list { padding-left: 10px;
ul { padding-right: 10px;
margin: 0px; .feature_product {
padding-left: 10px;
padding-right: 10px;
li {
list-style: none;
padding-bottom: 10px;
.nearby_image {
width: 120px;
height: 125px;
float: left;
background-color: #a8a8a8;
border-radius: 8px;
img {
width: 100%; width: 100%;
height: 100%; height: 130px;
object-fit: cover; position: relative;
object-position: center; background-color: #a8a8a8;
} border: 2px solid #fff;
}
.nearby_detail {
width: calc(100% - 120px);
float: left;
padding-left: 20px;
padding-top: 40px;
h5 {
margin: 0px;
padding: 0px;
color: rgba(59, 57, 77, 1);
font-weight: 900;
padding-bottom: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
img { img {
width: 16px; width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.feature_overlay {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(0, 0, 0, 0.75);
padding: 15px;
padding-top: 60px;
h5 {
color: #fff;
margin: 0px;
padding: 0px;
text-align: left;
font-weight: bold;
letter-spacing: 2px;
padding-bottom: 2px;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
p {
color: #fff;
margin: 0px;
padding: 0px;
text-align: left;
font-size: 20px;
font-weight: lighter;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
} }
}
p {
margin: 0px;
padding: 0px;
color: rgba(176, 174, 199);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
} }
}
} }
} .nearby_shop_list {
.featured_catagory_list { ul {
padding: 10px; margin: 0px;
ul { padding-left: 10px;
margin: 0px; padding-right: 10px;
padding: 0px; li {
li { list-style: none;
list-style: none; padding-bottom: 10px;
position: relative; .nearby_image {
height: 120px; width: 120px;
width: 100%; height: 125px;
border-radius: 8px; float: left;
margin-bottom: 10px; background-color: #a8a8a8;
&:nth-child(odd) { border-radius: 8px;
text-align: left; img {
} width: 100%;
&:nth-child(even) { height: 100%;
text-align: right; object-fit: cover;
} object-position: center;
img { }
width: 100%; }
height: 100%; .nearby_detail {
object-fit: cover; width: calc(100% - 120px);
object-position: center; float: left;
padding-left: 20px;
padding-top: 40px;
h5 {
margin: 0px;
padding: 0px;
color: rgba(59, 57, 77, 1);
font-weight: 900;
padding-bottom: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
img {
width: 16px;
}
}
p {
margin: 0px;
padding: 0px;
color: rgba(176, 174, 199);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
} }
.featured_overlay { }
position: absolute; .featured_catagory_list {
top: 0px; padding: 10px;
left: 0px; ul {
right: 0px;
bottom: 0px;
border-radius: 8px;
background-color: rgba(0, 0, 0, 0.75);
color: #fff;
padding: 45px;
padding-left: 20px;
padding-right: 20px;
h4 {
margin: 0px; margin: 0px;
font-size: 26px; padding: 0px;
font-weight: 900; li {
} list-style: none;
position: relative;
height: 120px;
width: 100%;
border-radius: 8px;
margin-bottom: 10px;
&:nth-child(odd) {
text-align: left;
}
&:nth-child(even) {
text-align: right;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.featured_overlay {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
border-radius: 8px;
background-color: rgba(0, 0, 0, 0.75);
color: #fff;
padding: 45px;
padding-left: 20px;
padding-right: 20px;
h4 {
margin: 0px;
font-size: 26px;
font-weight: 900;
}
}
}
} }
}
} }
}
} }
.sort_wrappper { .sort_wrappper {
height: 100vh;
width: 100%;
background: #fff;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 99;
agm-map {
width: 100%;
height: 100vh; height: 100vh;
} width: 100%;
.add_address_wrapper { background: #fff;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 99;
agm-map {
width: 100%;
height: 100vh;
}
}
.add_address_wrapper {
position: fixed; position: fixed;
bottom: 0px; bottom: 0px;
left: 0px; left: 0px;
right: 0px; right: 0px;
padding: 20px; padding: 20px 20px 50px 20px;
border-top-left-radius: 15px; border-top-left-radius: 15px;
border-top-right-radius: 15px; border-top-right-radius: 15px;
background: #fff; background: #fff;
...@@ -271,77 +273,63 @@ ...@@ -271,77 +273,63 @@
-moz-box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2);
h5 { h5 {
color: rgba(41, 40, 91, 1);
margin: 0px;
padding: 0px;
font-weight: 800;
}
.add_address_wrapper {
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
padding: 20px 20px 50px 20px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
background: #fff;
-webkit-box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2);
h5 {
color: rgba(41, 40, 91, 1); color: rgba(41, 40, 91, 1);
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
font-weight: 800; font-weight: 800;
} }
.styled-checkbox { .styled-checkbox {
position: absolute; // take it out of document flow position: absolute; // take it out of document flow
opacity: 0; // hide it opacity: 0; // hide it
& + label { &+label {
position: relative; position: relative;
cursor: pointer; cursor: pointer;
padding: 0; padding: 0;
width: 100%; width: 100%;
} }
// Box. // Box.
& + label:before { &+label:before {
content: ''; content: '';
margin-right: 10px; margin-right: 10px;
display: inline-block; display: inline-block;
vertical-align: text-top; vertical-align: text-top;
width: 20px; width: 20px;
height: 20px; height: 20px;
border-radius: 50%; border-radius: 50%;
background: white; background: white;
border: 1px solid rgba(215, 213, 228, 1); border: 1px solid rgba(215, 213, 228, 1);
} }
&:checked + label:before { &:checked+label:before {
background: #29285b; background: #29285b;
} }
// Disabled state label. // Disabled state label.
&:disabled + label { &:disabled+label {
color: #b8b8b8; color: #b8b8b8;
cursor: auto; cursor: auto;
} }
// Disabled box. // Disabled box.
&:disabled + label:before { &:disabled+label:before {
box-shadow: none; box-shadow: none;
background: #ddd; background: #ddd;
} }
// Checkmark. Could be replaced with an image // Checkmark. Could be replaced with an image
&:checked + label:after { &:checked+label:after {
content: ''; content: '';
position: absolute; position: absolute;
left: 6px; left: 6px;
top: 10px; top: 10px;
background: white; background: white;
width: 2px; width: 2px;
height: 2px; height: 2px;
box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white; transform: rotate(45deg);
transform: rotate(45deg);
} }
}
} }
}
} }
.address-ul {
padding-left: 0 !important;
li {
list-style: none;
}
}
\ No newline at end of file
src/app/nearby/nearby.page.scss
...@@ -46,24 +46,69 @@ ...@@ -46,24 +46,69 @@
padding: 0px; padding: 0px;
font-weight: 800; font-weight: 800;
} }
p {} ul {
input { margin: 0px;
width: 100%; padding: 0px;
height: 45px; padding-top: 30px;
border: 1px solid #E1E0EB; li {
border-radius: 4px; list-style: none;
padding-left: 10px; margin-bottom: 15px;
padding-right: 10px; p {
margin-bottom: 20px; margin: 0px;
} padding: 0px;
.add_btn { color: rgba(176, 174, 199, 1);
width: 100%; padding-top: 5px;
height: 45px; padding-bottom: 5px;
background-color: #29285B; }
color: #fff; .styled-checkbox {
border-radius: 4px; position: absolute; // take it out of document flow
opacity: 0; // hide it
&+label {
position: relative;
cursor: pointer;
padding: 0;
width: 100%;
}
// Box.
&+label:before {
content: '';
margin-right: 10px;
display: inline-block;
vertical-align: text-top;
width: 20px;
height: 20px;
border-radius: 50%;
background: white;
border: 1px solid rgba(215, 213, 228, 1);
}
&:checked+label:before {
background: #29285b;
}
// Disabled state label.
&:disabled+label {
color: #b8b8b8;
cursor: auto;
}
// Disabled box.
&:disabled+label:before {
box-shadow: none;
background: #ddd;
}
// Checkmark. Could be replaced with an image
&:checked+label:after {
content: '';
position: absolute;
left: 6px;
top: 10px;
background: white;
width: 2px;
height: 2px;
box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
transform: rotate(45deg);
}
}
}
} }
} }
.styled-checkbox { .styled-checkbox {
......
src/app/profile/profile.page.html
<div class="nav_header"> <div class="nav_header">
<ion-menu-toggle> <ion-menu-toggle>
<button class="nav_btn nav_menu floatLeft"></button> <button class="nav_btn nav_menu floatLeft"></button>
</ion-menu-toggle> </ion-menu-toggle>
<div class="nav_title floatLeft"> <div class="nav_title floatLeft">
<img src="../../assets/Group [email protected]" /> <img src="../../assets/Group [email protected]" />
</div> </div>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<ion-content> <ion-content>
<div class="profile_wrapper" *ngIf="loggedUser"> <div class="profile_wrapper" *ngIf="loggedUser">
<div class="profile_banner"> <div class="profile_banner">
<!-- <div class="profile_circle"> <!-- <div class="profile_circle">
<div class="edit"></div> <div class="edit"></div>
</div> --> </div> -->
<div class="profile_circle"> <div class="profile_circle">
<img <img [src]="loggedUser.profilePhoto" onerror="this.src='./../../assets/profile_banner.png'" />
[src]="loggedUser.profilePhoto" <div class="edit"></div>
onerror="this.src='./../../assets/profile_banner.png'" <input type="file" accept="image/*" (change)="fileChange($event)" />
/> </div>
<div class="edit"></div>
<input type="file" accept="image/*" (change)="fileChange($event)" />
</div>
<h5>{{loggedUser.name}}</h5> <h5>{{loggedUser.name}}</h5>
<p (click)="istoggle()">LOGOUT</p> <p (click)="istoggle()">LOGOUT</p>
</div> </div>
<div class="account_wrapper"> <div class="account_wrapper">
<div class="account_header"> <div class="account_header">
<h5 class="floatLeft">ACCOUNT INFORMATION</h5> <h5 class="floatLeft">ACCOUNT INFORMATION</h5>
<span <span class="floatRight" (click)="goToPage('changedetails', user && user)"><img
class="floatRight" src="../../assets/edit.png" /></span>
(click)="goToPage('changedetails', user && user)" <div class="clear"></div>
><img src="../../assets/edit.png" </div>
/></span> <div class="row">
<div class="clear"></div> <ion-row>
</div> <ion-col class="textLeft p0">
<div class="row"> <p>
<ion-row> Phone
<ion-col class="textLeft p0">
<p> </p>
Phone </ion-col>
<span *ngIf="loggedUser.phoneVerified == true">Verified</span> <ion-col class="textRight p0">
<span *ngIf="loggedUser.phoneVerified == false" <h6>{{loggedUser.phone}}</h6>
>Not Verified yet</span <span class="ar-span" *ngIf="loggedUser.phoneVerified == true">Verified</span>
> <span class="ar-span" *ngIf="loggedUser.phoneVerified == false">Not Verified yet</span>
</p> </ion-col>
</ion-col> </ion-row>
<ion-col class="textRight p0"> </div>
<h6>{{loggedUser.phone}}</h6> <div class="row">
</ion-col> <ion-row>
</ion-row> <ion-col class="textLeft p0">
</div> <p>
<div class="row"> Email
<ion-row> </p>
<ion-col class="textLeft p0"> </ion-col>
<p> <ion-col class="textRight p0">
Email<span *ngIf="userData && userData.emailVerified == true" <h6>{{loggedUser.emailId}}</h6>
>Verified</span <span class="ar-span" *ngIf="loggedUser.emailVerified == true">Verified</span>
> <span class="ar-span" *ngIf="loggedUser.emailVerified == false">Not Verified yet</span>
<span *ngIf="loggedUser.emailVerified == false" </ion-col>
>Not Verified yet</span </ion-row>
> </div>
</p> <hr />
</ion-col> <ion-row (click)="goToPage('wishlist')">
<ion-col class="textRight p0"> <ion-col class="textLeft p0">
<h6>{{loggedUser.emailId}}</h6> <p>Wishlist</p>
</ion-col> </ion-col>
</ion-row> <ion-col class="textRight p0">
</div> <h6>(0)</h6>
<hr /> </ion-col>
<ion-row (click)="goToPage('wishlist')"> </ion-row>
<ion-col class="textLeft p0"> <hr />
<p>Wishlist</p> <ion-row (click)="goToPage('address')">
</ion-col> <ion-col class="textLeft p0">
<ion-col class="textRight p0"> <p>Address</p>
<h6>(0)</h6> </ion-col>
</ion-col> <ion-col class="textRight p0">
</ion-row> <h6 *ngIf="addressService.addList">
<hr /> ({{addressService.addressList.length}})
<ion-row (click)="goToPage('address')"> </h6>
<ion-col class="textLeft p0"> </ion-col>
<p>Address</p> </ion-row>
</ion-col> <hr />
<ion-col class="textRight p0"> <!-- <ion-row>
<h6 *ngIf="addressService.addList">
({{addressService.addressList.length}})
</h6>
</ion-col>
</ion-row>
<hr />
<!-- <ion-row>
<ion-col class="textLeft p0"> <ion-col class="textLeft p0">
<p>My Cards</p> <p>My Cards</p>
</ion-col> </ion-col>
...@@ -102,46 +92,43 @@ ...@@ -102,46 +92,43 @@
</ion-col> </ion-col>
</ion-row> </ion-row>
<hr /> --> <hr /> -->
<ion-row (click)="goToPage('myorder')"> <ion-row (click)="goToPage('myorder')">
<ion-col class="textLeft p0"> <ion-col class="textLeft p0">
<p>My Order</p> <p>My Order</p>
</ion-col> </ion-col>
<ion-col class="textRight p0"> <ion-col class="textRight p0">
<h6> <h6>
<ion-icon name="arrow-forward"></ion-icon> <ion-icon name="arrow-forward"></ion-icon>
</h6> </h6>
</ion-col> </ion-col>
</ion-row> </ion-row>
<hr /> <hr />
<ion-row> <ion-row>
<ion-col class="textLeft p0"> <ion-col class="textLeft p0">
<p>Currency</p> <p>Currency</p>
</ion-col> </ion-col>
<ion-col class="textRight p0"> <ion-col class="textRight p0">
<h6> <h6>
<span>AUD</span> <span>AUD</span>
</h6> </h6>
</ion-col> </ion-col>
</ion-row> </ion-row>
</div> </div>
<div class="logout-pop-wrapper" *ngIf="isShow" [@slideInOut]> <div class="logout-pop-wrapper" *ngIf="isShow" [@slideInOut]>
<div class="logout_inner"> <div class="logout_inner">
<h4>Logout</h4> <h4>Logout</h4>
<p>Are you sure to Logout ?</p> <p>Are you sure to Logout ?</p>
<div class="logout_footer"> <div class="logout_footer">
<button class="btn-cancel floatLeft" (click)="istoggle();"> <button class="btn-cancel floatLeft" (click)="istoggle();">
Cancel Cancel
</button> </button>
<button <button class="btn-logout floatRight" (click)="authService.SignOut(); istoggle()">
class="btn-logout floatRight"
(click)="authService.SignOut(); istoggle()"
>
Logout Logout
</button> </button>
</div> </div>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
</div>
</div> </div>
</div> </ion-content>
</ion-content> \ No newline at end of file
src/app/profile/profile.page.scss
...@@ -82,16 +82,16 @@ ...@@ -82,16 +82,16 @@
width: 20px; width: 20px;
} }
} }
.ar-span {
color: rgba(206, 153, 76, 1);
margin-left: 10px;
}
} }
p { p {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
color: rgba(176, 174, 199, 1); color: rgba(176, 174, 199, 1);
font-size: 18px; font-size: 18px;
span {
color: rgba(206, 153, 76, 1);
margin-left: 10px;
}
} }
h6 { h6 {
margin: 0px; margin: 0px;
......
src/config/auth.service.ts
...@@ -312,7 +312,7 @@ export class AuthService { ...@@ -312,7 +312,7 @@ export class AuthService {
.then(() => { .then(() => {
console.log('Address add Successfully'); console.log('Address add Successfully');
this.service.set('user', JSON.stringify(this.userData)); this.service.set('user', JSON.stringify(this.userData));
this.router.navigateByUrl('home', { replaceUrl: true }); this.router.navigateByUrl('home');
document.body.scrollTop = document.documentElement.scrollTop = 0; document.body.scrollTop = document.documentElement.scrollTop = 0;
}) })
.catch(err => { .catch(err => {
......
src/global.scss
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
* https://ionicframework.com/docs/layout/global-stylesheets * https://ionicframework.com/docs/layout/global-stylesheets
*/ */
/* Core CSS required for Ionic components to work properly */ /* Core CSS required for Ionic components to work properly */
@import '~@ionic/angular/css/core.css'; @import '~@ionic/angular/css/core.css';
...@@ -53,6 +54,7 @@ ...@@ -53,6 +54,7 @@
*/ */
/*------------------------------- /*-------------------------------
01. FONTS-N-SIZES 01. FONTS-N-SIZES
...@@ -62,107 +64,108 @@ ...@@ -62,107 +64,108 @@
@import url('https://fonts.googleapis.com/css?family=Abel&display=swap'); @import url('https://fonts.googleapis.com/css?family=Abel&display=swap');
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css); @import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
* { * {
font-family: 'Abel', sans-serif; font-family: 'Abel', sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
*::-webkit-scrollbar { *::-webkit-scrollbar {
display: none; display: none;
} }
.no-scroll .scroll-content { .no-scroll .scroll-content {
overflow: hidden; overflow: hidden;
} }
a { a {
text-decoration: none !important; text-decoration: none !important;
} }
button { button {
outline: none; outline: none;
} }
input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button { input[type='number']::-webkit-outer-spin-button {
-webkit-appearance: none !important; -webkit-appearance: none !important;
margin: 0; margin: 0;
} }
html, html,
body { body {
font-family: 'Lato', sans-serif !important; font-family: 'Lato', sans-serif !important;
margin: 0px; margin: 0px;
} }
button { button {
cursor: pointer; cursor: pointer;
} }
.start_wizard_wrapper { .start_wizard_wrapper {
ion-slides { ion-slides {
.swiper-pagination { .swiper-pagination {
.swiper-pagination-bullet { .swiper-pagination-bullet {
background-color: #29285b; background-color: #29285b;
width: 14px; width: 14px;
height: 3px; height: 3px;
border-radius: 0px; border-radius: 0px;
} }
}
} }
}
} }
.gm-style .gm-style-iw-c { .gm-style .gm-style-iw-c {
padding: 0px !important; padding: 0px !important;
} }
.home_banner { .home_banner {
ion-slides { ion-slides {
.swiper-pagination-bullets { .swiper-pagination-bullets {
left: auto; left: auto;
width: auto; width: auto;
right: 15px; right: 15px;
bottom: 15px; bottom: 15px;
}
.swiper-pagination {
.swiper-pagination-bullet {
background-color: #fff;
width: 14px;
height: 3px;
border-radius: 0px;
opacity: 1;
margin: 0px;
}
.swiper-pagination-bullet-active {
background-color: rgba(41, 37, 81, 1);
}
}
} }
.swiper-pagination {
.swiper-pagination-bullet {
background-color: #fff;
width: 14px;
height: 3px;
border-radius: 0px;
opacity: 1;
margin: 0px;
}
.swiper-pagination-bullet-active {
background-color: rgba(41, 37, 81, 1);
}
}
}
} }
.product_banner { .product_banner {
ion-slides { ion-slides {
.swiper-pagination-bullets { .swiper-pagination-bullets {
left: auto; left: auto;
width: auto; width: auto;
right: 15px; right: 15px;
bottom: 15px; bottom: 15px;
}
.swiper-pagination {
.swiper-pagination-bullet {
background-color: #fff;
width: 14px;
height: 3px;
border-radius: 0px;
opacity: 1;
margin: 0px;
}
.swiper-pagination-bullet-active {
background-color: rgba(41, 37, 81, 1);
}
}
} }
.swiper-pagination {
.swiper-pagination-bullet {
background-color: #fff;
width: 14px;
height: 3px;
border-radius: 0px;
opacity: 1;
margin: 0px;
}
.swiper-pagination-bullet-active {
background-color: rgba(41, 37, 81, 1);
}
}
}
} }
/*------------------------------- /*-------------------------------
02. FONTS-SETTINGS 02. FONTS-SETTINGS
...@@ -170,49 +173,50 @@ button { ...@@ -170,49 +173,50 @@ button {
--------------------------------*/ --------------------------------*/
.text_color_white { .text_color_white {
color: #fff !important; color: #fff !important;
} }
.font_size_xs { .font_size_xs {
font-size: 12px !important; font-size: 12px !important;
} }
.font_size_sm { .font_size_sm {
font-size: 14px !important; font-size: 14px !important;
} }
.font_size_md { .font_size_md {
font-size: 16px !important; font-size: 16px !important;
} }
.font_size_lg { .font_size_lg {
font-size: 18px !important; font-size: 18px !important;
} }
.font_size_xl { .font_size_xl {
font-size: 20px !important; font-size: 20px !important;
} }
.font_size_vl { .font_size_vl {
font-size: 35px !important; font-size: 35px !important;
} }
.font_weight300 { .font_weight300 {
font-weight: 300 !important; font-weight: 300 !important;
} }
.font_weight400 { .font_weight400 {
font-weight: 400 !important; font-weight: 400 !important;
} }
.font_weight500 { .font_weight500 {
font-weight: 500 !important; font-weight: 500 !important;
} }
.font_weight600 { .font_weight600 {
font-weight: 600 !important; font-weight: 600 !important;
} }
/*------------------------------- /*-------------------------------
03. THEMES-N-BACKGROUNDS 03. THEMES-N-BACKGROUNDS
...@@ -220,30 +224,31 @@ button { ...@@ -220,30 +224,31 @@ button {
--------------------------------*/ --------------------------------*/
.theme_background { .theme_background {
background-size: cover !important; background-size: cover !important;
background-position: center !important; background-position: center !important;
} }
.theme_transparent { .theme_transparent {
background: transparent !important; background: transparent !important;
} }
.theme_white { .theme_white {
background-color: #f7f8fd !important; background-color: #f7f8fd !important;
} }
.theme_off_white { .theme_off_white {
background-color: #f4f4f4 !important; background-color: #f4f4f4 !important;
} }
.theme_dark_transparent { .theme_dark_transparent {
background-color: rgba(0, 0, 0, 0.6) !important; background-color: rgba(0, 0, 0, 0.6) !important;
} }
.theme_white_transparent { .theme_white_transparent {
background-color: rgba(243, 243, 243, 0.6) !important; background-color: rgba(243, 243, 243, 0.6) !important;
} }
/*------------------------------- /*-------------------------------
04. SPACING-N-POSITIONS 04. SPACING-N-POSITIONS
...@@ -251,117 +256,118 @@ button { ...@@ -251,117 +256,118 @@ button {
--------------------------------*/ --------------------------------*/
.width25 { .width25 {
width: 25% !important; width: 25% !important;
} }
.width50 { .width50 {
width: 50% !important; width: 50% !important;
} }
.width75 { .width75 {
width: 75% !important; width: 75% !important;
} }
.widthFull { .widthFull {
width: 100% !important; width: 100% !important;
} }
.widthAuto { .widthAuto {
width: auto !important; width: auto !important;
} }
.height25 { .height25 {
height: 25% !important; height: 25% !important;
} }
.height50 { .height50 {
height: 50% !important; height: 50% !important;
} }
.height75 { .height75 {
width: 75% !important; width: 75% !important;
} }
.heightFull { .heightFull {
height: 100% !important; height: 100% !important;
} }
.heightAuto { .heightAuto {
height: auto !important; height: auto !important;
} }
.p0 { .p0 {
padding: 0px !important; padding: 0px !important;
} }
.pl0 { .pl0 {
padding-left: 0px !important; padding-left: 0px !important;
} }
.pr0 { .pr0 {
padding-right: 0px !important; padding-right: 0px !important;
} }
.pt0 { .pt0 {
padding-top: 0px !important; padding-top: 0px !important;
} }
.pb0 { .pb0 {
padding-bottom: 0px !important; padding-bottom: 0px !important;
} }
.p10 { .p10 {
padding: 10px !important; padding: 10px !important;
} }
.pt10 { .pt10 {
padding-top: 10px !important; padding-top: 10px !important;
} }
.m0 { .m0 {
margin: 0px !important; margin: 0px !important;
} }
.ml0 { .ml0 {
margin-left: 0px !important; margin-left: 0px !important;
} }
.mr0 { .mr0 {
margin-right: 0px !important; margin-right: 0px !important;
} }
.mt0 { .mt0 {
margin-top: 0px !important; margin-top: 0px !important;
} }
.mb0 { .mb0 {
margin-bottom: 0px !important; margin-bottom: 0px !important;
} }
.mAuto { .mAuto {
margin: 0 auto !important; margin: 0 auto !important;
} }
.clear { .clear {
clear: both !important; clear: both !important;
} }
.absolute { .absolute {
position: absolute !important; position: absolute !important;
} }
.relative { .relative {
position: relative !important; position: relative !important;
} }
.fixed { .fixed {
position: fixed !important; position: fixed !important;
} }
.borderNone { .borderNone {
border: none !important; border: none !important;
} }
/*------------------------------- /*-------------------------------
05. ALIGMENTS 05. ALIGMENTS
...@@ -369,305 +375,303 @@ button { ...@@ -369,305 +375,303 @@ button {
--------------------------------*/ --------------------------------*/
.floatLeft { .floatLeft {
float: left !important; float: left !important;
} }
.floatRight { .floatRight {
float: right !important; float: right !important;
} }
.textLeft { .textLeft {
text-align: left !important; text-align: left !important;
} }
.textRight { .textRight {
text-align: right !important; text-align: right !important;
} }
.textCenter { .textCenter {
text-align: center !important; text-align: center !important;
} }
.ion-page { .ion-page {
padding-top: 50px; padding-top: 50px;
} }
app-landing { app-landing {
padding: 0px !important; padding: 0px !important;
} }
app-cart { app-cart {
padding: 0px !important; padding: 0px !important;
} }
app-orderplaced { app-orderplaced {
padding: 0px !important; padding: 0px !important;
} }
app-ordercancelled { app-ordercancelled {
padding: 0px !important; padding: 0px !important;
} }
app-delivery { app-delivery {
padding: 0px !important; padding: 0px !important;
} }
app-deliverypop { app-deliverypop {
padding: 0px !important; padding: 0px !important;
} }
app-success { app-success {
padding: 0px !important; padding: 0px !important;
} }
.nav_header { .nav_header {
position: fixed; position: fixed;
top: 0px; top: 0px;
left: 0px; left: 0px;
right: 0px; right: 0px;
z-index: 9999; z-index: 9999;
background-color: #fff; background-color: #fff;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
} }
.nav_btn { .nav_btn {
width: 50px; width: 50px;
height: 50px; height: 50px;
background-color: transparent; background-color: transparent;
color: #282438; color: #282438;
font-size: 25px; font-size: 25px;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 25px; background-size: 25px;
position: relative; position: relative;
} }
.not { .not {
background-color: #3b394d; background-color: #3b394d;
color: #fff; color: #fff;
width: 17px; width: 17px;
height: 17px; height: 17px;
border-radius: 50%; border-radius: 50%;
position: absolute; position: absolute;
top: 5px; top: 5px;
right: 10px; right: 10px;
font-size: 10px; font-size: 10px;
padding: 4px; padding: 4px;
} }
.nav_title { .nav_title {
width: calc(100% - 100px); width: calc(100% - 100px);
color: rgba(59, 57, 77, 1); color: rgba(59, 57, 77, 1);
padding: 12px; padding: 12px;
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
font-weight: 400; font-weight: 400;
text-align: center;
img {
height: 30px;
}
h4 {
margin: 0px;
font-weight: 900;
padding: 0px;
font-size: 20px;
text-align: center; text-align: center;
text-transform: uppercase; img {
span { height: 30px;
color: #39267f;
} }
} h4 {
input { margin: 0px;
width: 100%; font-weight: 900;
border: none; padding: 0px;
padding-left: 10px; font-size: 20px;
padding-right: 10px; text-align: center;
&:focus { text-transform: uppercase;
outline: none; span {
color: #39267f;
}
} }
&:hover { input {
outline: none; width: 100%;
border: none;
padding-left: 10px;
padding-right: 10px;
&:focus {
outline: none;
}
&:hover {
outline: none;
}
} }
}
} }
.nav_back { .nav_back {
background-color: #fff !important; background-color: #fff !important;
background-image: url('./assets/Group17_2.png'); background-image: url('./assets/Group17_2.png');
img { img {
width: 25px; width: 25px;
display: none; display: none;
} }
} }
.nav_back_white { .nav_back_white {
background-color: transparent; background-color: transparent;
background-image: url('./assets/arrow_white.png'); background-image: url('./assets/arrow_white.png');
img { img {
width: 25px !important; width: 25px !important;
display: none; display: none;
} }
} }
.nav_menu { .nav_menu {
background-image: url('./assets/Group22_2.png'); background-image: url('./assets/Group22_2.png');
img { img {
width: 25px; width: 25px;
display: none; display: none;
} }
} }
.nav_search { .nav_search {
background-image: url('./assets/search_2.png'); background-image: url('./assets/search_2.png');
img { img {
width: 25px; width: 25px;
display: none; display: none;
} }
} }
.nav_exit { .nav_exit {
background-image: url('./assets/Group17_2.png'); background-image: url('./assets/Group17_2.png');
img { img {
width: 25px; width: 25px;
display: none; display: none;
} }
} }
.nav_close { .nav_close {
background-image: url('./assets/close.png'); background-image: url('./assets/close.png');
img { img {
width: 25px; width: 25px;
display: none; display: none;
} }
} }
.nav_cart { .nav_cart {
background-image: url('./assets/cart_icon.png'); background-image: url('./assets/cart_icon.png');
img { img {
width: 25px; width: 25px;
display: none; display: none;
} }
} }
ion-header { ion-header {
z-index: 9999 !important; z-index: 9999 !important;
order: 0 !important; order: 0 !important;
} }
.lds-ripple { .lds-ripple {
display: inline-block; display: inline-block;
position: relative; position: relative;
width: 64px; width: 64px;
height: 64px; height: 64px;
} }
.lds-ripple div { .lds-ripple div {
position: absolute; position: absolute;
border: 5px solid #29285b; border: 5px solid #29285b;
opacity: 1; opacity: 1;
border-radius: 50%; border-radius: 50%;
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
} }
.lds-ripple div:nth-child(2) { .lds-ripple div:nth-child(2) {
animation-delay: -0.5s; animation-delay: -0.5s;
} }
@keyframes lds-ripple { @keyframes lds-ripple {
0% { 0% {
top: 30px; top: 30px;
left: 30px; left: 30px;
width: 0; width: 0;
height: 0; height: 0;
opacity: 1; opacity: 1;
} }
100% { 100% {
top: -1px; top: -1px;
left: -1px; left: -1px;
width: 60px; width: 60px;
height: 60px; height: 60px;
opacity: 0; opacity: 0;
} }
} }
.loader { .loader {
position: fixed; position: fixed;
top: 0px; top: 0px;
left: 0px; left: 0px;
right: 0px; right: 0px;
bottom: 0px; bottom: 0px;
padding-top: 50%; padding-top: 50%;
background-color: rgba(273, 273, 273, 0.9); background-color: rgba(273, 273, 273, 0.9);
text-align: center; text-align: center;
z-index: 99; z-index: 99;
} }
.picker-wrapper { .picker-wrapper {
.picker-toolbar { .picker-toolbar {
.picker-toolbar-button { .picker-toolbar-button {
.picker-button { .picker-button {
color: #29285b; color: #29285b;
font-weight: 900; font-weight: 900;
} }
}
} }
} .picker-columns {
.picker-columns { .picker-opt-selected {
.picker-opt-selected { color: #29285b;
color: #29285b; font-weight: 900;
font-weight: 900; }
} }
}
} }
.search_item_list { .search_item_list {
position: absolute; position: absolute;
background-color: #fff; background-color: #fff;
left: 0px; left: 0px;
right: 0px; right: 0px;
width: 100%; width: 100%;
margin: 0px;
top: 50px;
bottom: 0px;
z-index: 99;
ul {
margin: 0px; margin: 0px;
padding: 0px; top: 50px;
li { bottom: 0px;
list-style: none; z-index: 99;
color: rgba(59, 57, 77, 1); ul {
text-align: left; margin: 0px;
list-style: none; padding: 0px;
padding: 10px; li {
border-bottom: 1px solid #ddd; list-style: none;
&:hover { color: rgba(59, 57, 77, 1);
background-color: rgba(59, 57, 77, 1); text-align: left;
color: #fff; list-style: none;
} padding: 10px;
&:focus { border-bottom: 1px solid #ddd;
background-color: rgba(59, 57, 77, 1); &:hover {
color: #fff; background-color: rgba(59, 57, 77, 1);
} color: #fff;
}
&:focus {
background-color: rgba(59, 57, 77, 1);
color: #fff;
}
}
} }
}
} }
// .successToast { // .successToast {
// color: #29285b; // color: #29285b;
// } // }
// .toast-content { // .toast-content {
// } // }
.my-toast { .my-toast {
--background: #29285b; --background: #29285b;
--border-radius: 4px; --border-radius: 4px;
--color: #fff; --color: #fff;
} }
.my-error { .my-error {
--background: rgb(212, 43, 38); --background: rgb(212, 43, 38);
--border-radius: 4px; --border-radius: 4px;
--color: #fff; --color: #fff;
} }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment