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 { | ||||
|   type : "public/homePage" | ||||
|   data : any | ||||
|   type: "public/homePage"; | ||||
|   data: any; | ||||
| } | ||||
| 
 | ||||
| interface getBlogList{ | ||||
|   type : "public/blogList" | ||||
|   data : any | ||||
| interface getBlogList { | ||||
|   type: "public/blogList"; | ||||
|   data: any; | ||||
| } | ||||
| 
 | ||||
| interface getBlogInfo{ | ||||
|   type : "public/blogInfo" | ||||
|   data : any | ||||
| interface getBlogInfo { | ||||
|   type: "public/blogInfo"; | ||||
|   data: any; | ||||
| } | ||||
| 
 | ||||
| interface setFaqActive{ | ||||
|   type : "public/faq/activate" | ||||
|   data : any | ||||
| interface setFaqActive { | ||||
|   type: "public/faq/activate"; | ||||
|   data: any; | ||||
| } | ||||
| 
 | ||||
| interface setSubscribe{ | ||||
|   type: "public/setSubscribe" | ||||
|   data: any | ||||
| interface setSubscribe { | ||||
|   type: "public/setSubscribe"; | ||||
|   data: any; | ||||
| } | ||||
| 
 | ||||
| interface error{ | ||||
|   type : "error" | ||||
|   data : undefined | ||||
| interface getProvince { | ||||
|   type: "public/province"; | ||||
|   data: any; | ||||
| } | ||||
| 
 | ||||
| interface loading{ | ||||
|   type : "loading" | ||||
|   data : undefined | ||||
| interface getCity { | ||||
|   type: "public/city"; | ||||
|   data: any; | ||||
| } | ||||
| 
 | ||||
| interface error { | ||||
|   type: "error"; | ||||
|   data: undefined; | ||||
| } | ||||
| 
 | ||||
| interface loading { | ||||
|   type: "loading"; | ||||
|   data: undefined; | ||||
| } | ||||
| 
 | ||||
| // interface filterNewProducts{
 | ||||
| 
 | ||||
| // }
 | ||||
| 
 | ||||
| 
 | ||||
| type PublicAction = getBlogList | getBlogInfo | setSubscribe | getHomeData | setFaqActive | loading | error; | ||||
| type PublicAction = | ||||
|   | getBlogList | ||||
|   | getBlogInfo | ||||
|   | setSubscribe | ||||
|   | getHomeData | ||||
|   | setFaqActive | ||||
|   | getProvince | ||||
|   | getCity | ||||
|   | loading | ||||
|   | error; | ||||
| 
 | ||||
| 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