@inchurch/matcha-theme 21.3.3 → 22.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (93) hide show
  1. package/abstracts/_colors.scss +236 -229
  2. package/abstracts/_elevation.scss +108 -108
  3. package/abstracts/_functions.scss +321 -321
  4. package/abstracts/_media-breakpoint.scss +26 -26
  5. package/abstracts/_theme-api.scss +219 -219
  6. package/abstracts/_typography.scss +128 -128
  7. package/base/_reset.scss +445 -432
  8. package/components/app-page-header.scss +260 -260
  9. package/components/matcha-accordion.scss +293 -293
  10. package/components/matcha-audio-player.scss +31 -31
  11. package/components/matcha-autocomplete.scss +145 -145
  12. package/components/matcha-avatar.scss +440 -301
  13. package/components/matcha-badge.scss +120 -120
  14. package/components/matcha-breadcrumb.scss +231 -231
  15. package/components/matcha-button-toggle.scss +384 -384
  16. package/components/matcha-buttons.scss +913 -913
  17. package/components/matcha-calendar.scss +218 -218
  18. package/components/matcha-cards.scss +230 -230
  19. package/components/matcha-chart-card.scss +53 -53
  20. package/components/matcha-checkbox.scss +255 -255
  21. package/components/matcha-chip.scss +292 -292
  22. package/components/matcha-color-pick.scss +34 -34
  23. package/components/matcha-command-palette.scss +316 -316
  24. package/components/matcha-crop.scss +406 -406
  25. package/components/matcha-date.scss +81 -81
  26. package/components/matcha-divider.scss +100 -100
  27. package/components/matcha-draggable.scss +23 -23
  28. package/components/matcha-drawer.scss +376 -376
  29. package/components/matcha-drop-image.scss +14 -14
  30. package/components/matcha-drop-list.scss +430 -430
  31. package/components/matcha-emoji.scss +69 -69
  32. package/components/matcha-empty-state.scss +230 -230
  33. package/components/matcha-file-uploader.scss +471 -471
  34. package/components/matcha-flag.scss +103 -103
  35. package/components/matcha-footer.scss +91 -91
  36. package/components/matcha-form-field.scss +606 -606
  37. package/components/matcha-form-section.scss +100 -100
  38. package/components/matcha-header.scss +135 -135
  39. package/components/matcha-highlight.scss +164 -164
  40. package/components/matcha-hint-text.scss +90 -90
  41. package/components/matcha-horizontal-tree.scss +316 -316
  42. package/components/matcha-icon.scss +98 -98
  43. package/components/matcha-image.scss +61 -61
  44. package/components/matcha-list.scss +211 -211
  45. package/components/matcha-menu.scss +99 -99
  46. package/components/matcha-modal.scss +210 -210
  47. package/components/matcha-nav.scss +581 -581
  48. package/components/matcha-notification.scss +413 -413
  49. package/components/matcha-option.scss +170 -170
  50. package/components/matcha-page-builder.scss +4196 -4196
  51. package/components/matcha-paginator.scss +689 -689
  52. package/components/matcha-panel.scss +194 -194
  53. package/components/matcha-profile-card.scss +50 -50
  54. package/components/matcha-progress-bar.scss +313 -313
  55. package/components/matcha-radio.scss +320 -320
  56. package/components/matcha-ripple.scss +7 -7
  57. package/components/matcha-scrollbar.scss +33 -33
  58. package/components/matcha-scrollbox-shadow.scss +120 -120
  59. package/components/matcha-section.scss +102 -102
  60. package/components/matcha-select-multiple.scss +56 -56
  61. package/components/matcha-select.scss +667 -667
  62. package/components/matcha-skeleton.scss +155 -155
  63. package/components/matcha-slide-toggle.scss +369 -369
  64. package/components/matcha-slider.scss +285 -285
  65. package/components/matcha-snack-bar.scss +259 -259
  66. package/components/matcha-spin.scss +164 -164
  67. package/components/matcha-spinner.scss +97 -97
  68. package/components/matcha-status-pill.scss +38 -18
  69. package/components/matcha-stepper.scss +376 -376
  70. package/components/matcha-table-cell.scss +74 -41
  71. package/components/matcha-table.scss +579 -578
  72. package/components/matcha-tabs.scss +600 -600
  73. package/components/matcha-text-editor.scss +105 -105
  74. package/components/matcha-time.scss +33 -33
  75. package/components/matcha-timepicker.scss +13 -13
  76. package/components/matcha-toolbar.scss +359 -359
  77. package/components/matcha-tooltip.scss +224 -224
  78. package/components/matcha-tree-view.scss +257 -212
  79. package/layout/matcha-page-layout.scss +778 -778
  80. package/main.scss +329 -329
  81. package/package.json +1 -1
  82. package/tokens/_animations-tokens.scss +37 -37
  83. package/tokens/_breakpoints-tokens.scss +35 -35
  84. package/tokens/_color-tokens.scss +274 -261
  85. package/tokens/_elevation-tokens.scss +33 -33
  86. package/tokens/_emit-tokens.scss +324 -324
  87. package/tokens/_material-palette.scss +1149 -1149
  88. package/tokens/_primitives.scss +98 -98
  89. package/tokens/_semantic-aliases.scss +120 -120
  90. package/tokens/_spacing-tokens.scss +94 -94
  91. package/tokens/_static-tokens.scss +137 -137
  92. package/tokens/_typography-tokens.scss +65 -65
  93. package/vendors/charts.scss +90 -90
package/layout/matcha-page-layout.scss CHANGED
@@ -1,778 +1,778 @@
1
- @use "../abstracts/media-breakpoint" as *;
2
- @use "../abstracts/elevation" as *;
3
- // -----------------------------------------------------------------------------------------------------
4
- // @Page Layouts Theming
5
- // -----------------------------------------------------------------------------------------------------
6
- @mixin matcha-page-layout-theme($theme) {
7
- .page-layout {
8
- // Theme
9
- // Style
10
- position: relative;
11
- overflow: hidden;
12
-
13
- &.carded {
14
- // Theme
15
- // Style
16
- display: flex;
17
- flex-direction: column;
18
- flex: 1 0 auto;
19
- width: 100%;
20
- min-width: 100%;
21
- // Top bg
22
- .top-bg {
23
- position: absolute;
24
- z-index: 1;
25
- top: 0;
26
- right: 0;
27
- left: 0;
28
- height: 192px;
29
- }
30
-
31
- // Fullwidth
32
- &.fullwidth {
33
- .center {
34
- // Theme
35
- // Style
36
- display: flex;
37
- flex-direction: column;
38
- flex: 1 0 auto;
39
- position: relative;
40
- z-index: 2;
41
- // padding: 0 16px;
42
- width: 100%;
43
- min-width: 0;
44
- max-width: 100%;
45
- height: 100%;
46
- max-height: 100%;
47
-
48
- .header {
49
- // Theme
50
- // Style
51
- height: calc(144px - 64px) !important;
52
- min-height: calc(144px - 64px) !important;
53
- max-height: calc(144px - 64px) !important;
54
- margin: 24px 0 32px 0;
55
-
56
- .title {
57
- margin: 0px 24px;
58
- span {
59
- &[class^="i-matcha-"],
60
- &[class*=" i-matcha-"] {
61
- font-size: 32px;
62
- line-height: 32px;
63
- width: 32px;
64
- height: 32px;
65
- margin: 0px 16px 0 0px;
66
- }
67
- }
68
- }
69
-
70
- .header-options {
71
- align-content: center;
72
- display: flex;
73
- flex-wrap: wrap;
74
- align-items: stretch;
75
- flex-direction: row;
76
- justify-content: space-between;
77
- width: 100%;
78
- padding: 16px 24px;
79
- border-radius: 8px;
80
- background: var(--matcha-color-surface);
81
- @include elevation(1);
82
- button,
83
- form {
84
- &:nth-child(n):not(.float-btn-new):not(.btn-search-filter) {
85
- margin: 0 0 0 16px;
86
- }
87
- &:first-child {
88
- margin: 0;
89
- }
90
- }
91
- .title {
92
- margin: 0;
93
- white-space: nowrap;
94
- overflow: hidden;
95
- text-overflow: ellipsis;
96
- display: flex;
97
- align-items: center;
98
- }
99
- .useful-options {
100
- display: flex;
101
- margin: 0;
102
- flex-direction: row;
103
- justify-content: flex-end;
104
-
105
- .more-options {
106
- display: none;
107
- }
108
-
109
- form {
110
- min-width: 192px;
111
- width: 100%;
112
- height: 48px;
113
- margin: -4px 0 0 0;
114
- .mat-form-field-outline-end {
115
- border-radius: 0 0 0 0;
116
- }
117
- &.single-field {
118
- min-width: 192px;
119
- width: 100%;
120
- .mat-form-field-outline-end {
121
- border-radius: 0 8px 8px 0;
122
- }
123
- }
124
- }
125
- .btn-search-filter {
126
- margin: 0 0 0 -2px;
127
- border-radius: 0 8px 8px 0;
128
- }
129
- }
130
- .float-btn-new {
131
- position: fixed;
132
- z-index: 9999;
133
- top: calc(100vh - 72px);
134
- left: calc(100vw - 72px);
135
- }
136
- }
137
- }
138
-
139
- > .content-card {
140
- // Theme
141
- overflow: initial;
142
- // background: map-get($background, background);
143
- border-radius: 8px;
144
- @include elevation(1);
145
- // Style
146
- display: flex;
147
- flex-direction: column;
148
- flex: 1 0 auto;
149
- overflow: hidden;
150
-
151
- &.card-flat {
152
- @include elevation(0);
153
- }
154
- &.bg-card-view {
155
- // Theme
156
- @include elevation(0);
157
- // Style
158
- margin: 0 -16px;
159
-
160
- .content {
161
- // Theme
162
- @include elevation(0);
163
- // Style
164
- background: transparent;
165
- }
166
- }
167
- &.bg-list-view {
168
- // Theme
169
- @include elevation(0);
170
- // Style
171
- .content {
172
- // Theme
173
- @include elevation(0);
174
- // Style
175
- background: transparent;
176
- }
177
- }
178
- > .toolbar {
179
- // Theme
180
- border-bottom-color: var(--matcha-color-disabled);
181
- // Style
182
- display: flex;
183
- justify-content: flex-start;
184
- align-items: center;
185
- height: 64px;
186
- min-height: 64px;
187
- max-height: 64px;
188
- }
189
-
190
- > .content {
191
- flex: 1 0 auto;
192
- border-radius: 8px;
193
- // overflow: hidden;
194
- }
195
- }
196
- }
197
-
198
- // Tabbed
199
- &.tabbed {
200
- > .center {
201
- width: 100%;
202
- min-width: 0;
203
-
204
- > .header {
205
- flex: 1 1 auto;
206
- }
207
-
208
- > .content-card {
209
- > .content {
210
- display: flex;
211
-
212
- > .mat-tab-group {
213
- overflow: hidden;
214
- width: 100%;
215
-
216
- .mat-tab-header {
217
- .mat-tab-label {
218
- height: 64px;
219
- }
220
- }
221
-
222
- .mat-tab-body {
223
- overflow: hidden;
224
-
225
- .mat-tab-body-content {
226
- overflow: hidden;
227
-
228
- .tab-content {
229
- position: relative;
230
- width: 100%;
231
- height: 100%;
232
- }
233
- }
234
- }
235
- }
236
- }
237
- }
238
- }
239
- }
240
-
241
- // Inner scroll
242
- &.inner-scroll {
243
- flex: 1 1 auto;
244
-
245
- > .center {
246
- flex: 1 1 auto;
247
-
248
- > .content-card {
249
- flex: 1 1 auto;
250
-
251
- > .content {
252
- flex: 1 1 auto;
253
- overflow: auto;
254
- -webkit-overflow-scrolling: touch;
255
- }
256
- }
257
- }
258
-
259
- // Tabbed
260
- &.tabbed {
261
- > .center {
262
- > .content-card {
263
- > .content {
264
- > .mat-tab-group {
265
- .mat-tab-body {
266
- .mat-tab-body-content {
267
- .tab-content {
268
- overflow: auto;
269
- -webkit-overflow-scrolling: touch;
270
- }
271
- }
272
- }
273
- }
274
- }
275
- }
276
- }
277
- }
278
- }
279
- }
280
-
281
- // Left / Right sidebar
282
- &.left-sidebar,
283
- &.right-sidebar {
284
- flex-direction: row;
285
-
286
- // Sidebar
287
- .sidebar {
288
- @include elevation(7);
289
-
290
- display: flex;
291
- flex-direction: column;
292
- flex: 1 1 auto;
293
- width: 240px;
294
- min-width: 240px;
295
- max-width: 240px;
296
- height: auto;
297
- overflow: hidden;
298
-
299
- &.locked-open {
300
- background: none;
301
- box-shadow: none;
302
-
303
- + .center {
304
- z-index: 1001;
305
- }
306
-
307
- &.left-positioned {
308
- + .center {
309
- margin-left: 0;
310
- }
311
- }
312
-
313
- &.right-positioned {
314
- + .center {
315
- margin-right: 0;
316
- }
317
- }
318
- }
319
-
320
- .header {
321
- height: 192px;
322
- min-height: 192px;
323
- max-height: 192px;
324
- }
325
-
326
- .content {
327
- background: transparent;
328
- flex: 1 1 auto;
329
- }
330
- }
331
- // Center
332
- .center {
333
- .content-card {
334
- @include elevation(1);
335
- background: var(--matcha-color-surface);
336
- border-radius: 8px;
337
- > .toolbar {
338
- border-bottom-color: var(--matcha-color-disabled);
339
- }
340
- }
341
-
342
- display: flex;
343
- flex-direction: column;
344
- flex: 1 1 auto;
345
- position: relative;
346
- z-index: 3;
347
- margin-left: 32px;
348
- margin-right: 32px;
349
- width: 100%;
350
- min-width: 0;
351
-
352
- .header {
353
- display: flex;
354
- height: 192px;
355
- min-height: 192px;
356
- max-height: 192px;
357
- }
358
-
359
- .content-card {
360
- display: flex;
361
- flex-direction: column;
362
- flex: 1 1 auto;
363
- overflow: hidden;
364
-
365
- .toolbar {
366
- display: flex;
367
- justify-content: flex-start;
368
- align-items: center;
369
- flex: 1 1 auto;
370
- border-bottom: 1px solid;
371
- height: 64px;
372
- min-height: 64px;
373
- max-height: 64px;
374
-
375
- .sidebar-toggle {
376
- margin: 0 8px 0 0 !important;
377
- padding: 0 !important;
378
- border-radius: 0;
379
- }
380
- }
381
-
382
- .content {
383
- flex: 1 1 auto;
384
- }
385
- }
386
- }
387
- // Tabbed
388
- &.tabbed {
389
- .center {
390
- width: calc(100% - 32px);
391
- min-width: 0;
392
-
393
- .header {
394
- flex: 1 1 auto;
395
- }
396
-
397
- .content-card {
398
- .content {
399
- display: flex;
400
-
401
- .mat-tab-group {
402
- overflow: hidden;
403
-
404
- .mat-tab-header {
405
- .mat-tab-label {
406
- height: 64px;
407
- }
408
- }
409
-
410
- .mat-tab-body {
411
- overflow: hidden;
412
-
413
- .mat-tab-body-content {
414
- overflow: hidden;
415
-
416
- .tab-content {
417
- position: relative;
418
- width: 100%;
419
- height: 100%;
420
- }
421
- }
422
- }
423
- }
424
- }
425
- }
426
- @include media-breakpoint("lt-lg") {
427
- width: calc(100% - 64px);
428
- }
429
- }
430
- }
431
- // Inner scroll
432
- &.inner-scroll {
433
- flex: 1 1 auto;
434
-
435
- .sidebar {
436
- .content {
437
- overflow: auto;
438
- -webkit-overflow-scrolling: touch;
439
- }
440
- }
441
-
442
- .center {
443
- flex: 1 1 auto;
444
-
445
- > .content-card {
446
- flex: 1 1 auto;
447
-
448
- > .content {
449
- flex: 1 1 auto;
450
- overflow: auto;
451
- -webkit-overflow-scrolling: touch;
452
- }
453
- }
454
- }
455
-
456
- // Tabbed
457
- &.tabbed {
458
- .center {
459
- .content-card {
460
- .content {
461
- .mat-tab-group {
462
- .mat-tab-body {
463
- .mat-tab-body-content {
464
- .tab-content {
465
- overflow: auto;
466
- -webkit-overflow-scrolling: touch;
467
- }
468
- }
469
- }
470
- }
471
- }
472
- }
473
- }
474
- }
475
- }
476
- }
477
-
478
- // Right sidebar specific
479
- &.right-sidebar {
480
- > .sidebar {
481
- order: 2;
482
- }
483
-
484
- > .center {
485
- order: 1;
486
- }
487
- }
488
- }
489
-
490
- // Simple layout
491
- &.simple {
492
- display: flex;
493
- flex-direction: column;
494
- flex: 1 0 auto;
495
- width: 100%;
496
- min-width: 100%;
497
-
498
- // Fullwidth
499
- &.fullwidth {
500
- > .content {
501
- flex: 1 1 auto;
502
- min-width: 0;
503
- }
504
- }
505
-
506
- &.fullwidth,
507
- &.inner-sidebar {
508
- > .header {
509
- height: 120px;
510
- min-height: 120px;
511
- max-height: 120px;
512
- }
513
- }
514
-
515
- // Left / Right sidebar
516
- &.left-sidebar,
517
- &.right-sidebar {
518
- flex-direction: row;
519
-
520
- // Center
521
- > .center {
522
- // Theme
523
- @include elevation(1);
524
-
525
- // Style
526
- position: relative;
527
- display: flex;
528
- flex-direction: column;
529
- flex: 1 1 auto;
530
- z-index: 3;
531
- min-width: 0;
532
- width: 100%;
533
-
534
- > .header {
535
- height: 120px;
536
- min-height: 120px;
537
- max-height: 120px;
538
- }
539
-
540
- > .content {
541
- // Theme
542
- background: var(--matcha-color-surface);
543
-
544
- // Style
545
- flex: 1 0 auto;
546
- }
547
- }
548
-
549
- // Sidebar
550
- > .sidebar {
551
- // Theme
552
- @include elevation(7);
553
-
554
- // Style
555
- width: 240px;
556
- min-width: 240px;
557
- max-width: 240px;
558
- overflow: hidden;
559
-
560
- &.locked-open {
561
- background: none;
562
- box-shadow: none;
563
-
564
- + .center {
565
- z-index: 1001;
566
- }
567
-
568
- &.left-positioned {
569
- + .center {
570
- margin-left: 0;
571
- }
572
- }
573
-
574
- &.right-positioned {
575
- + .center {
576
- margin-right: 0;
577
- }
578
- }
579
- }
580
-
581
- .content {
582
- flex: 1 1 auto;
583
- }
584
- }
585
-
586
- // Inner sidebar
587
- &.inner-sidebar {
588
- > .content {
589
- > .center {
590
- > .content {
591
- background: var(--matcha-color-surface);
592
- @include elevation(1);
593
- }
594
- }
595
- }
596
-
597
- flex-direction: column;
598
- overflow: hidden;
599
- height: 100%;
600
-
601
- > .content {
602
- display: flex;
603
- min-height: 0;
604
-
605
- > .sidebar {
606
- &.locked-open {
607
- background: none;
608
- box-shadow: none;
609
- }
610
-
611
- .content {
612
- overflow: auto;
613
- -webkit-overflow-scrolling: touch;
614
- }
615
- }
616
-
617
- > .center {
618
- flex: 1 1 auto;
619
- overflow: auto;
620
- -webkit-overflow-scrolling: touch;
621
-
622
- > .content {
623
- border-radius: 8px;
624
- }
625
- }
626
- }
627
- }
628
-
629
- // Inner scroll
630
- &.inner-scroll {
631
- flex: 1 1 auto;
632
-
633
- > .sidebar {
634
- .content {
635
- overflow: auto;
636
- -webkit-overflow-scrolling: touch;
637
- }
638
- }
639
-
640
- > .center {
641
- flex: 1 1 auto;
642
- overflow: auto;
643
- -webkit-overflow-scrolling: touch;
644
- }
645
- }
646
- }
647
-
648
- // Right sidebar specific
649
- &.right-sidebar {
650
- > .sidebar {
651
- order: 2;
652
- }
653
-
654
- > .center {
655
- order: 1;
656
- }
657
-
658
- // Inner sidebar
659
- &.inner-sidebar {
660
- > .content {
661
- > .sidebar {
662
- order: 2;
663
- }
664
-
665
- > .center {
666
- order: 1;
667
- }
668
- }
669
- }
670
- }
671
-
672
- // Tabbed
673
- &.tabbed {
674
- min-height: 100%;
675
-
676
- > .header {
677
- height: 120px;
678
- min-height: 120px;
679
- max-height: 120px;
680
- }
681
-
682
- > .content {
683
- > .mat-tab-group {
684
- .mat-tab-labels {
685
- padding: 0 24px;
686
- }
687
- }
688
- }
689
- }
690
- }
691
-
692
- // Blank layout
693
- &.blank {
694
- width: 100%;
695
- min-height: 100%;
696
- }
697
- }
698
-
699
- // Small devices (Phones and Gadget, 0px and up < 600px )
700
- @media screen and (max-width: 639px) {
701
- .page-layout {
702
- // Smaller margins
703
- &.carded {
704
- &.fullwidth {
705
- > .center {
706
- // padding: 0 0 0 0;
707
- }
708
- }
709
-
710
- &.left-sidebar,
711
- &.right-sidebar {
712
- > .center {
713
- margin: 0 24px;
714
- }
715
- }
716
- }
717
- // End - Smaller margins
718
- }
719
- }
720
-
721
- // Medium devices (landscapes and tablets, 600px and up < 1024px )
722
- @media screen and (min-width: 640px) {
723
- }
724
-
725
- // Large devices (tablets and small monitors, 1024px and up < 1440px)
726
- @media screen and (min-width: 1024px) {
727
- .page-layout {
728
- // Carded layout
729
- &.carded {
730
- // Fullwidth
731
- &.fullwidth {
732
- .center {
733
- // padding: 0 16px 0 0;
734
- .header {
735
- .header-options {
736
- flex-wrap: nowrap;
737
- align-items: center;
738
-
739
- .title {
740
- width: 100%;
741
- margin: 0 16px 0 0;
742
- line-height: 48px;
743
- white-space: nowrap;
744
- overflow: hidden;
745
- }
746
-
747
- .useful-options {
748
- width: 100%;
749
- justify-content: end;
750
-
751
- .more-options {
752
- display: flex;
753
- margin: 0 0 0 0;
754
- }
755
- form {
756
- height: 48px;
757
- margin: -4px 0 0 16px;
758
- max-width: 211px;
759
- }
760
- }
761
- .float-btn-new {
762
- display: none;
763
- }
764
- }
765
- }
766
- }
767
- }
768
- }
769
- }
770
- }
771
- // X-Large devices (big desktops, 1440px and up < 1920)
772
- @media screen and (min-width: 1280px) {
773
- }
774
-
775
- // XX-Large devices (larger desktops, 1920px and up)
776
- @media screen and (min-width: 1536px) {
777
- }
778
- }
1
+ @use "../abstracts/media-breakpoint" as *;
2
+ @use "../abstracts/elevation" as *;
3
+ // -----------------------------------------------------------------------------------------------------
4
+ // @Page Layouts Theming
5
+ // -----------------------------------------------------------------------------------------------------
6
+ @mixin matcha-page-layout-theme($theme) {
7
+ .page-layout {
8
+ // Theme
9
+ // Style
10
+ position: relative;
11
+ overflow: hidden;
12
+
13
+ &.carded {
14
+ // Theme
15
+ // Style
16
+ display: flex;
17
+ flex-direction: column;
18
+ flex: 1 0 auto;
19
+ width: 100%;
20
+ min-width: 100%;
21
+ // Top bg
22
+ .top-bg {
23
+ position: absolute;
24
+ z-index: 1;
25
+ top: 0;
26
+ right: 0;
27
+ left: 0;
28
+ height: 192px;
29
+ }
30
+
31
+ // Fullwidth
32
+ &.fullwidth {
33
+ .center {
34
+ // Theme
35
+ // Style
36
+ display: flex;
37
+ flex-direction: column;
38
+ flex: 1 0 auto;
39
+ position: relative;
40
+ z-index: 2;
41
+ // padding: 0 16px;
42
+ width: 100%;
43
+ min-width: 0;
44
+ max-width: 100%;
45
+ height: 100%;
46
+ max-height: 100%;
47
+
48
+ .header {
49
+ // Theme
50
+ // Style
51
+ height: calc(144px - 64px) !important;
52
+ min-height: calc(144px - 64px) !important;
53
+ max-height: calc(144px - 64px) !important;
54
+ margin: 24px 0 32px 0;
55
+
56
+ .title {
57
+ margin: 0px 24px;
58
+ span {
59
+ &[class^="i-matcha-"],
60
+ &[class*=" i-matcha-"] {
61
+ font-size: 32px;
62
+ line-height: 32px;
63
+ width: 32px;
64
+ height: 32px;
65
+ margin: 0px 16px 0 0px;
66
+ }
67
+ }
68
+ }
69
+
70
+ .header-options {
71
+ align-content: center;
72
+ display: flex;
73
+ flex-wrap: wrap;
74
+ align-items: stretch;
75
+ flex-direction: row;
76
+ justify-content: space-between;
77
+ width: 100%;
78
+ padding: 16px 24px;
79
+ border-radius: 8px;
80
+ background: var(--matcha-color-surface);
81
+ @include elevation(1);
82
+ button,
83
+ form {
84
+ &:nth-child(n):not(.float-btn-new):not(.btn-search-filter) {
85
+ margin: 0 0 0 16px;
86
+ }
87
+ &:first-child {
88
+ margin: 0;
89
+ }
90
+ }
91
+ .title {
92
+ margin: 0;
93
+ white-space: nowrap;
94
+ overflow: hidden;
95
+ text-overflow: ellipsis;
96
+ display: flex;
97
+ align-items: center;
98
+ }
99
+ .useful-options {
100
+ display: flex;
101
+ margin: 0;
102
+ flex-direction: row;
103
+ justify-content: flex-end;
104
+
105
+ .more-options {
106
+ display: none;
107
+ }
108
+
109
+ form {
110
+ min-width: 192px;
111
+ width: 100%;
112
+ height: 48px;
113
+ margin: -4px 0 0 0;
114
+ .mat-form-field-outline-end {
115
+ border-radius: 0 0 0 0;
116
+ }
117
+ &.single-field {
118
+ min-width: 192px;
119
+ width: 100%;
120
+ .mat-form-field-outline-end {
121
+ border-radius: 0 8px 8px 0;
122
+ }
123
+ }
124
+ }
125
+ .btn-search-filter {
126
+ margin: 0 0 0 -2px;
127
+ border-radius: 0 8px 8px 0;
128
+ }
129
+ }
130
+ .float-btn-new {
131
+ position: fixed;
132
+ z-index: 9999;
133
+ top: calc(100vh - 72px);
134
+ left: calc(100vw - 72px);
135
+ }
136
+ }
137
+ }
138
+
139
+ > .content-card {
140
+ // Theme
141
+ overflow: initial;
142
+ // background: map-get($background, background);
143
+ border-radius: 8px;
144
+ @include elevation(1);
145
+ // Style
146
+ display: flex;
147
+ flex-direction: column;
148
+ flex: 1 0 auto;
149
+ overflow: hidden;
150
+
151
+ &.card-flat {
152
+ @include elevation(0);
153
+ }
154
+ &.bg-card-view {
155
+ // Theme
156
+ @include elevation(0);
157
+ // Style
158
+ margin: 0 -16px;
159
+
160
+ .content {
161
+ // Theme
162
+ @include elevation(0);
163
+ // Style
164
+ background: transparent;
165
+ }
166
+ }
167
+ &.bg-list-view {
168
+ // Theme
169
+ @include elevation(0);
170
+ // Style
171
+ .content {
172
+ // Theme
173
+ @include elevation(0);
174
+ // Style
175
+ background: transparent;
176
+ }
177
+ }
178
+ > .toolbar {
179
+ // Theme
180
+ border-bottom-color: var(--matcha-color-disabled);
181
+ // Style
182
+ display: flex;
183
+ justify-content: flex-start;
184
+ align-items: center;
185
+ height: 64px;
186
+ min-height: 64px;
187
+ max-height: 64px;
188
+ }
189
+
190
+ > .content {
191
+ flex: 1 0 auto;
192
+ border-radius: 8px;
193
+ // overflow: hidden;
194
+ }
195
+ }
196
+ }
197
+
198
+ // Tabbed
199
+ &.tabbed {
200
+ > .center {
201
+ width: 100%;
202
+ min-width: 0;
203
+
204
+ > .header {
205
+ flex: 1 1 auto;
206
+ }
207
+
208
+ > .content-card {
209
+ > .content {
210
+ display: flex;
211
+
212
+ > .mat-tab-group {
213
+ overflow: hidden;
214
+ width: 100%;
215
+
216
+ .mat-tab-header {
217
+ .mat-tab-label {
218
+ height: 64px;
219
+ }
220
+ }
221
+
222
+ .mat-tab-body {
223
+ overflow: hidden;
224
+
225
+ .mat-tab-body-content {
226
+ overflow: hidden;
227
+
228
+ .tab-content {
229
+ position: relative;
230
+ width: 100%;
231
+ height: 100%;
232
+ }
233
+ }
234
+ }
235
+ }
236
+ }
237
+ }
238
+ }
239
+ }
240
+
241
+ // Inner scroll
242
+ &.inner-scroll {
243
+ flex: 1 1 auto;
244
+
245
+ > .center {
246
+ flex: 1 1 auto;
247
+
248
+ > .content-card {
249
+ flex: 1 1 auto;
250
+
251
+ > .content {
252
+ flex: 1 1 auto;
253
+ overflow: auto;
254
+ -webkit-overflow-scrolling: touch;
255
+ }
256
+ }
257
+ }
258
+
259
+ // Tabbed
260
+ &.tabbed {
261
+ > .center {
262
+ > .content-card {
263
+ > .content {
264
+ > .mat-tab-group {
265
+ .mat-tab-body {
266
+ .mat-tab-body-content {
267
+ .tab-content {
268
+ overflow: auto;
269
+ -webkit-overflow-scrolling: touch;
270
+ }
271
+ }
272
+ }
273
+ }
274
+ }
275
+ }
276
+ }
277
+ }
278
+ }
279
+ }
280
+
281
+ // Left / Right sidebar
282
+ &.left-sidebar,
283
+ &.right-sidebar {
284
+ flex-direction: row;
285
+
286
+ // Sidebar
287
+ .sidebar {
288
+ @include elevation(7);
289
+
290
+ display: flex;
291
+ flex-direction: column;
292
+ flex: 1 1 auto;
293
+ width: 240px;
294
+ min-width: 240px;
295
+ max-width: 240px;
296
+ height: auto;
297
+ overflow: hidden;
298
+
299
+ &.locked-open {
300
+ background: none;
301
+ box-shadow: none;
302
+
303
+ + .center {
304
+ z-index: 1001;
305
+ }
306
+
307
+ &.left-positioned {
308
+ + .center {
309
+ margin-left: 0;
310
+ }
311
+ }
312
+
313
+ &.right-positioned {
314
+ + .center {
315
+ margin-right: 0;
316
+ }
317
+ }
318
+ }
319
+
320
+ .header {
321
+ height: 192px;
322
+ min-height: 192px;
323
+ max-height: 192px;
324
+ }
325
+
326
+ .content {
327
+ background: transparent;
328
+ flex: 1 1 auto;
329
+ }
330
+ }
331
+ // Center
332
+ .center {
333
+ .content-card {
334
+ @include elevation(1);
335
+ background: var(--matcha-color-surface);
336
+ border-radius: 8px;
337
+ > .toolbar {
338
+ border-bottom-color: var(--matcha-color-disabled);
339
+ }
340
+ }
341
+
342
+ display: flex;
343
+ flex-direction: column;
344
+ flex: 1 1 auto;
345
+ position: relative;
346
+ z-index: 3;
347
+ margin-left: 32px;
348
+ margin-right: 32px;
349
+ width: 100%;
350
+ min-width: 0;
351
+
352
+ .header {
353
+ display: flex;
354
+ height: 192px;
355
+ min-height: 192px;
356
+ max-height: 192px;
357
+ }
358
+
359
+ .content-card {
360
+ display: flex;
361
+ flex-direction: column;
362
+ flex: 1 1 auto;
363
+ overflow: hidden;
364
+
365
+ .toolbar {
366
+ display: flex;
367
+ justify-content: flex-start;
368
+ align-items: center;
369
+ flex: 1 1 auto;
370
+ border-bottom: 1px solid;
371
+ height: 64px;
372
+ min-height: 64px;
373
+ max-height: 64px;
374
+
375
+ .sidebar-toggle {
376
+ margin: 0 8px 0 0 !important;
377
+ padding: 0 !important;
378
+ border-radius: 0;
379
+ }
380
+ }
381
+
382
+ .content {
383
+ flex: 1 1 auto;
384
+ }
385
+ }
386
+ }
387
+ // Tabbed
388
+ &.tabbed {
389
+ .center {
390
+ width: calc(100% - 32px);
391
+ min-width: 0;
392
+
393
+ .header {
394
+ flex: 1 1 auto;
395
+ }
396
+
397
+ .content-card {
398
+ .content {
399
+ display: flex;
400
+
401
+ .mat-tab-group {
402
+ overflow: hidden;
403
+
404
+ .mat-tab-header {
405
+ .mat-tab-label {
406
+ height: 64px;
407
+ }
408
+ }
409
+
410
+ .mat-tab-body {
411
+ overflow: hidden;
412
+
413
+ .mat-tab-body-content {
414
+ overflow: hidden;
415
+
416
+ .tab-content {
417
+ position: relative;
418
+ width: 100%;
419
+ height: 100%;
420
+ }
421
+ }
422
+ }
423
+ }
424
+ }
425
+ }
426
+ @include media-breakpoint("lt-lg") {
427
+ width: calc(100% - 64px);
428
+ }
429
+ }
430
+ }
431
+ // Inner scroll
432
+ &.inner-scroll {
433
+ flex: 1 1 auto;
434
+
435
+ .sidebar {
436
+ .content {
437
+ overflow: auto;
438
+ -webkit-overflow-scrolling: touch;
439
+ }
440
+ }
441
+
442
+ .center {
443
+ flex: 1 1 auto;
444
+
445
+ > .content-card {
446
+ flex: 1 1 auto;
447
+
448
+ > .content {
449
+ flex: 1 1 auto;
450
+ overflow: auto;
451
+ -webkit-overflow-scrolling: touch;
452
+ }
453
+ }
454
+ }
455
+
456
+ // Tabbed
457
+ &.tabbed {
458
+ .center {
459
+ .content-card {
460
+ .content {
461
+ .mat-tab-group {
462
+ .mat-tab-body {
463
+ .mat-tab-body-content {
464
+ .tab-content {
465
+ overflow: auto;
466
+ -webkit-overflow-scrolling: touch;
467
+ }
468
+ }
469
+ }
470
+ }
471
+ }
472
+ }
473
+ }
474
+ }
475
+ }
476
+ }
477
+
478
+ // Right sidebar specific
479
+ &.right-sidebar {
480
+ > .sidebar {
481
+ order: 2;
482
+ }
483
+
484
+ > .center {
485
+ order: 1;
486
+ }
487
+ }
488
+ }
489
+
490
+ // Simple layout
491
+ &.simple {
492
+ display: flex;
493
+ flex-direction: column;
494
+ flex: 1 0 auto;
495
+ width: 100%;
496
+ min-width: 100%;
497
+
498
+ // Fullwidth
499
+ &.fullwidth {
500
+ > .content {
501
+ flex: 1 1 auto;
502
+ min-width: 0;
503
+ }
504
+ }
505
+
506
+ &.fullwidth,
507
+ &.inner-sidebar {
508
+ > .header {
509
+ height: 120px;
510
+ min-height: 120px;
511
+ max-height: 120px;
512
+ }
513
+ }
514
+
515
+ // Left / Right sidebar
516
+ &.left-sidebar,
517
+ &.right-sidebar {
518
+ flex-direction: row;
519
+
520
+ // Center
521
+ > .center {
522
+ // Theme
523
+ @include elevation(1);
524
+
525
+ // Style
526
+ position: relative;
527
+ display: flex;
528
+ flex-direction: column;
529
+ flex: 1 1 auto;
530
+ z-index: 3;
531
+ min-width: 0;
532
+ width: 100%;
533
+
534
+ > .header {
535
+ height: 120px;
536
+ min-height: 120px;
537
+ max-height: 120px;
538
+ }
539
+
540
+ > .content {
541
+ // Theme
542
+ background: var(--matcha-color-surface);
543
+
544
+ // Style
545
+ flex: 1 0 auto;
546
+ }
547
+ }
548
+
549
+ // Sidebar
550
+ > .sidebar {
551
+ // Theme
552
+ @include elevation(7);
553
+
554
+ // Style
555
+ width: 240px;
556
+ min-width: 240px;
557
+ max-width: 240px;
558
+ overflow: hidden;
559
+
560
+ &.locked-open {
561
+ background: none;
562
+ box-shadow: none;
563
+
564
+ + .center {
565
+ z-index: 1001;
566
+ }
567
+
568
+ &.left-positioned {
569
+ + .center {
570
+ margin-left: 0;
571
+ }
572
+ }
573
+
574
+ &.right-positioned {
575
+ + .center {
576
+ margin-right: 0;
577
+ }
578
+ }
579
+ }
580
+
581
+ .content {
582
+ flex: 1 1 auto;
583
+ }
584
+ }
585
+
586
+ // Inner sidebar
587
+ &.inner-sidebar {
588
+ > .content {
589
+ > .center {
590
+ > .content {
591
+ background: var(--matcha-color-surface);
592
+ @include elevation(1);
593
+ }
594
+ }
595
+ }
596
+
597
+ flex-direction: column;
598
+ overflow: hidden;
599
+ height: 100%;
600
+
601
+ > .content {
602
+ display: flex;
603
+ min-height: 0;
604
+
605
+ > .sidebar {
606
+ &.locked-open {
607
+ background: none;
608
+ box-shadow: none;
609
+ }
610
+
611
+ .content {
612
+ overflow: auto;
613
+ -webkit-overflow-scrolling: touch;
614
+ }
615
+ }
616
+
617
+ > .center {
618
+ flex: 1 1 auto;
619
+ overflow: auto;
620
+ -webkit-overflow-scrolling: touch;
621
+
622
+ > .content {
623
+ border-radius: 8px;
624
+ }
625
+ }
626
+ }
627
+ }
628
+
629
+ // Inner scroll
630
+ &.inner-scroll {
631
+ flex: 1 1 auto;
632
+
633
+ > .sidebar {
634
+ .content {
635
+ overflow: auto;
636
+ -webkit-overflow-scrolling: touch;
637
+ }
638
+ }
639
+
640
+ > .center {
641
+ flex: 1 1 auto;
642
+ overflow: auto;
643
+ -webkit-overflow-scrolling: touch;
644
+ }
645
+ }
646
+ }
647
+
648
+ // Right sidebar specific
649
+ &.right-sidebar {
650
+ > .sidebar {
651
+ order: 2;
652
+ }
653
+
654
+ > .center {
655
+ order: 1;
656
+ }
657
+
658
+ // Inner sidebar
659
+ &.inner-sidebar {
660
+ > .content {
661
+ > .sidebar {
662
+ order: 2;
663
+ }
664
+
665
+ > .center {
666
+ order: 1;
667
+ }
668
+ }
669
+ }
670
+ }
671
+
672
+ // Tabbed
673
+ &.tabbed {
674
+ min-height: 100%;
675
+
676
+ > .header {
677
+ height: 120px;
678
+ min-height: 120px;
679
+ max-height: 120px;
680
+ }
681
+
682
+ > .content {
683
+ > .mat-tab-group {
684
+ .mat-tab-labels {
685
+ padding: 0 24px;
686
+ }
687
+ }
688
+ }
689
+ }
690
+ }
691
+
692
+ // Blank layout
693
+ &.blank {
694
+ width: 100%;
695
+ min-height: 100%;
696
+ }
697
+ }
698
+
699
+ // Small devices (Phones and Gadget, 0px and up < 600px )
700
+ @media screen and (max-width: 639px) {
701
+ .page-layout {
702
+ // Smaller margins
703
+ &.carded {
704
+ &.fullwidth {
705
+ > .center {
706
+ // padding: 0 0 0 0;
707
+ }
708
+ }
709
+
710
+ &.left-sidebar,
711
+ &.right-sidebar {
712
+ > .center {
713
+ margin: 0 24px;
714
+ }
715
+ }
716
+ }
717
+ // End - Smaller margins
718
+ }
719
+ }
720
+
721
+ // Medium devices (landscapes and tablets, 600px and up < 1024px )
722
+ @media screen and (min-width: 640px) {
723
+ }
724
+
725
+ // Large devices (tablets and small monitors, 1024px and up < 1440px)
726
+ @media screen and (min-width: 1024px) {
727
+ .page-layout {
728
+ // Carded layout
729
+ &.carded {
730
+ // Fullwidth
731
+ &.fullwidth {
732
+ .center {
733
+ // padding: 0 16px 0 0;
734
+ .header {
735
+ .header-options {
736
+ flex-wrap: nowrap;
737
+ align-items: center;
738
+
739
+ .title {
740
+ width: 100%;
741
+ margin: 0 16px 0 0;
742
+ line-height: 48px;
743
+ white-space: nowrap;
744
+ overflow: hidden;
745
+ }
746
+
747
+ .useful-options {
748
+ width: 100%;
749
+ justify-content: end;
750
+
751
+ .more-options {
752
+ display: flex;
753
+ margin: 0 0 0 0;
754
+ }
755
+ form {
756
+ height: 48px;
757
+ margin: -4px 0 0 16px;
758
+ max-width: 211px;
759
+ }
760
+ }
761
+ .float-btn-new {
762
+ display: none;
763
+ }
764
+ }
765
+ }
766
+ }
767
+ }
768
+ }
769
+ }
770
+ }
771
+ // X-Large devices (big desktops, 1440px and up < 1920)
772
+ @media screen and (min-width: 1280px) {
773
+ }
774
+
775
+ // XX-Large devices (larger desktops, 1920px and up)
776
+ @media screen and (min-width: 1536px) {
777
+ }
778
+ }