extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-06-30 22:30:38 +02:00
Code Issues Packages Projects Releases Wiki Activity

[design] improve bounce animation

Browse Source
This commit is contained in:
Kombie
2020-07-18 13:51:27 +01:00
committed by GitHub
parent 6fbd8d4d2d
commit 8ad199cc15
4 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/css/group.css
View File

@ -72,9 +72,9 @@
height: 2.5em; height: 2.5em;
width: 15em; width: 15em;
transition: transition:
width var(--layout-transition-extra-fast) var(--layout-duration-04), width var(--layout-duration-04) var(--layout-timing-bounce) var(--layout-duration-04),
height var(--layout-transition-extra-fast), height var(--layout-transition-extra-fast),
margin var(--layout-transition-extra-fast) var(--layout-duration-04); margin var(--layout-duration-04) var(--layout-timing-bounce) var(--layout-duration-04);
} }
.is-group-area-justify-center .group-header-item-control:not(:only-child):not(:last-child), .is-group-area-justify-center .group-header-item-control:not(:only-child):not(:last-child),

6
src/css/link.css
View File

@ -903,12 +903,12 @@
.is-edit.is-link-orientation-top .link-control { .is-edit.is-link-orientation-top .link-control {
top: 0; top: 0;
transition: top var(--layout-duration-05) var(--layout-timing-bounce); transition: top var(--layout-duration-04) var(--layout-timing-bounce);
} }
.is-edit.is-link-orientation-bottom .link-control { .is-edit.is-link-orientation-bottom .link-control {
bottom: 0; bottom: 0;
transition: bottom var(--layout-duration-05) var(--layout-timing-bounce); transition: bottom var(--layout-duration-04) var(--layout-timing-bounce) var(--layout-duration-01);
} }
.link-control-item { .link-control-item {
@ -1043,7 +1043,7 @@
overflow: hidden; overflow: hidden;
display: none; display: none;
align-items: center; align-items: center;
transition: top var(--layout-transition-extra-fast), bottom var(--layout-transition-extra-fast); transition: top var(--layout-transition-extra-fast), bottom var(--layout-duration-04) var(--layout-timing-bounce);
} }
.is-link-orientation-top .link-url { .is-link-orientation-top .link-url {

2
src/css/theme.css
View File

@ -63,7 +63,7 @@
.is-theme-custom-edit .theme-custom-control { .is-theme-custom-edit .theme-custom-control {
bottom: 0; bottom: 0;
transition: bottom var(--layout-duration-05) var(--layout-timing-bounce); transition: bottom var(--layout-duration-04) var(--layout-timing-bounce) var(--layout-duration-01);
} }
.theme-custom-control .theme-custom-control-item { .theme-custom-control .theme-custom-control-item {

2
src/css/variables.css
View File

@ -147,7 +147,7 @@
--layout-duration-09: 0.9s; --layout-duration-09: 0.9s;
--layout-duration-10: 1s; --layout-duration-10: 1s;
--layout-timing-ease: ease-in-out; --layout-timing-ease: ease-in-out;
--layout-timing-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55); --layout-timing-bounce: cubic-bezier(0.8, 0.8, 0.4, 1.4);
--layout-transition-extra-fast: var(--layout-duration-02) var(--layout-timing-ease); --layout-transition-extra-fast: var(--layout-duration-02) var(--layout-timing-ease);
--layout-transition-fast: var(--layout-duration-04) var(--layout-timing-ease); --layout-transition-fast: var(--layout-duration-04) var(--layout-timing-ease);
--layout-transition-medium: var(--layout-duration-06) var(--layout-timing-ease); --layout-transition-medium: var(--layout-duration-06) var(--layout-timing-ease);