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