src/components/note-form/note-form.module.css
.container {
display: flex;
gap: 40px;
}
.form-wrapper {
display: grid;
width: 660px;
grid-template-rows: 160px minmax(400px, max-content) 60px;
gap: 40px;
height: max-content;
}
.form-wrapper.type-edit {
grid-template-rows: 160px minmax(400px, max-content) max-content 60px;
}
.form {
display: grid;
grid-template-columns: 100px 1fr;
grid-auto-rows: 60px;
gap: 40px;
}
.title {
grid-column: 1 / -1;
}
.date {
max-width: 210px;
cursor: pointer;
}
.checkbox {
justify-self: start;
}
.controls {
display: flex;
gap: 40px;
}
.btn > svg {
width: 24px;
height: 24px;
}
.search {
flex-grow: 1;
border-radius: var(--border-radius);
}
.search.invalid {
outline: 2px solid var(--error);
}
@media (max-width: 1439px) {
.form-wrapper {
width: 100%;
grid-template-columns: 1fr 220px;
}
.date {
max-width: 272px;
}
.textarea,
.controls {
grid-column: 1 / -1;
}
.image-placeholder {
grid-column: 2 / 3;
grid-row: 1 / 2;
display: flex;
justify-content: center;
align-items: center;
border-radius: var(--border-radius);
background: var(--background-white);
-webkit-box-shadow: var(--shadow);
-moz-box-shadow: var(--shadow);
box-shadow: var(--shadow);
overflow: hidden;
cursor: pointer;
}
.image-placeholder:focus,
.image-placeholder:hover {
outline: 2px solid var(--text);
}
.image-placeholder.invalid {
outline: 2px solid var(--error);
}
.image-placeholder > svg {
height: 19px;
width: 19px;
}
.search {
display: none;
}
}
@media (max-width: 1023px) {
.form-wrapper {
grid-template-columns: 1fr;
grid-template-rows: 200px 100px minmax(260px, max-content) 40px;
gap: 20px;
}
.form-wrapper.type-edit {
grid-template-rows: 200px 100px minmax(260px, max-content) max-content 40px;
}
.form {
grid-auto-rows: 40px;
grid-template-columns: 1fr 70px;
gap: 20px;
}
.date {
grid-row-start: 2;
max-width: 190px;
}
.controls {
gap: 20px;
}
.btn {
width: 50%;
}
.btn > span {
width: 1px;
height: 1px;
clip: rect(0 0 0 0);
overflow: hidden;
position: absolute;
}
.btn > svg {
width: 18px;
height: 18px;
}
.image-placeholder {
grid-column: 1 / -1;
grid-row: 1 / 2;
}
.image-placeholder > svg {
height: 24px;
width: 24px;
}
}