//TodoTemplate.js
.TodoTemplate {
width: 512px;
margin-left: auto;
margin-right: auto;
margin-top: 6rem;
border-radius: 4px;
overflow: hidden;
.app-title {
background: #22b8cf;
color: white;
height: 4rem;
font-size: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
}
.content {
background: white;
}
}
//TodoInsert.scss
.TodoInsert {
display: flex;
background: #495057;
input {
background: none;
outline: none;
border: none;
padding: 0.5rem;
font-size: 1.125rem;
line-height: 1.5;
color: white;
&::placeholder {
color: #dee2e6;
}
flex: 1;
}
button {
background: none;
outline: none;
border: none;
background: #868e96;
color: white;
padding-left: 1rem;
padding-right: 1rem;
font-size: 1.5rem;
display: flex;
align-items: center;
cursor: pointer;
transition: 0.1s background ease-in;
&:hover {
background: #adb5bd;
}
}
}
//TodoList.scss
.TodoList {
min-height: 320px;
max-height: 513px;
overflow-y: auto;
}
//TodoListItem.scss
.TodoListItem {
padding: 1rem;
display: flex;
align-items: center;
&:nth-child(even) {
background: #f8f9fa;
}
.checkbox {
cursor: pointer;
flex: 1;
display: flex;
align-items: center;
svg {
font-size: 1.5rem;
}
.text {
margin-left: 0.5rem;
flex: 1;
}
&.checked {
svg {
color: #22b8cf;
}
.text {
color: #adb5bd;
text-decoration: line-through;
}
}
}
.remove {
display: flex;
align-items: center;
font-size: 1.5rem;
color: #ff6b6b;
cursor: pointer;
&:hover {
color: #ff8787;
}
}
/*This construct is common when you need to add a border between items: you add it to the left of any items which follows another one.*/
& + & {
border-top: 1px solid #dee2e6;
}
}
'프론트엔드관련 책예제실습정리 > 리기술요약' 카테고리의 다른 글
17 .1리덕스 사용하여 리액트 어플리케이션 상태관리 (0) | 2021.07.13 |
---|---|
13 리액트라우터로 SPA 개발하기 (0) | 2021.06.25 |
10 일정관리 어플리케이션(js) (0) | 2021.06.25 |
10 일정관리웹어플리케이션만들기 01 (0) | 2021.06.23 |
09컴퍼넌트스타일링 CSSModule을 활용한 클래스네임적용, global css 작성 (0) | 2021.06.23 |