@schukai/monster 4.154.11 → 5.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 (100) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/package.json +1 -1
  3. package/source/components/accessibility/stylesheet/locale-picker.mjs +21 -23
  4. package/source/components/content/stylesheet/camera-capture.mjs +5 -1
  5. package/source/components/content/stylesheet/copy.mjs +5 -1
  6. package/source/components/content/stylesheet/fetch-box.mjs +60 -1
  7. package/source/components/content/stylesheet/viewer.mjs +21 -23
  8. package/source/components/content/viewer/stylesheet/html.mjs +1 -1
  9. package/source/components/content/viewer/stylesheet/message.mjs +1 -1
  10. package/source/components/data/stylesheet/kpi-tile.mjs +16 -22
  11. package/source/components/data/stylesheet/metric-graph.mjs +16 -22
  12. package/source/components/data/stylesheet/metric.mjs +16 -22
  13. package/source/components/datatable/stylesheet/change-button.mjs +21 -23
  14. package/source/components/datatable/stylesheet/column-bar.mjs +23 -25
  15. package/source/components/datatable/stylesheet/dataset.mjs +76 -23
  16. package/source/components/datatable/stylesheet/datatable.mjs +80 -27
  17. package/source/components/datatable/stylesheet/embedded-pagination.mjs +5 -1
  18. package/source/components/datatable/stylesheet/filter-button.mjs +1 -1
  19. package/source/components/datatable/stylesheet/filter-select.mjs +21 -23
  20. package/source/components/datatable/stylesheet/filter.mjs +21 -23
  21. package/source/components/datatable/stylesheet/pagination.mjs +21 -23
  22. package/source/components/datatable/stylesheet/save-button.mjs +21 -23
  23. package/source/components/datatable/stylesheet/status.mjs +21 -23
  24. package/source/components/files/style/file-manager.pcss +111 -0
  25. package/source/components/files/stylesheet/file-manager.mjs +3 -20
  26. package/source/components/form/stylesheet/action-button.mjs +9 -3
  27. package/source/components/form/stylesheet/button-bar.mjs +54 -41
  28. package/source/components/form/stylesheet/button.mjs +17 -23
  29. package/source/components/form/stylesheet/choice-cards.mjs +1 -1
  30. package/source/components/form/stylesheet/control-bar-spacer.mjs +1 -1
  31. package/source/components/form/stylesheet/control-bar.mjs +66 -47
  32. package/source/components/form/stylesheet/popper-button.mjs +16 -22
  33. package/source/components/form/stylesheet/quantity.mjs +1 -1
  34. package/source/components/form/stylesheet/select.mjs +2 -2
  35. package/source/components/form/stylesheet/sheet.mjs +1 -1
  36. package/source/components/form/stylesheet/wizard.mjs +5 -1
  37. package/source/components/host/stylesheet/call-button.mjs +21 -23
  38. package/source/components/host/stylesheet/host.mjs +5 -1
  39. package/source/components/host/stylesheet/toggle-button.mjs +21 -23
  40. package/source/components/layout/stylesheet/collapse.mjs +21 -23
  41. package/source/components/layout/stylesheet/details.mjs +21 -23
  42. package/source/components/layout/stylesheet/iframe.mjs +1 -1
  43. package/source/components/layout/stylesheet/overlay.mjs +5 -1
  44. package/source/components/layout/stylesheet/panel.mjs +5 -1
  45. package/source/components/layout/stylesheet/slider.mjs +5 -1
  46. package/source/components/layout/stylesheet/width-toggle.mjs +1 -1
  47. package/source/components/navigation/stylesheet/site-navigation.mjs +5 -1
  48. package/source/components/navigation/stylesheet/table-of-content.mjs +5 -1
  49. package/source/components/navigation/stylesheet/wizard-navigation.mjs +5 -1
  50. package/source/components/notify/stylesheet/message.mjs +1 -1
  51. package/source/components/notify/stylesheet/notify.mjs +1 -1
  52. package/source/components/state/style/thread-message.pcss +231 -0
  53. package/source/components/state/stylesheet/log.mjs +1 -1
  54. package/source/components/state/stylesheet/state.mjs +1 -1
  55. package/source/components/state/stylesheet/thread-message.mjs +2 -2
  56. package/source/components/state/stylesheet/thread.mjs +1 -1
  57. package/source/components/style/accessibility.css +1 -32
  58. package/source/components/style/badge.css +1 -147
  59. package/source/components/style/border.css +1 -65
  60. package/source/components/style/button.css +16 -22
  61. package/source/components/style/card.css +1 -155
  62. package/source/components/style/color.css +1 -166
  63. package/source/components/style/control.css +1 -14
  64. package/source/components/style/data-grid.css +1 -447
  65. package/source/components/style/display.css +1 -32
  66. package/source/components/style/floating-ui.css +1 -89
  67. package/source/components/style/host.css +1 -14
  68. package/source/components/style/icons.css +1 -1584
  69. package/source/components/style/popper.css +1 -101
  70. package/source/components/style/property.css +5 -1
  71. package/source/components/style/ripple.css +1 -13
  72. package/source/components/style/skeleton.css +56 -1
  73. package/source/components/style/space.css +1 -240
  74. package/source/components/style/spinner.css +1 -7
  75. package/source/components/style/table.css +1 -88
  76. package/source/components/style/theme-modern.css +4 -4
  77. package/source/components/style/theme.css +1 -388
  78. package/source/components/style/tree-menu.css +2 -0
  79. package/source/components/style/tree-menu.pcss +95 -0
  80. package/source/components/style/typography.css +1 -258
  81. package/source/components/stylesheet/button.mjs +16 -22
  82. package/source/components/stylesheet/icons.mjs +1 -1
  83. package/source/components/stylesheet/property.mjs +5 -1
  84. package/source/components/stylesheet/skeleton.mjs +56 -1
  85. package/source/components/stylesheet/spinner.mjs +1 -1
  86. package/source/components/stylesheet/theme-modern.mjs +4 -4
  87. package/source/components/stylesheet/tree-menu.mjs +3 -5
  88. package/source/components/time/stylesheet/day.mjs +16 -22
  89. package/source/components/time/timeline/stylesheet/appointment.mjs +21 -23
  90. package/source/components/time/timeline/stylesheet/segment.mjs +21 -23
  91. package/source/components/tree-menu/stylesheet/tree-menu.mjs +1 -1
  92. package/source/dom/customelement.mjs +49 -16
  93. package/source/types/version.mjs +1 -1
  94. package/test/cases/components/form/control-heights.mjs +2 -2
  95. package/test/cases/components/style/skeleton.mjs +2 -2
  96. package/test/cases/components/style/theme-modern.mjs +7 -13
  97. package/test/cases/dom/customelement.mjs +4 -8
  98. package/test/cases/dom/early-options-contract.mjs +40 -0
  99. package/test/cases/dom/options-lifecycle.mjs +216 -0
  100. package/test/util/early-options.mjs +84 -0
package/source/components/style/color.css CHANGED
@@ -1,167 +1,2 @@
1
1
  /** generated from color.pcss **/
2
- :after,
3
- :before,
4
- :root {
5
- --monster-color-gray-1: #f6f6f6;
6
- --monster-color-gray-2: #e2e2e2;
7
- --monster-color-gray-3: #8b8b8b;
8
- --monster-color-gray-4: #6f6f6f;
9
- --monster-color-gray-5: #3e3e3e;
10
- --monster-color-gray-6: #222;
11
- --monster-color-rose-1: #fff7f9;
12
- --monster-color-rose-2: #ffdce5;
13
- --monster-color-rose-3: #ff3b8d;
14
- --monster-color-rose-4: #db0072;
15
- --monster-color-rose-5: #800040;
16
- --monster-color-rose-6: #4c0023;
17
- --monster-color-raspberry-1: #fff8f8;
18
- --monster-color-raspberry-2: #ffdddf;
19
- --monster-color-raspberry-3: #ff426c;
20
- --monster-color-raspberry-4: #de0051;
21
- --monster-color-raspberry-5: #82002c;
22
- --monster-color-raspberry-6: #510018;
23
- --monster-color-red-1: #fff8f6;
24
- --monster-color-red-2: #ffddd8;
25
- --monster-color-red-3: #ff4647;
26
- --monster-color-red-4: #e0002b;
27
- --monster-color-red-5: #830014;
28
- --monster-color-red-6: #530003;
29
- --monster-color-orange-1: #fff8f5;
30
- --monster-color-orange-2: #ffded1;
31
- --monster-color-orange-3: #fd4d00;
32
- --monster-color-orange-4: #cd3c00;
33
- --monster-color-orange-5: #752100;
34
- --monster-color-orange-6: #401600;
35
- --monster-color-cinnamon-1: #fff8f3;
36
- --monster-color-cinnamon-2: #ffdfc6;
37
- --monster-color-cinnamon-3: #d57300;
38
- --monster-color-cinnamon-4: #ac5c00;
39
- --monster-color-cinnamon-5: #633300;
40
- --monster-color-cinnamon-6: #371d00;
41
- --monster-color-amber-1: #fff8ef;
42
- --monster-color-amber-2: #ffe0b2;
43
- --monster-color-amber-3: #b98300;
44
- --monster-color-amber-4: #926700;
45
- --monster-color-amber-5: #523800;
46
- --monster-color-amber-6: #302100;
47
- --monster-color-yellow-1: #fff9e5;
48
- --monster-color-yellow-2: #ffe53e;
49
- --monster-color-yellow-3: #9c8b00;
50
- --monster-color-yellow-4: #7d6f00;
51
- --monster-color-yellow-5: #463d00;
52
- --monster-color-yellow-6: #292300;
53
- --monster-color-lime-1: #f7ffac;
54
- --monster-color-lime-2: #d5f200;
55
- --monster-color-lime-3: #819300;
56
- --monster-color-lime-4: #677600;
57
- --monster-color-lime-5: #394100;
58
- --monster-color-lime-6: #222600;
59
- --monster-color-chartreuse-1: #e5ffc3;
60
- --monster-color-chartreuse-2: #98fb00;
61
- --monster-color-chartreuse-3: #5c9b00;
62
- --monster-color-chartreuse-4: #497c00;
63
- --monster-color-chartreuse-5: #264500;
64
- --monster-color-chartreuse-6: #182600;
65
- --monster-color-green-1: #e0ffd9;
66
- --monster-color-green-2: #72ff6c;
67
- --monster-color-green-3: #00a21f;
68
- --monster-color-green-4: #008217;
69
- --monster-color-green-5: #004908;
70
- --monster-color-green-6: #062800;
71
- --monster-color-emerald-1: #dcffe6;
72
- --monster-color-emerald-2: #5dffa2;
73
- --monster-color-emerald-3: #00a05a;
74
- --monster-color-emerald-4: #008147;
75
- --monster-color-emerald-5: #004825;
76
- --monster-color-emerald-6: #002812;
77
- --monster-color-aquamarine-1: #daffef;
78
- --monster-color-aquamarine-2: #42ffc6;
79
- --monster-color-aquamarine-3: #009f78;
80
- --monster-color-aquamarine-4: #007f5f;
81
- --monster-color-aquamarine-5: #004734;
82
- --monster-color-aquamarine-6: #00281b;
83
- --monster-color-teal-1: #d7fff7;
84
- --monster-color-teal-2: #00ffe4;
85
- --monster-color-teal-3: #009e8c;
86
- --monster-color-teal-4: #007c6e;
87
- --monster-color-teal-5: #00443c;
88
- --monster-color-teal-6: #002722;
89
- --monster-color-cyan-1: #c4fffe;
90
- --monster-color-cyan-2: #00fafb;
91
- --monster-color-cyan-3: #00999a;
92
- --monster-color-cyan-4: #007a7b;
93
- --monster-color-cyan-5: #004344;
94
- --monster-color-cyan-6: #002525;
95
- --monster-color-powder-1: #dafaff;
96
- --monster-color-powder-2: #8df0ff;
97
- --monster-color-powder-3: #0098a9;
98
- --monster-color-powder-4: #007987;
99
- --monster-color-powder-5: #004048;
100
- --monster-color-powder-6: #002227;
101
- --monster-color-sky-1: #e3f7ff;
102
- --monster-color-sky-2: #aee9ff;
103
- --monster-color-sky-3: #0094b4;
104
- --monster-color-sky-4: #007590;
105
- --monster-color-sky-5: #00404f;
106
- --monster-color-sky-6: #001f28;
107
- --monster-color-cerulean-1: #e8f6ff;
108
- --monster-color-cerulean-2: #b9e3ff;
109
- --monster-color-cerulean-3: #0092c5;
110
- --monster-color-cerulean-4: #00749d;
111
- --monster-color-cerulean-5: #003c54;
112
- --monster-color-cerulean-6: #001d2a;
113
- --monster-color-azure-1: #e8f2ff;
114
- --monster-color-azure-2: #c6e0ff;
115
- --monster-color-azure-3: #008fdb;
116
- --monster-color-azure-4: #0071af;
117
- --monster-color-azure-5: #003b5e;
118
- --monster-color-azure-6: #001c30;
119
- --monster-color-blue-1: #f0f4ff;
120
- --monster-color-blue-2: #d4e0ff;
121
- --monster-color-blue-3: #0089fc;
122
- --monster-color-blue-4: #006dca;
123
- --monster-color-blue-5: #00386d;
124
- --monster-color-blue-6: #001a39;
125
- --monster-color-indigo-1: #f3f3ff;
126
- --monster-color-indigo-2: #deddff;
127
- --monster-color-indigo-3: #657eff;
128
- --monster-color-indigo-4: #0061fc;
129
- --monster-color-indigo-5: #00328a;
130
- --monster-color-indigo-6: #001649;
131
- --monster-color-violet-1: #f7f1ff;
132
- --monster-color-violet-2: #e8daff;
133
- --monster-color-violet-3: #9b70ff;
134
- --monster-color-violet-4: #794aff;
135
- --monster-color-violet-5: #2d0fbf;
136
- --monster-color-violet-6: #0b0074;
137
- --monster-color-purple-1: #fdf4ff;
138
- --monster-color-purple-2: #f7d9ff;
139
- --monster-color-purple-3: #d150ff;
140
- --monster-color-purple-4: #b01fe3;
141
- --monster-color-purple-5: #660087;
142
- --monster-color-purple-6: #3a004f;
143
- --monster-color-magenta-1: #fff3fc;
144
- --monster-color-magenta-2: #ffd7f6;
145
- --monster-color-magenta-3: #f911e0;
146
- --monster-color-magenta-4: #ca00b6;
147
- --monster-color-magenta-5: #740068;
148
- --monster-color-magenta-6: #44003c;
149
- --monster-color-pink-1: #fff7fb;
150
- --monster-color-pink-2: #ffdcec;
151
- --monster-color-pink-3: #ff2fb2;
152
- --monster-color-pink-4: #d2008f;
153
- --monster-color-pink-5: #790051;
154
- --monster-color-pink-6: #4b0030;
155
- --monster-gradient-tangerine-1: #e5b875;
156
- --monster-gradient-tangerine-2: #d9a362;
157
- --monster-gradient-tangerine-3: #c08a4e;
158
- --monster-gradient-tangerine-4: #a7713b;
159
- --monster-gradient-tangerine-5: #8f5a28;
160
- --monster-gradient-tangerine-6: #360505;
161
- --monster-color-seashell-1: #f7f5ef;
162
- --monster-color-seashell-2: #e5e2d9;
163
- --monster-color-seashell-3: #cbc6b3;
164
- --monster-color-seashell-4: #a19d8a;
165
- --monster-color-seashell-5: #7a7566;
166
- --monster-color-seashell-6: #514d3f;
167
- }
2
+ :after,:before,:root{--monster-color-gray-1:#f6f6f6;--monster-color-gray-2:#e2e2e2;--monster-color-gray-3:#8b8b8b;--monster-color-gray-4:#6f6f6f;--monster-color-gray-5:#3e3e3e;--monster-color-gray-6:#222;--monster-color-rose-1:#fff7f9;--monster-color-rose-2:#ffdce5;--monster-color-rose-3:#ff3b8d;--monster-color-rose-4:#db0072;--monster-color-rose-5:#800040;--monster-color-rose-6:#4c0023;--monster-color-raspberry-1:#fff8f8;--monster-color-raspberry-2:#ffdddf;--monster-color-raspberry-3:#ff426c;--monster-color-raspberry-4:#de0051;--monster-color-raspberry-5:#82002c;--monster-color-raspberry-6:#510018;--monster-color-red-1:#fff8f6;--monster-color-red-2:#ffddd8;--monster-color-red-3:#ff4647;--monster-color-red-4:#e0002b;--monster-color-red-5:#830014;--monster-color-red-6:#530003;--monster-color-orange-1:#fff8f5;--monster-color-orange-2:#ffded1;--monster-color-orange-3:#fd4d00;--monster-color-orange-4:#cd3c00;--monster-color-orange-5:#752100;--monster-color-orange-6:#401600;--monster-color-cinnamon-1:#fff8f3;--monster-color-cinnamon-2:#ffdfc6;--monster-color-cinnamon-3:#d57300;--monster-color-cinnamon-4:#ac5c00;--monster-color-cinnamon-5:#633300;--monster-color-cinnamon-6:#371d00;--monster-color-amber-1:#fff8ef;--monster-color-amber-2:#ffe0b2;--monster-color-amber-3:#b98300;--monster-color-amber-4:#926700;--monster-color-amber-5:#523800;--monster-color-amber-6:#302100;--monster-color-yellow-1:#fff9e5;--monster-color-yellow-2:#ffe53e;--monster-color-yellow-3:#9c8b00;--monster-color-yellow-4:#7d6f00;--monster-color-yellow-5:#463d00;--monster-color-yellow-6:#292300;--monster-color-lime-1:#f7ffac;--monster-color-lime-2:#d5f200;--monster-color-lime-3:#819300;--monster-color-lime-4:#677600;--monster-color-lime-5:#394100;--monster-color-lime-6:#222600;--monster-color-chartreuse-1:#e5ffc3;--monster-color-chartreuse-2:#98fb00;--monster-color-chartreuse-3:#5c9b00;--monster-color-chartreuse-4:#497c00;--monster-color-chartreuse-5:#264500;--monster-color-chartreuse-6:#182600;--monster-color-green-1:#e0ffd9;--monster-color-green-2:#72ff6c;--monster-color-green-3:#00a21f;--monster-color-green-4:#008217;--monster-color-green-5:#004908;--monster-color-green-6:#062800;--monster-color-emerald-1:#dcffe6;--monster-color-emerald-2:#5dffa2;--monster-color-emerald-3:#00a05a;--monster-color-emerald-4:#008147;--monster-color-emerald-5:#004825;--monster-color-emerald-6:#002812;--monster-color-aquamarine-1:#daffef;--monster-color-aquamarine-2:#42ffc6;--monster-color-aquamarine-3:#009f78;--monster-color-aquamarine-4:#007f5f;--monster-color-aquamarine-5:#004734;--monster-color-aquamarine-6:#00281b;--monster-color-teal-1:#d7fff7;--monster-color-teal-2:#00ffe4;--monster-color-teal-3:#009e8c;--monster-color-teal-4:#007c6e;--monster-color-teal-5:#00443c;--monster-color-teal-6:#002722;--monster-color-cyan-1:#c4fffe;--monster-color-cyan-2:#00fafb;--monster-color-cyan-3:#00999a;--monster-color-cyan-4:#007a7b;--monster-color-cyan-5:#004344;--monster-color-cyan-6:#002525;--monster-color-powder-1:#dafaff;--monster-color-powder-2:#8df0ff;--monster-color-powder-3:#0098a9;--monster-color-powder-4:#007987;--monster-color-powder-5:#004048;--monster-color-powder-6:#002227;--monster-color-sky-1:#e3f7ff;--monster-color-sky-2:#aee9ff;--monster-color-sky-3:#0094b4;--monster-color-sky-4:#007590;--monster-color-sky-5:#00404f;--monster-color-sky-6:#001f28;--monster-color-cerulean-1:#e8f6ff;--monster-color-cerulean-2:#b9e3ff;--monster-color-cerulean-3:#0092c5;--monster-color-cerulean-4:#00749d;--monster-color-cerulean-5:#003c54;--monster-color-cerulean-6:#001d2a;--monster-color-azure-1:#e8f2ff;--monster-color-azure-2:#c6e0ff;--monster-color-azure-3:#008fdb;--monster-color-azure-4:#0071af;--monster-color-azure-5:#003b5e;--monster-color-azure-6:#001c30;--monster-color-blue-1:#f0f4ff;--monster-color-blue-2:#d4e0ff;--monster-color-blue-3:#0089fc;--monster-color-blue-4:#006dca;--monster-color-blue-5:#00386d;--monster-color-blue-6:#001a39;--monster-color-indigo-1:#f3f3ff;--monster-color-indigo-2:#deddff;--monster-color-indigo-3:#657eff;--monster-color-indigo-4:#0061fc;--monster-color-indigo-5:#00328a;--monster-color-indigo-6:#001649;--monster-color-violet-1:#f7f1ff;--monster-color-violet-2:#e8daff;--monster-color-violet-3:#9b70ff;--monster-color-violet-4:#794aff;--monster-color-violet-5:#2d0fbf;--monster-color-violet-6:#0b0074;--monster-color-purple-1:#fdf4ff;--monster-color-purple-2:#f7d9ff;--monster-color-purple-3:#d150ff;--monster-color-purple-4:#b01fe3;--monster-color-purple-5:#660087;--monster-color-purple-6:#3a004f;--monster-color-magenta-1:#fff3fc;--monster-color-magenta-2:#ffd7f6;--monster-color-magenta-3:#f911e0;--monster-color-magenta-4:#ca00b6;--monster-color-magenta-5:#740068;--monster-color-magenta-6:#44003c;--monster-color-pink-1:#fff7fb;--monster-color-pink-2:#ffdcec;--monster-color-pink-3:#ff2fb2;--monster-color-pink-4:#d2008f;--monster-color-pink-5:#790051;--monster-color-pink-6:#4b0030;--monster-gradient-tangerine-1:#e5b875;--monster-gradient-tangerine-2:#d9a362;--monster-gradient-tangerine-3:#c08a4e;--monster-gradient-tangerine-4:#a7713b;--monster-gradient-tangerine-5:#8f5a28;--monster-gradient-tangerine-6:#360505;--monster-color-seashell-1:#f7f5ef;--monster-color-seashell-2:#e5e2d9;--monster-color-seashell-3:#cbc6b3;--monster-color-seashell-4:#a19d8a;--monster-color-seashell-5:#7a7566;--monster-color-seashell-6:#514d3f}
package/source/components/style/control.css CHANGED
@@ -1,15 +1,2 @@
1
1
  /** generated from control.pcss **/
2
- [data-monster-role="control"] {
3
- outline: none;
4
- width: 100%;
5
- box-sizing: border-box;
6
- }
7
- [data-monster-role="control"].flex {
8
- display: flex;
9
- flex-direction: row;
10
- align-items: center;
11
- }
12
- :host {
13
- display: block;
14
- box-sizing: border-box;
15
- }
2
+ [data-monster-role=control]{outline:none;width:100%;box-sizing:border-box}[data-monster-role=control].flex{display:flex;flex-direction:row;align-items:center}:host{display:block;box-sizing:border-box}
package/source/components/style/data-grid.css CHANGED
@@ -1,448 +1,2 @@
1
1
  /** generated from data-grid.pcss **/
2
- .monster-data-grid-container {
3
- display: block;
4
- width: 100%;
5
- overflow-x: auto;
6
- background-color: var(--monster-bg-color-primary-2);
7
- color: var(--monster-color-primary-2);
8
- padding: 20px;
9
- box-sizing: border-box;
10
- }
11
- .monster-data-grid-container > div {
12
- display: grid;
13
- }
14
- .monster-data-grid-container .col-1 {
15
- grid-column: 1;
16
- }
17
- .monster-data-grid-container .col-1,
18
- .monster-data-grid-container .col-2 {
19
- color: var(--monster-color-primary-1);
20
- background-color: var(--monster-bg-color-primary-1);
21
- border: none;
22
- padding: 0.4rem;
23
- display: flex;
24
- font-size: 1rem;
25
- line-height: 1.6;
26
- font-weight: 400;
27
- }
28
- .monster-data-grid-container .col-2 {
29
- grid-column: 2;
30
- }
31
- .monster-data-grid-container .col-3 {
32
- grid-column: 3;
33
- }
34
- .monster-data-grid-container .col-3,
35
- .monster-data-grid-container .col-4 {
36
- color: var(--monster-color-primary-1);
37
- background-color: var(--monster-bg-color-primary-1);
38
- border: none;
39
- padding: 0.4rem;
40
- display: flex;
41
- font-size: 1rem;
42
- line-height: 1.6;
43
- font-weight: 400;
44
- }
45
- .monster-data-grid-container .col-4 {
46
- grid-column: 4;
47
- }
48
- .monster-data-grid-container .col-5 {
49
- grid-column: 5;
50
- }
51
- .monster-data-grid-container .col-5,
52
- .monster-data-grid-container .col-6 {
53
- color: var(--monster-color-primary-1);
54
- background-color: var(--monster-bg-color-primary-1);
55
- border: none;
56
- padding: 0.4rem;
57
- display: flex;
58
- font-size: 1rem;
59
- line-height: 1.6;
60
- font-weight: 400;
61
- }
62
- .monster-data-grid-container .col-6 {
63
- grid-column: 6;
64
- }
65
- .monster-data-grid-container .col-7 {
66
- grid-column: 7;
67
- }
68
- .monster-data-grid-container .col-7,
69
- .monster-data-grid-container .col-8 {
70
- color: var(--monster-color-primary-1);
71
- background-color: var(--monster-bg-color-primary-1);
72
- border: none;
73
- padding: 0.4rem;
74
- display: flex;
75
- font-size: 1rem;
76
- line-height: 1.6;
77
- font-weight: 400;
78
- }
79
- .monster-data-grid-container .col-8 {
80
- grid-column: 8;
81
- }
82
- .monster-data-grid-container .col-9 {
83
- grid-column: 9;
84
- }
85
- .monster-data-grid-container .col-10,
86
- .monster-data-grid-container .col-9 {
87
- color: var(--monster-color-primary-1);
88
- background-color: var(--monster-bg-color-primary-1);
89
- border: none;
90
- padding: 0.4rem;
91
- display: flex;
92
- font-size: 1rem;
93
- line-height: 1.6;
94
- font-weight: 400;
95
- }
96
- .monster-data-grid-container .col-10 {
97
- grid-column: 10;
98
- }
99
- .monster-data-grid-container .col-11 {
100
- grid-column: 11;
101
- }
102
- .monster-data-grid-container .col-11,
103
- .monster-data-grid-container .col-12 {
104
- color: var(--monster-color-primary-1);
105
- background-color: var(--monster-bg-color-primary-1);
106
- border: none;
107
- padding: 0.4rem;
108
- display: flex;
109
- font-size: 1rem;
110
- line-height: 1.6;
111
- font-weight: 400;
112
- }
113
- .monster-data-grid-container .col-12 {
114
- grid-column: 12;
115
- }
116
- .monster-data-grid-container .col-13 {
117
- grid-column: 13;
118
- }
119
- .monster-data-grid-container .col-13,
120
- .monster-data-grid-container .col-14 {
121
- color: var(--monster-color-primary-1);
122
- background-color: var(--monster-bg-color-primary-1);
123
- border: none;
124
- padding: 0.4rem;
125
- display: flex;
126
- font-size: 1rem;
127
- line-height: 1.6;
128
- font-weight: 400;
129
- }
130
- .monster-data-grid-container .col-14 {
131
- grid-column: 14;
132
- }
133
- .monster-data-grid-container .col-15 {
134
- grid-column: 15;
135
- }
136
- .monster-data-grid-container .col-15,
137
- .monster-data-grid-container .col-16 {
138
- color: var(--monster-color-primary-1);
139
- background-color: var(--monster-bg-color-primary-1);
140
- border: none;
141
- padding: 0.4rem;
142
- display: flex;
143
- font-size: 1rem;
144
- line-height: 1.6;
145
- font-weight: 400;
146
- }
147
- .monster-data-grid-container .col-16 {
148
- grid-column: 16;
149
- }
150
- .monster-data-grid-container .col-17 {
151
- grid-column: 17;
152
- }
153
- .monster-data-grid-container .col-17,
154
- .monster-data-grid-container .col-18 {
155
- color: var(--monster-color-primary-1);
156
- background-color: var(--monster-bg-color-primary-1);
157
- border: none;
158
- padding: 0.4rem;
159
- display: flex;
160
- font-size: 1rem;
161
- line-height: 1.6;
162
- font-weight: 400;
163
- }
164
- .monster-data-grid-container .col-18 {
165
- grid-column: 18;
166
- }
167
- .monster-data-grid-container .col-19 {
168
- grid-column: 19;
169
- }
170
- .monster-data-grid-container .col-19,
171
- .monster-data-grid-container .col-20 {
172
- color: var(--monster-color-primary-1);
173
- background-color: var(--monster-bg-color-primary-1);
174
- border: none;
175
- padding: 0.4rem;
176
- display: flex;
177
- font-size: 1rem;
178
- line-height: 1.6;
179
- font-weight: 400;
180
- }
181
- .monster-data-grid-container .col-20 {
182
- grid-column: 20;
183
- }
184
- .monster-data-grid-container .col-21 {
185
- grid-column: 21;
186
- }
187
- .monster-data-grid-container .col-21,
188
- .monster-data-grid-container .col-22 {
189
- color: var(--monster-color-primary-1);
190
- background-color: var(--monster-bg-color-primary-1);
191
- border: none;
192
- padding: 0.4rem;
193
- display: flex;
194
- font-size: 1rem;
195
- line-height: 1.6;
196
- font-weight: 400;
197
- }
198
- .monster-data-grid-container .col-22 {
199
- grid-column: 22;
200
- }
201
- .monster-data-grid-container .col-23 {
202
- grid-column: 23;
203
- }
204
- .monster-data-grid-container .col-23,
205
- .monster-data-grid-container .col-24 {
206
- color: var(--monster-color-primary-1);
207
- background-color: var(--monster-bg-color-primary-1);
208
- border: none;
209
- padding: 0.4rem;
210
- display: flex;
211
- font-size: 1rem;
212
- line-height: 1.6;
213
- font-weight: 400;
214
- }
215
- .monster-data-grid-container .col-24 {
216
- grid-column: 24;
217
- }
218
- .monster-data-grid-container .col-25 {
219
- grid-column: 25;
220
- }
221
- .monster-data-grid-container .col-25,
222
- .monster-data-grid-container .col-26 {
223
- color: var(--monster-color-primary-1);
224
- background-color: var(--monster-bg-color-primary-1);
225
- border: none;
226
- padding: 0.4rem;
227
- display: flex;
228
- font-size: 1rem;
229
- line-height: 1.6;
230
- font-weight: 400;
231
- }
232
- .monster-data-grid-container .col-26 {
233
- grid-column: 26;
234
- }
235
- .monster-data-grid-container .col-27 {
236
- grid-column: 27;
237
- }
238
- .monster-data-grid-container .col-27,
239
- .monster-data-grid-container .col-28 {
240
- color: var(--monster-color-primary-1);
241
- background-color: var(--monster-bg-color-primary-1);
242
- border: none;
243
- padding: 0.4rem;
244
- display: flex;
245
- font-size: 1rem;
246
- line-height: 1.6;
247
- font-weight: 400;
248
- }
249
- .monster-data-grid-container .col-28 {
250
- grid-column: 28;
251
- }
252
- .monster-data-grid-container .col-29 {
253
- grid-column: 29;
254
- }
255
- .monster-data-grid-container .col-29,
256
- .monster-data-grid-container .col-30 {
257
- color: var(--monster-color-primary-1);
258
- background-color: var(--monster-bg-color-primary-1);
259
- border: none;
260
- padding: 0.4rem;
261
- display: flex;
262
- font-size: 1rem;
263
- line-height: 1.6;
264
- font-weight: 400;
265
- }
266
- .monster-data-grid-container .col-30 {
267
- grid-column: 30;
268
- }
269
- .monster-data-grid-container .col-31 {
270
- grid-column: 31;
271
- }
272
- .monster-data-grid-container .col-31,
273
- .monster-data-grid-container .col-32 {
274
- color: var(--monster-color-primary-1);
275
- background-color: var(--monster-bg-color-primary-1);
276
- border: none;
277
- padding: 0.4rem;
278
- display: flex;
279
- font-size: 1rem;
280
- line-height: 1.6;
281
- font-weight: 400;
282
- }
283
- .monster-data-grid-container .col-32 {
284
- grid-column: 32;
285
- }
286
- .monster-data-grid-container .col-33 {
287
- grid-column: 33;
288
- }
289
- .monster-data-grid-container .col-33,
290
- .monster-data-grid-container .col-34 {
291
- color: var(--monster-color-primary-1);
292
- background-color: var(--monster-bg-color-primary-1);
293
- border: none;
294
- padding: 0.4rem;
295
- display: flex;
296
- font-size: 1rem;
297
- line-height: 1.6;
298
- font-weight: 400;
299
- }
300
- .monster-data-grid-container .col-34 {
301
- grid-column: 34;
302
- }
303
- .monster-data-grid-container .col-35 {
304
- grid-column: 35;
305
- }
306
- .monster-data-grid-container .col-35,
307
- .monster-data-grid-container .col-36 {
308
- color: var(--monster-color-primary-1);
309
- background-color: var(--monster-bg-color-primary-1);
310
- border: none;
311
- padding: 0.4rem;
312
- display: flex;
313
- font-size: 1rem;
314
- line-height: 1.6;
315
- font-weight: 400;
316
- }
317
- .monster-data-grid-container .col-36 {
318
- grid-column: 36;
319
- }
320
- .monster-data-grid-container .col-37 {
321
- grid-column: 37;
322
- }
323
- .monster-data-grid-container .col-37,
324
- .monster-data-grid-container .col-38 {
325
- color: var(--monster-color-primary-1);
326
- background-color: var(--monster-bg-color-primary-1);
327
- border: none;
328
- padding: 0.4rem;
329
- display: flex;
330
- font-size: 1rem;
331
- line-height: 1.6;
332
- font-weight: 400;
333
- }
334
- .monster-data-grid-container .col-38 {
335
- grid-column: 38;
336
- }
337
- .monster-data-grid-container .col-39 {
338
- grid-column: 39;
339
- }
340
- .monster-data-grid-container .col-39,
341
- .monster-data-grid-container .col-40 {
342
- color: var(--monster-color-primary-1);
343
- background-color: var(--monster-bg-color-primary-1);
344
- border: none;
345
- padding: 0.4rem;
346
- display: flex;
347
- font-size: 1rem;
348
- line-height: 1.6;
349
- font-weight: 400;
350
- }
351
- .monster-data-grid-container .col-40 {
352
- grid-column: 40;
353
- }
354
- .monster-data-grid-container .col-41 {
355
- grid-column: 41;
356
- }
357
- .monster-data-grid-container .col-41,
358
- .monster-data-grid-container .col-42 {
359
- color: var(--monster-color-primary-1);
360
- background-color: var(--monster-bg-color-primary-1);
361
- border: none;
362
- padding: 0.4rem;
363
- display: flex;
364
- font-size: 1rem;
365
- line-height: 1.6;
366
- font-weight: 400;
367
- }
368
- .monster-data-grid-container .col-42 {
369
- grid-column: 42;
370
- }
371
- .monster-data-grid-container .col-43 {
372
- grid-column: 43;
373
- }
374
- .monster-data-grid-container .col-43,
375
- .monster-data-grid-container .col-44 {
376
- color: var(--monster-color-primary-1);
377
- background-color: var(--monster-bg-color-primary-1);
378
- border: none;
379
- padding: 0.4rem;
380
- display: flex;
381
- font-size: 1rem;
382
- line-height: 1.6;
383
- font-weight: 400;
384
- }
385
- .monster-data-grid-container .col-44 {
386
- grid-column: 44;
387
- }
388
- .monster-data-grid-container .col-45 {
389
- grid-column: 45;
390
- }
391
- .monster-data-grid-container .col-45,
392
- .monster-data-grid-container .col-46 {
393
- color: var(--monster-color-primary-1);
394
- background-color: var(--monster-bg-color-primary-1);
395
- border: none;
396
- padding: 0.4rem;
397
- display: flex;
398
- font-size: 1rem;
399
- line-height: 1.6;
400
- font-weight: 400;
401
- }
402
- .monster-data-grid-container .col-46 {
403
- grid-column: 46;
404
- }
405
- .monster-data-grid-container .col-47 {
406
- grid-column: 47;
407
- }
408
- .monster-data-grid-container .col-47,
409
- .monster-data-grid-container .col-48 {
410
- color: var(--monster-color-primary-1);
411
- background-color: var(--monster-bg-color-primary-1);
412
- border: none;
413
- padding: 0.4rem;
414
- display: flex;
415
- font-size: 1rem;
416
- line-height: 1.6;
417
- font-weight: 400;
418
- }
419
- .monster-data-grid-container .col-48 {
420
- grid-column: 48;
421
- }
422
- .monster-data-grid-container .col-49 {
423
- grid-column: 49;
424
- }
425
- .monster-data-grid-container .col-49,
426
- .monster-data-grid-container .col-50 {
427
- color: var(--monster-color-primary-1);
428
- background-color: var(--monster-bg-color-primary-1);
429
- border: none;
430
- padding: 0.4rem;
431
- display: flex;
432
- font-size: 1rem;
433
- line-height: 1.6;
434
- font-weight: 400;
435
- }
436
- .monster-data-grid-container .col-50 {
437
- grid-column: 50;
438
- }
439
- .monster-data-grid-container .col-start-end {
440
- grid-column: 1 / -1;
441
- }
442
- .monster-data-grid-container .header {
443
- font-weight: 600;
444
- margin-bottom: 0.4rem;
445
- font-size: 1rem;
446
- line-height: 1.6;
447
- font-weight: 400;
448
- }
2
+ .monster-data-grid-container{display:block;width:100%;overflow-x:auto;background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2);padding:20px;box-sizing:border-box}.monster-data-grid-container>div{display:grid}.monster-data-grid-container .col-1{grid-column:1}.monster-data-grid-container .col-1,.monster-data-grid-container .col-2{color:var(--monster-color-primary-1);background-color:var(--monster-bg-color-primary-1);border:none;padding:.4rem;display:flex;font-size:1rem;line-height:1.6;font-weight:400}.monster-data-grid-container .col-2{grid-column:2}.monster-data-grid-container .col-3{grid-column:3}.monster-data-grid-container .col-3,.monster-data-grid-container .col-4{color:var(--monster-color-primary-1);background-color:var(--monster-bg-color-primary-1);border:none;padding:.4rem;display:flex;font-size:1rem;line-height:1.6;font-weight:400}.monster-data-grid-container .col-4{grid-column:4}.monster-data-grid-container .col-5{grid-column:5}.monster-data-grid-container .col-5,.monster-data-grid-container .col-6{color:var(--monster-color-primary-1);background-color:var(--monster-bg-color-primary-1);border:none;padding:.4rem;display:flex;font-size:1rem;line-height:1.6;font-weight:400}.monster-data-grid-container .col-6{grid-column:6}.monster-data-grid-container .col-7{grid-column:7}.monster-data-grid-container .col-7,.monster-data-grid-container .col-8{color:var(--monster-color-primary-1);background-color:var(--monster-bg-color-primary-1);border:none;padding:.4rem;display:flex;font-size:1rem;line-height:1.6;font-weight:400}.monster-data-grid-container .col-8{grid-column:8}.monster-data-grid-container .col-9{grid-column:9}.monster-data-grid-container .col-10,.monster-data-grid-container .col-9{color:var(--monster-color-primary-1);background-color:var(--monster-bg-color-primary-1);border:none;padding:.4rem;display:flex;font-size:1rem;line-height:1.6;font-weight:400}.monster-data-grid-container .col-10{grid-column:10}.monster-data-grid-container .col-11{grid-column:11}.monster-data-grid-container .col-11,.monster-data-grid-container .col-12{color:var(--monster-color-primary-1);background-color:var(--monster-bg-color-primary-1);border:none;padding:.4rem;display:flex;font-size:1rem;line-height:1.6;font-weight:400}.monster-data-grid-container .col-12{grid-column:12}.monster-data-grid-container .col-13{grid-column:13}.monster-data-grid-container .col-13,.monster-data-grid-container .col-14{color:var(--monster-color-primary-1);background-color:var(--monster-bg-color-primary-1);border:none;padding:.4rem;display:flex;font-size:1rem;line-height:1.6;font-weight:400}.monster-data-grid-container .col-14{grid-column:14}.monster-data-grid-container .col-15{grid-column:15}.monster-data-grid-container .col-15,.monster-data-grid-container .col-16{color:var(--monster-color-primary-1);background-color:var(--monster-bg-color-primary-1);border:none;padding:.4rem;display:flex;font-size:1rem;line-height:1.6;font-weight:400}.monster-data-grid-container .col-16{grid-column:16}.monster-data-grid-container .col-17{grid-column:17}.monster-data-grid-container .col-17,.monster-data-grid-container .col-18{color:var(--monster-color-primary-1);background-color:var(--monster-bg-color-primary-1);border:none;padding:.4rem;display:flex;font-size:1rem;line-height:1.6;font-weight:400}.monster-data-grid-container .col-18{grid-column:18}.monster-data-grid-container .col-19{grid-column:19}.monster-data-grid-container .col-19,.monster-data-grid-container .col-20{color:var(--monster-color-primary-1);background-color:var(--monster-bg-color-primary-1);border:none;padding:.4rem;display:flex;font-size:1rem;line-height:1.6;font-weight:400}.monster-data-grid-container .col-20{grid-column:20}.monster-data-grid-container .col-21{grid-column:21}.monster-data-grid-container .col-21,.monster-data-grid-container .col-22{color:var(--monster-color-primary-1);background-color:var(--monster-bg-color-primary-1);border:none;padding:.4rem;display:flex;font-size:1rem;line-height:1.6;font-weight:400}.monster-data-grid-container .col-22{grid-column:22}.monster-data-grid-container .col-23{grid-column:23}.monster-data-grid-container .col-23,.monster-data-grid-container .col-24{color:var(--monster-color-primary-1);background-color:var(--monster-bg-color-primary-1);border:none;padding:.4rem;display:flex;font-size:1rem;line-height:1.6;font-weight:400}.monster-data-grid-container .col-24{grid-column:24}.monster-data-grid-container .col-25{grid-column:25}.monster-data-grid-container .col-25,.monster-data-grid-container .col-26{color:var(--monster-color-primary-1);background-color:var(--monster-bg-color-primary-1);border:none;padding:.4rem;display:flex;font-size:1rem;line-height:1.6;font-weight:400}.monster-data-grid-container .col-26{grid-column:26}.monster-data-grid-container .col-27{grid-column:27}.monster-data-grid-container .col-27,.monster-data-grid-container .col-28{color:var(--monster-color-primary-1);background-color:var(--monster-bg-color-primary-1);border:none;padding:.4rem;display:flex;font-size:1rem;line-height:1.6;font-weight:400}.monster-data-grid-container .col-28{grid-column:28}.monster-data-grid-container .col-29{grid-column:29}.monster-data-grid-container .col-29,.monster-data-grid-container .col-30{color:var(--monster-color-primary-1);background-color:var(--monster-bg-color-primary-1);border:none;padding:.4rem;display:flex;font-size:1rem;line-height:1.6;font-weight:400}.monster-data-grid-container .col-30{grid-column:30}.monster-data-grid-container .col-31{grid-column:31}.monster-data-grid-container .col-31,.monster-data-grid-container .col-32{color:var(--monster-color-primary-1);background-color:var(--monster-bg-color-primary-1);border:none;padding:.4rem;display:flex;font-size:1rem;line-height:1.6;font-weight:400}.monster-data-grid-container .col-32{grid-column:32}.monster-data-grid-container .col-33{grid-column:33}.monster-data-grid-container .col-33,.monster-data-grid-container .col-34{color:var(--monster-color-primary-1);background-color:var(--monster-bg-color-primary-1);border:none;padding:.4rem;display:flex;font-size:1rem;line-height:1.6;font-weight:400}.monster-data-grid-container .col-34{grid-column:34}.monster-data-grid-container .col-35{grid-column:35}.monster-data-grid-container .col-35,.monster-data-grid-container .col-36{color:var(--monster-color-primary-1);background-color:var(--monster-bg-color-primary-1);border:none;padding:.4rem;display:flex;font-size:1rem;line-height:1.6;font-weight:400}.monster-data-grid-container .col-36{grid-column:36}.monster-data-grid-container .col-37{grid-column:37}.monster-data-grid-container .col-37,.monster-data-grid-container .col-38{color:var(--monster-color-primary-1);background-color:var(--monster-bg-color-primary-1);border:none;padding:.4rem;display:flex;font-size:1rem;line-height:1.6;font-weight:400}.monster-data-grid-container .col-38{grid-column:38}.monster-data-grid-container .col-39{grid-column:39}.monster-data-grid-container .col-39,.monster-data-grid-container .col-40{color:var(--monster-color-primary-1);background-color:var(--monster-bg-color-primary-1);border:none;padding:.4rem;display:flex;font-size:1rem;line-height:1.6;font-weight:400}.monster-data-grid-container .col-40{grid-column:40}.monster-data-grid-container .col-41{grid-column:41}.monster-data-grid-container .col-41,.monster-data-grid-container .col-42{color:var(--monster-color-primary-1);background-color:var(--monster-bg-color-primary-1);border:none;padding:.4rem;display:flex;font-size:1rem;line-height:1.6;font-weight:400}.monster-data-grid-container .col-42{grid-column:42}.monster-data-grid-container .col-43{grid-column:43}.monster-data-grid-container .col-43,.monster-data-grid-container .col-44{color:var(--monster-color-primary-1);background-color:var(--monster-bg-color-primary-1);border:none;padding:.4rem;display:flex;font-size:1rem;line-height:1.6;font-weight:400}.monster-data-grid-container .col-44{grid-column:44}.monster-data-grid-container .col-45{grid-column:45}.monster-data-grid-container .col-45,.monster-data-grid-container .col-46{color:var(--monster-color-primary-1);background-color:var(--monster-bg-color-primary-1);border:none;padding:.4rem;display:flex;font-size:1rem;line-height:1.6;font-weight:400}.monster-data-grid-container .col-46{grid-column:46}.monster-data-grid-container .col-47{grid-column:47}.monster-data-grid-container .col-47,.monster-data-grid-container .col-48{color:var(--monster-color-primary-1);background-color:var(--monster-bg-color-primary-1);border:none;padding:.4rem;display:flex;font-size:1rem;line-height:1.6;font-weight:400}.monster-data-grid-container .col-48{grid-column:48}.monster-data-grid-container .col-49{grid-column:49}.monster-data-grid-container .col-49,.monster-data-grid-container .col-50{color:var(--monster-color-primary-1);background-color:var(--monster-bg-color-primary-1);border:none;padding:.4rem;display:flex;font-size:1rem;line-height:1.6;font-weight:400}.monster-data-grid-container .col-50{grid-column:50}.monster-data-grid-container .col-start-end{grid-column:1/-1}.monster-data-grid-container .header{font-weight:600;margin-bottom:.4rem;font-size:1rem;line-height:1.6;font-weight:400}
package/source/components/style/display.css CHANGED
@@ -1,33 +1,2 @@
1
1
  /** generated from display.pcss **/
2
- .block {
3
- display: block;
4
- }
5
- .inline {
6
- display: inline;
7
- }
8
- .inline-block {
9
- display: inline-block;
10
- }
11
- .grid {
12
- display: grid;
13
- }
14
- .inline-grid {
15
- display: inline-grid;
16
- }
17
- .flex {
18
- display: flex;
19
- }
20
- .inline-flex {
21
- display: inline-flex;
22
- }
23
- .hidden,
24
- .hide,
25
- .none {
26
- display: none;
27
- }
28
- .visible {
29
- visibility: visible;
30
- }
31
- .invisible {
32
- visibility: hidden;
33
- }
2
+ .block{display:block}.inline{display:inline}.inline-block{display:inline-block}.grid{display:grid}.inline-grid{display:inline-grid}.flex{display:flex}.inline-flex{display:inline-flex}.hidden,.hide,.none{display:none}.visible{visibility:visible}.invisible{visibility:hidden}