188 lines
4.1 KiB
SCSS
188 lines
4.1 KiB
SCSS
.home {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
|
|
.homeLeft {
|
|
width: 220px;
|
|
background-color: rgb(31, 33, 37);
|
|
flex-shrink: 0;
|
|
padding: 20px 20px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
@for $i from 1 through 5 {
|
|
>div:nth-child(#{$i}) {
|
|
@if $i ==1 {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
cursor: pointer;
|
|
|
|
>div {
|
|
margin-right: 14px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
>span {
|
|
color: white;
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
@else if $i ==2 {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 20px 0 20px;
|
|
flex-shrink: 0;
|
|
|
|
>img {
|
|
width: 62px;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
>div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
|
|
>div:nth-child(1) {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
>span:nth-child(1) {
|
|
font-size: 30px;
|
|
color: white;
|
|
}
|
|
|
|
>span:nth-child(2) {
|
|
font-size: 14px;
|
|
color: #979797;
|
|
width: 16px;
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
|
|
>div:nth-child(2) {
|
|
font-size: 14px;
|
|
color: #979797;
|
|
}
|
|
}
|
|
}
|
|
|
|
@else if $i ==3 {
|
|
flex-grow: 1;
|
|
overflow-y: auto;
|
|
|
|
@for $i from 1 through 20 {
|
|
>div:nth-child(#{$i}) {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 38px;
|
|
cursor: pointer;
|
|
padding: 0px 10px;
|
|
box-sizing: border-box;
|
|
border-radius: 10px;
|
|
margin-bottom: 10px;
|
|
|
|
>div {
|
|
>img {
|
|
width: 16px;
|
|
}
|
|
}
|
|
|
|
>span {
|
|
font-size: 16px;
|
|
color: #98989A;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: rgb(47, 48, 50);
|
|
|
|
>span {
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.active {
|
|
background-color: #5575F2 !important;
|
|
|
|
>span {
|
|
color: white !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@else if $i ==4 {
|
|
flex-shrink: 0;
|
|
color: #ccc;
|
|
font-size: 16px;
|
|
}
|
|
|
|
@else if $i ==5 {
|
|
flex-shrink: 0;
|
|
border-top: #565656 solid 1px;
|
|
padding-top: 10px;
|
|
margin-top: 10px;
|
|
|
|
@for $i from 1 through 2 {
|
|
>div:nth-child(#{$i}) {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 38px;
|
|
cursor: pointer;
|
|
padding: 0px 10px;
|
|
box-sizing: border-box;
|
|
|
|
>div {
|
|
width: 16px;
|
|
height: 16px;
|
|
|
|
@if $i ==1 {
|
|
background: url('/src/assets/icon16.png') no-repeat center/cover;
|
|
}
|
|
|
|
@else if $i ==2 {
|
|
background: url('/src/assets/icon15.png') no-repeat center/cover;
|
|
}
|
|
|
|
}
|
|
|
|
>span {
|
|
font-size: 16px;
|
|
color: #98989A;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
&:hover {
|
|
>div {
|
|
@if $i ==1 {
|
|
background: url('/src/assets/icon16-active.png') no-repeat center/cover;
|
|
}
|
|
|
|
@else if $i ==2 {
|
|
background: url('/src/assets/icon15-active.png') no-repeat center/cover;
|
|
}
|
|
}
|
|
|
|
>span {
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.homeRight {
|
|
flex-grow: 1;
|
|
background-color: rgb(22, 25, 30);
|
|
}
|
|
} |