mirror of
https://github.com/next-theme/hexo-theme-next.git
synced 2026-01-17 18:22:33 +00:00
Optimize sidebar-dimmer & search-popup animation
This commit is contained in:
parent
b2ae986c0b
commit
8a5643b220
@ -17,7 +17,6 @@
|
||||
border-radius: 50%;
|
||||
content: ' ';
|
||||
height: 10px;
|
||||
left: 0;
|
||||
margin-left: -6px;
|
||||
margin-top: -4px;
|
||||
position: absolute;
|
||||
@ -37,7 +36,6 @@
|
||||
border-radius: 50%;
|
||||
content: ' ';
|
||||
height: 8px;
|
||||
left: 0;
|
||||
margin-left: -4px;
|
||||
margin-top: -4px;
|
||||
position: absolute;
|
||||
@ -69,8 +67,7 @@
|
||||
border-radius: 50%;
|
||||
content: ' ';
|
||||
height: 6px;
|
||||
left: 0;
|
||||
margin-left: -4px;
|
||||
left: -4px;
|
||||
position: absolute;
|
||||
top: $font-size-smallest;
|
||||
transition: background $transition-ease;
|
||||
@ -110,7 +107,6 @@
|
||||
background: $whitesmoke;
|
||||
content: ' ';
|
||||
height: 100%;
|
||||
left: 0;
|
||||
margin-left: -2px;
|
||||
position: absolute;
|
||||
top: 1.25em;
|
||||
|
||||
@ -42,17 +42,14 @@
|
||||
bottom: 0;
|
||||
content: '';
|
||||
height: 2px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
transform: scaleX(0);
|
||||
transition: transform $transition-ease;
|
||||
visibility: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
transform: scaleX(1);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.fa-external-link-alt {
|
||||
|
||||
@ -9,14 +9,13 @@
|
||||
left: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
transition: visibility 0s linear .2s, background .2s;
|
||||
transition: visibility .4s, background .4s;
|
||||
visibility: hidden;
|
||||
width: 100%;
|
||||
z-index: $zindex-4;
|
||||
|
||||
.search-active & {
|
||||
background: rgba(0, 0, 0, .3);
|
||||
transition: background .2s;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
@ -27,7 +26,7 @@
|
||||
height: 80%;
|
||||
margin: auto;
|
||||
transform: scale(0);
|
||||
transition: transform .2s;
|
||||
transition: transform .4s;
|
||||
width: 700px;
|
||||
|
||||
.search-active & {
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
main-container();
|
||||
}
|
||||
|
||||
@keyframes iconAnimate {
|
||||
@keyframes icon-animate {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
@ -62,7 +62,7 @@
|
||||
margin: 0 5px;
|
||||
|
||||
if (hexo-config('footer.icon.animated')) {
|
||||
animation: iconAnimate 1.33s ease-in-out infinite;
|
||||
animation: icon-animate 1.33s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -7,17 +7,18 @@
|
||||
background: black;
|
||||
display: block;
|
||||
height: 100%;
|
||||
left: 100%;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
transition: visibility .4s, opacity .4s;
|
||||
visibility: hidden;
|
||||
width: 100%;
|
||||
z-index: $zindex-1;
|
||||
|
||||
.sidebar-active & {
|
||||
opacity: .7;
|
||||
transform: translateX(-100%);
|
||||
transition: opacity .5s;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user