extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2024-11-24 00:53:53 +01:00
Code Issues Packages Projects Releases Wiki Activity

improve padding and gutter resize transition

Browse Source
This commit is contained in:
zombieFox 2021-09-12 11:32:43 +01:00
parent 8f061c751d
commit 95ca8d5bfc
2 changed files with 11 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/component/group/index.css
View File

@ -27,10 +27,6 @@
flex-direction: column-reverse; flex-direction: column-reverse;
} }
.is-edge .group {
transition: gap var(--layout-transition-extra-fast);
}
.group.is-group-header, .group.is-group-header,
.group.is-group-toolbar { .group.is-group-toolbar {
gap: calc(var(--layout-space) * var(--layout-gutter)); gap: calc(var(--layout-space) * var(--layout-gutter));
@ -41,6 +37,10 @@
transition: gap var(--layout-transition-extra-fast); transition: gap var(--layout-transition-extra-fast);
} }
.is-edge .group {
transition: none;
}
.group-header { .group-header {
position: relative; position: relative;
display: flex; display: flex;
@ -108,18 +108,14 @@
transition: height var(--layout-transition-extra-fast) var(--layout-duration-04), margin var(--layout-transition-extra-fast); transition: height var(--layout-transition-extra-fast) var(--layout-duration-04), margin var(--layout-transition-extra-fast);
} }
.is-edge .group-control {
transition: height var(--layout-transition-extra-fast), margin var(--layout-transition-extra-fast);
}
.is-group-edit .group-control { .is-group-edit .group-control {
margin: 0; margin: 0;
height: 2.5em; height: 2.5em;
transition: height var(--layout-transition-extra-fast), margin var(--layout-transition-extra-fast) var(--layout-duration-04); transition: height var(--layout-transition-extra-fast), margin var(--layout-transition-extra-fast) var(--layout-duration-04);
} }
.is-edge.is-group-edit .group-control { .is-edge .group-control {
transition: height var(--layout-transition-extra-fast), margin var(--layout-transition-extra-fast); transition: none;
} }
.group-control-group { .group-control-group {
@ -133,8 +129,8 @@
transition: width var(--layout-transition-extra-fast) var(--layout-duration-04); transition: width var(--layout-transition-extra-fast) var(--layout-duration-04);
} }
.is-edge.is-group-edit .group-control-group { .is-edge .group-control-group {
transition: width var(--layout-transition-extra-fast); transition: none;
} }
.group-toolbar-button { .group-toolbar-button {

19
src/component/headerItem/index.css
View File

@ -10,7 +10,6 @@
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
gap: calc(var(--layout-space) * var(--layout-gutter)); gap: calc(var(--layout-space) * var(--layout-gutter));
transition: gap var(--layout-transition-extra-fast) var(--layout-duration-04);
} }
.is-layout-direction-horizontal.is-header-item-justify-right .header-item-content { .is-layout-direction-horizontal.is-header-item-justify-right .header-item-content {
@ -29,14 +28,6 @@
justify-content: flex-end; justify-content: flex-end;
} }
.is-edge .header-item {
transition: gap var(--layout-transition-extra-fast);
}
.is-header-edit .header-item {
transition: gap var(--layout-transition-extra-fast);
}
.header-sort-placeholder { .header-sort-placeholder {
box-shadow: var(--edge); box-shadow: var(--edge);
border-radius: calc(var(--theme-radius) * 0.01em); border-radius: calc(var(--theme-radius) * 0.01em);
@ -68,18 +59,14 @@
transition: height var(--layout-transition-extra-fast) var(--layout-duration-04), margin var(--layout-transition-extra-fast); transition: height var(--layout-transition-extra-fast) var(--layout-duration-04), margin var(--layout-transition-extra-fast);
} }
.is-edge .header-item-control {
transition: height var(--layout-transition-extra-fast), margin var(--layout-transition-extra-fast);
}
.is-header-edit .header-item-control { .is-header-edit .header-item-control {
margin: 0; margin: 0;
height: 2.5em; height: 2.5em;
transition: height var(--layout-transition-extra-fast), margin var(--layout-transition-extra-fast) var(--layout-duration-04); transition: height var(--layout-transition-extra-fast), margin var(--layout-transition-extra-fast) var(--layout-duration-04);
} }
.is-edge.is-header-edit .header-item-control { .is-edge .header-item-control {
transition: height var(--layout-transition-extra-fast), margin var(--layout-transition-extra-fast); transition: none;
} }
.header-item-control-group { .header-item-control-group {
@ -94,7 +81,7 @@
} }
.is-edge.is-header-edit .header-item-control-group { .is-edge.is-header-edit .header-item-control-group {
transition: width var(--layout-transition-extra-fast); transition: none;
} }
.header-sort-placeholder.header-item>* { .header-sort-placeholder.header-item>* {