extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-02-06 05:19:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

[design] match link display transform origin to alignment

Browse Source
This commit is contained in:
zombieFox 2019-11-25 01:06:39 +00:00
parent f180fee276
commit cf90b84895
1 changed files with 45 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/css/link.css
View File

@ -273,7 +273,6 @@
left: var(--link-item-display-translate-x); left: var(--link-item-display-translate-x);
font-size: 1em; font-size: 1em;
transform: rotate(var(--link-item-display-rotate)); 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); 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; 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 { .is-link-item-display-direction-vertical.is-link-display-alignment-topleft .link-display {
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
transform-origin: top left;
} }
.is-link-item-display-direction-vertical.is-link-display-alignment-topcenter .link-display { .is-link-item-display-direction-vertical.is-link-display-alignment-topcenter .link-display {
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
transform-origin: top center;
} }
.is-link-item-display-direction-vertical.is-link-display-alignment-topright .link-display { .is-link-item-display-direction-vertical.is-link-display-alignment-topright .link-display {
justify-content: flex-start; justify-content: flex-start;
align-items: flex-end; align-items: flex-end;
transform-origin: top right;
} }
.is-link-item-display-direction-vertical.is-link-display-alignment-centerleft .link-display { .is-link-item-display-direction-vertical.is-link-display-alignment-centerleft .link-display {
justify-content: center; justify-content: center;
align-items: flex-start; align-items: flex-start;
transform-origin: center left;
} }
.is-link-item-display-direction-vertical.is-link-display-alignment-centercenter .link-display { .is-link-item-display-direction-vertical.is-link-display-alignment-centercenter .link-display {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
transform-origin: center;
} }
.is-link-item-display-direction-vertical.is-link-display-alignment-centerright .link-display { .is-link-item-display-direction-vertical.is-link-display-alignment-centerright .link-display {
justify-content: center; justify-content: center;
align-items: flex-end; align-items: flex-end;
transform-origin: center right;
} }
.is-link-item-display-direction-vertical.is-link-display-alignment-bottomleft .link-display { .is-link-item-display-direction-vertical.is-link-display-alignment-bottomleft .link-display {
justify-content: flex-end; justify-content: flex-end;
align-items: flex-start; align-items: flex-start;
transform-origin: bottom left;
} }
.is-link-item-display-direction-vertical.is-link-display-alignment-bottomcenter .link-display { .is-link-item-display-direction-vertical.is-link-display-alignment-bottomcenter .link-display {
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
transform-origin: bottom center;
} }
.is-link-item-display-direction-vertical.is-link-display-alignment-bottomright .link-display { .is-link-item-display-direction-vertical.is-link-display-alignment-bottomright .link-display {
justify-content: flex-end; justify-content: flex-end;
align-items: flex-end; align-items: flex-end;
transform-origin: bottom right;
} }
.is-link-item-display-direction-horizontal.is-link-display-alignment-topleft .link-display { .is-link-item-display-direction-horizontal.is-link-display-alignment-topleft .link-display {