[design] match link display transform origin to alignment

Author: zombieFox

src/css/link.css

@@ -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{