[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",
"version": "5.46.0",
"version": "5.47.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {

View File

@ -1,6 +1,6 @@
{
"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.",
"main": "index.js",
"scripts": {

View File

@ -881,16 +881,21 @@
margin: 0;
padding: 0;
height: 0;
height: var(--link-item-edit-height);
width: 100%;
position: absolute;
bottom: calc(-1 * var(--link-item-edit-height));
display: flex;
overflow: hidden;
flex-direction: row;
align-items: stretch;
justify-content: center;
transition: height var(--layout-timing-extra-fast);
transition: bottom var(--layout-timing-extra-fast);
}
.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 {
@ -1019,13 +1024,14 @@
}
.link-url {
padding: 0 1em;
height: var(--link-item-url-height);
width: 100%;
height: 0;
position: absolute;
bottom: calc(-1 * var(--link-item-url-height));
overflow: hidden;
display: none;
align-items: center;
transition: all var(--layout-timing-extra-fast);
transition: bottom var(--layout-timing-extra-fast);
}
.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 .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 {
margin: 0;
font-size: 0.7em;
margin: 0 1em;
font-size: 0.75em;
font-family: var(--theme-font-ui-name);
font-weight: var(--theme-font-ui-weight);
font-style: var(--theme-font-ui-style);
@ -1076,7 +1082,7 @@
.is-edit .link-item:hover .link-url,
.is-edit .link-item:focus .link-url {
height: 0;
bottom: calc(-1 * var(--link-item-url-height));
}
.link-form-text-icon {

View File

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

View File

@ -2,7 +2,7 @@
"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.",
"version": "5.46.0",
"version": "5.47.0",
"manifest_version": 2,
"chrome_url_overrides": {
"newtab": "index.html"