@yworks/react-yfiles-company-ownership/dist/index.css

yFiles React Company Ownership Component - A powerful and versatile React component based on the yFiles library, allows you to seamlessly incorporate dynamic and interactive company ownership diagrams into your applications.

@import "@yworks/react-yfiles-core/dist/index.css";

/* src/styles/company-ownership-tooltip.css */
.yfiles-react-tooltip {
  max-width: 65vw;
}
.yfiles-react-tooltip__name {
  font-weight: bold;
  font-size: 20px;
  text-transform: capitalize;
  margin-bottom: 5px;
}
.yfiles-react-tooltip__data-grid {
  display: grid;
  grid-template-columns: fit-content(15ch) 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}
.yfiles-react-tooltip__data-grid--key {
  grid-column: 1/2;
  color: #616161;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.yfiles-react-tooltip__data-grid--value {
  grid-column: 2/3;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* src/styles/company-ownership-styles.css */
#react-yfiles-company-ownership-stylesheet-detection {
  --yfiles-react-stylesheet-detection: react-yfiles-company-ownership-stylesheet-detection;
  display: none;
}
.yfiles-react-node {
  font-family: "Roboto", sans-serif;
  display: flex;
  flex-direction: column;
  text-align: start;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #ffffff;
  border-radius: 12px;
  color: #000000;
  box-shadow: 0 0 0 3px transparent, 3px 3px 5px #c0c0c0;
  transition: box-shadow 0.5s ease-in-out;
}
.yfiles-react-detail-node__content {
  width: 100%;
  height: 100%;
  padding: 0.5em;
  box-sizing: border-box;
  line-height: 1.5em;
}
.yfiles-react-detail-node__data-grid {
  display: grid;
  grid-template-columns: fit-content(15ch) 1fr;
  grid-column-gap: 10px;
}
.yfiles-react-detail-node__data-grid--key {
  grid-column: 1/2;
  color: #616161;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.yfiles-react-detail-node__data-grid--value {
  grid-column: 2/3;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.yfiles-react-detail-node__name {
  font-weight: bold;
  font-size: 20px;
  text-transform: capitalize;
  margin-bottom: 5px;
}
.yfiles-react-overview-node {
  justify-content: center;
  align-items: center;
  font-size: 30px;
  text-transform: capitalize;
  word-wrap: break-word;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0.3em 0.5em;
  border: 1px solid #c0c0c0;
}
.yfiles-react-controls__button--show-all {
  background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16px' height='16px' viewBox='0.5 16.5 16 16' enable-background='new 0.5 16.5 16 16' xml:space='preserve'%3E%3Cg%3E%3Cline x1='2.5' x2='14.5' y1='24.5' y2='24.5' stroke='%23666666' stroke-width='2' stroke-miterlimit='10'%3E%3C/line%3E%3Cline x1='8.5' x2='8.5' y1='18.5' y2='30.5' stroke='%23666666' stroke-width='2' stroke-miterlimit='10'%3E%3C/line%3E%3Cline x1='4.257' x2='12.742' y1='20.258' y2='28.742' stroke='%23666666' stroke-width='2' stroke-miterlimit='10'%3E%3C/line%3E%3Cline x1='12.742' x2='4.257' y1='20.258' y2='28.742' stroke='%23666666' stroke-width='2' stroke-miterlimit='10'%3E%3C/line%3E%3C/g%3E%3C/svg%3E") no-repeat 50% 50%;
}
.yfiles-react-controls__button--show-all:disabled {
  opacity: 0.2;
}
.yfiles-react-connection-label .yfiles-label-text {
  color: black;
}
.yfiles-react-connection-label .yfiles-label-background {
  color: #D3D7D9;
}
.yfiles-react-item-label .yfiles-label-text {
  color: black;
}
.yfiles-react-item-label .yfiles-label-background {
  color: #ffffff00;
}

/* src/styles/company-ownership-nodes.css */
.company-node-bank {
  fill: #c89c9c;
  background-color: #c89c9c;
  stroke: #9c3737;
}
.company-node-corporation {
  fill: #ffc499;
  background-color: #ffc499;
  stroke: #ff6c00;
}
.company-node-ctp {
  fill: #a7a7c1;
  background-color: #a7a7c1;
  stroke: #242265;
}
.company-node-partnership {
  fill: #bbd3c5;
  background-color: #bbd3c5;
  stroke: #56926e;
}
.company-node-rctb {
  fill: #c5e4d1;
  background-color: #c5e4d1;
  stroke: #6dbc8d;
}
.company-node-branch {
  fill: #c4b9c9;
  background-color: #c4b9c9;
  stroke: #6c4f77;
}
.company-node-disregarded {
  fill: #b3cddb;
  background-color: #b3cddb;
  stroke: #4281a4;
}
.company-node-dual-resident {
  fill: #f3f3b9;
  background-color: #f3f3b9;
  stroke: #e0e04f;
}
.company-node-multiple {
  fill: #e6e6e6;
  background-color: #e6e6e6;
  stroke: #c1c1c1;
}
.company-node-trust {
  fill: #f1b0ae;
  background-color: #f1b0ae;
  stroke: #db3a34;
}
.company-node-individual {
  fill: #f9e99c;
  background-color: #f9e99c;
  stroke: #f0c808;
}
.company-node-third-party {
  fill: #abb8b0;
  background-color: #abb8b0;
  stroke: #2d4d3a;
}
.company-node-pe-risk {
  fill: #dda7b5;
  background-color: #dda7b5;
  stroke: #ab2346;
}
.company-node-asset {
  fill: #dfb5ff;
  background-color: #dfb5ff;
  stroke: #58198a;
}
.company-node-octagon {
  fill: #90b9d6;
  background-color: #90b9d6;
  stroke: #1b5270;
}
.company-node-trapezoid {
  fill: #c8dfb3;
  background-color: #c8dfb3;
  stroke: #76b041;
}
.company-node-unknown {
  fill: #fff;
  background-color: #fff;
  stroke: #000;
}