Commit 9a236e04 authored by Kim, Subin's avatar Kim, Subin
Browse files

Menu style 변경

parent 9c682577
......@@ -8,25 +8,25 @@ const Menu = () => {
<i className="bi bi-list fs-4"></i>
</button>
<div className={`collapse collapse-horizontal position-absolute top-0 start-0 h-100 ${styles.content}`} id="menuContent">
<div style={{ transition: ".15s ease" }}>
<button type="button" className={`btn-close btn-close btn-lg position-absolute ${styles.close}`} data-bs-toggle="collapse" data-bs-target="#menuContent" aria-controls="menuContent" aria-expanded="true" aria-label="menu"></button>
<div className="d-flex flex-column align-items-center my-5">
<div className="d-flex flex-column" style={{ transition: ".15s ease", height: "inherit" }}>
<button type="button" className={`btn-close btn-close-white btn-lg position-absolute ${styles.close}`} data-bs-toggle="collapse" data-bs-target="#menuContent" aria-controls="menuContent" aria-expanded="true" aria-label="menu"></button>
<div className="d-flex flex-column align-items-center text-white py-5" style={{ backgroundColor: "crimson" }}>
<h1 className="my-3">김수빈 </h1>
<h2 className="my-2">목표 95% 달성!</h2>
<h2 className="my-2">오늘의 목표 95% 달성!</h2>
</div>
<div className="d-flex flex-column justify-content-between py-4 ps-3" style={{ backgroundColor: "crimson" }}>
<div className="user-select-none w-75">
<h2>To-do</h2>
<div className="d-flex flex-column justify-content-between flex-grow-1 py-4 ps-3 text-dark" >
<div className="user-select-none w-75 ps-3">
<h2 className="mb-5">To-do</h2>
<div className="d-flex mt-2">
<p className={`form-check-label border-bottom border-dark border-2 fs-5 pb-1 me-3 ${styles.title}`}>sdasdsasdasdsadsadsadsadsadsadsadaddad</p>
<p className={`form-check-label border-bottom border-2 fs-5 pb-1 me-3 ${styles.title}`}>sdasdsasdasdsadsadsadsadsadsadsadaddad</p>
<input className={`form-check-input rounded-0 border-dark shadow-none mt-1 ${styles.checkBox}`} type="checkbox" id="inlineCheckbox1" value="" aria-label="checkbox" />
</div>
<div className="d-flex">
<p className={`form-check-label border-bottom border-dark border-2 fs-5 pb-1 me-3 ${styles.title}`}>sdasdsadad</p>
<p className={`form-check-label border-bottom border-2 fs-5 pb-1 me-3 ${styles.title}`}>sdasdsadad</p>
<input className={`form-check-input rounded-0 border-dark shadow-none mt-1 ${styles.checkBox}`} type="checkbox" id="inlineCheckbox1" value="" aria-label="checkbox" />
</div>
<div className="d-flex">
<p className={`form-check-label border-bottom border-dark border-2 fs-5 pb-1 me-3 ${styles.title}`}>sdasdsadad</p>
<p className={`form-check-label border-bottom border-2 fs-5 pb-1 me-3 ${styles.title}`}>sdasdsadad</p>
<input className={`form-check-input rounded-0 border-dark shadow-none mt-1 ${styles.checkBox}`} type="checkbox" id="inlineCheckbox1" value="" aria-label="checkbox" />
</div>
<Link className="d-flex justify-content-center text-dark text-decoration-none" to="/todo">
......
......@@ -18,7 +18,7 @@
& .checkBox {
width: 1.5em;
height: 1.5em;
background-color: crimson;
background-color: #fff;
&:checked {
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");
......
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