Gitiles
Code Review Sign In
git.clicks.codes / Clicks / Forks / ERPNext / d363f9db3d19cd01188cc4516f461d14dd0eb72c / . / erpnext / public / scss / hierarchy_chart.scss
blob: eefc14d67970f174ae2e84459e6409078a736e9e [file] [log] [blame]
Rucha Mahabal506ecb42021-06-20 12:42:06 +0530[diff] [blame]1.node-card {
2 background: white;
3 stroke: 1px solid var(--gray-200);
4 box-shadow: var(--shadow-base);
5 border-radius: 0.5rem;
6 padding: 0.75rem;
7 margin-left: 3rem;
8 width: 18rem;
Rucha Mahabal8a33a032021-06-21 21:55:50 +0530[diff] [blame]9 overflow: hidden;
Rucha Mahabal506ecb42021-06-20 12:42:06 +0530[diff] [blame]10
11 .btn-edit-node {
12 display: none;
13 }
14
15 .edit-chart-node {
16 display: none;
17 }
18
19 .node-edit-icon {
20 display: none;
21 }
22}
23
24.node-image {
25 width: 3.0rem;
26 height: 3.0rem;
27}
28
29.node-name {
30 font-size: 1rem;
31 line-height: 1.72;
32}
33
34.node-title {
35 font-size: 0.75rem;
36 line-height: 1.35;
37}
38
39.node-connections {
40 font-size: 0.75rem;
41 line-height: 1.35;
42}
43
44.node-card.active {
45 background: var(--blue-50);
46 border: 1px solid var(--blue-500);
47 box-shadow: var(--shadow-md);
48 border-radius: 0.5rem;
49 padding: 0.75rem;
50 width: 18rem;
Rucha Mahabal506ecb42021-06-20 12:42:06 +0530[diff] [blame]51
52 .btn-edit-node {
53 display: flex;
54 background: var(--blue-100);
55 color: var(--blue-500);
56 padding: .25rem .5rem;
57 font-size: .75rem;
58 justify-content: center;
59 box-shadow: var(--shadow-sm);
Rucha Mahabald363f9d2021-06-30 02:29:16 +0530[diff] [blame^]60 margin-left: auto;
Rucha Mahabal506ecb42021-06-20 12:42:06 +0530[diff] [blame]61 }
62
63 .edit-chart-node {
64 display: block;
65 }
66
67 .node-edit-icon {
68 display: block;
69 }
70
71 .edit-chart-node {
72 margin-right: 0.25rem;
73 }
74
75 .node-edit-icon > .icon{
76 stroke: var(--blue-500);
77 }
78
79 .node-name {
80 align-items: center;
81 justify-content: space-between;
82 margin-bottom: 2px;
Rucha Mahabald363f9d2021-06-30 02:29:16 +0530[diff] [blame^]83 width: 12.2rem;
Rucha Mahabal506ecb42021-06-20 12:42:06 +0530[diff] [blame]84 }
85}
86
87.node-card.active-path {
88 background: var(--blue-100);
89 border: 1px solid var(--blue-300);
90 box-shadow: var(--shadow-sm);
91 border-radius: 0.5rem;
92 padding: 0.75rem;
93 width: 15rem;
94 height: 3.0rem;
95
96 .btn-edit-node {
97 display: none !important;
98 }
99
100 .edit-chart-node {
101 display: none;
102 }
103
104 .node-edit-icon {
105 display: none;
106 }
107
108 .node-info {
109 display: none;
110 }
111
112 .node-title {
113 display: none;
114 }
115
116 .node-connections {
117 display: none;
118 }
119
120 .node-name {
121 font-size: 0.85rem;
122 line-height: 1.35;
123 }
124
125 .node-image {
126 width: 1.5rem;
127 height: 1.5rem;
128 }
129
130 .node-meta {
131 align-items: baseline;
132 }
133}
134
135.node-card.collapsed {
136 background: white;
137 stroke: 1px solid var(--gray-200);
138 box-shadow: var(--shadow-sm);
139 border-radius: 0.5rem;
140 padding: 0.75rem;
141 width: 15rem;
142 height: 3.0rem;
143
144 .btn-edit-node {
145 display: none !important;
146 }
147
148 .edit-chart-node {
149 display: none;
150 }
151
152 .node-edit-icon {
153 display: none;
154 }
155
156 .node-info {
157 display: none;
158 }
159
160 .node-title {
161 display: none;
162 }
163
164 .node-connections {
165 display: none;
166 }
167
168 .node-name {
169 font-size: 0.85rem;
170 line-height: 1.35;
171 }
172
173 .node-image {
174 width: 1.5rem;
175 height: 1.5rem;
176 }
177
178 .node-meta {
179 align-items: baseline;
180 }
181}
182
183// horizontal hierarchy tree view
184.hierarchy {
185 display: flex;
186 padding-top: 30px;
187}
188
189.hierarchy li {
190 list-style-type: none;
191}
192
193.child-node {
194 margin: 0px 0px 16px 0px;
195}
196
197.level {
198 margin-right: 8px;
Rucha Mahabal4e7cda62021-06-30 01:46:10 +0530[diff] [blame]199 align-items: flex-start;
Rucha Mahabal506ecb42021-06-20 12:42:06 +0530[diff] [blame]200}
201
202#arrows {
203 position: absolute;
Rucha Mahabalfb9b6282021-06-29 17:48:44 +0530[diff] [blame]204 overflow: visible;
Rucha Mahabal506ecb42021-06-20 12:42:06 +0530[diff] [blame]205}
206
207.active-connector {
208 stroke: var(--blue-500);
209}
210
211.collapsed-connector {
212 stroke: var(--blue-300);
213}
Rucha Mahabal8a33a032021-06-21 21:55:50 +0530[diff] [blame]214
215// mobile
216
217.hierarchy-mobile {
218 display: flex;
219 flex-direction: column;
220 align-items: center;
Rucha Mahabal25c5cff2021-06-29 15:06:09 +0530[diff] [blame]221 padding-top: 10px;
Rucha Mahabal8a33a032021-06-21 21:55:50 +0530[diff] [blame]222 padding-left: 0px;
223}
224
225.hierarchy-mobile li {
226 list-style-type: none;
227 display: flex;
228 flex-direction: column;
229 align-items: flex-end;
230}
231
232.mobile-node {
233 margin-left: 0;
234}
235
236.mobile-node.active-path {
237 width: 12.25rem;
238}
239
240.active-child {
241 width: 15.5rem;
242}
243
244.mobile-node .node-connections {
245 max-width: 80px;
246}
247
248.hierarchy-mobile .node-children {
249 margin-top: 16px;
250}
251
252// node group
253
254.collapsed-level {
255 margin-bottom: 16px;
Rucha Mahabal25c5cff2021-06-29 15:06:09 +0530[diff] [blame]256 width: 18rem;
Rucha Mahabal8a33a032021-06-21 21:55:50 +0530[diff] [blame]257}
258
259.node-group {
260 background: white;
261 border: 1px solid var(--gray-300);
262 box-shadow: var(--shadow-sm);
263 border-radius: 0.5rem;
264 padding: 0.75rem;
Rucha Mahabal5046cb02021-06-29 11:12:47 +0530[diff] [blame]265 width: 18rem;
Rucha Mahabal8a33a032021-06-21 21:55:50 +0530[diff] [blame]266 height: 3rem;
267 overflow: hidden;
Rucha Mahabal5046cb02021-06-29 11:12:47 +0530[diff] [blame]268 align-items: center;
Rucha Mahabal8a33a032021-06-21 21:55:50 +0530[diff] [blame]269}
270
271.node-group .avatar-group {
272 margin-left: 0px;
273}
274
275.node-group .avatar-extra-count {
276 background-color: var(--blue-100);
277 color: var(--blue-500);
278}
279
280.node-group .avatar-frame {
281 width: 1.5rem;
282 height: 1.5rem;
Rucha Mahabal5046cb02021-06-29 11:12:47 +0530[diff] [blame]283}
284
285.node-group.collapsed {
286 width: 5rem;
287 margin-left: 12px;
Rucha Mahabal25c5cff2021-06-29 15:06:09 +0530[diff] [blame]288}
289
290.sibling-group {
291 display: flex;
292 flex-direction: column;
293 align-items: center;
Rucha Mahabal8a33a032021-06-21 21:55:50 +0530[diff] [blame]294}