---visual.less---
@import (less) "node_modules/bootstrap/dist/css/bootstrap.css";
.mainContainer{
width: 1130px !important;
height: 600px;
display: flex;
flex-direction: column;
.bones{
flex-basis: 50%;
.ribCage{
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
.rib{
flex-wrap: nowrap;
text-align: center;
display: flex;
flex-direction: column;
align-items: stretch;
.connector{
border-left: 2px solid rebeccapurple;
align-self: stretch;
flex-grow: 1;
margin-left: 50%;
}
.boneEnd{
height: 65px!important;
padding-top: 10px;
padding-bottom: 10px;
margin: 0 1px;
position:relative;
font-size: 12px;
text-align: left;
>a.moveUp:hover{
transform: translateY(-10px);
}
>a.moveDown:hover{
transform: translateY(10px);
}
>div{
width: max-content;
position: absolute;
max-width: 150%;
top: 0;
bottom: 0;
border: 1px dashed;
text-decoration: unset;
color: unset;
transition: transform 0.2s;
>section{
display: flex;
flex-direction: column;
flex-wrap: nowrap;
padding-left: 3px;
.singleLineName{
overflow-x: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: left;
}
.doubleLineName{
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
>div{
flex-grow: 2;
max-width: 100%;
}
>caption{
flex-grow: 1;
max-width: 100%;
overflow-x: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-weight: 600;
text-align: left;
padding-bottom: 3px;
padding-top: 2px;
min-width: 120px;
}
>.tag{
overflow: hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
}
>i{
position: absolute;
top: -15px;
right: -14px;
font-size: 30px;
background: white;
}
}
}
}
}
}
>.spine{
flex-basis: 5px;
border-radius: 5px;
flex-shrink: 0;
flex-grow: 0;
background-color: #02203E;
}
}
.finalBlock{
width: 70px;
height: 70px;
align-self: flex-end;
background: #D9EC27;
border-radius: 50%;
text-align: center;
line-height: 70px;
font-weight: 600;
}
.date_line{
text-decoration: underline;
}
.border_right{
margin-top: 10px;
margin-bottom: 10px;
}
.fix_padding{
margin-left: 0px !important;
margin-right: 0px !important;
}
.no_padding{
padding-left: 0px !important;
padding-right: 0px !important;
}
.no_border{
height: 140px;
margin-top: 10px;
}
.finalBlockText{
font-size: 12px;
margin-right: 5px;
padding-top: 35px;
text-align: right;
}
.fishBoneEditor{
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
background: #e5e5e5;
>div{
flex-basis: 25%;
padding: 10px;
>div{
display: inherit;
>i{
font-size: 16px;
margin-left: 5px;
}
}
}
}
.customer_title{
font-size: 24px;
font-weight: bold;
padding-top: 0px;
display: block;
margin-bottom: 10px;
}
.oppurtunity_title{
padding-bottom: 15px;
font-size: 16px;
font-weight: bold;
color: #9A50F8;
padding-top: 0px;
display: block;
}
.dropdownContainer{
margin-top: 10px;
}
.midway_link, .midway_link:hover{
color: black;
text-decoration: none;
}
----HTML from component.tsx---
render() {
return (
<div id="deleteme" style={{ overflow: "auto" }}>
<div
className="mainContainer"
style={{ marginLeft: 1 + "%" }}
>
<div className="bones">
<div className="ribCage" style={{ alignItems: "end" }}>
{FishboneDiagramComponent.topBones.map((element) => {
return <>{this.renderTopBone(element)}</>;
})}
</div>
</div>
<div
style={{ width: this.calcTimelineWidth() + "px" }}
className="spine"
></div>
<div className="bones">
<div
className="ribCage"
style={{
alignItems: "start",
position: "relative",
left: this.calulateBottomBonePadding(),
}}
>
{FishboneDiagramComponent.bottomBones.map((element, index) => {
return <>{this.renderBottomBone(element)}</>;
})}
</div>
</div>
</div>
</div>
);
}
