brotherton-erpnext/erpnext/public/scss/organizational_chart.scss

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

284 lines
3.7 KiB
SCSS
Raw Normal View History

2021-06-20 07:12:06 +00:00
.node-card {
background: white;
stroke: 1px solid var(--gray-200);
box-shadow: var(--shadow-base);
border-radius: 0.5rem;
padding: 0.75rem;
margin-left: 3rem;
width: 18rem;
2021-06-21 16:25:50 +00:00
overflow: hidden;
2021-06-20 07:12:06 +00:00
.btn-edit-node {
display: none;
}
.edit-chart-node {
display: none;
}
.node-edit-icon {
display: none;
}
}
.node-image {
width: 3.0rem;
height: 3.0rem;
}
.node-name {
font-size: 1rem;
line-height: 1.72;
}
.node-title {
font-size: 0.75rem;
line-height: 1.35;
}
.node-connections {
font-size: 0.75rem;
line-height: 1.35;
}
.node-card.active {
background: var(--blue-50);
border: 1px solid var(--blue-500);
box-shadow: var(--shadow-md);
border-radius: 0.5rem;
padding: 0.75rem;
width: 18rem;
height: 5rem;
.btn-edit-node {
display: flex;
background: var(--blue-100);
color: var(--blue-500);
padding: .25rem .5rem;
font-size: .75rem;
justify-content: center;
box-shadow: var(--shadow-sm);
}
.edit-chart-node {
display: block;
}
.node-edit-icon {
display: block;
}
.edit-chart-node {
margin-right: 0.25rem;
}
.node-edit-icon > .icon{
stroke: var(--blue-500);
}
.node-name {
align-items: center;
justify-content: space-between;
margin-bottom: 2px;
}
}
.node-card.active-path {
background: var(--blue-100);
border: 1px solid var(--blue-300);
box-shadow: var(--shadow-sm);
border-radius: 0.5rem;
padding: 0.75rem;
width: 15rem;
height: 3.0rem;
.btn-edit-node {
display: none !important;
}
.edit-chart-node {
display: none;
}
.node-edit-icon {
display: none;
}
.node-info {
display: none;
}
.node-title {
display: none;
}
.node-connections {
display: none;
}
.node-name {
font-size: 0.85rem;
line-height: 1.35;
}
.node-image {
width: 1.5rem;
height: 1.5rem;
}
.node-meta {
align-items: baseline;
}
}
.node-card.collapsed {
background: white;
stroke: 1px solid var(--gray-200);
box-shadow: var(--shadow-sm);
border-radius: 0.5rem;
padding: 0.75rem;
width: 15rem;
height: 3.0rem;
.btn-edit-node {
display: none !important;
}
.edit-chart-node {
display: none;
}
.node-edit-icon {
display: none;
}
.node-info {
display: none;
}
.node-title {
display: none;
}
.node-connections {
display: none;
}
.node-name {
font-size: 0.85rem;
line-height: 1.35;
}
.node-image {
width: 1.5rem;
height: 1.5rem;
}
.node-meta {
align-items: baseline;
}
}
// horizontal hierarchy tree view
.hierarchy {
display: flex;
padding-top: 30px;
}
.hierarchy li {
list-style-type: none;
}
.child-node {
margin: 0px 0px 16px 0px;
}
.level {
margin-right: 8px;
}
#arrows {
position: absolute;
}
.active-connector {
stroke: var(--blue-500);
}
.collapsed-connector {
stroke: var(--blue-300);
}
2021-06-21 16:25:50 +00:00
// mobile
.hierarchy-mobile {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 30px;
padding-left: 0px;
}
.hierarchy-mobile li {
list-style-type: none;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.mobile-node {
margin-left: 0;
}
.mobile-node.active-path {
width: 12.25rem;
}
.active-child {
width: 15.5rem;
}
.mobile-node .node-connections {
max-width: 80px;
}
.hierarchy-mobile .node-children {
margin-top: 16px;
}
// node group
.collapsed-level {
margin-bottom: 16px;
}
.node-group {
background: white;
border: 1px solid var(--gray-300);
box-shadow: var(--shadow-sm);
border-radius: 0.5rem;
padding: 0.75rem;
width: 18rem;
2021-06-21 16:25:50 +00:00
height: 3rem;
overflow: hidden;
align-items: center;
2021-06-21 16:25:50 +00:00
}
.node-group .avatar-group {
margin-left: 0px;
}
.node-group .avatar-extra-count {
background-color: var(--blue-100);
color: var(--blue-500);
}
.node-group .avatar-frame {
width: 1.5rem;
height: 1.5rem;
}
.node-group.collapsed {
width: 5rem;
margin-left: 12px;
2021-06-21 16:25:50 +00:00
}