[design] improve link item control animation

This commit is contained in:
zombieFox 2020-06-22 18:58:03 +01:00
parent 2aa076990e
commit b03f2c2b54
5 changed files with 19 additions and 13 deletions

2
package-lock.json generated
View File

@ -1,6 +1,6 @@
{ {
"name": "nightTab", "name": "nightTab",
"version": "5.46.0", "version": "5.47.0",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {

View File

@ -1,6 +1,6 @@
{ {
"name": "nightTab", "name": "nightTab",
"version": "5.46.0", "version": "5.47.0",
"description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.", "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {

View File

@ -881,16 +881,21 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
height: 0; height: 0;
height: var(--link-item-edit-height);
width: 100%;
position: absolute;
bottom: calc(-1 * var(--link-item-edit-height));
display: flex; display: flex;
overflow: hidden; overflow: hidden;
flex-direction: row; flex-direction: row;
align-items: stretch; align-items: stretch;
justify-content: center; justify-content: center;
transition: height var(--layout-timing-extra-fast); transition: bottom var(--layout-timing-extra-fast);
} }
.is-edit .link-control { .is-edit .link-control {
height: var(--link-item-edit-height); bottom: 0;
transition: bottom var(--layout-duration-05) cubic-bezier(0.68, -0.55, 0.27, 1.55);
} }
.link-control-item { .link-control-item {
@ -1019,13 +1024,14 @@
} }
.link-url { .link-url {
padding: 0 1em; height: var(--link-item-url-height);
width: 100%; width: 100%;
height: 0; position: absolute;
bottom: calc(-1 * var(--link-item-url-height));
overflow: hidden; overflow: hidden;
display: none; display: none;
align-items: center; align-items: center;
transition: all var(--layout-timing-extra-fast); transition: bottom var(--layout-timing-extra-fast);
} }
.is-link-item-url-show .link-url { .is-link-item-url-show .link-url {
@ -1053,12 +1059,12 @@
.is-link-item-url-show:not(.is-edit) .link-item:focus-within .link-url, .is-link-item-url-show:not(.is-edit) .link-item:focus-within .link-url,
.is-link-item-url-show:not(.is-edit) .link-item:focus .link-url, .is-link-item-url-show:not(.is-edit) .link-item:focus .link-url,
.is-link-item-url-show:not(.is-edit) .link-item:hover .link-url { .is-link-item-url-show:not(.is-edit) .link-item:hover .link-url {
height: var(--link-item-url-height); bottom: 0;
} }
.link-url-text { .link-url-text {
margin: 0; margin: 0 1em;
font-size: 0.7em; font-size: 0.75em;
font-family: var(--theme-font-ui-name); font-family: var(--theme-font-ui-name);
font-weight: var(--theme-font-ui-weight); font-weight: var(--theme-font-ui-weight);
font-style: var(--theme-font-ui-style); font-style: var(--theme-font-ui-style);
@ -1076,7 +1082,7 @@
.is-edit .link-item:hover .link-url, .is-edit .link-item:hover .link-url,
.is-edit .link-item:focus .link-url { .is-edit .link-item:focus .link-url {
height: 0; bottom: calc(-1 * var(--link-item-url-height));
} }
.link-form-text-icon { .link-form-text-icon {

View File

@ -1,6 +1,6 @@
var version = (function() { var version = (function() {
var current = "5.46.0"; var current = "5.47.0";
var name = "Macabre Caterpillar"; var name = "Macabre Caterpillar";

View File

@ -2,7 +2,7 @@
"name": "nightTab", "name": "nightTab",
"short_name": "nightTab", "short_name": "nightTab",
"description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.", "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
"version": "5.46.0", "version": "5.47.0",
"manifest_version": 2, "manifest_version": 2,
"chrome_url_overrides": { "chrome_url_overrides": {
"newtab": "index.html" "newtab": "index.html"