Commit 28c5742b authored by Kim, Subin's avatar Kim, Subin
Browse files

ScheduleForm 수정 중

parent d234acd8
......@@ -5,29 +5,41 @@ import styles from "./form.module.scss";
const ScheduleForm = () => {
return (
<form className="my-5">
<input className="form-control form-control-lg mb-4" type="text" placeholder="제목" aria-label="title" autoFocus />
<form className="pt-5">
<input className={`form-control form-control-lg shadow-none px-1 mb-5 ${styles.textInput}`} type="text" placeholder="제목" aria-label="title" autoFocus />
<div className="d-flex mb-4">
<label className="col-3 col-form-label">시작</label>
<div className="col-5">
<input className="form-control" type="date" aria-label="startDate" />
<input className={`form-control shadow-none ${styles.dateInput}`} type="date" aria-label="startDate" />
</div>
<div className="col-4">
<input className="form-control" type="time" aria-label="startTime" />
<input className={`form-control shadow-none ${styles.dateInput}`} type="time" aria-label="startTime" />
</div>
</div>
<div className="d-flex mb-3">
<label className="col-3 col-form-label">종료</label>
<div className="col-5">
<input className="form-control" type="date" aria-label="endDate" />
<input className={`form-control shadow-none ${styles.dateInput}`} type="date" aria-label="endDate" />
</div>
<div className="col-4">
<input className="form-control" type="time" aria-label="endTime" />
<input className={`form-control shadow-none ${styles.dateInput}`} type="time" aria-label="endTime" />
</div>
</div>
<div className="d-flex justify-content-end form-check">
<input className={`form-check-input border-dark shadow-none ${styles.checkBox}`} type="checkbox" value="" id="allDay" />
<label className="form-check-label" htmlFor="allDay">하루 종일</label>
<div className="d-flex justify-content-end form-check mb-4">
<input className={`form-check-input shadow-none ${styles.checkBox}`} type="checkbox" value="" id="allDay" />
<label className="form-check-label ms-2" htmlFor="allDay">하루 종일</label>
</div>
<div className="d-flex justify-content-between align-items-center mb-4">
<i className="col bi bi-geo-alt fs-3"></i>
<div className="col-10">
<input className={`form-control shadow-none px-1 ${styles.textInput}`} type="text" placeholder="장소" aria-label="location" />
</div>
</div>
<div className="d-flex justify-content-between mb-5">
<i className="col bi bi-journal-text fs-3"></i>
<div className="col-10">
<textarea className={`form-control shadow-none ${styles.textArea}`} rows="5"></textarea>
</div>
</div>
<BtnGroup />
</form>
......
.checkBox:checked {
background-color: crimson;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='currentColor' d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
.checkBox {
border-color: black;
&:focus {
border-color: black;
}
&:checked {
border-color: crimson;
background-color: crimson;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='currentColor' d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}
}
.textInput {
border: none;
border-bottom: 2px solid #000;
border-radius: 0;
&:focus {
border-color: crimson;
}
}
.dateInput {
&:focus {
border-color: crimson;
}
}
.textArea {
resize: none;
border: 2px solid #000;
border-radius: 0;
&:focus {
border-color: crimson;
}
}
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment