Gitiles
Code Review Sign In
git.clicks.codes / Clicks / Forks / ERPNext / fc3315a6d7938212009955802cbd7181083e0025 / . / erpnext / public / scss / point-of-sale.scss
blob: 573b9dc2b75cacc1ead74b6f8be788c6a136df51 [file] [log] [blame]
Saqib Ansari0fb2e022020-11-09 23:51:24 +0530[diff] [blame]1.point-of-sale-app {
2 display: grid;
3 grid-template-columns: repeat(10, minmax(0, 1fr));
4 gap: var(--margin-md);
5
6 section {
7 min-height: 45rem;
8 max-height: calc(100vh - 200px);
9 }
10
11 .frappe-control {
12 margin: 0 !important;
13 padding: 5px 5px;
14 width: 100%;
15 }
16
17 .form-group {
18 margin-bottom: 0px !important;
19 }
20
21 .pointer-no-select {
22 cursor: pointer;
23 user-select: none;
24 }
25
26 .nowrap {
27 overflow: hidden;
28 white-space: nowrap;
29 }
30
31 .image {
32 height: 100% !important;
33 object-fit: cover;
34 }
35
36 .abbr {
37 background-color: var(--gray-50);
38 font-size: var(--text-3xl);
39 }
40
41 .label {
42 display: flex;
43 align-items: center;
44 font-weight: 700;
45 font-size: var(--text-lg);
46 }
47
48 .pos-card {
49 background-color: var(--fg-color);
50 box-shadow: var(--shadow-base);
51 border-radius: var(--border-radius-md);
52 }
53
Saqib Ansari210baaf2020-11-11 12:04:00 +0530[diff] [blame]54 .seperator {
Saqib Ansaricc208832020-11-11 20:47:20 +0530[diff] [blame]55 margin-left: var(--margin-sm);
56 margin-right: var(--margin-sm);
Saqib Ansari210baaf2020-11-11 12:04:00 +0530[diff] [blame]57 border-bottom: 1px solid var(--gray-300);
58 }
59
Saqib Ansaricc208832020-11-11 20:47:20 +0530[diff] [blame]60 .primary-action {
61 @extend .pointer-no-select;
62 display: flex;
63 align-items: center;
64 justify-content: center;
65 padding: var(--padding-sm);
66 margin: var(--margin-xs);
67 margin-top: var(--margin-sm);
68 margin-bottom: var(--margin-xs);
69 border-radius: var(--border-radius-md);
70 font-size: var(--text-lg);
71 font-weight: 700;
72 }
73
74 .highlighted-numpad-btn {
75 box-shadow: inset 0 0px 4px 0px rgba(0, 0, 0, 0.15) !important;
76 font-weight: 700;
77 background-color: var(--gray-50);
78 }
79
Saqib Ansari0fb2e022020-11-09 23:51:24 +0530[diff] [blame]80 > .items-selector {
81 grid-column: span 6 / span 6;
82 display: flex;
83 flex-direction: column;
84 overflow-y: scroll;
85 overflow-x: hidden;
86
87 > .filter-section {
88 display: grid;
89 grid-template-columns: repeat(12, minmax(0, 1fr));
90 background-color: var(--fg-color);
91 position: sticky;
92 top: -1px;
93 z-index: 1;
94 padding: var(--padding-md);
95 padding-bottom: var(--padding-sm);
96 align-items: center;
97
98 > .label {
99 @extend .label;
100 grid-column: span 4 / span 4;
101 padding: var(--padding-xs);
102 padding-top: 0px;
103 }
104
105 > .search-field {
106 grid-column: span 5 / span 5;
107 display: flex;
108 align-items: center;
109 }
110
111 > .item-group-field {
112 grid-column: span 3 / span 3;
113 display: flex;
114 align-items: center;
115 }
116 }
117
118 > .items-container {
119 display: grid;
120 grid-template-columns: repeat(4, minmax(0, 1fr));
121 gap: var(--margin-lg);
Saqib Ansari0fb2e022020-11-09 23:51:24 +0530[diff] [blame]122 padding: var(--padding-lg);
123 padding-top: var(--padding-xs);
124
125 > .item-wrapper {
126 @extend .pointer-no-select;
127 border-radius: var(--border-radius-md);
128 box-shadow: var(--shadow-base);
129
130 .item-display {
131 display: flex;
132 align-items: center;
133 justify-content: center;
134 border-radius: var(--border-radius-md);
135 margin: var(--margin-sm);
136 margin-bottom: 0px;
137 min-height: 8rem;
138 height: 8rem;
139 color: var(--gray-500);
140
141 > img {
142 @extend .image;
143 }
144 }
145
146 > .item-detail {
147 display: flex;
148 flex-direction: column;
149 justify-content: center;
150 min-height: 3.5rem;
151 height: 3.5rem;
152 padding-left: var(--padding-sm);
153 padding-right: var(--padding-sm);
154
155 > .item-name {
156 @extend .nowrap;
157 display: flex;
158 align-items: center;
159 font-size: var(--text-md);
160 }
161
162 > .item-rate {
163 font-weight: 700;
164 }
165 }
166
167 }
168 }
169 }
Saqib Ansari210baaf2020-11-11 12:04:00 +0530[diff] [blame]170
171 > .customer-cart-container {
172 grid-column: span 4 / span 4;
173 display: flex;
174 flex-direction: column;
175
176 > .customer-section {
177 @extend .pos-card;
178 display: flex;
179 flex-direction: column;
180 padding: var(--padding-md);
181
182 > .customer-field {
183 display: flex;
184 align-items: center;
185 }
186
187 > .customer-details {
188 display: flex;
189 flex-direction: column;
190 position: sticky;
191 top: -1px;
192 z-index: 1;
193 background-color: var(--fg-color);
194
195 > .header {
196 display: flex;
197 margin-bottom: var(--margin-md);
198 justify-content: space-between;
199 padding-top: var(--padding-md);
200
201 > .label {
202 @extend .label;
203 }
204
205 > .close-details-btn {
206 display: flex;
207 align-items: center;
208 cursor: pointer;
209 }
210 }
211
212 > .customer-display {
213 display: flex;
214 align-items: center;
215 cursor: pointer;
216
217 > .customer-image {
218 display: flex;
219 align-items: center;
220 justify-content: center;
221 width: 3rem;
222 height: 3rem;
223 border-radius: 50%;
224 color: var(--gray-500);
225 margin-right: var(--margin-md);
226
227 > img {
228 @extend .image;
229 border-radius: 50%;
230 }
231 }
232
233 > .customer-abbr {
234 @extend .abbr;
235 font-size: var(--text-2xl);
236 }
237
238 > .customer-name-desc {
239 @extend .nowrap;
240 display: flex;
241 flex-direction: column;
242 margin-right: auto;
243
244 >.customer-name {
245 font-weight: 700;
246 font-size: var(--text-lg);
247 }
248
249 >.customer-desc {
250 color: var(--gray-600);
251 font-weight: 500;
252 font-size: var(--text-sm);
253 }
254 }
255
256 > .reset-customer-btn {
257 display: flex;
258 align-items: center;
259 cursor: pointer;
260 }
261
262 }
263
264 > .customer-fields-container {
265 display: grid;
266 grid-template-columns: repeat(2, minmax(0, 1fr));
267 margin-top: var(--margin-sm);
268 }
269
270 > .transactions-label {
271 @extend .label;
272 margin-top: var(--margin-sm);
273 margin-bottom: var(--margin-sm);
274 }
275 }
276 }
277
278 > .cart-container {
Saqib Ansaricc208832020-11-11 20:47:20 +0530[diff] [blame]279 @extend .pos-card;
280 display: flex;
281 flex-direction: column;
282 align-items: center;
283 margin-top: var(--margin-md);
284 position: relative;
285 height: 100%;
Saqib Ansari210baaf2020-11-11 12:04:00 +0530[diff] [blame]286
Saqib Ansaricc208832020-11-11 20:47:20 +0530[diff] [blame]287 > .abs-cart-container {
288 position: absolute;
289 display: flex;
290 flex-direction: column;
291 padding: var(--padding-md);
292 width: 100%;
293 height: 100%;
294
295 > .cart-label {
296 @extend .label;
297 padding-bottom: var(--padding-md);
298 padding-left: var(--margin-sm);
299 }
300
301 > .cart-header {
302 display: flex;
303 width: 100%;
304 font-size: var(--text-md);
305 padding-left: var(--padding-xs);
306 padding-right: var(--padding-xs);
307 padding-bottom: var(--padding-md);
308
309 > .name-header {
310 flex: 1 1 0%;
311 margin-left: var(--margin-xs);
312 }
313
314 > .qty-header {
315 margin-right: var(--margin-lg);
316 }
317
318 > .rate-amount-header {
319 margin-right: var(--margin-xs);
320 text-align: right;
321 }
322 }
323
324 .no-item-wrapper {
325 display: flex;
326 align-items: center;
327 justify-content: center;
328 background-color: var(--gray-50);
329 border-radius: var(--border-radius-md);
330 font-size: var(--text-md);
331 font-weight: 500;
332 width: 100%;
333 height: 100%;
334 }
335
336 > .cart-items-section {
337 display: flex;
338 flex-direction: column;
339 flex: 1 1 0%;
340 overflow-y: scroll;
341
342 > .cart-item-wrapper {
343 @extend .pointer-no-select;
344 display: flex;
345 align-items: center;
346 padding: var(--padding-sm);
347 border-radius: var(--border-radius-md);
348
349 &:hover {
350 background-color: var(--gray-50);
351 }
352
353 > .item-image {
354 display: flex;
355 align-items: center;
356 justify-content: center;
357 width: 2rem;
358 height: 2rem;
359 border-radius: var(--border-radius-md);
360 color: var(--gray-500);
361 margin-right: var(--margin-md);
362
363 > img {
364 @extend .image;
365 }
366 }
367
368 > .item-abbr {
369 @extend .abbr;
370 font-size: var(--text-lg);
371 }
372
373
374 > .item-name-desc {
375 @extend .nowrap;
376 display: flex;
377 flex-direction: column;
378 flex: 1 1 0%;
379 flex-shrink: 1;
380
381 > .item-name {
382 font-weight: 700;
383 }
384
385 > .item-desc {
386 font-size: var(--text-sm);
387 color: var(--gray-600);
388 font-weight: 500;
389 }
390 }
391
392 > .item-qty-rate {
393 display: flex;
394 flex-shrink: 0;
395 text-align: right;
396 margin-left: var(--margin-md);
397
398 > .item-qty {
399 display: flex;
400 align-items: center;
401 margin-right: var(--margin-lg);
402 font-weight: 700;
403 }
404
405 > .item-rate-amount {
406 display: flex;
407 flex-direction: column;
408 flex-shrink: 0;
409 text-align: right;
410
411 > .item-rate {
412 font-weight: 700;
413 }
414
415 > .item-amount {
416 font-size: var(--text-md);
417 font-weight: 600;
418 }
419 }
420 }
421
422 }
423 }
424
425 > .cart-totals-section {
426 display: flex;
427 flex-direction: column;
428 flex-shrink: 0;
429 width: 100%;
430 margin-top: var(--margin-md);
431
432 > .net-total-container {
433 display: flex;
434 align-items: center;
435 justify-content: space-between;
436 padding: var(--padding-sm);
437 font-weight: 500;
438 font-size: var(--text-md);
439 }
440
441 > .taxes-container {
442 display: none;
443 align-items: center;
444 justify-content: space-between;
445 padding: var(--padding-sm);
446 font-weight: 500;
447 font-size: var(--text-md);
448
449 > .tax-label {
450 display: flex;
451 align-items: center;
452
453 > .tax-desc {
454 margin-left: var(--margin-md);
455 }
456 }
457 }
458
459 > .grand-total-container {
460 display: flex;
461 align-items: center;
462 justify-content: space-between;
463 padding: var(--padding-sm);
464 font-weight: 700;
465 font-size: var(--text-lg);
466 }
467
468 > .checkout-btn {
469 @extend .primary-action;
470 background-color: var(--blue-200);
471 color: white;
472 }
Saqib Ansarifc3315a2020-11-11 22:59:10 +0530[diff] [blame^]473
474 > .edit-cart-btn {
475 @extend .primary-action;
476 display: none;
477 background-color: var(--gray-100);
478 font-weight: 500;
479 }
Saqib Ansaricc208832020-11-11 20:47:20 +0530[diff] [blame]480 }
481
482 > .numpad-section {
483 display: none;
484 flex-direction: column;
485 flex-shrink: 0;
486 margin-top: var(--margin-sm);
487 padding: var(--padding-sm);
488 padding-bottom: 0px;
489 width: 100%;
490
491 > .numpad-totals {
492 display: flex;
493 justify-content: space-between;
494 margin-bottom: var(--margin-md);
495 font-size: var(--text-md);
496 font-weight: 700;
497 }
498
499 > .numpad-container {
500 display: grid;
501 grid-template-columns: repeat(5, minmax(0, 1fr));
502 gap: var(--margin-md);
503 margin-bottom: var(--margin-md);
504
505 > .numpad-btn {
506 @extend .pointer-no-select;
507 border-radius: var(--border-radius-md);
508 display: flex;
509 align-items: center;
510 justify-content: center;
511 padding: var(--padding-md);
512 box-shadow: var(--shadow-sm);
513 }
514
515 > .col-span-2 {
516 grid-column: span 2 / span 2;
517 }
518
519 > .remove-btn {
520 font-weight: 700;
521 color: var(--red-500);
522 }
523 }
524
525 > .checkout-btn {
526 @extend .primary-action;
527 margin: 0px;
528 margin-bottom: var(--margin-sm);
529 background-color: var(--blue-200);
530 color: white;
531 }
532 }
533 }
Saqib Ansari210baaf2020-11-11 12:04:00 +0530[diff] [blame]534 }
535 }
536
537 .invoice-wrapper {
538 @extend .pointer-no-select;
539 display: flex;
540 justify-content: space-between;
541 border-radius: var(--border-radius-md);
542 padding: var(--padding-sm);
543
544 &:hover {
545 background-color: var(--gray-50);
546 }
547
548 > .invoice-name-date {
549 display: flex;
550 flex-direction: column;
Saqib Ansarifc3315a2020-11-11 22:59:10 +0530[diff] [blame^]551 justify-content: flex-end;
Saqib Ansari210baaf2020-11-11 12:04:00 +0530[diff] [blame]552
553 > .invoice-name {
554 @extend .nowrap;
555 font-size: var(--text-md);
556 font-weight: 700;
557 margin-bottom: var(--margin-xs);
558 }
559
560 > .invoice-date {
561 @extend .nowrap;
562 font-size: var(--text-sm);
563 display: flex;
564 align-items: center;
565 }
566 }
567
568 > .invoice-total-status {
569 display: flex;
570 flex-direction: column;
571 font-weight: 500;
572 font-size: var(--text-sm);
573 margin-left: var(--margin-md);
574
575 > .invoice-total {
576 margin-bottom: var(--margin-xs);
577 font-size: var(--text-base);
578 font-weight: 700;
579 text-align: right;
580 }
581
582 > .invoice-status {
583 display: flex;
584 align-items: center;
585 justify-content: right;
586 }
587 }
588 }
Saqib Ansarifc3315a2020-11-11 22:59:10 +0530[diff] [blame^]589
590 > .item-details-container {
591 @extend .pos-card;
592 grid-column: span 4 / span 4;
593 display: none;
594 flex-direction: column;
595 padding: var(--padding-lg);
596 padding-top: var(--padding-md);
597
598 > .item-details-header {
599 display: flex;
600 justify-content: space-between;
601 margin-bottom: var(--margin-md);
602
603 > .close-btn {
604 @extend .pointer-no-select;
605 }
606 }
607
608 > .item-display {
609 display: flex;
610
611 > .item-name-desc-price {
612 flex: 1 1 0%;
613 display: flex;
614 flex-direction: column;
615 justify-content: flex-end;
616 margin-right: var(--margin-md);
617
618 > .item-name {
619 font-size: var(--text-3xl);
620 font-weight: 600;
621 }
622
623 > .item-desc {
624 font-size: var(--text-md);
625 font-weight: 500;
626 }
627
628 > .item-price {
629 font-size: var(--text-3xl);
630 font-weight: 700;
631 }
632 }
633
634 > .item-image {
635 display: flex;
636 align-items: center;
637 justify-content: center;
638 width: 11rem;
639 height: 11rem;
640 border-radius: var(--border-radius-md);
641 margin-left: var(--margin-md);
642 color: var(--gray-500);
643
644 > img {
645 @extend .image;
646 }
647
648 > .item-abbr {
649 @extend .abbr;
650 display: flex;
651 align-items: center;
652 justify-content: center;
653 border-radius: var(--border-radius-md);
654 font-size: var(--text-3xl);
655 width: 100%;
656 height: 100%;
657 }
658 }
659 }
660
661 > .discount-section {
662 display: flex;
663 align-items: center;
664 margin-bottom: var(--margin-sm);
665
666 > .item-rate {
667 font-weight: 500;
668 margin-right: var(--margin-sm);
669 text-decoration: line-through;
670 }
671
672 > .item-discount {
673 padding: 3px var(--padding-sm);
674 border-radius: var(--border-radius-sm);
675 background-color: var(--green-100);
676 color: var(--green-700);
677 font-size: var(--text-sm);
678 font-weight: 700;
679 }
680 }
681
682 > .form-container {
683 display: grid;
684 grid-template-columns: repeat(2, minmax(0, 1fr));
685 column-gap: var(--padding-xs);
686
687 > .auto-fetch-btn {
688 @extend .pointer-no-select;
689 margin: auto var(--margin-xs);
690 }
691 }
692 }
Saqib Ansari0fb2e022020-11-09 23:51:24 +0530[diff] [blame]693}