parent
							
								
									14aed3c7b3
								
							
						
					
					
						commit
						7ca18bbe67
					
				
				 30 changed files with 842 additions and 597 deletions
			
			
		| @ -0,0 +1,79 @@ | |||||||
|  | 
 | ||||||
|  | import './index.scss'; | ||||||
|  | 
 | ||||||
|  | const maxDesktopSize = 1250; | ||||||
|  | const maxMobileSize = 550; | ||||||
|  | 
 | ||||||
|  | const fontSize = { | ||||||
|  |   desktop: { | ||||||
|  |     h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40, | ||||||
|  |     th: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 80, | ||||||
|  |     h2: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 55, | ||||||
|  |     h3: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90, | ||||||
|  |     strong: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90, | ||||||
|  |     span: window.innerWidth > maxDesktopSize ? 10 : window.innerWidth / 95, | ||||||
|  |   }, | ||||||
|  |   mobile: { | ||||||
|  |     h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 13, | ||||||
|  |     h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 24, | ||||||
|  |     h3: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30, | ||||||
|  |     strong: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30, | ||||||
|  |     span: window.innerWidth > maxMobileSize ? 10 : window.innerWidth / 34, | ||||||
|  |     p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 32, | ||||||
|  |     input: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 20, | ||||||
|  |   }, | ||||||
|  | }; | ||||||
|  | const DeliveryMethod = (props) => { | ||||||
|  |   return ( | ||||||
|  |     <> | ||||||
|  |       {window.innerWidth > 1000 ? ( | ||||||
|  |         <div | ||||||
|  |           className="delivery-methods d-flex justify-content-between align-items-center" | ||||||
|  |           style={{ | ||||||
|  |             background: | ||||||
|  |               props.parent.state.selectedDelivery === props.data | ||||||
|  |                 ? "#ccffcc" | ||||||
|  |                 : "white", | ||||||
|  |           }} | ||||||
|  |           onClick={() => | ||||||
|  |             props.parent.setState({ selectedDelivery: props.data }) | ||||||
|  |           } | ||||||
|  |         > | ||||||
|  |           <strong style={{ fontSize: fontSize.desktop.strong }}> | ||||||
|  |             {props.data.name} | ||||||
|  |           </strong> | ||||||
|  |           <div className="d-flex flex-column align-items-center"> | ||||||
|  |             <h3 style={{ fontSize: fontSize.desktop.h3 }}> | ||||||
|  |               {props.data.price} | ||||||
|  |             </h3> | ||||||
|  |             <span style={{ fontSize: fontSize.desktop.span }}>تومان</span> | ||||||
|  |           </div> | ||||||
|  |         </div> | ||||||
|  |       ) : null} | ||||||
|  |       {window.innerWidth < 1000 ? ( | ||||||
|  |         <div | ||||||
|  |           className="mobile-delivery-methods d-flex justify-content-between align-items-center" | ||||||
|  |           style={{ | ||||||
|  |             background: | ||||||
|  |               props.parent.state.selectedDelivery === props.data | ||||||
|  |                 ? "#ccffcc" | ||||||
|  |                 : "white", | ||||||
|  |           }} | ||||||
|  |           onClick={() => | ||||||
|  |             props.parent.setState({ selectedDelivery: props.data }) | ||||||
|  |           } | ||||||
|  |         > | ||||||
|  |           <strong style={{ fontSize: fontSize.mobile.strong }}> | ||||||
|  |             {props.data.name} | ||||||
|  |           </strong> | ||||||
|  |           <div className="d-flex flex-column align-items-center"> | ||||||
|  |             <h3 style={{ fontSize: fontSize.mobile.h3 }}>{props.data.price}</h3> | ||||||
|  |             <span style={{ fontSize: fontSize.mobile.span }}>تومان</span> | ||||||
|  |           </div> | ||||||
|  |         </div> | ||||||
|  |       ) : null} | ||||||
|  |     </> | ||||||
|  |   ); | ||||||
|  | }; | ||||||
|  | 
 | ||||||
|  | export default DeliveryMethod; | ||||||
| @ -0,0 +1,48 @@ | |||||||
|  | .mobile-delivery-methods { | ||||||
|  |   padding: 6px; | ||||||
|  |   border-radius: 10px; | ||||||
|  |   border: 1px solid #88a9ff; | ||||||
|  |   margin-top: 10px; | ||||||
|  |   width: 48%; | ||||||
|  |   h3, | ||||||
|  |   strong, | ||||||
|  |   span { | ||||||
|  |     font-family: numeralLight; | ||||||
|  |     font-weight: 100; | ||||||
|  |     margin: 0px; | ||||||
|  |   } | ||||||
|  |   strong { | ||||||
|  |     // width: 50%; | ||||||
|  |     color: #678ef8; | ||||||
|  |     letter-spacing: -1px; | ||||||
|  |   } | ||||||
|  |   h3, | ||||||
|  |   span { | ||||||
|  |     color: #02a255; | ||||||
|  |     font-family: numeralMedium; | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .delivery-methods { | ||||||
|  |   padding: 6px; | ||||||
|  |   border-radius: 10px; | ||||||
|  |   border: 1px solid #88a9ff; | ||||||
|  |   margin-top: 10px; | ||||||
|  |   h3, | ||||||
|  |   strong, | ||||||
|  |   span { | ||||||
|  |     font-family: numeralLight; | ||||||
|  |     font-weight: 100; | ||||||
|  |     margin: 0px; | ||||||
|  |   } | ||||||
|  |   strong { | ||||||
|  |     width: 50%; | ||||||
|  |     color: #678ef8; | ||||||
|  |     letter-spacing: -1px; | ||||||
|  |   } | ||||||
|  |   h3, | ||||||
|  |   span { | ||||||
|  |     color: #02a255; | ||||||
|  |     font-family: numeralMedium; | ||||||
|  |   } | ||||||
|  | } | ||||||
| @ -0,0 +1,57 @@ | |||||||
|  | import React from 'react'; | ||||||
|  | import './index.scss'; | ||||||
|  | 
 | ||||||
|  | const maxDesktopSize = 1250; | ||||||
|  | const maxMobileSize = 550; | ||||||
|  | 
 | ||||||
|  | const fontSize = { | ||||||
|  |   desktop: { | ||||||
|  |     h2: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 55, | ||||||
|  |     input : window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 75, | ||||||
|  |     button : window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 75, | ||||||
|  |     p: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90, | ||||||
|  |   }, | ||||||
|  |   mobile: { | ||||||
|  |     h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 24, | ||||||
|  |     p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 32, | ||||||
|  |     input: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 20, | ||||||
|  |     button: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 20, | ||||||
|  | 
 | ||||||
|  |   }, | ||||||
|  | }; | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | const DiscoutCode = (props) => { | ||||||
|  |   return ( | ||||||
|  |     <> | ||||||
|  |       {window.innerWidth > 1000 ? ( | ||||||
|  |         <div className="discount-code d-flex flex-column"> | ||||||
|  |         <h2 style={{ fontSize: fontSize.desktop.h2 }}>کد تخفیف</h2> | ||||||
|  |         <p style={{ fontSize: fontSize.desktop.p }}> | ||||||
|  |           اگر کد تخفیفی دارید آن را در کادر زیر وارد نمائید و دکمه ثبت کد را | ||||||
|  |           بزنید | ||||||
|  |         </p> | ||||||
|  |         <div className="discount-code__box d-flex align-items-center"> | ||||||
|  |           <input style={{ fontSize: fontSize.desktop.input }} type="text" /> | ||||||
|  |           <button style={{ fontSize: fontSize.desktop.button }}>ثبت کد</button> | ||||||
|  |         </div> | ||||||
|  |       </div> | ||||||
|  |       ) : null} | ||||||
|  |       {window.innerWidth < 1000 ? ( | ||||||
|  |         <div className="mobile-discount-code d-flex flex-column"> | ||||||
|  |           <h2 style={{ fontSize: fontSize.mobile.h2 }}>کد تخفیف</h2> | ||||||
|  |           <p style={{ fontSize: fontSize.mobile.p }}> | ||||||
|  |             اگر کد تخفیفی دارید آن را در کادر زیر وارد نمائید و دکمه ثبت کد را | ||||||
|  |             بزنید | ||||||
|  |           </p> | ||||||
|  |           <div className="mobile-discount-code__box d-flex align-items-center"> | ||||||
|  |             <input style={{ fontSize: fontSize.mobile.input }} type="text" /> | ||||||
|  |             <button style={{ fontSize: fontSize.desktop.button }}>ثبت کد</button> | ||||||
|  |           </div> | ||||||
|  |         </div> | ||||||
|  |       ) : null} | ||||||
|  |     </> | ||||||
|  |   ); | ||||||
|  | }; | ||||||
|  | 
 | ||||||
|  | export default DiscoutCode; | ||||||
| @ -0,0 +1,83 @@ | |||||||
|  | .discount-code { | ||||||
|  |   border-bottom: 1px dotted #A5A5A5; | ||||||
|  |   margin-top: 20px; | ||||||
|  |   padding-bottom: 20px; | ||||||
|  |   h2 { | ||||||
|  |     font-family: numeralBold; | ||||||
|  |     color: #2580ec; | ||||||
|  |   } | ||||||
|  |   p { | ||||||
|  |     font-family: numeralLight; | ||||||
|  |     color: #a5a5a5; | ||||||
|  |     letter-spacing: -1px; | ||||||
|  |   } | ||||||
|  |   &__box{ | ||||||
|  |     border: 1px solid #2b95ff; | ||||||
|  |     padding: 5px; | ||||||
|  |     border-radius: 10px; | ||||||
|  |     input { | ||||||
|  |       color: #2b95ff; | ||||||
|  |       font-family: numeralLight; | ||||||
|  |       text-align: center; | ||||||
|  |       padding: 0px; | ||||||
|  |       border-radius: 10px; | ||||||
|  |       border: 0px; | ||||||
|  |       flex: 1; | ||||||
|  |       direction: ltr; | ||||||
|  |       &:focus{ | ||||||
|  |         outline : none; | ||||||
|  |       } | ||||||
|  |     } | ||||||
|  |     button { | ||||||
|  |       border-radius: 10px; | ||||||
|  |       background-color: #2b95ff; | ||||||
|  |       font-family: numeralLight; | ||||||
|  |       color: white; | ||||||
|  |       padding: 5px 10px; | ||||||
|  |       border: 0px; | ||||||
|  |       width: 80px; | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .mobile-discount-code { | ||||||
|  |   border-bottom: 1px dotted #A5A5A5; | ||||||
|  |   margin-top: 20px; | ||||||
|  |   padding-bottom: 20px; | ||||||
|  |   h2 { | ||||||
|  |     font-family: numeralBold; | ||||||
|  |     color: #2580ec; | ||||||
|  |   } | ||||||
|  |   p { | ||||||
|  |     font-family: numeralLight; | ||||||
|  |     color: #a5a5a5; | ||||||
|  |     letter-spacing: -1px; | ||||||
|  |   } | ||||||
|  |   &__box{ | ||||||
|  |     border: 1px solid #2b95ff; | ||||||
|  |     padding: 5px; | ||||||
|  |     border-radius: 10px; | ||||||
|  |     input { | ||||||
|  |       color: #2b95ff; | ||||||
|  |       font-family: numeralLight; | ||||||
|  |       text-align: center; | ||||||
|  |       padding: 5px; | ||||||
|  |       border-radius: 10px; | ||||||
|  |       border: 0px; | ||||||
|  |       flex: 1; | ||||||
|  |       direction: ltr; | ||||||
|  |       &:focus{ | ||||||
|  |         outline : none; | ||||||
|  |       } | ||||||
|  |     } | ||||||
|  |     button { | ||||||
|  |       border-radius: 10px; | ||||||
|  |       background-color: #2b95ff; | ||||||
|  |       font-family: numeralLight; | ||||||
|  |       color: white; | ||||||
|  |       padding: 10px 20px; | ||||||
|  |       border: 0px; | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  |    | ||||||
|  | } | ||||||
| @ -0,0 +1,75 @@ | |||||||
|  | import React, { Component } from 'react'; | ||||||
|  | import './index.scss'; | ||||||
|  | 
 | ||||||
|  | const maxDesktopSize = 1250; | ||||||
|  | const maxMobileSize = 550; | ||||||
|  | 
 | ||||||
|  | const fontSize = { | ||||||
|  |   desktop: { | ||||||
|  |     h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40, | ||||||
|  |     th: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 80, | ||||||
|  |     h2: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 55, | ||||||
|  |     h3: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90, | ||||||
|  |     strong: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90, | ||||||
|  |     span: window.innerWidth > maxDesktopSize ? 10 : window.innerWidth / 95, | ||||||
|  |   }, | ||||||
|  |   mobile: { | ||||||
|  |     h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 13, | ||||||
|  |     h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 24, | ||||||
|  |     h3: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30, | ||||||
|  |     strong: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30, | ||||||
|  |     span: window.innerWidth > maxMobileSize ? 10 : window.innerWidth / 34, | ||||||
|  |     p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 32, | ||||||
|  |     input: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 20, | ||||||
|  |   }, | ||||||
|  | }; | ||||||
|  | 
 | ||||||
|  | const Factor = (props) => { | ||||||
|  |   const { list, parent } = props; | ||||||
|  | 
 | ||||||
|  |   const totalPrice = () => { | ||||||
|  |     let total = 0; | ||||||
|  |     for (let i = 0; i < parent.state.list.length; i++) { | ||||||
|  |       total += parent.state.list[i].price * parent.state.list[i].number; | ||||||
|  |     } | ||||||
|  |     return total; | ||||||
|  |   }; | ||||||
|  |   return ( | ||||||
|  |     <> | ||||||
|  |       {window.innerWidth < 1000 ? ( | ||||||
|  |         <div className="mobile-factor d-flex flex-column"> | ||||||
|  |           <div className="d-flex justify-content-between"> | ||||||
|  |             <strong>مبلغ سبد خرید</strong> | ||||||
|  |             <span>{totalPrice()} تومان</span> | ||||||
|  |           </div> | ||||||
|  |           <div className="d-flex justify-content-between"> | ||||||
|  |             <strong>هزینه ارسال</strong> | ||||||
|  |             <span>{props.parent.state.selectedDelivery.price} تومان</span> | ||||||
|  |           </div> | ||||||
|  |           <div className="d-flex justify-content-between"> | ||||||
|  |             <strong>میزان تخفیف</strong> | ||||||
|  |             <span>{props.parent.state.discount} تومان</span> | ||||||
|  |           </div> | ||||||
|  |         </div> | ||||||
|  |       ) : null} | ||||||
|  |       {window.innerWidth > 1000 ? ( | ||||||
|  |         <div className="factor d-flex flex-column"> | ||||||
|  |           <div className="d-flex justify-content-between"> | ||||||
|  |             <strong>مبلغ سبد خرید</strong> | ||||||
|  |             <span>{totalPrice()} تومان</span> | ||||||
|  |           </div> | ||||||
|  |           <div className="d-flex justify-content-between"> | ||||||
|  |             <strong>هزینه ارسال</strong> | ||||||
|  |             <span>{props.parent.state.selectedDelivery.price} تومان</span> | ||||||
|  |           </div> | ||||||
|  |           <div className="d-flex justify-content-between"> | ||||||
|  |             <strong>میزان تخفیف</strong> | ||||||
|  |             <span>{props.parent.state.discount} تومان</span> | ||||||
|  |           </div> | ||||||
|  |         </div> | ||||||
|  |       ) : null} | ||||||
|  |     </> | ||||||
|  |   ); | ||||||
|  | }; | ||||||
|  | 
 | ||||||
|  | export default Factor; | ||||||
| @ -0,0 +1,53 @@ | |||||||
|  | .mobile-factor{ | ||||||
|  |   border-bottom: 1px dotted #A5A5A5; | ||||||
|  |   margin-top: 20px; | ||||||
|  |   padding-bottom: 20px; | ||||||
|  |   h2 { | ||||||
|  |     font-family: numeralBold; | ||||||
|  |     color: #2580ec; | ||||||
|  |   } | ||||||
|  |   p { | ||||||
|  |     font-family: numeralLight; | ||||||
|  |     color: #a5a5a5; | ||||||
|  |     letter-spacing: -1px; | ||||||
|  |   } | ||||||
|  |   div{ | ||||||
|  |     margin-bottom: 10px; | ||||||
|  |     strong{ | ||||||
|  |       font-family: numeralLight; | ||||||
|  |       color: #373737; | ||||||
|  |       font-weight: 300; | ||||||
|  |     } | ||||||
|  |     span{ | ||||||
|  |       font-family: numeralLight; | ||||||
|  |       color: #373737; | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .factor{ | ||||||
|  |   border-bottom: 1px dotted #A5A5A5; | ||||||
|  |   margin-top: 20px; | ||||||
|  |   padding-bottom: 20px; | ||||||
|  |   h2 { | ||||||
|  |     font-family: numeralBold; | ||||||
|  |     color: #2580ec; | ||||||
|  |   } | ||||||
|  |   p { | ||||||
|  |     font-family: numeralLight; | ||||||
|  |     color: #a5a5a5; | ||||||
|  |     letter-spacing: -1px; | ||||||
|  |   } | ||||||
|  |   div{ | ||||||
|  |     margin-bottom: 10px; | ||||||
|  |     strong{ | ||||||
|  |       font-family: numeralLight; | ||||||
|  |       color: #373737; | ||||||
|  |       font-weight: 300; | ||||||
|  |     } | ||||||
|  |     span{ | ||||||
|  |       font-family: numeralLight; | ||||||
|  |       color: #373737; | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  | } | ||||||
| @ -1,87 +0,0 @@ | |||||||
| import React from "react"; |  | ||||||
| import DeleteOutlineOutlinedIcon from "@material-ui/icons/DeleteOutlineOutlined"; |  | ||||||
| 
 |  | ||||||
| import "./index.scss"; |  | ||||||
| 
 |  | ||||||
| const maxDesktopSize = 1250; |  | ||||||
| 
 |  | ||||||
| const fontSize = { |  | ||||||
|   desktop: { |  | ||||||
|     info: { |  | ||||||
|       strong: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 75, |  | ||||||
|       p: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95, |  | ||||||
|       span: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95, |  | ||||||
|     }, |  | ||||||
|     price: { |  | ||||||
|       strong: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 60, |  | ||||||
|       span: window.innerWidth > maxDesktopSize ? 13 : window.innerWidth / 95, |  | ||||||
|     }, |  | ||||||
|     counter: { |  | ||||||
|       button: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 65, |  | ||||||
|       span: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 65, |  | ||||||
|     }, |  | ||||||
|     delete: { |  | ||||||
|       span: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 75, |  | ||||||
|     }, |  | ||||||
|   }, |  | ||||||
| }; |  | ||||||
| 
 |  | ||||||
| export default function Item(props) { |  | ||||||
|   const { data, handleCounter, handleDelete } = props; |  | ||||||
|   return ( |  | ||||||
|     <tr className="cart-item d-flex align-items-center"> |  | ||||||
|         <td className="cart-item__info d-flex"> |  | ||||||
|           <img src={data.image} alt={data.title} /> |  | ||||||
|           <div className="d-flex flex-column justify-content-center"> |  | ||||||
|             <strong style={{ fontSize: fontSize.desktop.info.strong }}> |  | ||||||
|               {data.title} |  | ||||||
|             </strong> |  | ||||||
|             <p style={{ fontSize: fontSize.desktop.info.p }}>{data.subTitle}</p> |  | ||||||
|             <span style={{ fontSize: fontSize.desktop.info.span }}> |  | ||||||
|               {data.options}بسته الحاقی: |  | ||||||
|             </span> |  | ||||||
|           </div> |  | ||||||
|         </td> |  | ||||||
|         <td className="cart-item__price d-flex flex-column justify-content-center align-items-center"> |  | ||||||
|             <strong style={{ fontSize: fontSize.desktop.price.strong }}> |  | ||||||
|               {data.price} تومان |  | ||||||
|             </strong> |  | ||||||
|             <span style={{ fontSize: fontSize.desktop.price.span }}> |  | ||||||
|               {data.slicePrice} قیمت هر واحد |  | ||||||
|             </span> |  | ||||||
|         </td> |  | ||||||
|         <td className="cart-item__counter d-flex align-items-center"> |  | ||||||
|             <div className="cart-item__counter--box d-flex justify-content-around align-items-center"> |  | ||||||
|               <button |  | ||||||
|                 onClick={() => handleCounter("increase", data.id)} |  | ||||||
|                 style={{ fontSize: fontSize.desktop.counter.button }} |  | ||||||
|               > |  | ||||||
|                 + |  | ||||||
|               </button> |  | ||||||
|               <span style={{ fontSize: fontSize.desktop.counter.span }}> |  | ||||||
|                 {data.number} |  | ||||||
|               </span> |  | ||||||
|               <button |  | ||||||
|                 onClick={() => data.number > 1 ? handleCounter("decrease", data.id) : handleDelete(data.id)} |  | ||||||
|                 style={{ fontSize: fontSize.desktop.counter.button }} |  | ||||||
|               > |  | ||||||
|                 - |  | ||||||
|               </button> |  | ||||||
|             </div> |  | ||||||
|         </td> |  | ||||||
|         <td className="cart-item__delete d-flex align-items-center justify-content-center"> |  | ||||||
|             <DeleteOutlineOutlinedIcon |  | ||||||
|               style={{ color: "#FC120A", fontSize: 30, marginLeft: 5 }} |  | ||||||
|               onClick={() => handleDelete(data.id)} |  | ||||||
|             /> |  | ||||||
|             <span |  | ||||||
|               onClick={() => handleDelete(data.id)} |  | ||||||
|               style={{ fontSize: fontSize.desktop.delete.span }} |  | ||||||
|             > |  | ||||||
|               حذف |  | ||||||
|             </span> |  | ||||||
|         </td> |  | ||||||
|       
 |  | ||||||
|     </tr> |  | ||||||
|   ); |  | ||||||
| } |  | ||||||
| @ -1,71 +0,0 @@ | |||||||
| .cart-item{ |  | ||||||
|   // justify-content: space-between; |  | ||||||
|   border-top: 1px solid #eee; |  | ||||||
|   padding: 15px 0px; |  | ||||||
|   &__info{ |  | ||||||
|     flex: 3; |  | ||||||
|     // flex-shrink: 1; |  | ||||||
|     img{ |  | ||||||
|       height: 100px; |  | ||||||
|       border-radius: 10px; |  | ||||||
|       margin-left: 10px; |  | ||||||
|     } |  | ||||||
|     div{ |  | ||||||
|       strong{ |  | ||||||
|         font-family: numeralBold; |  | ||||||
|         color: #373737; |  | ||||||
|       } |  | ||||||
|       p{ |  | ||||||
|         font-family: numeralLight; |  | ||||||
|         color: #00CC69; |  | ||||||
|         margin: 0px; |  | ||||||
|         letter-spacing: -1px; |  | ||||||
|       } |  | ||||||
|       span{ |  | ||||||
|         font-family: numeralLight; |  | ||||||
|         color: #2580EC; |  | ||||||
|         letter-spacing: -1px; |  | ||||||
|       } |  | ||||||
|     } |  | ||||||
|   } |  | ||||||
|   &__price{ |  | ||||||
|     flex: 1.5; |  | ||||||
|     flex-shrink: 1; |  | ||||||
|     color: #4D4D4F; |  | ||||||
|     strong{ |  | ||||||
|       font-family: numeralBold; |  | ||||||
|     } |  | ||||||
|     span{ |  | ||||||
|       font-family: numeralLight; |  | ||||||
|     } |  | ||||||
|   } |  | ||||||
|   &__counter{ |  | ||||||
|     flex: 1.5; |  | ||||||
|     flex-shrink: 1; |  | ||||||
|     justify-content:  center; |  | ||||||
|     &--box{ |  | ||||||
|       padding: 5px 10px; |  | ||||||
|       border: 1px solid rgb(177, 177, 177); |  | ||||||
|       border-radius: 8px; |  | ||||||
|       button{ |  | ||||||
|         border: 0px; |  | ||||||
|         background-color: white; |  | ||||||
|         color: #4D4D4F; |  | ||||||
|       } |  | ||||||
|       span{ |  | ||||||
|         margin: 0px 15px; |  | ||||||
|         color: #4D4D4F; |  | ||||||
| 
 |  | ||||||
|       } |  | ||||||
|     } |  | ||||||
|      |  | ||||||
|   } |  | ||||||
|   &__delete{ |  | ||||||
|     flex: 1; |  | ||||||
|     margin-left: 20px; |  | ||||||
|     span{ |  | ||||||
|       font-family: numeralLight; |  | ||||||
|       color : #FC120A; |  | ||||||
|     } |  | ||||||
|   } |  | ||||||
| } |  | ||||||
| @ -1,7 +1,11 @@ | |||||||
| .navbar{ | .navbar{ | ||||||
|   width: 100%; |   width: 100%; | ||||||
|   position: fixed; |   max-width: 1250px; | ||||||
|   top: 0px; |   position: fixed !important; | ||||||
|   left: 0px; |   top: 0px !important; | ||||||
|   overflow-x: hidden; |   overflow-x: hidden; | ||||||
|  |   background-color:white !important; | ||||||
|  |   z-index: 200; | ||||||
|  |    | ||||||
|  |   // margin: 0px auto !important; | ||||||
| } | } | ||||||
					Loading…
					
					
				
		Reference in new issue