update AppRouter.js, src/views/Cart/Factor/index.js, src/views/Cart/index.js and src/views/Cart/index.scss
parent
f542f68e87
commit
043cee641d
17 changed files with 2059 additions and 29 deletions
@ -0,0 +1,96 @@ |
||||
import React, { Component } from "react"; |
||||
import "./index.scss"; |
||||
import { connect } from "react-redux"; |
||||
import { transport } from "~/Redux/actions"; |
||||
|
||||
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, |
||||
}, |
||||
}; |
||||
class DeliveryMethod extends Component { |
||||
render() { |
||||
const { data, setTransport, factorInfo, transportId } = this.props; |
||||
return ( |
||||
<> |
||||
{window.innerWidth > 1000 ? ( |
||||
<div |
||||
className="delivery-methods d-flex justify-content-between align-items-center" |
||||
style={{ |
||||
background: data.id === transportId ? "#ccffcc" : "white", |
||||
}} |
||||
onClick={() => |
||||
setTransport( |
||||
{ |
||||
factorId: factorInfo.id, |
||||
transportId: data.id, |
||||
}, |
||||
{} |
||||
) |
||||
} |
||||
> |
||||
<strong style={{ fontSize: fontSize.desktop.strong }}> |
||||
{data.name} |
||||
</strong> |
||||
<div className="d-flex flex-column align-items-center"> |
||||
<h3 style={{ fontSize: fontSize.desktop.h3 }}>{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: data.id === transportId ? "#ccffcc" : "white", |
||||
}} |
||||
onClick={() => |
||||
setTransport( |
||||
{ |
||||
factorId: factorInfo.id, |
||||
transportId: data.id, |
||||
}, |
||||
{} |
||||
) |
||||
} |
||||
> |
||||
<strong style={{ fontSize: fontSize.mobile.strong }}> |
||||
{data.name} |
||||
</strong> |
||||
<div className="d-flex flex-column align-items-center"> |
||||
<h3 style={{ fontSize: fontSize.mobile.h3 }}>{data.price}</h3> |
||||
<span style={{ fontSize: fontSize.mobile.span }}>تومان</span> |
||||
</div> |
||||
</div> |
||||
) : null} |
||||
</> |
||||
); |
||||
} |
||||
} |
||||
|
||||
export default connect( |
||||
(state) => ({ |
||||
factorInfo: state.userFactor.info, |
||||
list: state.userProduct.list, |
||||
}), |
||||
{ |
||||
setTransport: transport.setTransport, |
||||
} |
||||
)(DeliveryMethod); |
||||
@ -0,0 +1,52 @@ |
||||
.mobile-delivery-methods { |
||||
padding: 6px; |
||||
border-radius: 10px; |
||||
border: 1px solid #88a9ff; |
||||
margin-top: 10px; |
||||
flex: 1; |
||||
margin: 5px; |
||||
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: numeralLight; |
||||
} |
||||
} |
||||
|
||||
.delivery-methods { |
||||
padding: 6px; |
||||
border-radius: 10px; |
||||
border: 1px solid #88a9ff; |
||||
margin-top: 10px; |
||||
flex: 1; |
||||
max-width: 45%; |
||||
cursor: pointer; |
||||
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: numeralLight; |
||||
} |
||||
} |
||||
@ -0,0 +1,87 @@ |
||||
import React from "react"; |
||||
import "./index.scss"; |
||||
import { connect } from "react-redux"; |
||||
import { userFactor } from "~/Redux/actions"; |
||||
|
||||
const maxDesktopSize = 1250; |
||||
const maxMobileSize = 550; |
||||
|
||||
const fontSize = { |
||||
desktop: { |
||||
h2: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 55, |
||||
input: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 75, |
||||
button: window.innerWidth > maxDesktopSize ? 15 : 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 / 25, |
||||
}, |
||||
}; |
||||
|
||||
const DiscoutCode = ({ codeId, setCodeId, userId, factorId }) => { |
||||
const [value, setValue] = React.useState(codeId || ""); |
||||
function setOff() { |
||||
setCodeId({ offCodeValue: value, userId: userId, id: factorId || null }); |
||||
} |
||||
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" |
||||
defaultValue={codeId} |
||||
onChange={(e) => setValue(e.target.value)} |
||||
/> |
||||
<button |
||||
style={{ fontSize: fontSize.desktop.button }} |
||||
onClick={setOff} |
||||
> |
||||
ثبت کد |
||||
</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" |
||||
onChange={(e) => setValue(e.target.value)} |
||||
/> |
||||
<button |
||||
style={{ fontSize: fontSize.mobile.button }} |
||||
onClick={setOff} |
||||
> |
||||
ثبت کد |
||||
</button> |
||||
</div> |
||||
</div> |
||||
) : null} |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
export default connect( |
||||
(state) => ({ |
||||
codeId: state.userFactor.info?.codeId, |
||||
userId: state.user.status.id, |
||||
factorId: state.userFactor.info?.id, |
||||
}), |
||||
{ |
||||
setCodeId: userFactor.update, |
||||
} |
||||
)(DiscoutCode); |
||||
@ -0,0 +1,82 @@ |
||||
.discount-code { |
||||
border-bottom: 1px dotted #a5a5a5; |
||||
margin-top: 20px; |
||||
padding-bottom: 20px; |
||||
h2 { |
||||
font-family: numeralMedium; |
||||
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: numeralMedium; |
||||
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,101 @@ |
||||
import React from "react"; |
||||
import { connect } from "react-redux"; |
||||
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 ? 13 : window.innerWidth / 90, |
||||
span: window.innerWidth > maxDesktopSize ? 12 : 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 { factorInfo } = props; |
||||
return ( |
||||
<> |
||||
{window.innerWidth < 1000 ? ( |
||||
<div className="mobile-factor d-flex flex-column"> |
||||
<div className="d-flex justify-content-between"> |
||||
<strong>مبلغ سبد خرید</strong> |
||||
<span>{factorInfo.sumPrice} تومان</span> |
||||
</div> |
||||
<div className="d-flex justify-content-between"> |
||||
<strong>هزینه ارسال</strong> |
||||
<span> |
||||
{factorInfo.transportPrice} |
||||
تومان |
||||
</span> |
||||
</div> |
||||
<div className="d-flex justify-content-between"> |
||||
<strong>میزان تخفیف</strong> |
||||
<span>{factorInfo.offPrice} تومان</span> |
||||
</div> |
||||
<div className="d-flex justify-content-between"> |
||||
<strong>مالیات بر ارزش افزوده</strong> |
||||
<span>{factorInfo.vatPrice} تومان</span> |
||||
</div> |
||||
</div> |
||||
) : null} |
||||
{window.innerWidth > 1000 ? ( |
||||
<div className="factor d-flex flex-column"> |
||||
<div className="d-flex justify-content-between"> |
||||
<strong style={{ fontSize: fontSize.desktop.strong }}> |
||||
مبلغ سبد خرید |
||||
</strong> |
||||
<span style={{ fontSize: fontSize.desktop.span }}> |
||||
{factorInfo.sumPrice} تومان |
||||
</span> |
||||
</div> |
||||
<div className="d-flex justify-content-between"> |
||||
<strong style={{ fontSize: fontSize.desktop.strong }}> |
||||
هزینه ارسال |
||||
</strong> |
||||
<span style={{ fontSize: fontSize.desktop.span }}> |
||||
{factorInfo.transportPrice} |
||||
تومان |
||||
</span> |
||||
</div> |
||||
<div className="d-flex justify-content-between"> |
||||
<strong style={{ fontSize: fontSize.desktop.strong }}> |
||||
میزان تخفیف |
||||
</strong> |
||||
<span style={{ fontSize: fontSize.desktop.span }}> |
||||
{factorInfo.offPrice} تومان |
||||
</span> |
||||
</div> |
||||
<div className="d-flex justify-content-between"> |
||||
<strong style={{ fontSize: fontSize.desktop.strong }}> |
||||
مالیات بر ارزش افزوده |
||||
</strong> |
||||
<span style={{ fontSize: fontSize.desktop.span }}> |
||||
{factorInfo.vatPrice} تومان |
||||
</span> |
||||
</div> |
||||
</div> |
||||
) : null} |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
export default connect( |
||||
(state) => ({ |
||||
factorInfo: state.userFactor.info, |
||||
}), |
||||
{} |
||||
)(Factor); |
||||
@ -0,0 +1,53 @@ |
||||
.mobile-factor { |
||||
border-bottom: 1px dotted #a5a5a5; |
||||
margin-top: 20px; |
||||
padding-bottom: 20px; |
||||
h2 { |
||||
font-family: numeralMedium; |
||||
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: numeralMedium; |
||||
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; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,52 @@ |
||||
import React from "react"; |
||||
import TextField from "@material-ui/core/TextField"; |
||||
import { makeStyles } from "@material-ui/core/styles"; |
||||
|
||||
export default function FormPropsTextFields(props) { |
||||
const useStyles = makeStyles((theme) => ({ |
||||
root: { |
||||
"& .MuiTextField-root": { |
||||
width: "100%", |
||||
position: "relative", |
||||
marginRight: 10, |
||||
marginTop: 20, |
||||
"& input": { |
||||
textAlign: props.align, |
||||
direction: props.align === "right" ? "rtl" : "ltr", |
||||
}, |
||||
fontFamily: "numeralLight", |
||||
}, |
||||
}, |
||||
})); |
||||
|
||||
const classes = useStyles(); |
||||
const { parent, defaultValue, maxLength, onInput, variant } = props; |
||||
return ( |
||||
<form className={classes.root} noValidate autoComplete="off"> |
||||
<div> |
||||
<TextField |
||||
id="outlined-basic" |
||||
name={props.name} |
||||
label={props.label} |
||||
variant={variant || "outlined"} |
||||
onChange={(e) => parent.onChange(e.target.name, e.target.value)} |
||||
defaultValue={defaultValue[props.name] || ""} |
||||
required={props.required} |
||||
inputProps={{ maxLength }} |
||||
onInput={ |
||||
onInput |
||||
? (e) => (e.target.value = onInput(e.target.value)) |
||||
: () => {} |
||||
} |
||||
/> |
||||
</div> |
||||
</form> |
||||
); |
||||
} |
||||
|
||||
FormPropsTextFields.defaultProps = { |
||||
align: "right", |
||||
maxLength: "", |
||||
inputMode: "numeric", |
||||
defaultValue: "", |
||||
}; |
||||
@ -0,0 +1,84 @@ |
||||
import React from "react"; |
||||
import { makeStyles } from "@material-ui/core/styles"; |
||||
import FormControl from "@material-ui/core/FormControl"; |
||||
import Select from "@material-ui/core/Select"; |
||||
import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown"; |
||||
import InputLabel from "@material-ui/core/InputLabel"; |
||||
|
||||
const useStyles = makeStyles((theme) => ({ |
||||
marginLeft: { |
||||
// margin: theme.spacing(1),
|
||||
marginLeft: 8, |
||||
}, |
||||
})); |
||||
|
||||
export default function CustomizedSelects(props) { |
||||
const classes = useStyles(); |
||||
const { parent, selectedOptions } = props; |
||||
return ( |
||||
<> |
||||
{window.innerWidth < 1000 ? ( |
||||
<div style={{ position: "relative" }}> |
||||
<FormControl variant="outlined" className={classes.marginLeft}> |
||||
<InputLabel id="demo-simple-select-outlined-label"> |
||||
{props.label} |
||||
</InputLabel> |
||||
<Select |
||||
labelId="demo-simple-select-outlined-label" |
||||
id="demo-simple-select-outlined" |
||||
value={selectedOptions} |
||||
onChange={(e) => parent.onChange(props.name, e.target.value)} |
||||
> |
||||
{/* 09366858119 */} |
||||
{props.options.map((item, i) => ( |
||||
<option key={i} value={item.id || i}> |
||||
{item.name || item} |
||||
</option> |
||||
))} |
||||
</Select> |
||||
</FormControl> |
||||
<KeyboardArrowDownIcon |
||||
style={{ |
||||
position: "absolute", |
||||
left: 5, |
||||
top: 20, |
||||
fontSize: 30, |
||||
color: "#a5a5a5", |
||||
}} |
||||
/> |
||||
</div> |
||||
) : null} |
||||
{window.innerWidth > 1000 ? ( |
||||
<div style={{ position: "relative" }}> |
||||
<FormControl variant="outlined" className={classes.marginLeft}> |
||||
<InputLabel id="demo-simple-select-outlined-label"> |
||||
{props.label} |
||||
</InputLabel> |
||||
<Select |
||||
labelId="demo-simple-select-outlined-label" |
||||
id="demo-simple-select-outlined" |
||||
value={selectedOptions} |
||||
onChange={(e) => parent.onChange(props.name, e.target.value)} |
||||
> |
||||
{/* 09366858119 */} |
||||
{props.options.map((item, i) => ( |
||||
<option key={i} value={item.id || i}> |
||||
{item.name || item} |
||||
</option> |
||||
))} |
||||
</Select> |
||||
</FormControl> |
||||
<KeyboardArrowDownIcon |
||||
style={{ |
||||
position: "absolute", |
||||
left: 5, |
||||
top: 25, |
||||
fontSize: 30, |
||||
color: "#a5a5a5", |
||||
}} |
||||
/> |
||||
</div> |
||||
) : null} |
||||
</> |
||||
); |
||||
} |
||||
@ -0,0 +1,314 @@ |
||||
import React from "react"; |
||||
import { connect } from "react-redux"; |
||||
import { userProduct } from "~/Redux/actions"; |
||||
|
||||
import { makeStyles } from "@material-ui/core/styles"; |
||||
import Table from "@material-ui/core/Table"; |
||||
import TableBody from "@material-ui/core/TableBody"; |
||||
import TableCell from "@material-ui/core/TableCell"; |
||||
import TableContainer from "@material-ui/core/TableContainer"; |
||||
import TableHead from "@material-ui/core/TableHead"; |
||||
import TableRow from "@material-ui/core/TableRow"; |
||||
import Paper from "@material-ui/core/Paper"; |
||||
import DeleteOutlineOutlinedIcon from "@material-ui/icons/DeleteOutlineOutlined"; |
||||
|
||||
import "./index.scss"; |
||||
const useStyles = makeStyles({ |
||||
table: {}, |
||||
}); |
||||
const grades = [ |
||||
"پیش دبستان", |
||||
"اول", |
||||
"دوم", |
||||
"سوم", |
||||
"چهارم", |
||||
"پنجم", |
||||
"ششم", |
||||
"هفتم", |
||||
"هشتم", |
||||
"نهم", |
||||
"دهم", |
||||
"یازدهم", |
||||
"دوازدهم", |
||||
]; |
||||
const maxMobileSize = 550; |
||||
const maxDesktopSize = 1250; |
||||
|
||||
const fontSize = { |
||||
mobile: { |
||||
info: { |
||||
strong: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 28, |
||||
p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 36, |
||||
span: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 36, |
||||
}, |
||||
price: { |
||||
strong: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 22, |
||||
span: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 40, |
||||
}, |
||||
counter: { |
||||
button: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 25, |
||||
span: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 25, |
||||
}, |
||||
delete: { |
||||
span: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 28, |
||||
}, |
||||
}, |
||||
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, |
||||
}, |
||||
}, |
||||
}; |
||||
|
||||
function BasicTable(props) { |
||||
const classes = useStyles(); |
||||
const { list, handleDelete, route, factorInfo } = props; |
||||
const sum = () => { |
||||
let total = 0; |
||||
for (let i = 0; i < list.length; i++) { |
||||
total += list[i].count * 1; |
||||
} |
||||
return total; |
||||
}; |
||||
|
||||
return ( |
||||
<> |
||||
{window.innerWidth < 1000 ? ( |
||||
<TableContainer component={Paper}> |
||||
<Table className={classes.table} aria-label="simple table"> |
||||
<TableHead> |
||||
<TableRow> |
||||
<TableCell align="right">محصولات</TableCell> |
||||
<TableCell align="center">قیمت</TableCell> |
||||
|
||||
{route === "callback" ? ( |
||||
<TableCell align="center">تعداد</TableCell> |
||||
) : null} |
||||
</TableRow> |
||||
</TableHead> |
||||
<TableBody> |
||||
{list.map((row, i) => ( |
||||
<Item |
||||
data={row} |
||||
key={i} |
||||
// handleCounter={handleCounter}
|
||||
pushToCart={props.pushToCart} |
||||
info={props.info} |
||||
id={props.id} |
||||
handleDelete={handleDelete} |
||||
route={route} |
||||
factorInfo={factorInfo} |
||||
/> |
||||
))} |
||||
</TableBody> |
||||
</Table> |
||||
</TableContainer> |
||||
) : null} |
||||
{window.innerWidth > 1000 ? ( |
||||
<TableContainer component={Paper}> |
||||
<Table className={classes.table} aria-label="simple table"> |
||||
<TableHead> |
||||
<TableRow> |
||||
<TableCell align="right">محصولات</TableCell> |
||||
<TableCell align="center">تعداد</TableCell> |
||||
<TableCell align="center">قیمت</TableCell> |
||||
</TableRow> |
||||
</TableHead> |
||||
<TableBody> |
||||
{list.map((row, i) => ( |
||||
<Item |
||||
data={row} |
||||
key={i} |
||||
// handleCounter={handleCounter}
|
||||
pushToCart={props.pushToCart} |
||||
info={props.info} |
||||
id={props.id} |
||||
handleDelete={handleDelete} |
||||
route={route} |
||||
factorInfo={factorInfo} |
||||
/> |
||||
))} |
||||
</TableBody> |
||||
</Table> |
||||
</TableContainer> |
||||
) : null} |
||||
</> |
||||
); |
||||
} |
||||
|
||||
const Item = (props) => { |
||||
const { data, pushToCart, id, route } = props; |
||||
return ( |
||||
<> |
||||
{window.innerWidth < 1000 ? ( |
||||
<TableRow key={data.product.book.name}> |
||||
<TableCell align="right" component="th" scope="row"> |
||||
<div className="mobile-cart-table-product d-flex align-items-center"> |
||||
<img |
||||
src={`https://dnvn.ir/api/v1/file/${data.product.book.fileIds}`} |
||||
alt={data.product.book.name} |
||||
/> |
||||
<div className="mobile-cart-table-product__info d-flex flex-column p-1"> |
||||
<strong style={{ fontSize: fontSize.mobile.info.strong }}> |
||||
{`نسخه ${ |
||||
+data.product.productType === 1 ? "الکترونیکی" : "چاپی" |
||||
} ${data.product.book.name} `}
|
||||
</strong> |
||||
<p style={{ fontSize: 12 }}> |
||||
{`پایه ${grades[data.product.book.gradeId]}`} |
||||
</p> |
||||
<span style={{ fontSize: 10 }}> |
||||
همراه با: |
||||
{data.product.book.items || "کد فعالسازی محتوای الکترونیک"} |
||||
</span> |
||||
{route !== "callback" ? ( |
||||
<div className="mobile-cart-table-product__info--delete d-flex align-items-center align-self-end"> |
||||
<span |
||||
onClick={() => |
||||
pushToCart({ |
||||
productId: data.productId, |
||||
userId: id, |
||||
count: -data.count, |
||||
}) |
||||
} |
||||
style={{ |
||||
fontSize: fontSize.mobile.delete.span, |
||||
color: "#FC120A", |
||||
cursor: "pointer", |
||||
}} |
||||
> |
||||
حذف |
||||
</span> |
||||
</div> |
||||
) : null} |
||||
</div> |
||||
</div> |
||||
</TableCell> |
||||
<TableCell> |
||||
<div className="mobile-cart-table-price d-flex flex-column align-items-center"> |
||||
<div className="mobile-cart-table-price__price d-flex flex-column justify-content-center align-items-center"> |
||||
<strong style={{ fontSize: fontSize.mobile.price.strong }}> |
||||
{data.product.price * data.count || "1000"} |
||||
</strong> |
||||
{route !== "callback" ? ( |
||||
<span style={{ fontSize: fontSize.mobile.price.span }}> |
||||
{data.product.price || "100"} قیمت هر واحد |
||||
</span> |
||||
) : null} |
||||
</div> |
||||
{route === "cart" ? ( |
||||
<div className="mobile-cart-table-price__counter d-flex justify-content-around align-items-center"> |
||||
<button |
||||
onClick={() => |
||||
pushToCart( |
||||
{ |
||||
productId: data.productId, |
||||
userId: id, |
||||
count: 1, |
||||
}, |
||||
{}, |
||||
{ id: data.factorId } |
||||
) |
||||
} |
||||
style={{ fontSize: fontSize.mobile.counter.button }} |
||||
> |
||||
+ |
||||
</button> |
||||
<span style={{ fontSize: fontSize.mobile.counter.span }}> |
||||
{data.count} |
||||
</span> |
||||
<button |
||||
onClick={() => |
||||
data.count > 0 |
||||
? pushToCart( |
||||
{ |
||||
productId: data.productId, |
||||
userId: id, |
||||
count: -1, |
||||
}, |
||||
{}, |
||||
{ id: data.factorId } |
||||
) |
||||
: null |
||||
} |
||||
style={{ fontSize: fontSize.mobile.counter.button }} |
||||
> |
||||
- |
||||
</button> |
||||
</div> |
||||
) : null} |
||||
</div> |
||||
</TableCell> |
||||
{route === "callback" ? ( |
||||
<TableCell> |
||||
<strong className="d-flex justify-content-center align-items-center"> |
||||
{data.count} |
||||
</strong> |
||||
</TableCell> |
||||
) : null} |
||||
</TableRow> |
||||
) : null} |
||||
{window.innerWidth > 1000 ? ( |
||||
<TableRow key={data.product.book.name}> |
||||
<TableCell align="right" component="th" scope="row"> |
||||
<div className="cart-item__info d-flex"> |
||||
<img |
||||
style={{ height: "60px" }} |
||||
src={`https://dnvn.ir/api/v1/file/${data.product.book.fileIds}`} |
||||
alt={data.product.book.name} |
||||
/> |
||||
<div className="d-flex flex-column justify-content-center"> |
||||
<strong style={{ fontSize: 13 }}> |
||||
{`${data.product.book.name} `} |
||||
</strong> |
||||
<span style={{ fontSize: 12 }}> |
||||
{" "} |
||||
{`نسخه ${ |
||||
+data.product.productType === 1 ? "الکترونیکی" : "چاپی" |
||||
}`}
|
||||
</span> |
||||
|
||||
<p style={{ fontSize: fontSize.desktop.info.p }}> |
||||
{`پایه ${grades[data.product.book.gradeId]}`} |
||||
</p> |
||||
</div> |
||||
</div> |
||||
</TableCell> |
||||
<TableCell align="center"> |
||||
<span style={{ fontSize: 12 }}>{data.count}</span> |
||||
</TableCell> |
||||
<TableCell> |
||||
<div className="cart-item__price d-flex flex-column justify-content-center align-items-center"> |
||||
<strong style={{ fontSize: 12 }}> |
||||
{data.product.price * data.count || "1000"} |
||||
</strong> |
||||
</div> |
||||
</TableCell> |
||||
</TableRow> |
||||
) : null} |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
export default connect( |
||||
(state) => ({ |
||||
loading: state.userProduct.loading, |
||||
info: state.book.info, |
||||
id: state.user.status.id, |
||||
factorInfo: state.userFactor.info, |
||||
}), |
||||
{ pushToCart: userProduct.add } |
||||
)(BasicTable); |
||||
@ -0,0 +1,150 @@ |
||||
.mobile-cart-table-product { |
||||
width: 100%; |
||||
font-family: numeralLight; |
||||
img { |
||||
height: 100px; |
||||
// width: 70px; |
||||
border-radius: 10px; |
||||
} |
||||
&__info { |
||||
width: 100%; |
||||
margin-left: 10px; |
||||
strong, |
||||
p, |
||||
span { |
||||
margin: 0px; |
||||
font-family: numeralLight; |
||||
} |
||||
p { |
||||
color: #00cc69; |
||||
} |
||||
span { |
||||
color: #2580ec; |
||||
} |
||||
&--delete { |
||||
margin-top: 10px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.mobile-cart-table-price { |
||||
text-align: center; |
||||
font-family: numeralLight; |
||||
&__price { |
||||
strong, |
||||
span { |
||||
font-family: numeralLight; |
||||
} |
||||
strong { |
||||
color: #4d4d4f; |
||||
} |
||||
span { |
||||
color: #4d4d4f; |
||||
letter-spacing: -1px; |
||||
} |
||||
} |
||||
&__info { |
||||
strong, |
||||
p, |
||||
span { |
||||
margin: 0px; |
||||
font-family: numeralLight; |
||||
} |
||||
p { |
||||
color: #00cc69; |
||||
} |
||||
span { |
||||
color: #2580ec; |
||||
} |
||||
} |
||||
&__counter { |
||||
padding: 5px 5px; |
||||
border: 1px solid rgb(177, 177, 177); |
||||
border-radius: 8px; |
||||
margin-top: 10px; |
||||
button { |
||||
border: 0px; |
||||
background-color: white; |
||||
color: #4d4d4f; |
||||
&:focus { |
||||
outline: none; |
||||
} |
||||
} |
||||
span { |
||||
margin: 0px 15px; |
||||
color: #4d4d4f; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.MuiTableCell-root { |
||||
padding: 10px 0px !important; |
||||
font-family: numeralLight !important; |
||||
} |
||||
|
||||
.cart-item { |
||||
// justify-content: space-between; |
||||
border-top: 1px solid #eee; |
||||
padding: 15px 0px; |
||||
&__info { |
||||
// flex-shrink: 1; |
||||
img { |
||||
height: 100px; |
||||
border-radius: 10px; |
||||
margin-left: 10px; |
||||
} |
||||
div { |
||||
strong { |
||||
font-family: numeralLight; |
||||
color: #373737; |
||||
} |
||||
p { |
||||
font-family: numeralLight; |
||||
color: #00cc69; |
||||
margin: 0px; |
||||
letter-spacing: -1px; |
||||
} |
||||
span { |
||||
font-family: numeralLight; |
||||
color: #2580ec; |
||||
letter-spacing: -1px; |
||||
} |
||||
} |
||||
} |
||||
&__price { |
||||
color: #4d4d4f; |
||||
strong { |
||||
font-family: numeralLight; |
||||
} |
||||
span { |
||||
font-family: numeralLight; |
||||
} |
||||
} |
||||
&__counter { |
||||
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; |
||||
&:focus { |
||||
outline: none; |
||||
} |
||||
} |
||||
span { |
||||
margin: 0px 15px; |
||||
color: #4d4d4f; |
||||
} |
||||
} |
||||
} |
||||
&__delete { |
||||
margin-left: 20px; |
||||
span { |
||||
font-family: numeralLight; |
||||
color: #fc120a; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,31 @@ |
||||
import React from "react"; |
||||
import { makeStyles } from "@material-ui/core/styles"; |
||||
import TextField from "@material-ui/core/TextField"; |
||||
|
||||
const useStyles = makeStyles((theme) => ({ |
||||
root: { |
||||
"& .MuiTextField-root": { |
||||
margin: theme.spacing(0), |
||||
width: "100%", |
||||
}, |
||||
}, |
||||
})); |
||||
|
||||
export default function MultilineTextFields(props) { |
||||
const classes = useStyles(); |
||||
const { parent, defaultValue } = props; |
||||
return ( |
||||
<form className={classes.root} noValidate autoComplete="off"> |
||||
<TextField |
||||
id="outlined-multiline-static" |
||||
label={props.label} |
||||
multiline |
||||
rows={4} |
||||
onChange={(e) => parent.onChange(e.target.name, e.target.value)} |
||||
defaultValue={defaultValue || ""} |
||||
name={props.name} |
||||
variant="outlined" |
||||
/> |
||||
</form> |
||||
); |
||||
} |
||||
@ -0,0 +1,459 @@ |
||||
.cart { |
||||
width: 100vw; |
||||
max-width: 1250px; |
||||
margin: 0px auto; |
||||
padding: 0px 10px; |
||||
font-family: numeralLight; |
||||
padding-top: 85px; |
||||
&__totalPrice { |
||||
padding: 20px 0px; |
||||
border-bottom: 1px dotted #a5a5a5; |
||||
padding-bottom: 20px; |
||||
|
||||
h3 { |
||||
font-family: numeralLight; |
||||
color: #00cc69; |
||||
margin: 0px; |
||||
} |
||||
div { |
||||
margin-right: 20px; |
||||
strong { |
||||
font-family: numeralLight; |
||||
color: #4d4d4f; |
||||
margin-left: 5px; |
||||
} |
||||
span { |
||||
font-family: numeralLight; |
||||
color: #848484; |
||||
} |
||||
} |
||||
} |
||||
&__right { |
||||
flex: 4; |
||||
padding: 10px 0px 0px; |
||||
} |
||||
&__left { |
||||
flex: 1.2; |
||||
box-shadow: 0px 0px 13px #d5d5d5b0; |
||||
border-radius: 13px; |
||||
margin-right: 30px; |
||||
|
||||
&--header { |
||||
h2 { |
||||
font-family: numeralLight; |
||||
color: #2580ec; |
||||
} |
||||
p { |
||||
font-family: numeralLight; |
||||
color: #a5a5a5; |
||||
letter-spacing: -1px; |
||||
} |
||||
} |
||||
&--submit { |
||||
justify-self: flex-end; |
||||
padding: 12px; |
||||
width: 100%; |
||||
font-family: numeralLight; |
||||
color: white; |
||||
background-color: #6cbe44; |
||||
border: 0px; |
||||
border-radius: 10px; |
||||
margin-top: 50px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.mobile-cart { |
||||
width: 100vw; |
||||
max-width: 650px; |
||||
margin: 0px auto; |
||||
padding: 0px 10px 40px; |
||||
direction: rtl; |
||||
padding-top: 70px; |
||||
overflow-x: hidden; |
||||
font-family: numeralLight; |
||||
&__submit { |
||||
justify-self: flex-end; |
||||
padding: 12px; |
||||
width: 100%; |
||||
font-family: numeralLight; |
||||
color: white; |
||||
background-color: #6cbe44; |
||||
border: 0px; |
||||
border-radius: 10px; |
||||
margin-top: 30px; |
||||
} |
||||
h1 { |
||||
font-family: numeralMedium; |
||||
color: #373737; |
||||
} |
||||
|
||||
&__payMethods { |
||||
border-bottom: 1px dotted #a5a5a5; |
||||
margin-top: 20px; |
||||
padding-bottom: 20px; |
||||
h2 { |
||||
font-family: numeralMedium; |
||||
color: #2580ec; |
||||
} |
||||
p { |
||||
font-family: numeralLight; |
||||
color: #a5a5a5; |
||||
letter-spacing: -1px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.checkout { |
||||
width: 100vw; |
||||
max-width: 1250px; |
||||
margin: 0px auto; |
||||
padding: 0px 10px; |
||||
direction: rtl; |
||||
min-height: calc(100vh - 288px); |
||||
overflow-x: hidden; |
||||
padding-top: 60px; |
||||
&__forms { |
||||
width: 100%; |
||||
justify-content: space-between; |
||||
margin-top: 30px; |
||||
margin-bottom: 80px; |
||||
&--right { |
||||
width: 45%; |
||||
.MuiOutlinedInput-notchedOutline { |
||||
top: 0px !important; |
||||
} |
||||
.MuiOutlinedInput-notchedOutline { |
||||
border-color: #cecece !important; |
||||
border-width: 1px !important; |
||||
color: green !important; |
||||
border-radius: 10px !important; |
||||
} |
||||
|
||||
.MuiOutlinedInput-input { |
||||
padding: 20px 14px !important; |
||||
font-size: calc(100vw / 85) !important; |
||||
} |
||||
.MuiInputLabel-outlined { |
||||
font-family: numeralLight !important; |
||||
display: inline !important; |
||||
position: absolute; |
||||
text-align: right !important; |
||||
right: 10px; |
||||
top: 12px; |
||||
padding: 0px !important; |
||||
transform: translate(0px, 0px) scale(1) !important; |
||||
} |
||||
.MuiInputLabel-shrink { |
||||
text-align: right !important; |
||||
display: inline; |
||||
position: absolute; |
||||
right: -5px; |
||||
top: -8px; |
||||
transform: translate(0px, 0px) scale(0.75) !important; |
||||
padding-right: 15px !important; |
||||
} |
||||
|
||||
label { |
||||
background-color: white; |
||||
max-width: 120px; |
||||
text-align: center; |
||||
color: #797979 !important; |
||||
letter-spacing: -1px; |
||||
} |
||||
.Mui-focused { |
||||
color: rgba(0, 0, 0, 0.54) !important; |
||||
border-color: #c4c4c5 !important; |
||||
} |
||||
h1 { |
||||
letter-spacing: -2px; |
||||
color: #6cbe44; |
||||
font-family: numeralMedium; |
||||
font-size: calc(100vw / 40); |
||||
} |
||||
p { |
||||
font-family: numeralLight; |
||||
font-size: calc(100vw / 95); |
||||
color: #6f7074; |
||||
} |
||||
|
||||
button { |
||||
align-self: flex-start; |
||||
margin-top: 30px; |
||||
font-family: numeralLight; |
||||
text-decoration: none; |
||||
color: white; |
||||
background-color: #6cbe44; |
||||
border-radius: 6px; |
||||
padding: 5px 25px; |
||||
font-size: calc(100vw / 90); |
||||
max-width: 110px; |
||||
border: 0px; |
||||
&:hover { |
||||
color: white; |
||||
} |
||||
} |
||||
|
||||
.MuiFormControl-root { |
||||
select { |
||||
font-family: numeralLight; |
||||
height: 100%; |
||||
direction: rtl; |
||||
border: 1px solid #cecece !important; |
||||
text-align: center !important; |
||||
border-radius: 10px !important; |
||||
color: #76797e !important; |
||||
&:focus { |
||||
background-color: white !important; |
||||
} |
||||
option { |
||||
padding: 5px !important; |
||||
} |
||||
} |
||||
.MuiNativeSelect-icon { |
||||
display: none; |
||||
} |
||||
.MuiNativeSelect-select { |
||||
padding: 8px 10px 8px 100px !important; |
||||
} |
||||
} |
||||
} |
||||
&--left { |
||||
width: 45%; |
||||
.MuiOutlinedInput-notchedOutline { |
||||
top: 0px !important; |
||||
} |
||||
.MuiOutlinedInput-notchedOutline { |
||||
border-color: #cecece !important; |
||||
border-width: 1px !important; |
||||
color: green !important; |
||||
border-radius: 10px !important; |
||||
} |
||||
|
||||
.MuiOutlinedInput-input { |
||||
padding: 20px 14px !important; |
||||
font-size: calc(100vw / 85) !important; |
||||
} |
||||
.MuiInputLabel-outlined { |
||||
font-family: numeralLight !important; |
||||
display: inline !important; |
||||
position: absolute; |
||||
text-align: right !important; |
||||
right: 10px; |
||||
top: 12px; |
||||
padding: 0px !important; |
||||
transform: translate(0px, 0px) scale(1) !important; |
||||
} |
||||
.MuiInputLabel-shrink { |
||||
text-align: right !important; |
||||
display: inline; |
||||
position: absolute; |
||||
right: -5px; |
||||
top: -8px; |
||||
transform: translate(0px, 0px) scale(0.75) !important; |
||||
padding-right: 15px !important; |
||||
} |
||||
|
||||
label { |
||||
background-color: white; |
||||
max-width: 120px; |
||||
text-align: center; |
||||
color: #797979 !important; |
||||
letter-spacing: -1px; |
||||
} |
||||
.Mui-focused { |
||||
color: rgba(0, 0, 0, 0.54) !important; |
||||
border-color: #c4c4c5 !important; |
||||
} |
||||
h1 { |
||||
letter-spacing: -2px; |
||||
color: #6cbe44; |
||||
font-family: numeralMedium; |
||||
font-size: calc(100vw / 40); |
||||
} |
||||
p { |
||||
font-family: numeralLight; |
||||
font-size: calc(100vw / 95); |
||||
color: #6f7074; |
||||
} |
||||
|
||||
button { |
||||
align-self: flex-start; |
||||
margin-top: 30px; |
||||
font-family: numeralLight; |
||||
text-decoration: none; |
||||
color: white; |
||||
background-color: #6cbe44; |
||||
border-radius: 6px; |
||||
padding: 5px 25px; |
||||
font-size: calc(100vw / 90); |
||||
max-width: 110px; |
||||
border: 0px; |
||||
&:hover { |
||||
color: white; |
||||
} |
||||
} |
||||
|
||||
.MuiFormControl-root { |
||||
select { |
||||
font-family: numeralLight; |
||||
height: 100%; |
||||
direction: rtl; |
||||
border: 1px solid #cecece !important; |
||||
text-align: center !important; |
||||
border-radius: 10px !important; |
||||
color: #76797e !important; |
||||
&:focus { |
||||
background-color: white !important; |
||||
} |
||||
option { |
||||
padding: 5px !important; |
||||
} |
||||
} |
||||
.MuiNativeSelect-icon { |
||||
display: none; |
||||
} |
||||
.MuiNativeSelect-select { |
||||
padding: 8px 10px 8px 100px !important; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.mobile-checkout { |
||||
// width: 100vw; |
||||
max-width: 550px; |
||||
margin: 0px auto; |
||||
padding: 0px 10px; |
||||
direction: rtl; |
||||
overflow-x: hidden; |
||||
padding-top: 70px; |
||||
padding-bottom: 50px; |
||||
&__form { |
||||
width: 100%; |
||||
justify-content: space-between; |
||||
margin-top: 20px; |
||||
margin-bottom: 20px; |
||||
|
||||
.MuiOutlinedInput-notchedOutline { |
||||
top: 0px !important; |
||||
} |
||||
.MuiOutlinedInput-notchedOutline { |
||||
border-color: #cecece !important; |
||||
border-width: 1px !important; |
||||
color: green !important; |
||||
border-radius: 10px !important; |
||||
} |
||||
|
||||
.MuiOutlinedInput-input { |
||||
padding: 20px 14px !important; |
||||
} |
||||
.MuiInputLabel-outlined { |
||||
font-family: numeralLight !important; |
||||
display: inline !important; |
||||
position: absolute; |
||||
text-align: right !important; |
||||
right: 10px; |
||||
top: 12px; |
||||
padding: 0px !important; |
||||
transform: translate(0px, 0px) scale(1) !important; |
||||
} |
||||
.MuiInputLabel-shrink { |
||||
text-align: right !important; |
||||
display: inline; |
||||
position: absolute; |
||||
right: -5px; |
||||
top: -8px; |
||||
transform: translate(0px, 0px) scale(0.75) !important; |
||||
padding-right: 0px !important; |
||||
width: fit-content; |
||||
padding: 0px 6px !important; |
||||
} |
||||
|
||||
label { |
||||
background-color: white; |
||||
max-width: 120px; |
||||
text-align: center; |
||||
color: #797979 !important; |
||||
letter-spacing: -1px; |
||||
font-family: numeralLight !important; |
||||
font-size: 14px; |
||||
} |
||||
.Mui-focused { |
||||
color: rgba(0, 0, 0, 0.54) !important; |
||||
border-color: #c4c4c5 !important; |
||||
} |
||||
h1 { |
||||
letter-spacing: -2px; |
||||
color: #6cbe44; |
||||
font-family: numeralMedium; |
||||
} |
||||
p { |
||||
font-family: numeralLight; |
||||
color: #6f7074; |
||||
} |
||||
|
||||
button { |
||||
align-self: flex-start; |
||||
margin-top: 5px; |
||||
font-family: numeralLight; |
||||
text-decoration: none; |
||||
color: white; |
||||
background-color: #6cbe44; |
||||
border-radius: 6px; |
||||
padding: 8px 25px; |
||||
width: 100%; |
||||
border: 0px; |
||||
&:hover { |
||||
color: white; |
||||
} |
||||
} |
||||
|
||||
.MuiFormControl-root { |
||||
select { |
||||
font-family: numeralLight; |
||||
height: 100%; |
||||
direction: rtl; |
||||
border: 1px solid #cecece !important; |
||||
text-align: center !important; |
||||
border-radius: 10px !important; |
||||
color: #76797e !important; |
||||
&:focus { |
||||
background-color: white !important; |
||||
} |
||||
option { |
||||
padding: 5px !important; |
||||
} |
||||
} |
||||
.MuiNativeSelect-icon { |
||||
display: none; |
||||
} |
||||
.MuiNativeSelect-select { |
||||
padding: 8px 10px 8px 100px !important; |
||||
} |
||||
} |
||||
} |
||||
&__address { |
||||
width: 100%; |
||||
p { |
||||
font-family: numeralLight; |
||||
margin-bottom: 0px; |
||||
color: #6f7074; |
||||
} |
||||
span { |
||||
font-family: numeralLight; |
||||
margin-bottom: 0px; |
||||
color: #6f7074; |
||||
margin-right: 5px; |
||||
} |
||||
&--map { |
||||
width: 100%; |
||||
height: 180px; |
||||
border-radius: 20px; |
||||
img { |
||||
transform: scale(0.4); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
Loading…
Reference in new issue