63 lines
1.2 KiB
SCSS
63 lines
1.2 KiB
SCSS
.blog{
|
|
#start{
|
|
.cat-list {
|
|
width: 100%;
|
|
z-index: 999;
|
|
left: -100%;
|
|
&::before{
|
|
display: block;
|
|
content: " ";
|
|
width: 0%;
|
|
height: 1px;
|
|
background: black;
|
|
}
|
|
&::after {
|
|
display: block;
|
|
content: " ";
|
|
width: 0%;
|
|
height: 1px;
|
|
background: black;
|
|
}
|
|
ul {
|
|
opacity: 0;
|
|
display: inline-flex;
|
|
margin: 10px 0;
|
|
.btn-group{
|
|
display: flex;
|
|
margin-right: 10px;
|
|
&::after{
|
|
width: 5px;
|
|
content: " ";
|
|
}
|
|
&:hover{
|
|
&::after{
|
|
content: "\002022";
|
|
}
|
|
}
|
|
input{
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
#items{
|
|
.full-works{
|
|
.card{
|
|
width: calc((100vw / 3) - 6.5px);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.down{
|
|
.cat-list{
|
|
left: 0;
|
|
&::after{
|
|
animation: showborder 2.5s 1.6s ease forwards;
|
|
}
|
|
ul{
|
|
animation: ultranslate 1s 2.5s ease forwards;
|
|
}
|
|
}
|
|
}
|
|
}
|