Đây là nội dung viết css cho phần sidebar và phần khung thân website đã tạo html trước đó
Nội dung phần css
.app__container{
background-color: #f5f5f5;
}
.app__content{
padding-top: 36px;
}
.category{
background-color: var(--white-color);
border-radius: 2px;
}
.category_heading{
font-size: 1.8rem;
color: var(--text-color);
padding: 12px 16px;
margin-top: 0;
border-bottom: 1px solid rgba(0,0,0,0.05);
}
.category_heading-icon{
font-size: 1.4rem;
margin-right: 4px;
position: relative;
top: -1px;
}
.category-list{
padding: 0 0 8px 0;
list-style: none;
margin-left: 9px;
}
.category-item--active .category-item_link{
color: var(--primary-color);
}
.category-item--active .category-item_link::before{
position: absolute;
top: 50%;
content: "";
border: 4px solid;
transform: translateY(-50%);
border-color: transparent transparent transparent var(--primary-color);
left: 7px;
}
.category-item_link{
position: relative;
text-decoration: none;
color: var(--text-color);
font-size: 1.5rem;
padding: 8px 16px;
display: block;
right: 0;
transition: right linear 0.1s;
}
.category-item_link:hover{
right: -4px;
color: var(--primary-color);
}Diễn giải phần css
- Quy định màu nền cho app__container
- Canh top cho app__content
- Đặt viền và màu nền cho category
- Cài đặt một số thuộc tính quen thuộc cho category_heading
- Cài đặt một số thuộc tính quen thuộc cho category_heading-icon
- Thêm đệm, bỏ dấu chấm, canh trái category-list
- Đặt màu kích hoạt khi có cả hai class category-item–active và .category-item_link
- Tạo icon trước mỗi phần tử danh mục khi kích hoạt category-item–active .category-item_link::before
- Cài đặt một số thuộc tính cho category-item_link
- Tạo thuộc tính khi di chuột vào category-item_link
