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