improve padding and gutter resize transition

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

View File

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

View File

@ -10,7 +10,6 @@
flex-direction: row;
align-items: center;
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 {
@ -29,14 +28,6 @@
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 {
box-shadow: var(--edge);
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);
}
.is-edge .header-item-control {
transition: height var(--layout-transition-extra-fast), margin var(--layout-transition-extra-fast);
}
.is-header-edit .header-item-control {
margin: 0;
height: 2.5em;
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 {
transition: height var(--layout-transition-extra-fast), margin var(--layout-transition-extra-fast);
.is-edge .header-item-control {
transition: none;
}
.header-item-control-group {
@ -94,7 +81,7 @@
}
.is-edge.is-header-edit .header-item-control-group {
transition: width var(--layout-transition-extra-fast);
transition: none;
}
.header-sort-placeholder.header-item>* {