<form class="reply">
<div class="reply__column">
<i class="far fa-plus-square fa-lg"></i>
</div>
<div class="reply__column">
<input type="text" placeholder="Write a message..." />
<i class="far fa-smile fa-lg"></i>
<button><i class="fas fa-arrow-up"></i></button>
</div>
</form>
/*reply안의 무언가가 focus되면 reply는 내려간다.*/
.reply {
...
transition: transform 0.3s ease-in-out;
}
.reply:focus-within {
transform: translateY(80px);
}
/*reply안의 무언가가 focus되면 reply의 첫번째 자식과
fasmile아이콘, 버튼은 opacity가 0이 된다.*/
.reply .reply__column:first-child,
.reply .fa-smile,
.reply button {
transition: opacity 0.3s ease-in-out;
}
.reply:focus-within .reply__column:first-child,
.reply:focus-within .fa-smile,
.reply:focus-within button {
opacity: 0;
}
/*input이 focus되면 width가 95vw로 바뀌면서
왼쪽으로 10퍼센트 늘어나고 위로 80px 올라간다.*/
.reply input {
...
transition: all 0.3s ease-in-out;
}
.reply input:focus {
width: 95vw;
transform: translateX(-10%) translateY(-80px);
}
state selector 덕분에 reply 내부에 focus되어있는 element가 있는지 알 수 있다.
(reply안에 input이 선택되면 알 수 있음)