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