Skip to content

G
getme
Commit def7acba by Arjun
Options

product details style fix

parent 3c2f6b03
Showing with 523 additions and 559 deletions
src/app/app.component.scss
......@@ -8,7 +8,7 @@
.side_menu_wrapper {
background: rgba(41, 40, 91, 1);
width: 100%;
height: 100vh;
height: auto;
padding-left: 20px;
padding-top: 20px;
padding-right: 10px;
......
src/app/productdetail/productdetail.page.html
<div class="nav_header">
<button class="nav_btn nav_back floatLeft" (click)="goBack()">
<img src="../assets/Group17_2.png" />
</button>
<div class="nav_title floatLeft"></div>
<button class="nav_btn nav_cart floatRight" (click)="goToPage('cart')">
<div class="not" *ngIf="cartService.carts">
{{cartService.carts.length}}
</div>
</button>
<div class="clear"></div>
<button class="nav_btn nav_back floatLeft" (click)="goBack()">
<img src="../assets/Group17_2.png" />
</button>
<div class="nav_title floatLeft"></div>
<button class="nav_btn nav_cart floatRight" (click)="goToPage('cart')">
<div class="not" *ngIf="cartService.carts">
{{cartService.carts.length}}
</div>
</button>
<div class="clear"></div>
</div>
<ion-content>
<div class="product_detail_wrapper" *ngIf="product">
<div class="product_banner">
<div
[ngClass]="checkFavStatus(product.prodId)"
(click)="changeFav(product.prodId)"
></div>
<div class="featured_badge" *ngIf="product.featured">Featured</div>
<ion-slides pager="true" [options]="bannerOptions" *ngIf="slideData">
<ion-slide *ngFor="let prodImg of slideData">
<img [src]="prodImg" onerror="this.src='../assets/[email protected]'" />
</ion-slide>
<!-- <ion-slide>
<div class="product_detail_wrapper" *ngIf="product">
<div class="product_banner">
<div [ngClass]="checkFavStatus(product.prodId)" (click)="changeFav(product.prodId)"></div>
<div class="featured_badge" *ngIf="product.featured">Featured</div>
<ion-slides pager="true" [options]="bannerOptions" *ngIf="slideData">
<ion-slide *ngFor="let prodImg of slideData">
<img [src]="prodImg" onerror="this.src='../assets/[email protected]'" />
</ion-slide>
<!-- <ion-slide>
<img
[src]="product.image"
onerror="this.src='../assets/[email protected]'"
......@@ -34,84 +31,65 @@
onerror="this.src='../assets/[email protected]'"
/>
</ion-slide> -->
</ion-slides>
</div>
<div class="product_header">
<ion-row>
<ion-col size="8">
<h3>{{product.prodName}}</h3>
<p>
<strong
><span><img src="../assets/Path61_2.png"/></span
>{{product.rating}}</strong
>&nbsp; {{product.category}}, {{product.subCate}}
<br />
<span *ngFor="let tag of product.tag"
><span *ngIf="tag !=='No-Tag'">#{{tag}}&nbsp;</span></span
>
</p>
</ion-col>
<ion-col size="4">
<h5>A$ {{product.price}}</h5>
<p>
<span class="offer" *ngIf="product.discount > 0"
>-{{product.discount}}%</span
>
</p>
</ion-col>
</ion-row>
</div>
</ion-slides>
</div>
<div class="product_header">
<ion-row>
<ion-col size="8">
<h3>{{product.prodName}}</h3>
<p>
<strong><span><img src="../assets/Path61_2.png" /></span>{{product.rating}}</strong>&nbsp; {{product.category}}, {{product.subCate}}
<br />
<span *ngFor="let tag of product.tag"><span *ngIf="tag !=='No-Tag'">#{{tag}}&nbsp;</span></span>
</p>
</ion-col>
<ion-col size="4">
<h5>A$ {{product.price}}</h5>
<p>
<span class="offer" *ngIf="product.discount > 0">-{{product.discount}}%</span>
</p>
</ion-col>
</ion-row>
</div>
<div class="product_div_content">
<h5 *ngIf="product.color && product.color[0] !=='No-Color'">Color</h5>
<div class="size_div">
<ul *ngIf="product.size">
<ion-slides pager="false" [options]="slideOpts">
<ion-slide *ngFor="let color of product.color; let i = index">
<li *ngIf="color !=='No-Color'">
<button id="custom_check_button">
<label>
<input
id="{{color}}"
type="radio"
name="color"
value="{{color}}"
(click)="cartService.choose_color(color)"
[checked]="i==0"
/>
<p>{{color}}</p>
</label>
</button>
</li>
</ion-slide>
</ion-slides>
</ul>
</div>
<h5 *ngIf="product.size && product.size[0] !=='Any-Size'">Size</h5>
<div class="size_div">
<ul *ngIf="product.size">
<ion-slides pager="false" [options]="slideOpts">
<ion-slide *ngFor="let size of product.size; let i = index">
<li *ngIf="size !=='Any-Size'">
<button id="custom_check_button">
<label>
<input
id="{{size}}"
type="radio"
name="services"
value="{{size}}"
(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="product_div_content">
<h5 *ngIf="product.color && product.color[0] !=='No-Color'">Color</h5>
<div class="size_div">
<ul *ngIf="product.size">
<ion-slides pager="false" [options]="slideOpts">
<ion-slide *ngFor="let color of product.color; let i = index">
<li *ngIf="color !=='No-Color'">
<button id="custom_check_button">
<label>
<input id="{{color}}" type="radio" name="color" value="{{color}}"
(click)="cartService.choose_color(color)" [checked]="i==0" />
<p>{{color}}</p>
</label>
</button>
</li>
</ion-slide>
</ion-slides>
</ul>
</div>
<h5 *ngIf="product.size && product.size[0] !=='Any-Size'">Size</h5>
<div class="size_div">
<ul *ngIf="product.size">
<ion-slides pager="false" [options]="slideOpts">
<ion-slide *ngFor="let size of product.size; let i = index">
<li *ngIf="size !=='Any-Size'">
<button id="custom_check_button">
<label>
<input id="{{size}}" type="radio" name="services" value="{{size}}"
(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">
<ul>
<ion-slides pager="false" [options]="slideOpts">
......@@ -168,9 +146,9 @@
</ion-slides>
</ul>
</div> -->
<h5>Description</h5>
<p>{{product.prodDesc}}</p>
<!--<h5>
<h5>Description</h5>
<p>{{product.prodDesc}}</p>
<!--<h5>
<span class="floatLeft">Reviews</span><span class="floatRight" (click)="goToPage('reviewlist')">MORE</span>
<div class="clear"></div>
</h5>
......@@ -234,61 +212,43 @@
</li>
</ul>
</div> -->
<h5 *ngIf="product.similar && product.similar.length > 0">
<span class="floatLeft">Related Products</span
><span class="floatRight" (click)="goToPage('productlist', data)"
>MORE</span
>
<div class="clear"></div>
</h5>
<div class="related_product_slider">
<ul *ngIf="product.similar && product.similar.length > 0">
<ion-slides pager="false" [options]="relatedProd">
<ion-slide *ngFor="let similar of product.similar">
<li (click)="viewProd(similar)">
<div class="product_image">
<img
[src]="similar.image"
onerror="this.src='../assets/[email protected]'"
/>
<div
[ngClass]="checkFavStatus(similar.prodId)"
(click)="changeFav(similar.prodId)"
></div>
</div>
<h5>{{similar.prodName}}</h5>
<p>{{similar.price}}</p>
</li>
</ion-slide>
</ion-slides>
</ul>
</div>
<h5 *ngIf="product.similar && product.similar.length > 0">
<span class="floatLeft">Related Products</span><span class="floatRight" (click)="goToPage('productlist', data)">MORE</span>
<div class="clear"></div>
</h5>
<div class="related_product_slider">
<ul *ngIf="product.similar && product.similar.length > 0">
<ion-slides pager="false" [options]="relatedProd">
<ion-slide *ngFor="let similar of product.similar">
<li (click)="viewProd(similar)">
<div class="product_image">
<img [src]="similar.image" onerror="this.src='../assets/[email protected]'" />
<div [ngClass]="checkFavStatus(similar.prodId)" (click)="changeFav(similar.prodId)">
</div>
</div>
<h5>{{similar.prodName}}</h5>
<p>{{similar.price}}</p>
</li>
</ion-slide>
</ion-slides>
</ul>
</div>
</div>
</div>
</div>
<div class="loader" *ngIf="loader">
<div class="lds-ripple">
<div></div>
<div></div>
<div class="loader" *ngIf="loader">
<div class="lds-ripple">
<div></div>
<div></div>
</div>
</div>
</div>
</ion-content>
<ion-footer *ngIf="product">
<div class="footer_div">
<div class="footer_options">
<button
class="share"
(click)="socialShare(product.prodName, product.category, product.subCate, product.price, product.image)"
></button>
<button
[ngClass]="checkFavStatus(product.prodId)"
(click)="changeFav(product.prodId)"
></button>
<button
class="cart"
[disabled]="!disCart"
(click)="buyNow(product,0)"
></button>
<div class="footer_div">
<div class="footer_options">
<button class="share" (click)="socialShare(product.prodName, product.category, product.subCate, product.price, product.image)"></button>
<button [ngClass]="checkFavStatus(product.prodId)" (click)="changeFav(product.prodId)"></button>
<button class="cart" [disabled]="!disCart" (click)="buyNow(product,0)"></button>
</div>
<div class="footer_btn" (click)="buyNow(product,1)">BUY NOW</div>
</div>
<div class="footer_btn" (click)="buyNow(product,1)">BUY NOW</div>
</div>
</ion-footer>
</ion-footer>
\ No newline at end of file
src/app/productdetail/productdetail.page.scss
.product_detail_wrapper {
.product_banner {
width: 100%;
height: 300px;
position: relative;
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%;
.product_banner {
width: 100%;
height: 300px;
position: relative;
ion-slides {
height: 100%;
outline: none;
font-size: 17px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#custom_check_button p {
margin: 0px;
}
.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;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
padding: 4px;
padding-top: 35px;
padding-bottom: 35px;
text-align: center;
}
#custom_check_button label {
width: 100%;
}
#custom_check_button label span {
text-align: center;
display: block;
}
#custom_check_button label input {
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: 0px;
opacity: 0;
}
#custom_check_button input:checked + p {
background-color: rgba(41, 40, 91, 1);
top: 15px;
right: 15px;
z-index: 2;
}
.featured_badge {
position: absolute;
bottom: 20px;
right: 15px;
color: #fff;
border-radius: 10px !important;
margin: 0px;
}
background-color: rgba(41, 40, 91, 1);
padding: 2px;
padding-left: 5px;
padding-right: 5px;
font-size: 13px;
z-index: 2;
}
}
}
.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%;
img {
// width: 100%;
height: 100%;
outline: none;
font-size: 17px;
}
#custom_check_button p {
object-position: center;
object-fit: cover;
}
}
.product_header {
padding: 10px;
h3 {
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;
color: rgba(41, 40, 91, 1);
font-size: 20px;
font-weight: 900;
padding-bottom: 5px;
// white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
p {
margin: 0px;
padding: 0px;
}
}
}
}
.review_list {
padding: 10px;
ul {
margin: 0px;
padding: 0px;
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;
color: rgba(121, 119, 139, 1);
// white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
strong {
margin-right: 5px;
span {
img {
width: 16px;
}
}
}
}
.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 {
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 {
text-align: right;
font-size: 26px;
}
}
.product_div_content {
padding-bottom: 80px;
h5 {
color: rgba(41, 40, 91, 1);
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);
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%;
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;
background-color: rgba(41, 40, 91, 1);
border-radius: 4px;
text-decoration: none;
padding: 3px;
font-size: 13px;
}
.review_list {
padding: 10px;
ul {
margin: 0px;
padding: 0px;
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 {
bottom: 0px;
height: 50px;
left: 0px;
right: 0px;
min-width: 100%;
background-color: #fff;
-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);
box-shadow: 0px -2px 3px -1px rgba(0, 0, 0, 0.34);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
z-index: 99;
.footer_options {
width: 50%;
float: left;
height: 100%;
button {
width: 33.3%;
display: inline-block;
height: 100%;
border-radius: 10px;
background-color: transparent;
background-repeat: no-repeat;
background-position: center;
background-size: 30px;
cursor: pointer;
}
.cart {
background-image: url('../../assets/cart_2.png');
}
.fav {
background-image: url('../../assets/Group56_2.png');
}
.fav_active {
background-image: url('../../assets/heart.png');
bottom: 0px;
height: 50px;
left: 0px;
right: 0px;
min-width: 100%;
background-color: #fff;
-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);
box-shadow: 0px -2px 3px -1px rgba(0, 0, 0, 0.34);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
z-index: 99;
.footer_options {
width: 50%;
float: left;
height: 100%;
button {
width: 33.3%;
display: inline-block;
height: 100%;
border-radius: 10px;
background-color: transparent;
background-repeat: no-repeat;
background-position: center;
background-size: 30px;
cursor: pointer;
}
.cart {
background-image: url('../../assets/cart_2.png');
}
.fav {
background-image: url('../../assets/Group56_2.png');
}
.fav_active {
background-image: url('../../assets/heart.png');
}
.share {
background-image: url('../../assets/Group57_2.png');
}
}
.share {
background-image: url('../../assets/Group57_2.png');
.footer_btn {
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%;
}
}
.footer_btn {
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%;
}
}
}
\ 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