Organization Chart

css/contacts.scss

@@ -34,6 +34,7 @@ $grid-input-height-with-margin: $grid-height-unit - $grid-input-margin * 2;
 @import 'Properties/Properties';
 @import 'Properties/PropertyTitle';
 @import 'ImportScreen';
+@import 'orgChart';
 
 // various
 @import 'animations';

css/orgChart.scss

@@ -0,0 +1,89 @@
+.orgchart-container {
+ display: flex;
+ flex-direction: column;
+
+ .chart-menu {
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ border: 1px solid var(--color-border);
+
+ h3 {
+ padding-left: 50px;
+ padding-right: 10px;
+ margin: 9px 0;
+ }
+ }
+
+ .chart-container {
+ display: flex;
+ background-color: var(--color-main-background);
+
+ .svg-chart-container {
+ .node-container {
+ background-color: none;
+ padding-top: 1px;
+ height: 175px;
+ border-radius: var(--border-radius-large);
+ overflow: visible;
+
+ .avatar {
+ margin-top: -30px;
+ margin-left: 95px;
+ border: 1px solid var(--color-border);
+ }
+
+ .inner-box {
+ display: flex;
+ flex-direction: column;
+ height: 175px;
+ padding-top: 0;
+ border: 1px solid var(--color-border);
+ border-radius: var(--border-radius-large);
+ background-color: var(--color-main-background);
+
+ .main-container {
+ padding: 20px;
+ padding-top: 35px;
+ text-align: center;
+ flex: 1;
+
+ .fullName {
+ color: var(--color-primary-element);
+ font-weight: bold;
+ }
+
+ .title {
+ margin-top: 4px;
+ }
+ }
+
+ .description {
+ display: flex;
+ justify-content: space-between;
+ padding: 15px;
+ }
+ }
+
+ .inner-box-highlight {
+ border: 2px solid var(--color-primary) !important;
+ }
+
+ .panel {
+ margin: -34px -1px 0 -1px;
+ background-color: var(--color-primary);
+ height: 15px;
+ border-top-left-radius: var(--border-radius-large);
+ border-top-right-radius: var(--border-radius-large);
+ }
+ }
+ }
+ }
+
+ .node-button-div {
+ color: var(--color-primary-element);
+ div {
+ background-color: var(--color-main-background) !important;
+ }
+ }
+}