parent
1a994a6a10
commit
f2cebef2bf
33 changed files with 1733 additions and 76 deletions
@ -0,0 +1,21 @@ |
|||||||
|
interface fileUpload { |
||||||
|
type : "file/upload" |
||||||
|
data : any |
||||||
|
params : any |
||||||
|
} |
||||||
|
|
||||||
|
interface error{ |
||||||
|
type : "file/error" |
||||||
|
data : undefined |
||||||
|
params : any |
||||||
|
} |
||||||
|
|
||||||
|
interface loading{ |
||||||
|
type : "file/loading" |
||||||
|
data : undefined |
||||||
|
params : any |
||||||
|
} |
||||||
|
|
||||||
|
type FileAction = fileUpload | loading | error; |
||||||
|
|
||||||
|
export default FileAction; |
||||||
@ -1,44 +1,61 @@ |
|||||||
interface getHomeData { |
interface getHomeData { |
||||||
type : "public/homePage" |
type: "public/homePage"; |
||||||
data : any |
data: any; |
||||||
} |
} |
||||||
|
|
||||||
interface getBlogList{ |
interface getBlogList { |
||||||
type : "public/blogList" |
type: "public/blogList"; |
||||||
data : any |
data: any; |
||||||
} |
} |
||||||
|
|
||||||
interface getBlogInfo{ |
interface getBlogInfo { |
||||||
type : "public/blogInfo" |
type: "public/blogInfo"; |
||||||
data : any |
data: any; |
||||||
} |
} |
||||||
|
|
||||||
interface setFaqActive{ |
interface setFaqActive { |
||||||
type : "public/faq/activate" |
type: "public/faq/activate"; |
||||||
data : any |
data: any; |
||||||
} |
} |
||||||
|
|
||||||
interface setSubscribe{ |
interface setSubscribe { |
||||||
type: "public/setSubscribe" |
type: "public/setSubscribe"; |
||||||
data: any |
data: any; |
||||||
} |
} |
||||||
|
|
||||||
interface error{ |
interface getProvince { |
||||||
type : "error" |
type: "public/province"; |
||||||
data : undefined |
data: any; |
||||||
} |
} |
||||||
|
|
||||||
interface loading{ |
interface getCity { |
||||||
type : "loading" |
type: "public/city"; |
||||||
data : undefined |
data: any; |
||||||
} |
} |
||||||
|
|
||||||
|
interface error { |
||||||
|
type: "error"; |
||||||
|
data: undefined; |
||||||
|
} |
||||||
|
|
||||||
|
interface loading { |
||||||
|
type: "loading"; |
||||||
|
data: undefined; |
||||||
|
} |
||||||
|
|
||||||
// interface filterNewProducts{
|
// interface filterNewProducts{
|
||||||
|
|
||||||
// }
|
// }
|
||||||
|
|
||||||
|
type PublicAction = |
||||||
type PublicAction = getBlogList | getBlogInfo | setSubscribe | getHomeData | setFaqActive | loading | error; |
| getBlogList |
||||||
|
| getBlogInfo |
||||||
|
| setSubscribe |
||||||
|
| getHomeData |
||||||
|
| setFaqActive |
||||||
|
| getProvince |
||||||
|
| getCity |
||||||
|
| loading |
||||||
|
| error; |
||||||
|
|
||||||
export default PublicAction; |
export default PublicAction; |
||||||
|
|||||||
@ -0,0 +1,22 @@ |
|||||||
|
import proxy from "../proxy"; |
||||||
|
const file = { |
||||||
|
upload: |
||||||
|
(data = {}) => |
||||||
|
async (dispatch) => { |
||||||
|
var formData = new FormData(); |
||||||
|
for (let key in data) formData.append(key, data[key]); |
||||||
|
return await proxy.post( |
||||||
|
"file/upload", |
||||||
|
formData, |
||||||
|
{ |
||||||
|
dispatch, |
||||||
|
headers: { |
||||||
|
"Content-Type": "multipart/form-data", |
||||||
|
}, |
||||||
|
}, |
||||||
|
data |
||||||
|
); |
||||||
|
}, |
||||||
|
}; |
||||||
|
|
||||||
|
export default file; |
||||||
@ -0,0 +1,27 @@ |
|||||||
|
import {FileAction} from '../actions-type'; |
||||||
|
const initialState = { |
||||||
|
loading: false, |
||||||
|
error: null, |
||||||
|
uploads: {}, |
||||||
|
lastUpload: null, |
||||||
|
}; |
||||||
|
|
||||||
|
export default function file(state = initialState, action : FileAction) { |
||||||
|
let { type, data, params } = action; |
||||||
|
switch (type) { |
||||||
|
case "file/upload": |
||||||
|
return { |
||||||
|
...state, |
||||||
|
loading: false, |
||||||
|
error: null, |
||||||
|
uploads: { ...state.uploads, [params?.target || "last"]: data.id }, |
||||||
|
lastUpload: data.id, |
||||||
|
}; |
||||||
|
case "file/loading": |
||||||
|
return { ...state, loading: true }; |
||||||
|
case "file/error": |
||||||
|
return { ...state, loading: false, error: data.message }; |
||||||
|
default: |
||||||
|
return state; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,61 @@ |
|||||||
|
import React, { useState } from "react"; |
||||||
|
import onInput from "~/util/onInput"; |
||||||
|
import Input from "../../../../components/Input/index"; |
||||||
|
import "./index.scss"; |
||||||
|
import moment from "jalali-moment"; |
||||||
|
export default function Birthdate(props) { |
||||||
|
const { defaultValue, parent, name } = props; |
||||||
|
let momentDate = moment(defaultValue[name]); |
||||||
|
let isvalid = momentDate.isValid(); |
||||||
|
const day = isvalid ? momentDate.format("jDD") : null, |
||||||
|
month = isvalid ? momentDate.format("jMM") : null, |
||||||
|
year = isvalid ? momentDate.format("jYYYY") : null; |
||||||
|
const [state, setState] = useState({ day, month, year }); |
||||||
|
const onChange = (_name, value) => { |
||||||
|
let _state = { ...state, [_name]: value }; |
||||||
|
setState(_state); |
||||||
|
|
||||||
|
parent.onChange( |
||||||
|
name, |
||||||
|
moment |
||||||
|
.from(`${_state.year}/${_state.month}/${_state.day}`, "fa", "YYYY/M/D") |
||||||
|
.locale("en") |
||||||
|
); |
||||||
|
}; |
||||||
|
return ( |
||||||
|
<div className="birthdate d-flex justify-content-between align-items-center"> |
||||||
|
<label>تاریخ تولد</label> |
||||||
|
<div className="mobile-birthdate__date d-flex align-items-center"> |
||||||
|
<Input |
||||||
|
variant="standard" |
||||||
|
name="day" |
||||||
|
placeholder="روز" |
||||||
|
maxLength={2} |
||||||
|
onInput={onInput.dayHandler} |
||||||
|
parent={{ onChange }} |
||||||
|
defaultValue={state} |
||||||
|
/> |
||||||
|
<span>/</span> |
||||||
|
<Input |
||||||
|
variant="standard" |
||||||
|
name="month" |
||||||
|
placeholder="ماه" |
||||||
|
maxLength={2} |
||||||
|
onInput={onInput.monthHandler} |
||||||
|
parent={{ onChange }} |
||||||
|
defaultValue={state} |
||||||
|
/> |
||||||
|
<span>/</span> |
||||||
|
<Input |
||||||
|
variant="standard" |
||||||
|
name="year" |
||||||
|
placeholder="سال" |
||||||
|
maxLength={4} |
||||||
|
onInput={onInput.yearHandler} |
||||||
|
parent={{ onChange }} |
||||||
|
defaultValue={state} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,85 @@ |
|||||||
|
.birthdate { |
||||||
|
width: 100%; |
||||||
|
border-radius: 10px; |
||||||
|
padding: 0px 10px; |
||||||
|
border: 1px solid #777; |
||||||
|
margin: 10px 0px; |
||||||
|
label { |
||||||
|
width: fit-content; |
||||||
|
color: #ccc; |
||||||
|
font-weight: 100; |
||||||
|
} |
||||||
|
span { |
||||||
|
color: #bfbfbf; |
||||||
|
} |
||||||
|
|
||||||
|
input { |
||||||
|
border: 0px; |
||||||
|
background-color: rgba(204, 204, 204, 0.098); |
||||||
|
font-family: numeralLight; |
||||||
|
color: #84de56; |
||||||
|
max-width: 40px; |
||||||
|
text-align: center !important; |
||||||
|
direction: ltr; |
||||||
|
margin: 0px 5px; |
||||||
|
border: none; |
||||||
|
&:focus { |
||||||
|
outline: 0px; |
||||||
|
border: 0px; |
||||||
|
} |
||||||
|
&::placeholder { |
||||||
|
color: #bfbfbf; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (max-width: 1000px) { |
||||||
|
span { |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
input { |
||||||
|
font-size: 14px; |
||||||
|
|
||||||
|
&::placeholder { |
||||||
|
font-size: 15px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 6401px) and (max-width: 1007px) { |
||||||
|
.birthdate { |
||||||
|
label { |
||||||
|
font-size: calc(100vw / 40) !important; |
||||||
|
} |
||||||
|
span { |
||||||
|
font-size: calc(100vw / 35); |
||||||
|
} |
||||||
|
input { |
||||||
|
font-size: calc(100vw / 20); |
||||||
|
margin: 0px 5px !important; |
||||||
|
&::placeholder { |
||||||
|
font-size: calc(100vw / 30); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (max-width: 640px) { |
||||||
|
.birthdate { |
||||||
|
label { |
||||||
|
font-size: calc(100vw / 35) !important; |
||||||
|
} |
||||||
|
span { |
||||||
|
font-size: calc(100vw / 35); |
||||||
|
} |
||||||
|
input { |
||||||
|
font-size: calc(100vw / 20); |
||||||
|
|
||||||
|
&::placeholder { |
||||||
|
font-size: calc(100vw / 30); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,111 @@ |
|||||||
|
import React from "react"; |
||||||
|
import "./index.scss"; |
||||||
|
|
||||||
|
const maxDesktopSize = 1250; |
||||||
|
const maxMobileSize = 550; |
||||||
|
|
||||||
|
const fontSize = { |
||||||
|
desktop: { |
||||||
|
span: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80, |
||||||
|
}, |
||||||
|
mobile: { |
||||||
|
span: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 30, |
||||||
|
}, |
||||||
|
}; |
||||||
|
|
||||||
|
export default function Document(props) { |
||||||
|
const { parent, name } = props; |
||||||
|
return ( |
||||||
|
<> |
||||||
|
{window.innerWidth < 1000 ? ( |
||||||
|
<div className="mobile-auth-profile__document d-flex justify-content-center align-items-center mb-3"> |
||||||
|
{parent.state[name] === "" ? ( |
||||||
|
<> |
||||||
|
<input |
||||||
|
type="file" |
||||||
|
// parent.onChange(e.target.name, e.target.value)
|
||||||
|
name={name} |
||||||
|
onChange={(e) => |
||||||
|
parent.onChange(e.target.name, e.target.files[0]) |
||||||
|
} |
||||||
|
/> |
||||||
|
<span style={{ fontSize: fontSize.mobile.span }}> |
||||||
|
گواهی تدریس خود را آپلود کنید. |
||||||
|
</span> |
||||||
|
</> |
||||||
|
) : ( |
||||||
|
<> |
||||||
|
<input |
||||||
|
type="file" |
||||||
|
name="file" |
||||||
|
onChange={(e) => |
||||||
|
parent.onChange(e.target.name, e.target.files[0]) |
||||||
|
} |
||||||
|
/> |
||||||
|
<span |
||||||
|
style={{ |
||||||
|
fontSize: fontSize.mobile.span, |
||||||
|
width: "100%", |
||||||
|
textAlign: "center", |
||||||
|
margin: "auto", |
||||||
|
}} |
||||||
|
> |
||||||
|
{parent.state[name].name || |
||||||
|
"گواهی تدریس ثبت شده و درحال بررسی می باشد"} |
||||||
|
</span> |
||||||
|
</> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
) : null} |
||||||
|
{window.innerWidth > 1000 ? ( |
||||||
|
<div className="mobile-auth-profile__document d-flex justify-content-center-align-items-center"> |
||||||
|
{parent.state[name] === "" ? ( |
||||||
|
<> |
||||||
|
<input |
||||||
|
type="file" |
||||||
|
// parent.onChange(e.target.name, e.target.value)
|
||||||
|
name={name} |
||||||
|
onChange={(e) => |
||||||
|
parent.onChange(e.target.name, e.target.files[0]) |
||||||
|
} |
||||||
|
/> |
||||||
|
<span |
||||||
|
style={{ |
||||||
|
fontSize: fontSize.mobile.span, |
||||||
|
width: "100%", |
||||||
|
textAlign: "center", |
||||||
|
margin: "auto", |
||||||
|
}} |
||||||
|
> |
||||||
|
گواهی تدریس خود را آپلود کنید. |
||||||
|
</span> |
||||||
|
</> |
||||||
|
) : ( |
||||||
|
<> |
||||||
|
<input |
||||||
|
label={props.label} |
||||||
|
onChange={(e) => |
||||||
|
parent.onChange(e.target.name, e.target.files[0]) |
||||||
|
} |
||||||
|
name={props.name} |
||||||
|
defaultValue="" |
||||||
|
type="file" |
||||||
|
/> |
||||||
|
<span |
||||||
|
style={{ |
||||||
|
fontSize: fontSize.mobile.span, |
||||||
|
width: "100%", |
||||||
|
textAlign: "center", |
||||||
|
margin: "auto", |
||||||
|
}} |
||||||
|
> |
||||||
|
{parent.state[name].name || |
||||||
|
"گواهی تدریس ثبت شده و درحال بررسی می باشد"} |
||||||
|
</span> |
||||||
|
</> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
) : null} |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,28 @@ |
|||||||
|
.mobile-auth-profile { |
||||||
|
&__document { |
||||||
|
margin: 10px auto; |
||||||
|
width: 100%; |
||||||
|
height: 50px; |
||||||
|
border-radius: 10px; |
||||||
|
border: 2px dashed rgb(209, 209, 209); |
||||||
|
position: relative; |
||||||
|
input { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
position: absolute; |
||||||
|
left: 0px; |
||||||
|
top: 0px; |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
img { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
object-fit: cover; |
||||||
|
border-radius: 50%; |
||||||
|
} |
||||||
|
span { |
||||||
|
color: #afafaf; |
||||||
|
font-family: numeralLight; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,28 @@ |
|||||||
|
import React from "react"; |
||||||
|
|
||||||
|
import "./index.scss"; |
||||||
|
|
||||||
|
export default function GenderSwitch({ |
||||||
|
onChange, |
||||||
|
name, |
||||||
|
options, |
||||||
|
selectedOption, |
||||||
|
label, |
||||||
|
}) { |
||||||
|
return ( |
||||||
|
<div className="gender d-flex justify-content-between align-items-center"> |
||||||
|
<div |
||||||
|
className={selectedOption === 2 && "gender__active"} |
||||||
|
onClick={() => onChange(name, 2)} |
||||||
|
> |
||||||
|
{options[0]} |
||||||
|
</div> |
||||||
|
<div |
||||||
|
className={selectedOption === 1 && "gender__active"} |
||||||
|
onClick={() => onChange(name, 1)} |
||||||
|
> |
||||||
|
{options[1]} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,44 @@ |
|||||||
|
.gender { |
||||||
|
width: 100%; |
||||||
|
margin-bottom: 10px; |
||||||
|
div { |
||||||
|
border-radius: 10px; |
||||||
|
font-family: numeralLight; |
||||||
|
padding: 13px 0px; |
||||||
|
width: 45%; |
||||||
|
text-align: center; |
||||||
|
cursor: pointer; |
||||||
|
color: #ccc; |
||||||
|
background-color: black; |
||||||
|
border: 1px solid #777; |
||||||
|
} |
||||||
|
&__active{ |
||||||
|
background-color: #84de56 !important; |
||||||
|
color: white !important; |
||||||
|
border: none !important; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 1441px) { |
||||||
|
.gender{ |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
||||||
|
.gender{ |
||||||
|
font-size: calc(100vw / 90); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 641px) and (max-width: 1007px) { |
||||||
|
.gender{ |
||||||
|
font-size: calc(100vw / 40); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (max-width: 640px) { |
||||||
|
.gender{ |
||||||
|
font-size: calc(100vw / 30); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,96 @@ |
|||||||
|
import React from "react"; |
||||||
|
import Select from "@mui/material/Select"; |
||||||
|
import { makeStyles } from "@mui/styles"; |
||||||
|
import Input from "@mui/material/Input"; |
||||||
|
import InputLabel from "@mui/material/InputLabel"; |
||||||
|
import MenuItem from "@mui/material/MenuItem"; |
||||||
|
import FormControl from "@mui/material/FormControl"; |
||||||
|
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; |
||||||
|
|
||||||
|
import "./index.scss"; |
||||||
|
export default function MultipleSelector(props) { |
||||||
|
const useStyles = makeStyles((theme) => ({ |
||||||
|
root: { |
||||||
|
"& .MuiTextField-root": { |
||||||
|
width: "100%", |
||||||
|
position: "relative", |
||||||
|
marginRight: 10, |
||||||
|
"& input": { |
||||||
|
textAlign: props.align, |
||||||
|
direction: props.align === "right" ? "rtl" : "ltr", |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
})); |
||||||
|
|
||||||
|
const classes = useStyles(); |
||||||
|
const { parent, defaultValue, name, label, options, selectedOptions } = props; |
||||||
|
return ( |
||||||
|
<> |
||||||
|
{window.innerWidth < 1000 ? ( |
||||||
|
<FormControl |
||||||
|
variant="outlined" |
||||||
|
className={`${classes.formControl} mobile-multiple-selector`} |
||||||
|
> |
||||||
|
<InputLabel id="demo-mutiple-name-label">{label}</InputLabel> |
||||||
|
<Select |
||||||
|
labelId="demo-mutiple-name-label" |
||||||
|
id="demo-mutiple-name" |
||||||
|
multiple |
||||||
|
value={selectedOptions.split(",")} |
||||||
|
onChange={(e) => parent.onChange(name, e.target.value.join(","))} |
||||||
|
input={<Input />} |
||||||
|
variant="outlined" |
||||||
|
> |
||||||
|
{options.map((name, i) => ( |
||||||
|
<MenuItem key={name} value={i}> |
||||||
|
{name} |
||||||
|
</MenuItem> |
||||||
|
))} |
||||||
|
</Select> |
||||||
|
<KeyboardArrowDownIcon |
||||||
|
style={{ |
||||||
|
position: "absolute", |
||||||
|
left: 5, |
||||||
|
top: 10, |
||||||
|
fontSize: 30, |
||||||
|
color: "#a5a5a5", |
||||||
|
}} |
||||||
|
/> |
||||||
|
</FormControl> |
||||||
|
) : null} |
||||||
|
{window.innerWidth > 1000 ? ( |
||||||
|
<FormControl |
||||||
|
variant="outlined" |
||||||
|
className={`${classes.formControl} mobile-multiple-selector`} |
||||||
|
> |
||||||
|
<InputLabel id="demo-mutiple-name-label">{label}</InputLabel> |
||||||
|
<Select |
||||||
|
labelId="demo-mutiple-name-label" |
||||||
|
id="demo-mutiple-name" |
||||||
|
multiple |
||||||
|
value={selectedOptions.split(",")} |
||||||
|
onChange={(e) => parent.onChange(name, e.target.value.join(","))} |
||||||
|
input={<Input />} |
||||||
|
variant="outlined" |
||||||
|
> |
||||||
|
{options.map((name, i) => ( |
||||||
|
<MenuItem key={name} value={i}> |
||||||
|
{name} |
||||||
|
</MenuItem> |
||||||
|
))} |
||||||
|
</Select> |
||||||
|
<KeyboardArrowDownIcon |
||||||
|
style={{ |
||||||
|
position: "absolute", |
||||||
|
left: 5, |
||||||
|
top: 15, |
||||||
|
fontSize: 30, |
||||||
|
color: "#a5a5a5", |
||||||
|
}} |
||||||
|
/> |
||||||
|
</FormControl> |
||||||
|
) : null} |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,10 @@ |
|||||||
|
.mobile-multiple-selector { |
||||||
|
width: 100%; |
||||||
|
border-radius: 10px; |
||||||
|
padding: 9px 10px; |
||||||
|
border: 1px solid #ccc !important; |
||||||
|
margin: 0px !important; |
||||||
|
.MuiInput-formControl { |
||||||
|
margin: 9px 0px 8px !important; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,29 @@ |
|||||||
|
import React from "react"; |
||||||
|
import AddAPhotoIcon from "@mui/icons-material/AddAPhoto"; |
||||||
|
import './index.scss'; |
||||||
|
|
||||||
|
export default function Upload({ name, value, onChange, label }) { |
||||||
|
return ( |
||||||
|
<div className="profile-upload d-flex justify-content-center align-items-center mb-3"> |
||||||
|
<> |
||||||
|
{value === null ? ( |
||||||
|
<AddAPhotoIcon style={{ width: 35, height: 35, color: "white" }} /> |
||||||
|
) : ( |
||||||
|
<img |
||||||
|
src={ |
||||||
|
value.name |
||||||
|
? URL.createObjectURL(value) |
||||||
|
: window.baseURL + "file/" + value |
||||||
|
} |
||||||
|
alt={"کاربر"} |
||||||
|
/> |
||||||
|
)} |
||||||
|
<input |
||||||
|
type="file" |
||||||
|
name={name} |
||||||
|
onChange={(e) => onChange(e.target.name, e.target.files[0])} |
||||||
|
/> |
||||||
|
</> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,55 @@ |
|||||||
|
.profile-upload { |
||||||
|
width: 100px; |
||||||
|
height: 100px; |
||||||
|
border-radius: 50%; |
||||||
|
margin-top: 15px auto 0px; |
||||||
|
// border: 2px dotted #ccc; |
||||||
|
position: relative; |
||||||
|
background-color: #272727; |
||||||
|
input { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
opacity: 0; |
||||||
|
position: absolute; |
||||||
|
left: 0px; |
||||||
|
top: 0px; |
||||||
|
z-index: 50; |
||||||
|
} |
||||||
|
span { |
||||||
|
color: #505a82; |
||||||
|
font-family: numeralLight; |
||||||
|
height: 20px; |
||||||
|
position: absolute; |
||||||
|
left: 0px; |
||||||
|
top: calc(50% - 10px); |
||||||
|
width: 100%; |
||||||
|
text-align: center; |
||||||
|
z-index: 10; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 1441px) { |
||||||
|
.profile-upload { |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
||||||
|
.profile-upload { |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 641px) and (max-width: 1007px) { |
||||||
|
.profile-upload { |
||||||
|
width: 80px; |
||||||
|
height: 80px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (max-width: 640px) { |
||||||
|
.profile-upload { |
||||||
|
width : 80px; |
||||||
|
height : 80px; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,422 @@ |
|||||||
|
.MuiOutlinedInput-input { |
||||||
|
font-family: numeralLight !important; |
||||||
|
} |
||||||
|
|
||||||
|
.profile { |
||||||
|
scrollbar-width: 0px; |
||||||
|
padding: 50px 20px 0px; |
||||||
|
&::-webkit-scrollbar { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
header { |
||||||
|
margin: 30px 0px; |
||||||
|
h1 { |
||||||
|
margin-top: 15px; |
||||||
|
font-family: numeralMedium; |
||||||
|
color: white; |
||||||
|
letter-spacing: -1px; |
||||||
|
} |
||||||
|
p { |
||||||
|
font-family: numeralLight; |
||||||
|
color: white; |
||||||
|
text-align: justify; |
||||||
|
} |
||||||
|
} |
||||||
|
&__box { |
||||||
|
width: 100%; |
||||||
|
border: 1px solid #777; |
||||||
|
border-radius: 20px; |
||||||
|
&--section { |
||||||
|
width: 45%; |
||||||
|
} |
||||||
|
|
||||||
|
.MuiMenu-list, |
||||||
|
.MuiFormControl-root { |
||||||
|
width: 100%; |
||||||
|
margin: 10px auto !important; |
||||||
|
scrollbar-width: 0px !important; |
||||||
|
&::-webkit-scrollbar { |
||||||
|
display: none !important; |
||||||
|
width: 0px !important; |
||||||
|
} |
||||||
|
option { |
||||||
|
font-family: numeralLight !important; |
||||||
|
} |
||||||
|
.MuiSelect-iconOutlined { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.MuiSelect-outlined.MuiSelect-outlined { |
||||||
|
padding-right: 15px; |
||||||
|
} |
||||||
|
color: #797979 !important; |
||||||
|
} |
||||||
|
|
||||||
|
button { |
||||||
|
margin-top: 20px; |
||||||
|
margin-bottom: 50px; |
||||||
|
font-family: numeralLight; |
||||||
|
border: 0px; |
||||||
|
background-color: #00cc69; |
||||||
|
border-radius: 7px; |
||||||
|
color: white; |
||||||
|
padding: 12px 0px; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 1441px) { |
||||||
|
.profile { |
||||||
|
button { |
||||||
|
font-size: 21px; |
||||||
|
} |
||||||
|
header { |
||||||
|
} |
||||||
|
&__box { |
||||||
|
flex-direction: row; |
||||||
|
justify-content: space-around; |
||||||
|
padding: 30px 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
.MuiFormControl-root { |
||||||
|
width: 100%; |
||||||
|
margin: 10px auto !important; |
||||||
|
.MuiSelect-iconOutlined { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.MuiSelect-outlined.MuiSelect-outlined { |
||||||
|
padding-right: 15px; |
||||||
|
} |
||||||
|
color: #797979 !important; |
||||||
|
} |
||||||
|
.MuiOutlinedInput-notchedOutline { |
||||||
|
top: 0px !important; |
||||||
|
} |
||||||
|
.MuiOutlinedInput-notchedOutline { |
||||||
|
border-color: #666666 !important; |
||||||
|
border-width: 1px !important; |
||||||
|
color: green !important; |
||||||
|
border-radius: 10px !important; |
||||||
|
} |
||||||
|
|
||||||
|
.MuiOutlinedInput-input { |
||||||
|
padding: 15px 14px !important; |
||||||
|
font-family: numeralLight; |
||||||
|
font-size: 20px; |
||||||
|
color: #84de56 !important; |
||||||
|
&:focus { |
||||||
|
border: 0.2px solid #84de56 !important; |
||||||
|
border-radius: 10px; |
||||||
|
transform: translateY(0.5px); |
||||||
|
border-radius: 10px !important; |
||||||
|
} |
||||||
|
} |
||||||
|
.MuiInputLabel-outlined { |
||||||
|
font-family: numeralLight !important; |
||||||
|
display: inline !important; |
||||||
|
position: absolute; |
||||||
|
text-align: right !important; |
||||||
|
right: 15px !important; |
||||||
|
top: 50% !important; |
||||||
|
padding: 0px !important; |
||||||
|
transform: translate(0px, -50%) scale(1) !important; |
||||||
|
} |
||||||
|
.MuiInputLabel-shrink { |
||||||
|
text-align: center !important; |
||||||
|
display: inline; |
||||||
|
position: absolute; |
||||||
|
right: 0px !important; |
||||||
|
top: -8px !important; |
||||||
|
transform: translate(0px, 0px) scale(0.85) !important; |
||||||
|
padding: 0px 10px !important; |
||||||
|
} |
||||||
|
|
||||||
|
label { |
||||||
|
background-color: black; |
||||||
|
width: fit-content; |
||||||
|
text-align: center; |
||||||
|
color: #b5b5b5 !important; |
||||||
|
letter-spacing: -1px; |
||||||
|
font-size: 14px !important; |
||||||
|
} |
||||||
|
.Mui-focused { |
||||||
|
color: rgba(0, 0, 0, 1) !important; |
||||||
|
border-color: #84de56 !important; |
||||||
|
// background-color: white; |
||||||
|
color: #84de56 !important; |
||||||
|
} |
||||||
|
|
||||||
|
.MuiInputBase-input { |
||||||
|
height: auto !important; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
||||||
|
.profile { |
||||||
|
button { |
||||||
|
font-size: calc(100vw / 70); |
||||||
|
} |
||||||
|
&__box { |
||||||
|
padding: 30px 10px; |
||||||
|
flex-direction: row; |
||||||
|
justify-content: space-around; |
||||||
|
} |
||||||
|
} |
||||||
|
.MuiFormControl-root { |
||||||
|
width: 100%; |
||||||
|
margin: 10px auto !important; |
||||||
|
.MuiSelect-iconOutlined { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.MuiSelect-outlined.MuiSelect-outlined { |
||||||
|
padding-right: 15px; |
||||||
|
} |
||||||
|
color: #797979 !important; |
||||||
|
} |
||||||
|
.MuiOutlinedInput-notchedOutline { |
||||||
|
top: 0px !important; |
||||||
|
} |
||||||
|
.MuiOutlinedInput-notchedOutline { |
||||||
|
border-color: #666666 !important; |
||||||
|
border-width: 1px !important; |
||||||
|
color: green !important; |
||||||
|
border-radius: 10px !important; |
||||||
|
} |
||||||
|
|
||||||
|
.MuiOutlinedInput-input { |
||||||
|
padding: 15px 14px !important; |
||||||
|
font-family: numeralLight; |
||||||
|
font-size: calc(100vw / 80) !important; |
||||||
|
color: #84de56 !important; |
||||||
|
&:focus { |
||||||
|
border: 0.2px solid #84de56 !important; |
||||||
|
border-radius: 10px; |
||||||
|
transform: translateY(0px); |
||||||
|
z-index: 100; |
||||||
|
border-radius: 10px !important; |
||||||
|
} |
||||||
|
} |
||||||
|
.MuiInputLabel-outlined { |
||||||
|
font-family: numeralLight !important; |
||||||
|
display: inline !important; |
||||||
|
position: absolute; |
||||||
|
text-align: right !important; |
||||||
|
right: 10px !important; |
||||||
|
top: 50% !important; |
||||||
|
padding: 0px !important; |
||||||
|
transform: translate(0px, -50%) scale(1) !important; |
||||||
|
} |
||||||
|
.MuiInputLabel-shrink { |
||||||
|
text-align: center !important; |
||||||
|
display: inline; |
||||||
|
position: absolute; |
||||||
|
right: 0px !important; |
||||||
|
top: -5px !important; |
||||||
|
transform: translate(0px, 0px) scale(0.85) !important; |
||||||
|
padding: 0px 10px !important; |
||||||
|
z-index: 120 !important; |
||||||
|
} |
||||||
|
|
||||||
|
label { |
||||||
|
background-color: black; |
||||||
|
width: fit-content; |
||||||
|
text-align: center; |
||||||
|
color: #b5b5b5 !important; |
||||||
|
letter-spacing: -1px; |
||||||
|
font-size: calc(100vw / 110) !important; |
||||||
|
z-index: 120; |
||||||
|
} |
||||||
|
.Mui-focused { |
||||||
|
color: rgba(0, 0, 0, 1) !important; |
||||||
|
border-color: #84de56 !important; |
||||||
|
// background-color: white; |
||||||
|
color: #84de56 !important; |
||||||
|
} |
||||||
|
|
||||||
|
.MuiInputBase-input { |
||||||
|
height: auto !important; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 641px) and (max-width: 1007px) { |
||||||
|
.profile { |
||||||
|
padding: 50px 100px 10px; |
||||||
|
header { |
||||||
|
margin: 0px; |
||||||
|
margin-top: 30px; |
||||||
|
} |
||||||
|
&__box { |
||||||
|
flex-direction: column; |
||||||
|
border: none; |
||||||
|
&--section { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
.MuiFormControl-root { |
||||||
|
width: 100%; |
||||||
|
margin: 10px auto !important; |
||||||
|
.MuiSelect-iconOutlined { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.MuiSelect-outlined.MuiSelect-outlined { |
||||||
|
padding-right: 15px; |
||||||
|
} |
||||||
|
color: #797979 !important; |
||||||
|
} |
||||||
|
.MuiOutlinedInput-notchedOutline { |
||||||
|
top: 0px !important; |
||||||
|
} |
||||||
|
.MuiOutlinedInput-notchedOutline { |
||||||
|
border-color: #666666 !important; |
||||||
|
border-width: 1px !important; |
||||||
|
color: green !important; |
||||||
|
border-radius: 10px !important; |
||||||
|
} |
||||||
|
|
||||||
|
.MuiOutlinedInput-input { |
||||||
|
padding: 15px 14px !important; |
||||||
|
font-family: numeralLight; |
||||||
|
font-size: calc(100vw / 40); |
||||||
|
background-color: inherit; |
||||||
|
color: #84de56; |
||||||
|
&:focus { |
||||||
|
border: 0.2px solid #84de56 !important; |
||||||
|
border-radius: 10px; |
||||||
|
transform: translateY(0px); |
||||||
|
z-index: 100; |
||||||
|
border-radius: 10px !important; |
||||||
|
} |
||||||
|
} |
||||||
|
.MuiInputLabel-outlined { |
||||||
|
font-family: numeralLight !important; |
||||||
|
display: inline !important; |
||||||
|
position: absolute; |
||||||
|
text-align: right !important; |
||||||
|
right: 15px; |
||||||
|
top: calc(50%); |
||||||
|
padding: 0px !important; |
||||||
|
transform: translate(0px, -50%) scale(1) !important; |
||||||
|
} |
||||||
|
.MuiInputLabel-shrink { |
||||||
|
text-align: center !important; |
||||||
|
display: inline; |
||||||
|
position: absolute; |
||||||
|
right: 0px; |
||||||
|
top: -10px; |
||||||
|
transform: translate(0px, 0px) scale(0.85) !important; |
||||||
|
padding: 0px 10px !important; |
||||||
|
} |
||||||
|
|
||||||
|
label { |
||||||
|
background-color: black; |
||||||
|
width: fit-content; |
||||||
|
text-align: center; |
||||||
|
color: #b5b5b5 !important; |
||||||
|
letter-spacing: -1px; |
||||||
|
font-size: calc(100vw / 40); |
||||||
|
z-index: 110; |
||||||
|
} |
||||||
|
.Mui-focused { |
||||||
|
color: rgba(0, 0, 0, 1) !important; |
||||||
|
border-color: #84de56 !important; |
||||||
|
// background-color: white; |
||||||
|
color: #84de56 !important; |
||||||
|
} |
||||||
|
|
||||||
|
.MuiInputBase-input { |
||||||
|
height: auto !important; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (max-width: 640px) { |
||||||
|
.profile { |
||||||
|
padding: 0px 10px; |
||||||
|
header { |
||||||
|
margin: 0px; |
||||||
|
margin-top: 70px; |
||||||
|
} |
||||||
|
&__box { |
||||||
|
flex-direction: column; |
||||||
|
border: none; |
||||||
|
&--section { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
.MuiFormControl-root { |
||||||
|
width: 100%; |
||||||
|
margin: 10px auto !important; |
||||||
|
.MuiSelect-iconOutlined { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.MuiSelect-outlined.MuiSelect-outlined { |
||||||
|
padding-right: 15px; |
||||||
|
} |
||||||
|
color: #797979 !important; |
||||||
|
} |
||||||
|
.MuiOutlinedInput-notchedOutline { |
||||||
|
top: 0px !important; |
||||||
|
} |
||||||
|
.MuiOutlinedInput-notchedOutline { |
||||||
|
border-color: #666666 !important; |
||||||
|
border-width: 1px !important; |
||||||
|
color: green !important; |
||||||
|
border-radius: 10px !important; |
||||||
|
} |
||||||
|
|
||||||
|
.MuiOutlinedInput-input { |
||||||
|
padding: 15px 14px !important; |
||||||
|
font-family: numeralLight; |
||||||
|
font-size: calc(100vw / 30); |
||||||
|
background-color: inherit; |
||||||
|
border-radius: 10px; |
||||||
|
color: #84de56 !important; |
||||||
|
|
||||||
|
&:focus { |
||||||
|
border: 0.2px solid #84de56 !important; |
||||||
|
border-radius: 10px; |
||||||
|
transform: translateY(0px); |
||||||
|
z-index: 100; |
||||||
|
} |
||||||
|
} |
||||||
|
.MuiInputLabel-outlined { |
||||||
|
font-family: numeralLight !important; |
||||||
|
display: inline !important; |
||||||
|
position: absolute; |
||||||
|
text-align: right !important; |
||||||
|
right: 15px; |
||||||
|
top: calc(50%); |
||||||
|
padding: 0px !important; |
||||||
|
transform: translate(0px, -50%) scale(1) !important; |
||||||
|
} |
||||||
|
.MuiInputLabel-shrink { |
||||||
|
text-align: center !important; |
||||||
|
display: inline; |
||||||
|
position: absolute; |
||||||
|
right: 0px; |
||||||
|
top: -10px; |
||||||
|
transform: translate(0px, 0px) scale(0.7) !important; |
||||||
|
padding: 0px 10px !important; |
||||||
|
} |
||||||
|
|
||||||
|
label { |
||||||
|
background-color: black; |
||||||
|
width: fit-content; |
||||||
|
text-align: center; |
||||||
|
color: #b5b5b5 !important; |
||||||
|
letter-spacing: -1px; |
||||||
|
font-size: calc(100vw / 25); |
||||||
|
z-index: 110; |
||||||
|
} |
||||||
|
.Mui-focused { |
||||||
|
color: rgba(0, 0, 0, 1) !important; |
||||||
|
border-color: #84de56 !important; |
||||||
|
// background-color: white; |
||||||
|
color: #84de56 !important; |
||||||
|
} |
||||||
|
|
||||||
|
.MuiInputBase-input { |
||||||
|
height: auto !important; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue