Commit 35bc7306 authored by akiraohgaki's avatar akiraohgaki

Gradient animation to omnibox

parent 1368449c
......@@ -57,24 +57,49 @@ export default class OmniboxComponent extends BaseComponent {
}
div[data-omnibox] {
position: relative;
width: inherit;
height: inherit;
border: 1px solid transparent;
border-radius: 5px;
background-color: var(--color-active-secondary);
overflow: hidden;
transition:
border-color 0.2s ease-out,
background-color 0.2s ease-out;
}
div[data-omnibox]:hover {
background-color: var(--color-active);
div[data-omnibox]::after {
--border-width: 3px;
display: block;
content: '';
z-index: 9;
position: absolute;
top: calc(-1 * var(--border-width));
left: calc(-1 * var(--border-width));
width: calc(100% + var(--border-width) * 2);
height: calc(100% + var(--border-width) * 2);
border-radius: calc(var(--border-width) * 2);
}
div[data-omnibox][data-update-state="active"]::after {
background-color: var(--color-important);
}
div[data-omnibox][data-download-state="active"]::after {
background: linear-gradient(90deg, transparent, var(--color-information), transparent);
background-size: 300% 300%;
animation: gradient 3s ease alternate infinite;
}
div[data-omnibox][data-update-state="active"] {
border-color: var(--color-important);
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
div[data-omnibox][data-download-state="active"] {
border-color: var(--color-information);
div[data-omnibox] div[data-wrapper] {
z-index: 10;
position: absolute;
width: 100%;
height: 100%;
border-radius: 3px;
background-color: var(--color-widget);
overflow: hidden;
}
div[data-omnibox] div[data-content] {
display: flex;
......@@ -82,7 +107,12 @@ export default class OmniboxComponent extends BaseComponent {
align-items: center;
width: 100%;
height: 100%;
background-color: var(--color-active-secondary);
line-height: 1;
transition: background-color 0.2s ease-out;
}
div[data-omnibox] div[data-content]:hover {
background-color: var(--color-active);
}
div[data-omnibox] div[data-content] h3 {
flex: 1 1 auto;
......@@ -178,6 +208,7 @@ export default class OmniboxComponent extends BaseComponent {
</style>
<div data-omnibox data-update-state="inactive" data-download-state="inactive">
<div data-wrapper>
<div data-content>
<div></div>
<h3 data-action="omnibox_open">${this.state.title}</h3>
......@@ -188,6 +219,7 @@ export default class OmniboxComponent extends BaseComponent {
</div>
<app-indicator></app-indicator>
</div>
</div>
<div data-palette data-state="${state}" class="fade-in">
<div data-content data-update-state="inactive">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment