WebSVN – LeadersLinked - Backend – Diff – /public/assets/vendors/orgchart/css/jquery.orgchart.css

+ *
  * Licensed under the MIT license:
  * http://www.opensource.org/licenses/MIT
  */
- /* chart styles */
+/* chart styles */
 .orgchart {
   box-sizing: border-box;
   display: inline-block;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   background-image: linear-gradient(to top, rgba(200, 0, 0, 0.15) 5%, rgba(0, 0, 0, 0) 5%),
-  linear-gradient(to right, rgba(200, 0, 0, 0.15) 5%, rgba(0, 0, 0, 0) 5%),
+    linear-gradient(to right, rgba(200, 0, 0, 0.15) 5%, rgba(0, 0, 0, 0) 5%),
-  linear-gradient(to bottom, rgba(200, 0, 0, 0.15) 5%, rgba(0, 0, 0, 0) 5%),
+    linear-gradient(to bottom, rgba(200, 0, 0, 0.15) 5%, rgba(0, 0, 0, 0) 5%),
+    linear-gradient(to left, rgba(200, 0, 0, 0.15) 5%, rgba(0, 0, 0, 0) 5%);
-  linear-gradient(to left, rgba(200, 0, 0, 0.15) 5%, rgba(0, 0, 0, 0) 5%);
+  background-size: 10px 10px;
-  background-size: 10px 10px; /* background square size */
+  /* background square size */
   padding: 20px 20px 0 20px;
   /* border: 0.5px solid rgba(200, 0, 0, 0.15); */
+}
-}
+.orgchart .hidden,
-.orgchart .hidden, .orgchart~.hidden {
+.orgchart~.hidden {
-  display: none!important;
+  display: none !important;
+}
   transform: rotate(90deg);
   transform-origin: left top;
   text-align: center;
+}
-.orgchart ~ .mask {
+.orgchart~.mask {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 999;
   text-align: center;
-  background-color: rgba(0,0,0,0.3);
+  background-color: rgba(0, 0, 0, 0.3);
 }
-.orgchart ~ .mask .spinner {
+.orgchart~.mask .spinner {
   position: absolute;
   top: calc(50% - 50px);
   left: calc(50% - 50px);
 }
-.orgchart > .spinner::before,
+.orgchart>.spinner::before,
-.orgchart ~ .mask .spinner::before {
+.orgchart~.mask .spinner::before {
   width: 100px;
   height: 100px;
 /* styles of link lines */
 .orgchart .hierarchy::before {
   content: "";
+  position: absolute;
-  position: absolute;
+  top: -11px;
-  top: -11px; /* -(background square size + half width of line) */
+  /* -(background square size + half width of line) */
   left: 0;
   width: 100%;
   border-top: 2px solid rgba(217, 83, 79, 0.8);
   box-sizing: border-box;
 .orgchart .hierarchy:not(.hidden):only-child::before {
   width: 2px;
 }
-.orgchart > .nodes > .hierarchy::before,
+.orgchart>.nodes>.hierarchy::before,
 .orgchart .isSiblingsCollapsed:not(.left-sibs):not(.right-sibs)::before,
 .orgchart .isSiblingsCollapsed.left-sibs.right-sibs::before,
 .orgchart .isSiblingsCollapsed.right-sibs:first-child:before,
 .orgchart .isSiblingsCollapsed.left-sibs:last-child:before,
 .orgchart .isCollapsedSibling::before,
 .orgchart .isCollapsedSibling .hierarchy::before,
-.orgchart .isChildrenCollapsed > .node:not(:only-child)::after,
+.orgchart .isChildrenCollapsed>.node:not(:only-child)::after,
 .orgchart .isCollapsedDescendant::before,
-.orgchart .isCollapsedDescendant > .node::before,
+.orgchart .isCollapsedDescendant>.node::before,
-.orgchart .isCollapsedDescendant > .node::after,
+.orgchart .isCollapsedDescendant>.node::after,
 .orgchart .isAncestorsCollapsed:only-child::before,
-.orgchart .isAncestorsCollapsed > .node::before {
+.orgchart .isAncestorsCollapsed>.node::before {
   content: none;
+}
 /* excluding leaf node */
+.orgchart .node:not(:only-child)::after {
-.orgchart .node:not(:only-child)::after {
+  content: "";
-  content: "";
+  position: absolute;
-  position: absolute;
+  bottom: -12px;
+  /* -(background square size + node's border width) */
-  bottom: -12px; /* -(background square size + node's border width) */
+  left: calc(50% - 1px);
-  left: calc(50% - 1px);
+  width: 2px;
-  width: 2px;
+  height: 10px;
-  height: 10px; /* background square size */
+  /* background square size */
   background-color: rgba(217, 83, 79, 0.8);
+}
 .orgchart ul li .node.allowedDrop {
-.orgchart ul li .node.allowedDrop {
+  border-color: rgba(68, 157, 68, 0.9);
   border-color: rgba(68, 157, 68, 0.9);
 .orgchart ul li .node.currentDropTarget {
-.orgchart ul li .node.currentDropTarget {
+  background-color: rgba(68, 157, 68, 0.9);
   background-color: rgba(68, 157, 68, 0.9);
 .orgchart ul li .node.selected {
-.orgchart ul li .node.selected {
+  background-color: rgba(238, 217, 54, 0.5);
   background-color: rgba(238, 217, 54, 0.5);
 .orgchart ul li .node:hover {
-.orgchart ul li .node:hover {
+  background-color: rgba(238, 217, 54, 0.5);
   background-color: rgba(238, 217, 54, 0.5);
+/* excluding root node */
-/* excluding root node */
+.orgchart>ul>li>ul li>.node::before {
-.orgchart > ul > li > ul li > .node::before {
+  content: "";
-  content: "";
+  position: absolute;
+  top: var(--top, -12px);
-  position: absolute;
+  /* -(fallback value = background square size + border width of node) */
-  top: var(--top, -12px); /* -(fallback value = background square size + border width of node) */
+  left: calc(50% - 1px);
-  left: calc(50% - 1px);
+  width: 2px;
-  width: 2px;
+  height: var(--height, 10px);
-  height: var(--height, 10px); /* fallback value = background square size */
+  /* fallback value = background square size */
   background-color: rgba(217, 83, 79, 0.8);
+}
   padding: 3px;
   border: 2px dashed transparent;
   text-align: center;
+}
+.orgchart.l2r .node,
-.orgchart.l2r .node, .orgchart.r2l .node {
+.orgchart.r2l .node {
   width: 50px;
   height: 140px;
+}
 .orgchart .node.allowedDrop {
   border-color: rgba(68, 157, 68, 0.9);
 }
-.orgchart .node > .spinner {
+.orgchart .node>.spinner {
   position: absolute;
   top: calc(50% - 1rem);
   left: calc(50% - 1rem);
+}
-.orgchart .node > .spinner::before {
+.orgchart .node>.spinner::before {
   width: 2rem;
   height: 2rem;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   background-color: rgba(217, 83, 79, 0.8);
   color: #fff;
   border-radius: 4px 4px 0 0;
+}
 .orgchart.b2t .node .title {
   transform: rotate(-180deg);
   text-align: center;
   background-color: #fff;
   color: #333;
   text-overflow: ellipsis;
   white-space: nowrap;
+  width: 130px;
+  overflow: hidden;
+  padding: 0 5px;
+}
 .orgchart.b2t .node .content {
   transform: rotate(180deg);
 .orgchart .edge:hover::before {
   border-color: #449d44;
+}
+.orgchart .node .verticalEdge {
-.orgchart .node .verticalEdge {
+  width: calc(100% - 6px);
+  /* node top half's width */
-  width: calc(100% - 6px); /* node top half's width */
+  height: 10px;
+  /* background square's size */
-  height: 10px; /* background square's size */
+  left: 3px;
-  left: 3px; /* node's padding value */
+  /* node's padding value */
+}
+.orgchart .node .verticalEdge::before {
-.orgchart .node .verticalEdge::before {
+  position: absolute;
-  position: absolute;
+  left: calc(50% - 5px);
-  left: calc(50% - 5px); /* 50% width of node - half width of up arrow icon) */
+  /* 50% width of node - half width of up arrow icon) */
+}
 .orgchart .node .topEdge.oci-chevron-down::before {
   bottom: 3px;
+}
+.orgchart .node .bottomEdge {
-.orgchart .node .bottomEdge {
+  bottom: -2px;
-  bottom: -2px; /* -(node's border-width) */
+  /* -(node's border-width) */
+}
 .orgchart .node .bottomEdge.oci-chevron-up::before {
+}
 .orgchart .node .horizontalEdge {
   width: 10px;
+  height: calc(100% - 6px);
-  height: calc(100% - 6px);
+  top: 3px;
-  top: 3px; /* node's padding */
+  /* node's padding */
+}
 .orgchart .node .rightEdge {
   right: 1px;
+}
 .orgchart .node .toggleBtn {
+  position: absolute;
-  position: absolute;
+  left: -2px;
-  left: -2px; /* -(border width of node) */
+  /* -(border width of node) */
   bottom: -2px;
   width: 16px;
   height: 16px;
 .orgchart .slide-down {
   opacity: 0;
   transform: translateY(40px);
+}
+.orgchart.l2r .node.slide-down,
-.orgchart.l2r .node.slide-down, .orgchart.r2l .node.slide-down {
+.orgchart.r2l .node.slide-down {
   transform: translateY(130px);
+}
 .orgchart .slide-up {
   opacity: 0;
+  transform: translateY(-40px);
-  transform: translateY(-40px);
+}
 .orgchart.l2r .node.slide-up,
-.orgchart.l2r .node.slide-up, .orgchart.r2l .node.slide-up {
+.orgchart.r2l .node.slide-up {
   transform: translateY(-130px);
+}
+.orgchart .slide-right {
-.orgchart .slide-right {
+  opacity: 0;
-  opacity: 0;
+  transform: translateX(130px);
   transform: translateX(130px);
 .orgchart.l2r .node.slide-right,
-.orgchart.l2r .node.slide-right, .orgchart.r2l .node.slide-right {
+.orgchart.r2l .node.slide-right {
   transform: translateX(40px);
+}
-}
 .orgchart .slide-left {
-.orgchart .slide-left {
+  opacity: 0;
-  opacity: 0;
+  transform: translateX(-130px);
   transform: translateX(-130px);
+.orgchart.l2r .node.slide-left,
+.orgchart.r2l .node.slide-left {
-.orgchart.l2r .node.slide-left, .orgchart.r2l .node.slide-left {
+  transform: translateX(-40px);
   transform: translateX(-40px);
 /* styles for vertical nodes */
 /* styles for vertical nodes */
+.orgchart .nodes.vertical {
+  display: block;
-.orgchart .nodes.vertical {
+  padding-left: 10px;
-  display: block;
+  /* width of background square*/
   padding-left: 10px; /* width of background square*/
 .orgchart .nodes.vertical .hierarchy::before,
 .orgchart .nodes.vertical .hierarchy::after {
   box-sizing: border-box;
   content: '';
   position: absolute;
+  left: -6px;
-  left: -6px; /* -(background square size + half width of line */
+  /* -(background square size + half width of line */
   border-color: rgba(217, 83, 79, 0.8);
   border-style: solid;
   border-width: 0 0 2px 2px;
+}
 .orgchart .nodes.vertical .hierarchy::before {
+  top: 0px;
-  top: 0px;
+  height: 26px;
+  /* node top half's height(25px) + half width of line */
-  height: 26px; /* node top half's height(25px) + half width of line */
+  width: 11px;
-  width: 11px; /* background square size + half width of line */
+  /* background square size + half width of line */
+}
+.orgchart .nodes.vertical .hierarchy::after {
-.orgchart .nodes.vertical .hierarchy::after {
+  bottom: 0;
-  bottom: 0;
+  height: calc(100% - 24px);
-  height: calc(100% - 24px); /* height of hierarchy - (node top half's height(25px) - half width of line) */
+  /* height of hierarchy - (node top half's height(25px) - half width of line) */
+}
 .orgchart .nodes.vertical .hierarchy:last-child::after {
   border-width: 2px 0 0 0;
+}
-}
+.orgchart .nodes.vertical>.hierarchy:first-child::before {
+  box-sizing: border-box;
-.orgchart .nodes.vertical > .hierarchy:first-child::before {
+  top: -11px;
-  box-sizing: border-box;
+  /* -(background square size + half width of line) */
-  top: -11px; /* -(background square size + half width of line) */
+  height: 35px;
-  height: 35px; /* node top half's height + node padding + node border width + background square size */
+  /* node top half's height + node padding + node border width + background square size */
   width: calc(50% + 2px);
+  border-width: 2px 0 0 2px;
-  border-width: 2px 0 0 2px;
+}
-}
+.orgchart .nodes.vertical>.hierarchy:first-child::after {
   box-sizing: border-box;
-.orgchart .nodes.vertical > .hierarchy:first-child::after {
+  top: 24px;
-  box-sizing: border-box;
+  /* node bottom half's height(25px) - half border width of line */
-  top: 24px; /* node bottom half's height(25px) - half border width of line */
+  width: 11px;
-  width: 11px; /* backgroud square size + half border width of line */
+  /* backgroud square size + half border width of line */
   border-width: 2px 0 0 2px;
+}
 @keyframes oci-infinite-spinning {
   from {
     transform: rotate(0deg);
+  }
   to {
     transform: rotate(360deg);
+  }
+}

Proyectos de Subversion LeadersLinked - Backend

(root)/public/assets/vendors/orgchart/css/jquery.orgchart.css – Rev 16825 → 16960