[bug] fix link item display alignment

This commit is contained in:
zombieFox 2019-12-03 10:24:20 +00:00
parent 53c93bcc81
commit e5faa724fd

View File

@ -346,103 +346,224 @@
transform-origin: bottom right; transform-origin: bottom right;
} }
.is-link-item-display-direction-vertical.is-link-display-alignment-topleft .link-display { /* vertical letcon name */
.is-link-item-display-direction-vertical.is-link-item-display-order-letconname.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; 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-item-display-order-letconname.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; 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-item-display-order-letconname.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; 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-item-display-order-letconname.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; 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-item-display-order-letconname.is-link-display-alignment-centercenter .link-display {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
transform-origin: 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-item-display-order-letconname.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; 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-item-display-order-letconname.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; 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-item-display-order-letconname.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; 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-item-display-order-letconname.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; transform-origin: bottom right;
} }
.is-link-item-display-direction-horizontal.is-link-display-alignment-topleft .link-display { /* vertical name letcon */
.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon.is-link-display-alignment-topleft .link-display {
justify-content: flex-end; justify-content: flex-end;
align-items: flex-start; align-items: flex-start;
transform-origin: top left;
} }
.is-link-item-display-direction-horizontal.is-link-display-alignment-topcenter .link-display { .is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon.is-link-display-alignment-topcenter .link-display {
justify-content: center;
align-items: flex-start;
}
.is-link-item-display-direction-horizontal.is-link-display-alignment-topright .link-display {
justify-content: flex-start;
align-items: flex-start;
}
.is-link-item-display-direction-horizontal.is-link-display-alignment-centerleft .link-display {
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
transform-origin: top center;
} }
.is-link-item-display-direction-horizontal.is-link-display-alignment-centercenter .link-display { .is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon.is-link-display-alignment-topright .link-display {
justify-content: center;
align-items: center;
}
.is-link-item-display-direction-horizontal.is-link-display-alignment-centerright .link-display {
justify-content: flex-start;
align-items: center;
}
.is-link-item-display-direction-horizontal.is-link-display-alignment-bottomleft .link-display {
justify-content: flex-end; justify-content: flex-end;
align-items: flex-end; align-items: flex-end;
transform-origin: top right;
} }
.is-link-item-display-direction-horizontal.is-link-display-alignment-bottomcenter .link-display { .is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon.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-item-display-order-nameletcon.is-link-display-alignment-centercenter .link-display {
justify-content: center;
align-items: center;
transform-origin: center;
}
.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon.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-horizontal.is-link-display-alignment-bottomright .link-display { .is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon.is-link-display-alignment-bottomleft .link-display {
justify-content: flex-start;
align-items: flex-start;
transform-origin: bottom left;
}
.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon.is-link-display-alignment-bottomcenter .link-display {
justify-content: flex-start;
align-items: center;
transform-origin: bottom center;
}
.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon.is-link-display-alignment-bottomright .link-display {
justify-content: flex-start; justify-content: flex-start;
align-items: flex-end; align-items: flex-end;
transform-origin: bottom right;
}
/* horizontal letcon name */
.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname.is-link-display-alignment-topleft .link-display {
justify-content: flex-start;
align-items: flex-start;
transform-origin: top left;
}
.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname.is-link-display-alignment-topcenter .link-display {
justify-content: center;
align-items: flex-start;
transform-origin: top center;
}
.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname.is-link-display-alignment-topright .link-display {
justify-content: flex-end;
align-items: flex-start;
transform-origin: top right;
}
.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname.is-link-display-alignment-centerleft .link-display {
justify-content: flex-start;
align-items: center;
transform-origin: center left;
}
.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname.is-link-display-alignment-centercenter .link-display {
justify-content: center;
align-items: center;
transform-origin: center;
}
.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname.is-link-display-alignment-centerright .link-display {
justify-content: flex-end;
align-items: center;
transform-origin: center right;
}
.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname.is-link-display-alignment-bottomleft .link-display {
justify-content: flex-start;
align-items: flex-end;
transform-origin: bottom left;
}
.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname.is-link-display-alignment-bottomcenter .link-display {
justify-content: center;
align-items: flex-end;
transform-origin: bottom center;
}
.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname.is-link-display-alignment-bottomright .link-display {
justify-content: flex-end;
align-items: flex-end;
transform-origin: bottom right;
}
/* horizontal name letcon */
.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon.is-link-display-alignment-topleft .link-display {
justify-content: flex-end;
align-items: flex-start;
transform-origin: top left;
}
.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon.is-link-display-alignment-topcenter .link-display {
justify-content: center;
align-items: flex-start;
transform-origin: top center;
}
.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon.is-link-display-alignment-topright .link-display {
justify-content: flex-start;
align-items: flex-start;
transform-origin: top right;
}
.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon.is-link-display-alignment-centerleft .link-display {
justify-content: flex-end;
align-items: center;
transform-origin: top left;
}
.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon.is-link-display-alignment-centercenter .link-display {
justify-content: center;
align-items: center;
transform-origin: top center;
}
.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon.is-link-display-alignment-centerright .link-display {
justify-content: flex-start;
align-items: center;
transform-origin: top right;
}
.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon.is-link-display-alignment-bottomleft .link-display {
justify-content: flex-end;
align-items: flex-end;
transform-origin: top left;
}
.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon.is-link-display-alignment-bottomcenter .link-display {
justify-content: center;
align-items: flex-end;
transform-origin: top center;
}
.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon.is-link-display-alignment-bottomright .link-display {
justify-content: flex-start;
align-items: flex-end;
transform-origin: top right;
} }
.link-display-letter, .link-display-letter,
@ -510,6 +631,7 @@
.is-link-item-display-name-show .link-display-name { .is-link-item-display-name-show .link-display-name {
display: block; display: block;
flex-basis: 100%;
} }
.link-display-name, .link-display-name,