68 lines
1.5 KiB
SCSS
68 lines
1.5 KiB
SCSS
$default_animation_duration: 0.4s;
|
|
|
|
:host {
|
|
display: flex;
|
|
position: fixed;
|
|
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
top: -140px;
|
|
left: 20px;
|
|
|
|
--animation-duration: calc(#{$default_animation_duration} * var(--motion-duration-multiplier));
|
|
|
|
background: light-dark(rgba(255, 255, 255, 0.9), rgba(15, 15, 15, 0.9));
|
|
padding: calc(40px + 12px) 24px 12px;
|
|
z-index: 20000;
|
|
|
|
transition: top var(--animation-duration) cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
|
border-radius: 0 0 12px 12px;
|
|
|
|
box-shadow: 0 0 40px oklch(0 0 0 / 15%);
|
|
vertical-align: middle;
|
|
font-weight: 700;
|
|
font-size: 18px;
|
|
height: 40px;
|
|
|
|
&:focus-within {
|
|
top: -40px;
|
|
outline: 2px solid var(--selection-outline-color);
|
|
|
|
::ng-deep * {
|
|
// 내부에서 탭 이동 시에는 지연 없이 즉시 전환되도록 합니다.
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
::ng-deep * {
|
|
appearance: none;
|
|
color: light-dark(black, white);
|
|
text-decoration: none;
|
|
background: none;
|
|
font: inherit;
|
|
|
|
border: none;
|
|
outline: none;
|
|
min-width: unset;
|
|
min-height: unset;
|
|
padding: 0;
|
|
margin: 0;
|
|
width: 0;
|
|
|
|
opacity: 0;
|
|
overflow: hidden;
|
|
|
|
// Component에서 포커스가 나갈 때(애니메이션 중) 마지막 포커스된 요소가 유지되도록 지연 시간을 둡니다.
|
|
transition: opacity 0s var(--animation-duration), width 0s var(--animation-duration);
|
|
interpolate-size: allow-keywords;
|
|
|
|
&:focus {
|
|
width: auto;
|
|
opacity: 1;
|
|
|
|
transition: none;
|
|
}
|
|
}
|
|
}
|