Update Skip Link Animation
This commit is contained in:
1 parent
a2ec29adca
commit
f68aa880db
1 file changed
+12
-1
@@ -28,6 +28,11 @@ $default_animation_duration: 0.4s;
|
|||||||
&:focus-within {
|
&:focus-within {
|
||||||
top: -40px;
|
top: -40px;
|
||||||
outline: 2px solid var(--selection-outline-color);
|
outline: 2px solid var(--selection-outline-color);
|
||||||
|
|
||||||
|
::ng-deep * {
|
||||||
|
// 내부에서 탭 이동 시에는 지연 없이 즉시 전환되도록 합니다.
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
::ng-deep * {
|
::ng-deep * {
|
||||||
@@ -48,9 +53,15 @@ $default_animation_duration: 0.4s;
|
|||||||
opacity: 0;
|
opacity: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
|
// Component에서 포커스가 나갈 때(애니메이션 중) 마지막 포커스된 요소가 유지되도록 지연 시간을 둡니다.
|
||||||
|
transition: opacity 0s var(--animation-duration), width 0s var(--animation-duration);
|
||||||
|
interpolate-size: allow-keywords;
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
width: unset;
|
width: auto;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
|
||||||
|
transition: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Reference in new issue
Block a user