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