[design] match link display transform origin to alignment

This commit is contained in:
zombieFox 2019-11-25 01:06:39 +00:00
parent f180fee276
commit cf90b84895

View File

@ -273,7 +273,6 @@
left: var(--link-item-display-translate-x);
font-size: 1em;
transform: rotate(var(--link-item-display-rotate));
transform-origin: center;
transition: font-size var(--layout-timing-extra-fast), top var(--layout-timing-extra-fast), left var(--layout-timing-extra-fast);
}
@ -313,49 +312,94 @@
margin-bottom: 0.5em;
}
.is-link-display-alignment-topleft .link-display {
transform-origin: top left;
}
.is-link-display-alignment-topcenter .link-display {
transform-origin: top center;
}
.is-link-display-alignment-topright .link-display {
transform-origin: top right;
}
.is-link-display-alignment-centerleft .link-display {
transform-origin: center left;
}
.is-link-display-alignment-centercenter .link-display {
transform-origin: center;
}
.is-link-display-alignment-centerright .link-display {
transform-origin: center right;
}
.is-link-display-alignment-bottomleft .link-display {
transform-origin: bottom left;
}
.is-link-display-alignment-bottomcenter .link-display {
transform-origin: bottom center;
}
.is-link-display-alignment-bottomright .link-display {
transform-origin: bottom right;
}
.is-link-item-display-direction-vertical.is-link-display-alignment-topleft .link-display {
justify-content: flex-start;
align-items: flex-start;
transform-origin: top left;
}
.is-link-item-display-direction-vertical.is-link-display-alignment-topcenter .link-display {
justify-content: flex-start;
align-items: center;
transform-origin: top center;
}
.is-link-item-display-direction-vertical.is-link-display-alignment-topright .link-display {
justify-content: flex-start;
align-items: flex-end;
transform-origin: top right;
}
.is-link-item-display-direction-vertical.is-link-display-alignment-centerleft .link-display {
justify-content: center;
align-items: flex-start;
transform-origin: center left;
}
.is-link-item-display-direction-vertical.is-link-display-alignment-centercenter .link-display {
justify-content: center;
align-items: center;
transform-origin: center;
}
.is-link-item-display-direction-vertical.is-link-display-alignment-centerright .link-display {
justify-content: center;
align-items: flex-end;
transform-origin: center right;
}
.is-link-item-display-direction-vertical.is-link-display-alignment-bottomleft .link-display {
justify-content: flex-end;
align-items: flex-start;
transform-origin: bottom left;
}
.is-link-item-display-direction-vertical.is-link-display-alignment-bottomcenter .link-display {
justify-content: flex-end;
align-items: center;
transform-origin: bottom center;
}
.is-link-item-display-direction-vertical.is-link-display-alignment-bottomright .link-display {
justify-content: flex-end;
align-items: flex-end;
transform-origin: bottom right;
}
.is-link-item-display-direction-horizontal.is-link-display-alignment-topleft .link-display {