family-tree-vue/lib/FamilyTree.css

A vue2 component to display family tree

.zoom-panel[data-v-14aedfef]{position:relative}.zoom-content[data-v-14aedfef]{position:relative;overflow:hidden;height:100%;width:100%}.zoom-tools[data-v-14aedfef]{position:absolute;left:20px;bottom:20px}.zoom-tools li[data-v-14aedfef]{display:inline;padding:2px 4px;border:1px solid}.zoom-tools li[data-v-14aedfef]:not(:last-child){border-right:0}.zoom-tools li[data-v-14aedfef]:first-child{border-radius:4px 0 0 4px}.zoom-tools li[data-v-14aedfef]:last-child{border-radius:0 4px 4px 0}.node[data-v-62f88263]{position:relative;display:inline-block;z-index:2;width:6em}.node .avatar[data-v-62f88263]{display:block;width:4em;height:4em;margin:auto;overflow:hidden;background:#fff;border:2px solid #ccc;border-radius:2em;box-sizing:border-box}.node .avatar img[data-v-62f88263]{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.node .name[data-v-62f88263]{width:100%;height:2em;line-height:2em;font-weight:700;overflow:hidden}.node+.node[data-v-62f88263]{margin-left:2em}.node.landscape-node[data-v-62f88263]{position:relative;transform:rotate(90deg);padding-left:4.5em;height:4em;top:4em;left:-1em}.node.landscape-node .avatar[data-v-62f88263]{position:absolute;left:0}.node.landscape-node .name[data-v-62f88263]{height:4em;line-height:4em}.nodes[data-v-1eb59708]{position:relative;display:inline-block;margin:0 1em;box-sizing:border-box;text-align:center}.nodes.hasMate[data-v-1eb59708]:after{content:"";position:absolute;left:2em;right:2em;top:2em;border-top:2px solid #ccc;z-index:1}.landscape .nodes[data-v-1eb59708]{text-align:left;height:8em;width:8em}.landscape .hasMate[data-v-1eb59708]{position:relative}.landscape .hasMate .node[data-v-1eb59708]{position:absolute}.landscape .hasMate .node[data-v-1eb59708]:first-child{left:auto;right:-4em}.landscape .hasMate .node[data-v-1eb59708]:last-child{left:-4em;margin-left:0}table[data-v-12128104]{border-collapse:separate!important;border-spacing:0!important}td[data-v-12128104]{position:relative;vertical-align:top;padding:0;text-align:center}td.extend[data-v-12128104]{padding-bottom:50px}.extend_handle[data-v-12128104]{position:absolute;left:50%;bottom:30px;width:10px;height:10px;padding:10px;transform:translate3d(-15px,0,0);cursor:pointer}.extend_handle[data-v-12128104]:before{content:"";display:block;width:100%;height:100%;box-sizing:border-box;border:2px solid;border-color:#ccc #ccc transparent transparent;transform:rotate(135deg);transform-origin:50% 50% 0;transition:transform .3s ease}.extend_handle[data-v-12128104]:hover:before{border-color:#333 #333 transparent transparent}.extend .extend_handle[data-v-12128104]:before{transform:rotate(-45deg)}.extend[data-v-12128104]:after{bottom:15px}.childLevel[data-v-12128104]:before,.extend[data-v-12128104]:after{content:"";position:absolute;left:50%;height:15px;border-left:2px solid #ccc;transform:translate3d(-1px,0,0)}.childLevel[data-v-12128104]:before{bottom:100%}.childLevel[data-v-12128104]:after{content:"";position:absolute;left:0;right:0;top:-15px;border-top:2px solid #ccc}.childLevel[data-v-12128104]:first-child:before,.childLevel[data-v-12128104]:last-child:before{display:none}.childLevel[data-v-12128104]:first-child:after{left:50%;height:15px;border:2px solid;border-color:#ccc transparent transparent #ccc;border-radius:6px 0 0 0;transform:translate3d(1px,0,0)}.childLevel[data-v-12128104]:last-child:after{right:50%;height:15px;border:2px solid;border-color:#ccc #ccc transparent transparent;border-radius:0 6px 0 0;transform:translate3d(-1px,0,0)}.childLevel:first-child.childLevel[data-v-12128104]:last-child:after{left:auto;border-radius:0;border-color:transparent #ccc transparent transparent;transform:translate3d(1px,0,0)}.landscape[data-v-12128104]{transform:translate(-100%) rotate(-90deg);transform-origin:100% 0}