Skip to content

G
getme
Commit b0bde269 by Adarsh K
Options

design fix

parents 5ef7866a c56c1ad8
Showing with 1068 additions and 1086 deletions
src/app/app.component.scss
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
.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: auto;
padding-left: 20px; padding-left: 20px;
padding-top: 20px; padding-top: 20px;
padding-right: 10px; padding-right: 10px;
......
src/app/cart/cart.page.scss
...@@ -500,79 +500,79 @@ ...@@ -500,79 +500,79 @@
bottom: 0px; bottom: 0px;
left: 0px; left: 0px;
right: 0px; right: 0px;
padding: 20px; overflow: scroll;
top: 40%;
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;
-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); box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2);
h5 { }
color: rgba(41, 40, 91, 1); h5 {
margin: 0px; color: rgba(41, 40, 91, 1);
padding: 0px; margin: 0px;
font-weight: 800; padding: 0px;
} font-weight: 800;
ul { }
margin: 0px; ul {
padding: 0px; margin: 0px;
padding-top: 30px; padding: 0px;
li { padding-top: 30px;
list-style: none; li {
margin-bottom: 15px; list-style: none;
p { margin-bottom: 15px;
margin: 0px; p {
padding: 0px; margin: 0px;
color: rgba(176, 174, 199, 1); padding: 0px;
padding-top: 5px; color: rgba(176, 174, 199, 1);
padding-bottom: 5px; padding-top: 5px;
padding-bottom: 5px;
}
.styled-checkbox {
position: absolute; // take it out of document flow
opacity: 0; // hide it
&+label {
position: relative;
cursor: pointer;
padding: 0;
width: 100%;
} }
.styled-checkbox { // Box.
position: absolute; // take it out of document flow &+label:before {
opacity: 0; // hide it content: '';
&+label { margin-right: 10px;
position: relative; display: inline-block;
cursor: pointer; vertical-align: text-top;
padding: 0; width: 20px;
width: 100%; height: 20px;
} border-radius: 50%;
// Box. background: white;
&+label:before { border: 1px solid rgba(215, 213, 228, 1);
content: ''; }
margin-right: 10px; &:checked+label:before {
display: inline-block; background: #29285b;
vertical-align: text-top; }
width: 20px; // Disabled state label.
height: 20px; &:disabled+label {
border-radius: 50%; color: #b8b8b8;
background: white; cursor: auto;
border: 1px solid rgba(215, 213, 228, 1); }
} // Disabled box.
&:checked+label:before { &:disabled+label:before {
background: #29285b; box-shadow: none;
} background: #ddd;
// Disabled state label. }
&:disabled+label { // Checkmark. Could be replaced with an image
color: #b8b8b8; &:checked+label:after {
cursor: auto; content: '';
} position: absolute;
// Disabled box. left: 6px;
&:disabled+label:before { top: 10px;
box-shadow: none; background: white;
background: #ddd; width: 2px;
} height: 2px;
// Checkmark. Could be replaced with an image 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;
&:checked+label:after { transform: rotate(45deg);
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);
}
} }
} }
} }
......
src/app/home/home.page.html
...@@ -63,8 +63,8 @@ ...@@ -63,8 +63,8 @@
<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">
...@@ -77,8 +77,8 @@ ...@@ -77,8 +77,8 @@
<h5> <h5>
<span class="floatLeft">{{center.centerName}}</span> <span class="floatLeft">{{center.centerName}}</span>
<span class="floatRight">0 <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>
...@@ -105,8 +105,8 @@ ...@@ -105,8 +105,8 @@
<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>
...@@ -117,26 +117,29 @@ ...@@ -117,26 +117,29 @@
<agm-marker [latitude]="lat" [longitude]="lng"></agm-marker> <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map> </agm-map>
<div class="add_address_wrapper"> <div class="add_address_wrapper">
<h5> <div class="add-address-c">
<span class="floatLeft">NEW ADDRESS</span> <span>NEW ADDRESS</span>
<span class="floatRight" (click)="istoggle(); goToPage('nearby')">ADD NEW</span> <span (click)="istoggle(); goToPage('nearby')">ADD NEW</span>
<div class="clear"></div> </div>
</h5> <div>
<ul class="address-ul" *ngIf="addressService.addressList && addressService.addressList.length > 0"> <ul class="address-ul" *ngIf="addressService.addressList && addressService.addressList.length > 0">
<li *ngFor="let address of addressService.addressList; let i = index"> <li *ngFor="let address of addressService.addressList; let i = index">
<div class="floatLeft"> <div class="floatLeft">
{{address.default}} {{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" /> <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> <label for="styled-checkbox-{{i}}">
</div> {{address.addressType}}
<div class="floatLeft"> </label>
<p> </div>
{{address.building}}, {{address.landmark}}, {{address.address}} <div class="floatLeft">
</p> <p>
</div> {{address.building}}, {{address.landmark}}, {{address.address}}
<div class="clear"></div> </p>
</li> </div>
</ul> <div class="clear"></div>
</li>
</ul>
</div>
</div> </div>
</ion-content> </ion-content>
</div> </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%;
background: #fff;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 99;
agm-map {
width: 100%;
height: 100vh;
}
} }
.add_address_wrapper { .add_address_wrapper {
position: fixed; position: fixed;
top: 40%; top: 40%;
overflow: scroll; overflow: scroll;
height: auto; height: auto;
bottom: 0px; bottom: 0px;
left: 0px; left: 0px;
right: 0px; right: 0px;
padding: 20px 20px 50px 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;
-webkit-box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2); -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); -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); color: rgba(41, 40, 91, 1);
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
font-weight: 800; font-weight: 800;
}
.styled-checkbox {
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 .styled-checkbox {
&:checked + label:after { position: absolute; // take it out of document flow
content: ""; opacity: 0; // hide it
position: absolute; &+label {
left: 6px; position: relative;
top: 10px; cursor: pointer;
background: white; padding: 0;
width: 2px; width: 100%;
height: 2px; }
box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, // Box.
4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white; &+label:before {
transform: rotate(45deg); 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);
}
} }
}
} }
.address-ul { .address-ul {
padding-left: 0 !important; padding-left: 0 !important;
li { li {
list-style: none; list-style: none;
} }
} }
\ No newline at end of file
src/app/nearby/nearby.page.scss
.nearby_map { .nearby_map {
width: 100%; width: 100%;
height: 100%; height: 100%;
.overlay { .overlay {
position: absolute; position: absolute;
top: 0px; top: 0px;
left: 0px; left: 0px;
right: 0px; right: 0px;
bottom: 0px; bottom: 0px;
background: rgba(29, 27, 130, 0.2); background: rgba(29, 27, 130, 0.2);
} }
agm-map { agm-map {
width: 100%; width: 100%;
height: 100%; height: 100vh;
position: relative; .overlay {
} position: absolute;
.click_marker { top: 0px;
min-width: 200px; left: 0px;
padding: 10px; right: 0px;
h5 { bottom: 0px;
margin: 0px; background: rgba(29, 27, 130, 0.2);
padding: 0px; }
} agm-map {
p { width: 100%;
margin: 0px; height: 100%;
padding: 0px; position: relative;
} }
} .click_marker {
} min-width: 200px;
padding: 10px;
.add_address_wrapper { h5 {
position: fixed; margin: 0px;
bottom: 0px; padding: 0px;
left: 0px; }
right: 0px; p {
padding: 20px; margin: 0px;
border-top-left-radius: 15px; padding: 0px;
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); .add_address_wrapper {
box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2); position: fixed;
h5 { bottom: 0px;
color: rgba(41, 40, 91, 1); left: 0px;
margin: 0px; right: 0px;
padding: 0px; padding: 20px;
font-weight: 800; border-top-left-radius: 15px;
} border-top-right-radius: 15px;
input { background: #fff;
width: 100%; -webkit-box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2);
height: 45px; -moz-box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2);
border: 1px solid #e1e0eb; box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2);
border-radius: 4px; h5 {
padding-left: 10px; color: rgba(41, 40, 91, 1);
padding-right: 10px; margin: 0px;
margin-bottom: 20px; padding: 0px;
outline: none; font-weight: 800;
transition: all 0.4s ease-in-out; }
&::placeholder { input {
color: rgba(215, 213, 228, 1); width: 100%;
} height: 45px;
&:focus { border: 1px solid #e1e0eb;
border: 1px solid #f3d09f; border-radius: 4px;
box-shadow: 3px 3px 6px 0px rgba(202, 154, 83, 0.11); padding-left: 10px;
} padding-right: 10px;
} margin-bottom: 20px;
.add_btn { outline: none;
width: 100%; transition: all 0.4s ease-in-out;
height: 45px; &::placeholder {
background-color: #29285b; color: rgba(215, 213, 228, 1);
color: #fff; }
border-radius: 4px; &:focus {
} border: 1px solid #f3d09f;
} box-shadow: 3px 3px 6px 0px rgba(202, 154, 83, 0.11);
}
.styled-checkbox { }
position: absolute; // take it out of document flow .add_btn {
opacity: 0; // hide it width: 100%;
& + label { height: 45px;
position: relative; background-color: #29285b;
cursor: pointer; color: #fff;
padding: 0; border-radius: 4px;
} }
// Box. }
& + label:before { .styled-checkbox {
content: ''; position: absolute; // take it out of document flow
margin-right: 10px; opacity: 0; // hide it
display: inline-block; &+label {
vertical-align: text-top; position: relative;
width: 20px; cursor: pointer;
height: 20px; padding: 0;
border-radius: 10px; }
background: white; // Box.
border: 1px solid rgba(215, 213, 228, 1); &+label:before {
} content: '';
// Box hover margin-right: 10px;
// Box checked display: inline-block;
&:checked + label:before { vertical-align: text-top;
background: #29285b; width: 20px;
} height: 20px;
// Disabled state label. border-radius: 10px;
&:disabled + label { background: white;
color: #b8b8b8; border: 1px solid rgba(215, 213, 228, 1);
cursor: auto; }
} // Box hover
// Disabled box. // Box checked
&:disabled + label:before { &:checked+label:before {
box-shadow: none; background: #29285b;
background: #ddd; }
} // Disabled state label.
// Checkmark. Could be replaced with an image &:disabled+label {
&:checked + label:after { color: #b8b8b8;
content: ''; cursor: auto;
position: absolute; }
left: 6px; // Disabled box.
top: 11px; &:disabled+label:before {
background: white; box-shadow: none;
width: 2px; background: #ddd;
height: 2px; }
box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, // Checkmark. Could be replaced with an image
4px -6px 0 white, 4px -8px 0 white; &:checked+label:after {
transform: rotate(45deg); content: '';
} position: absolute;
} left: 6px;
top: 11px;
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);
}
}
}
\ No newline at end of file
src/app/productdetail/productdetail.page.html
<div class="nav_header"> <div class="nav_header">
<button class="nav_btn nav_back floatLeft" (click)="goBack()"> <button class="nav_btn nav_back floatLeft" (click)="goBack()">
<img src="../assets/Group17_2.png" /> <img src="../assets/Group17_2.png" />
</button> </button>
<div class="nav_title floatLeft"></div> <div class="nav_title floatLeft"></div>
<button class="nav_btn nav_cart floatRight" (click)="goToPage('cart')"> <button class="nav_btn nav_cart floatRight" (click)="goToPage('cart')">
<div class="not" *ngIf="cartService.carts"> <div class="not" *ngIf="cartService.carts">
{{cartService.carts.length}} {{cartService.carts.length}}
</div> </div>
</button> </button>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<ion-content> <ion-content>
<div class="product_detail_wrapper" *ngIf="product"> <div class="product_detail_wrapper" *ngIf="product">
<div class="product_banner"> <div class="product_banner">
<div <div [ngClass]="checkFavStatus(product.prodId)" (click)="changeFav(product.prodId)"></div>
[ngClass]="checkFavStatus(product.prodId)" <div class="featured_badge" *ngIf="product.featured">Featured</div>
(click)="changeFav(product.prodId)" <ion-slides pager="true" [options]="bannerOptions" *ngIf="slideData">
></div> <ion-slide *ngFor="let prodImg of slideData">
<div class="featured_badge" *ngIf="product.featured">Featured</div> <img [src]="prodImg" onerror="this.src='../assets/[email protected]'" />
<ion-slides pager="true" [options]="bannerOptions" *ngIf="slideData"> </ion-slide>
<ion-slide *ngFor="let prodImg of slideData"> <!-- <ion-slide>
<img [src]="prodImg" onerror="this.src='../assets/[email protected]'" />
</ion-slide>
<!-- <ion-slide>
<img <img
[src]="product.image" [src]="product.image"
onerror="this.src='../assets/[email protected]'" onerror="this.src='../assets/[email protected]'"
...@@ -34,84 +31,66 @@ ...@@ -34,84 +31,66 @@
onerror="this.src='../assets/[email protected]'" onerror="this.src='../assets/[email protected]'"
/> />
</ion-slide> --> </ion-slide> -->
</ion-slides> </ion-slides>
</div> </div>
<div class="product_header"> <div class="product_header">
<ion-row> <ion-row>
<ion-col size="8"> <ion-col size="8">
<h3 [innerHTML]="product.prodName"></h3> <h3>{{product.prodName}}</h3>
<p> <p>
<strong <strong><span><img src="../assets/Path61_2.png" /></span>{{product.rating}}</strong>&nbsp;
><span><img src="../assets/Path61_2.png"/></span {{product.category}}, {{product.subCate}}
>{{product.rating}}</strong <br />
>&nbsp; {{product.category}}, {{product.subCate}} <span *ngFor="let tag of product.tag"><span *ngIf="tag !=='No-Tag'">#{{tag}}&nbsp;</span></span>
<br /> </p>
<span *ngFor="let tag of product.tag" </ion-col>
><span *ngIf="tag !=='No-Tag'">#{{tag}}&nbsp;</span></span <ion-col size="4">
> <h5>A$ {{product.price}}</h5>
</p> <p>
</ion-col> <span class="offer" *ngIf="product.discount > 0">-{{product.discount}}%</span>
<ion-col size="4"> </p>
<h5>A$ {{product.price}}</h5> </ion-col>
<p> </ion-row>
<span class="offer" *ngIf="product.discount > 0" </div>
>-{{product.discount}}%</span
>
</p>
</ion-col>
</ion-row>
</div>
<div class="product_div_content"> <div class="product_div_content">
<h5 *ngIf="product.color && product.color[0] !=='No-Color'">Color</h5> <h5 *ngIf="product.color && product.color[0] !=='No-Color'">Color</h5>
<div class="size_div"> <div class="size_div">
<ul *ngIf="product.size"> <ul *ngIf="product.size">
<ion-slides pager="false" [options]="slideOpts"> <ion-slides pager="false" [options]="slideOpts">
<ion-slide *ngFor="let color of product.color; let i = index"> <ion-slide *ngFor="let color of product.color; let i = index">
<li *ngIf="color !=='No-Color'"> <li *ngIf="color !=='No-Color'">
<button id="custom_check_button"> <button id="custom_check_button">
<label> <label>
<input <input id="{{color}}" type="radio" name="color" value="{{color}}"
id="{{color}}" (click)="cartService.choose_color(color)" [checked]="i==0" />
type="radio" <p>{{color}}</p>
name="color" </label>
value="{{color}}" </button>
(click)="cartService.choose_color(color)" </li>
[checked]="i==0" </ion-slide>
/> </ion-slides>
<p>{{color}}</p> </ul>
</label> </div>
</button> <h5 *ngIf="product.size && product.size[0] !=='Any-Size'">Size</h5>
</li> <div class="size_div">
</ion-slide> <ul *ngIf="product.size">
</ion-slides> <ion-slides pager="false" [options]="slideOpts">
</ul> <ion-slide *ngFor="let size of product.size; let i = index">
</div> <li *ngIf="size !=='Any-Size'">
<h5 *ngIf="product.size && product.size[0] !=='Any-Size'">Size</h5> <button id="custom_check_button">
<div class="size_div"> <label>
<ul *ngIf="product.size"> <input id="{{size}}" type="radio" name="services" value="{{size}}"
<ion-slides pager="false" [options]="slideOpts"> (click)="cartService.choose_size(size)" [checked]="i==0" />
<ion-slide *ngFor="let size of product.size; let i = index"> <p>{{size}}</p>
<li *ngIf="size !=='Any-Size'"> </label>
<button id="custom_check_button"> </button>
<label> </li>
<input </ion-slide>
id="{{size}}" </ion-slides>
type="radio" </ul>
name="services" </div>
value="{{size}}" <!-- <h5>Color</h5>
(click)="cartService.choose_size(size)"
[checked]="i==0"
/>
<p>{{size}}</p>
</label>
</button>
</li>
</ion-slide>
</ion-slides>
</ul>
</div>
<!-- <h5>Color</h5>
<div class="color_div"> <div class="color_div">
<ul> <ul>
<ion-slides pager="false" [options]="slideOpts"> <ion-slides pager="false" [options]="slideOpts">
...@@ -168,9 +147,9 @@ ...@@ -168,9 +147,9 @@
</ion-slides> </ion-slides>
</ul> </ul>
</div> --> </div> -->
<h5>Description</h5> <h5>Description</h5>
<p [innerHTML]="product.prodDesc"></p> <p>{{product.prodDesc}}</p>
<!--<h5> <!--<h5>
<span class="floatLeft">Reviews</span><span class="floatRight" (click)="goToPage('reviewlist')">MORE</span> <span class="floatLeft">Reviews</span><span class="floatRight" (click)="goToPage('reviewlist')">MORE</span>
<div class="clear"></div> <div class="clear"></div>
</h5> </h5>
...@@ -234,61 +213,45 @@ ...@@ -234,61 +213,45 @@
</li> </li>
</ul> </ul>
</div> --> </div> -->
<h5 *ngIf="product.similar && product.similar.length > 0"> <h5 *ngIf="product.similar && product.similar.length > 0">
<span class="floatLeft">Related Products</span <span class="floatLeft">Related Products</span><span class="floatRight"
><span class="floatRight" (click)="goToPage('productlist', data)" (click)="goToPage('productlist', data)">MORE</span>
>MORE</span <div class="clear"></div>
> </h5>
<div class="clear"></div> <div class="related_product_slider">
</h5> <ul *ngIf="product.similar && product.similar.length > 0">
<div class="related_product_slider"> <ion-slides pager="false" [options]="relatedProd">
<ul *ngIf="product.similar && product.similar.length > 0"> <ion-slide *ngFor="let similar of product.similar">
<ion-slides pager="false" [options]="relatedProd"> <li (click)="viewProd(similar)">
<ion-slide *ngFor="let similar of product.similar"> <div class="product_image">
<li (click)="viewProd(similar)"> <img [src]="similar.image" onerror="this.src='../assets/[email protected]'" />
<div class="product_image"> <div [ngClass]="checkFavStatus(similar.prodId)" (click)="changeFav(similar.prodId)">
<img </div>
[src]="similar.image" </div>
onerror="this.src='../assets/[email protected]'" <h5>{{similar.prodName}}</h5>
/> <p>{{similar.price}}</p>
<div </li>
[ngClass]="checkFavStatus(similar.prodId)" </ion-slide>
(click)="changeFav(similar.prodId)" </ion-slides>
></div> </ul>
</div> </div>
<h5 [innerHTML]="similar.prodName"></h5> </div>
<p>{{similar.price}}</p>
</li>
</ion-slide>
</ion-slides>
</ul>
</div>
</div> </div>
</div> <div class="loader" *ngIf="loader">
<div class="loader" *ngIf="loader"> <div class="lds-ripple">
<div class="lds-ripple"> <div></div>
<div></div> <div></div>
<div></div> </div>
</div> </div>
</div>
</ion-content> </ion-content>
<ion-footer *ngIf="product"> <ion-footer *ngIf="product">
<div class="footer_div"> <div class="footer_div">
<div class="footer_options"> <div class="footer_options">
<button <button class="share"
class="share" (click)="socialShare(product.prodName, product.category, product.subCate, product.price, product.image)"></button>
(click)="socialShare(product.prodName, product.category, product.subCate, product.price, product.image)" <button [ngClass]="checkFavStatus(product.prodId)" (click)="changeFav(product.prodId)"></button>
></button> <button class="cart" [disabled]="!disCart" (click)="buyNow(product,0)"></button>
<button </div>
[ngClass]="checkFavStatus(product.prodId)" <div class="footer_btn" (click)="buyNow(product,1)">BUY NOW</div>
(click)="changeFav(product.prodId)"
></button>
<button
class="cart"
[disabled]="!disCart"
(click)="buyNow(product,0)"
></button>
</div> </div>
<div class="footer_btn" (click)="buyNow(product,1)">BUY NOW</div> </ion-footer>
</div> \ No newline at end of file
</ion-footer>
src/app/productdetail/productdetail.page.scss
.product_detail_wrapper { .product_detail_wrapper {
.product_banner { .product_banner {
width: 100%; width: 100%;
height: 300px; height: 300px;
position: relative; position: relative;
ion-slides { ion-slides {
height: 100%;
}
.fav_icon {
width: 30px;
height: 30px;
background-image: url('../../assets/Group32_2.png');
background-position: center;
background-repeat: no-repeat;
background-size: 24px;
position: absolute;
top: 15px;
right: 15px;
z-index: 2;
}
.fav_fill {
width: 30px;
height: 30px;
background-image: url('../../assets/fav_fill.png');
background-position: center;
background-repeat: no-repeat;
background-size: 24px;
position: absolute;
top: 15px;
right: 15px;
z-index: 2;
}
.featured_badge {
position: absolute;
bottom: 20px;
right: 15px;
color: #fff;
background-color: rgba(41, 40, 91, 1);
padding: 2px;
padding-left: 5px;
padding-right: 5px;
font-size: 13px;
z-index: 2;
}
img {
width: 100%;
height: 100%;
object-position: center;
object-fit: cover;
}
}
.product_header {
padding: 10px;
h3 {
margin: 0px;
padding: 0px;
color: rgba(41, 40, 91, 1);
font-size: 26px;
font-weight: 900;
padding-bottom: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
p {
margin: 0px;
padding: 0px;
color: rgba(121, 119, 139, 1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
strong {
margin-right: 5px;
span {
img {
width: 16px;
}
}
}
}
h5 {
margin: 0px;
padding: 0px;
color: rgba(59, 57, 77, 1);
text-align: right;
font-size: 26px;
}
}
.product_div_content {
padding-bottom: 80px;
h5 {
color: rgba(41, 40, 91, 1);
margin: 0px;
padding: 10px;
font-weight: 900;
}
p {
color: rgba(59, 57, 77, 1);
padding: 10px;
text-align: justify;
margin: 0px;
}
.size_div {
padding: 10px;
ul {
margin: 0px;
padding: 0px;
li {
list-style: none;
width: 100%;
height: 100px;
margin: 4px;
display: inline-block;
#custom_check_button {
background-color: #fff;
border-radius: 10px !important;
overflow: auto;
color: #000;
border: 1px dashed rgba(215, 213, 228, 1);
position: relative;
width: 100%;
height: 100%; height: 100%;
outline: none; }
font-size: 17px; .fav_icon {
white-space: nowrap; width: 30px;
overflow: hidden; height: 30px;
text-overflow: ellipsis; background-image: url('../../assets/Group32_2.png');
} background-position: center;
#custom_check_button p { background-repeat: no-repeat;
margin: 0px; background-size: 24px;
position: absolute; position: absolute;
left: 0px; top: 15px;
right: 0px; right: 15px;
top: 0px; z-index: 2;
bottom: 0px; }
padding: 4px; .fav_fill {
padding-top: 35px; width: 30px;
padding-bottom: 35px; height: 30px;
text-align: center; background-image: url('../../assets/fav_fill.png');
} background-position: center;
#custom_check_button label { background-repeat: no-repeat;
width: 100%; background-size: 24px;
}
#custom_check_button label span {
text-align: center;
display: block;
}
#custom_check_button label input {
position: absolute; position: absolute;
top: 0px; top: 15px;
opacity: 0; right: 15px;
} z-index: 2;
#custom_check_button input:checked + p { }
background-color: rgba(41, 40, 91, 1); .featured_badge {
position: absolute;
bottom: 20px;
right: 15px;
color: #fff; color: #fff;
border-radius: 10px !important; background-color: rgba(41, 40, 91, 1);
margin: 0px; padding: 2px;
} padding-left: 5px;
padding-right: 5px;
font-size: 13px;
z-index: 2;
} }
} img {
} // width: 100%;
.color_div {
padding: 10px;
ul {
margin: 0px;
padding: 0px;
li {
list-style: none;
width: 100%;
height: 100px;
margin: 4px;
display: inline-block;
#custom_check_button {
background-color: #fff;
border-radius: 10px !important;
overflow: auto;
color: #000;
border: 1px dashed rgba(215, 213, 228, 1);
position: relative;
width: 100%;
height: 100%; height: 100%;
outline: none; object-position: center;
font-size: 17px; object-fit: cover;
} }
#custom_check_button p { }
.product_header {
padding: 10px;
h3 {
margin: 0px; margin: 0px;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
color: transparent;
bottom: 0px;
padding: 0px; padding: 0px;
text-align: center; color: rgba(41, 40, 91, 1);
border: 3px solid transparent; font-size: 20px;
img { font-weight: 900;
width: 100%; padding-bottom: 5px;
height: 100%; // white-space: nowrap;
border-radius: 10px !important; overflow: hidden;
object-fit: cover; text-overflow: ellipsis;
object-position: center; }
} p {
}
#custom_check_button label {
width: 100%;
}
#custom_check_button label span {
text-align: center;
display: block;
}
#custom_check_button label input {
position: absolute;
top: 0px;
opacity: 0;
}
#custom_check_button input:checked + p {
border: 3px dashed #29285b;
color: transparent;
border-radius: 10px !important;
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
} color: rgba(121, 119, 139, 1);
} // white-space: nowrap;
} overflow: hidden;
} text-overflow: ellipsis;
.review_list { strong {
padding: 10px; margin-right: 5px;
ul { span {
margin: 0px; img {
padding: 0px; width: 16px;
li { }
list-style: none;
padding-bottom: 20px;
.review_image {
width: 35px;
height: 35px;
border-radius: 50%;
float: left;
background-color: #a8a8a8;
img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
object-position: center;
}
}
.review_detail {
float: left;
width: calc(100% - 35px);
padding-left: 10px;
padding-top: 2px;
padding-bottom: 7px;
h4 {
margin: 0px;
padding: 0px;
color: rgba(59, 57, 77, 1);
span {
font-weight: bolder;
font-size: 18px;
margin-left: 10px;
img {
width: 16px;
margin-right: 2px;
} }
}
}
.review_date {
color: rgba(176, 174, 199, 1);
font-size: 14px;
}
p {
margin: 0px;
padding: 0px;
color: rgba(59, 57, 77, 1);
padding-top: 10px;
} }
}
} }
} h5 {
}
.related_product_slider {
ul {
padding: 10px;
padding-bottom: 0px;
padding-top: 0px;
margin: 0px;
li {
width: 100%;
display: inline-block;
border-top: none;
border-bottom: none;
margin-bottom: 10px;
.product_image {
height: 235px;
position: relative;
.featured_badge {
position: absolute;
top: 20px;
left: 0px;
color: #fff;
background-color: rgba(41, 40, 91, 1);
padding: 2px;
padding-left: 10px;
padding-right: 10px;
font-size: 13px;
}
.fav_icon {
position: absolute;
top: 10px;
right: 10px;
font-size: 27px;
width: 30px;
height: 30px;
background-image: url('../../assets/Group32_2.png');
background-position: center;
background-repeat: no-repeat;
background-size: 24px;
}
.fav_fill {
position: absolute;
top: 10px;
right: 10px;
font-size: 27px;
width: 30px;
height: 30px;
background-image: url('../../assets/fav_fill.png');
background-position: center;
background-repeat: no-repeat;
background-size: 24px;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
h5 {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
color: rgba(59, 57, 77, 1); color: rgba(59, 57, 77, 1);
padding-top: 5px; text-align: right;
padding-bottom: 5px; font-size: 26px;
font-weight: 400; }
text-align: left; }
font-size: 14px; .product_div_content {
white-space: nowrap; padding-bottom: 80px;
overflow: hidden; h5 {
text-overflow: ellipsis; color: rgba(41, 40, 91, 1);
}
p {
margin: 0px; margin: 0px;
padding: 0px; padding: 10px;
color: rgba(176, 174, 199, 1); font-weight: 900;
font-size: 12px; }
span { p {
text-decoration: line-through; color: rgba(59, 57, 77, 1);
margin-left: 10px; padding: 10px;
color: rgba(215, 213, 228, 1); text-align: justify;
margin: 0px;
}
.size_div {
padding: 10px;
ul {
margin: 0px;
padding: 0px;
li {
list-style: none;
width: 100%;
height: 100px;
margin: 4px;
display: inline-block;
#custom_check_button {
background-color: #fff;
border-radius: 10px !important;
overflow: auto;
color: #000;
border: 1px dashed rgba(215, 213, 228, 1);
position: relative;
width: 100%;
height: 100%;
outline: none;
font-size: 17px;
// white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#custom_check_button p {
margin: 0px;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
padding: 4px;
padding-top: 35px;
padding-bottom: 35px;
text-align: center;
display: flex;
align-items: center;
font-size: 14px;
}
#custom_check_button label {
width: 100%;
}
#custom_check_button label span {
text-align: center;
display: block;
}
#custom_check_button label input {
position: absolute;
top: 0px;
opacity: 0;
}
#custom_check_button input:checked+p {
background-color: rgba(41, 40, 91, 1);
color: #fff;
border-radius: 10px !important;
margin: 0px;
}
}
}
}
.color_div {
padding: 10px;
ul {
margin: 0px;
padding: 0px;
li {
list-style: none;
width: 100%;
height: 100px;
margin: 4px;
display: inline-block;
#custom_check_button {
background-color: #fff;
border-radius: 10px !important;
overflow: auto;
color: #000;
border: 1px dashed rgba(215, 213, 228, 1);
position: relative;
width: 100%;
height: 100%;
outline: none;
font-size: 17px;
}
#custom_check_button p {
margin: 0px;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
color: transparent;
bottom: 0px;
padding: 0px;
text-align: center;
border: 3px solid transparent;
img {
width: 100%;
height: 100%;
border-radius: 10px !important;
object-fit: cover;
object-position: center;
}
}
#custom_check_button label {
width: 100%;
}
#custom_check_button label span {
text-align: center;
display: block;
}
#custom_check_button label input {
position: absolute;
top: 0px;
opacity: 0;
}
#custom_check_button input:checked+p {
border: 3px dashed #29285b;
color: transparent;
border-radius: 10px !important;
margin: 0px;
padding: 0px;
}
}
} }
.offer { }
color: #fff; .review_list {
background-color: rgba(41, 40, 91, 1); padding: 10px;
border-radius: 4px; ul {
text-decoration: none; margin: 0px;
padding: 3px; padding: 0px;
font-size: 13px; li {
list-style: none;
padding-bottom: 20px;
.review_image {
width: 35px;
height: 35px;
border-radius: 50%;
float: left;
background-color: #a8a8a8;
img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
object-position: center;
}
}
.review_detail {
float: left;
width: calc(100% - 35px);
padding-left: 10px;
padding-top: 2px;
padding-bottom: 7px;
h4 {
margin: 0px;
padding: 0px;
color: rgba(59, 57, 77, 1);
span {
font-weight: bolder;
font-size: 18px;
margin-left: 10px;
img {
width: 16px;
margin-right: 2px;
}
}
}
.review_date {
color: rgba(176, 174, 199, 1);
font-size: 14px;
}
p {
margin: 0px;
padding: 0px;
color: rgba(59, 57, 77, 1);
padding-top: 10px;
}
}
}
}
}
.related_product_slider {
ul {
padding: 10px;
padding-bottom: 0px;
padding-top: 0px;
margin: 0px;
li {
width: 100%;
display: inline-block;
border-top: none;
border-bottom: none;
margin-bottom: 10px;
.product_image {
height: 235px;
position: relative;
.featured_badge {
position: absolute;
top: 20px;
left: 0px;
color: #fff;
background-color: rgba(41, 40, 91, 1);
padding: 2px;
padding-left: 10px;
padding-right: 10px;
font-size: 13px;
}
.fav_icon {
position: absolute;
top: 10px;
right: 10px;
font-size: 27px;
width: 30px;
height: 30px;
background-image: url('../../assets/Group32_2.png');
background-position: center;
background-repeat: no-repeat;
background-size: 24px;
}
.fav_fill {
position: absolute;
top: 10px;
right: 10px;
font-size: 27px;
width: 30px;
height: 30px;
background-image: url('../../assets/fav_fill.png');
background-position: center;
background-repeat: no-repeat;
background-size: 24px;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
h5 {
margin: 0px;
padding: 0px;
color: rgba(59, 57, 77, 1);
padding-top: 5px;
padding-bottom: 5px;
font-weight: 400;
text-align: left;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
p {
margin: 0px;
padding: 0px;
color: rgba(176, 174, 199, 1);
font-size: 12px;
span {
text-decoration: line-through;
margin-left: 10px;
color: rgba(215, 213, 228, 1);
}
.offer {
color: #fff;
background-color: rgba(41, 40, 91, 1);
border-radius: 4px;
text-decoration: none;
padding: 3px;
font-size: 13px;
}
}
}
} }
}
} }
}
} }
}
} }
.footer_div { .footer_div {
bottom: 0px; bottom: 0px;
height: 50px; height: 50px;
left: 0px; left: 0px;
right: 0px; right: 0px;
min-width: 100%; min-width: 100%;
background-color: #fff; background-color: #fff;
-webkit-box-shadow: 0px -2px 3px -1px rgba(0, 0, 0, 0.34); -webkit-box-shadow: 0px -2px 3px -1px rgba(0, 0, 0, 0.34);
-moz-box-shadow: 0px -2px 3px -1px rgba(0, 0, 0, 0.34); -moz-box-shadow: 0px -2px 3px -1px rgba(0, 0, 0, 0.34);
box-shadow: 0px -2px 3px -1px rgba(0, 0, 0, 0.34); box-shadow: 0px -2px 3px -1px rgba(0, 0, 0, 0.34);
border-top-left-radius: 10px; border-top-left-radius: 10px;
border-top-right-radius: 10px; border-top-right-radius: 10px;
z-index: 99; z-index: 99;
.footer_options { .footer_options {
width: 50%; width: 50%;
float: left; float: left;
height: 100%; height: 100%;
button { button {
width: 33.3%; width: 33.3%;
display: inline-block; display: inline-block;
height: 100%; height: 100%;
border-radius: 10px; border-radius: 10px;
background-color: transparent; background-color: transparent;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: 30px; background-size: 30px;
cursor: pointer; cursor: pointer;
} }
.cart { .cart {
background-image: url('../../assets/cart_2.png'); background-image: url('../../assets/cart_2.png');
} }
.fav { .fav {
background-image: url('../../assets/Group56_2.png'); background-image: url('../../assets/Group56_2.png');
} }
.fav_active { .fav_active {
background-image: url('../../assets/heart.png'); background-image: url('../../assets/heart.png');
}
.share {
background-image: url('../../assets/Group57_2.png');
}
} }
.footer_btn {
.share { width: 50%;
background-image: url('../../assets/Group57_2.png'); border-top-right-radius: 10px;
background-color: rgba(41, 40, 91, 1);
color: #fff;
float: right;
text-align: center;
padding: 15px;
font-size: 18px;
height: 100%;
} }
} }
.footer_btn { \ No newline at end of file
width: 50%;
border-top-right-radius: 10px;
background-color: rgba(41, 40, 91, 1);
color: #fff;
float: right;
text-align: center;
padding: 15px;
font-size: 18px;
height: 100%;
}
}
src/app/storelist/storelist.page.scss
.home_wrapper { .home_wrapper {
width: 100%; width: 100%;
padding-bottom: 50px;
.home_banner { .home_banner {
width: 100%; width: 100%;
height: 300px; height: 300px;
......
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