Gitiles
Code Review Sign In
git.clicks.codes / Clicks / Forks / ERPNext / 6f799d17ce77b25575b65c71fdb2fd5bd843bf9e / . / erpnext / public / scss / hierarchy_chart.scss
blob: 1c2f9421faa7bfb1875b51f60579e977b4942545 [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;
Rucha Mahabal781d1bf2021-07-02 18:15:18 +0530[diff] [blame]65 margin-right: 0.25rem;
Rucha Mahabal506ecb42021-06-20 12:42:06 +0530[diff] [blame]66 }
67
68 .node-edit-icon {
69 display: block;
70 }
71
Rucha Mahabal506ecb42021-06-20 12:42:06 +0530[diff] [blame]72 .node-edit-icon > .icon{
73 stroke: var(--blue-500);
74 }
75
76 .node-name {
77 align-items: center;
78 justify-content: space-between;
79 margin-bottom: 2px;
Rucha Mahabald363f9d2021-06-30 02:29:16 +0530[diff] [blame]80 width: 12.2rem;
Rucha Mahabal506ecb42021-06-20 12:42:06 +0530[diff] [blame]81 }
82}
83
84.node-card.active-path {
85 background: var(--blue-100);
86 border: 1px solid var(--blue-300);
87 box-shadow: var(--shadow-sm);
88 border-radius: 0.5rem;
89 padding: 0.75rem;
90 width: 15rem;
91 height: 3.0rem;
92
93 .btn-edit-node {
94 display: none !important;
95 }
96
97 .edit-chart-node {
98 display: none;
99 }
100
101 .node-edit-icon {
102 display: none;
103 }
104
105 .node-info {
106 display: none;
107 }
108
109 .node-title {
110 display: none;
111 }
112
113 .node-connections {
114 display: none;
115 }
116
117 .node-name {
118 font-size: 0.85rem;
119 line-height: 1.35;
120 }
121
122 .node-image {
123 width: 1.5rem;
124 height: 1.5rem;
125 }
126
127 .node-meta {
128 align-items: baseline;
129 }
130}
131
132.node-card.collapsed {
133 background: white;
134 stroke: 1px solid var(--gray-200);
135 box-shadow: var(--shadow-sm);
136 border-radius: 0.5rem;
137 padding: 0.75rem;
138 width: 15rem;
139 height: 3.0rem;
140
141 .btn-edit-node {
142 display: none !important;
143 }
144
145 .edit-chart-node {
146 display: none;
147 }
148
149 .node-edit-icon {
150 display: none;
151 }
152
153 .node-info {
154 display: none;
155 }
156
157 .node-title {
158 display: none;
159 }
160
161 .node-connections {
162 display: none;
163 }
164
165 .node-name {
166 font-size: 0.85rem;
167 line-height: 1.35;
168 }
169
170 .node-image {
171 width: 1.5rem;
172 height: 1.5rem;
173 }
174
175 .node-meta {
176 align-items: baseline;
177 }
178}
179
180// horizontal hierarchy tree view
181.hierarchy {
182 display: flex;
183 padding-top: 30px;
184}
185
186.hierarchy li {
187 list-style-type: none;
188}
189
190.child-node {
191 margin: 0px 0px 16px 0px;
192}
193
194.level {
195 margin-right: 8px;
Rucha Mahabal4e7cda62021-06-30 01:46:10 +0530[diff] [blame]196 align-items: flex-start;
Rucha Mahabal6f799d172021-07-21 23:19:47 +0530[diff] [blame^]197 flex-direction: column;
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
Rucha Mahabal31a0f362021-07-07 12:05:50 +0530[diff] [blame]250.root-level .node-card {
251 margin: 0 0 16px;
252}
253
Rucha Mahabal8a33a032021-06-21 21:55:50 +0530[diff] [blame]254// node group
255
256.collapsed-level {
257 margin-bottom: 16px;
Rucha Mahabal25c5cff2021-06-29 15:06:09 +0530[diff] [blame]258 width: 18rem;
Rucha Mahabal8a33a032021-06-21 21:55:50 +0530[diff] [blame]259}
260
261.node-group {
262 background: white;
263 border: 1px solid var(--gray-300);
264 box-shadow: var(--shadow-sm);
265 border-radius: 0.5rem;
266 padding: 0.75rem;
Rucha Mahabal5046cb02021-06-29 11:12:47 +0530[diff] [blame]267 width: 18rem;
Rucha Mahabal8a33a032021-06-21 21:55:50 +0530[diff] [blame]268 height: 3rem;
269 overflow: hidden;
Rucha Mahabal5046cb02021-06-29 11:12:47 +0530[diff] [blame]270 align-items: center;
Rucha Mahabal8a33a032021-06-21 21:55:50 +0530[diff] [blame]271}
272
273.node-group .avatar-group {
274 margin-left: 0px;
275}
276
277.node-group .avatar-extra-count {
278 background-color: var(--blue-100);
279 color: var(--blue-500);
280}
281
282.node-group .avatar-frame {
283 width: 1.5rem;
284 height: 1.5rem;
Rucha Mahabal5046cb02021-06-29 11:12:47 +0530[diff] [blame]285}
286
287.node-group.collapsed {
288 width: 5rem;
289 margin-left: 12px;
Rucha Mahabal25c5cff2021-06-29 15:06:09 +0530[diff] [blame]290}
291
292.sibling-group {
293 display: flex;
294 flex-direction: column;
295 align-items: center;
Rucha Mahabal8a33a032021-06-21 21:55:50 +0530[diff] [blame]296}