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