@schukai/monster 3.90.0 → 3.91.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 (52) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/package.json +1 -1
  3. package/source/components/datatable/datatable.mjs +2 -0
  4. package/source/components/datatable/filter.mjs +3 -0
  5. package/source/components/form/action-button.mjs +11 -40
  6. package/source/components/form/api-bar.mjs +551 -0
  7. package/source/components/form/button.mjs +1 -3
  8. package/source/components/form/field-set.mjs +1 -3
  9. package/source/components/form/message-state-button.mjs +10 -12
  10. package/source/components/form/password.mjs +1 -1
  11. package/source/components/form/style/action-button.pcss +11 -17
  12. package/source/components/form/style/api-bar.pcss +0 -0
  13. package/source/components/form/style/button-bar.pcss +5 -0
  14. package/source/components/form/style/button.pcss +1 -0
  15. package/source/components/form/style/message-state-button.pcss +1 -0
  16. package/source/components/form/style/state-button.pcss +1 -0
  17. package/source/components/form/stylesheet/action-button.mjs +1 -1
  18. package/source/components/form/stylesheet/api-bar.mjs +38 -0
  19. package/source/components/form/stylesheet/button-bar.mjs +1 -1
  20. package/source/components/form/stylesheet/button.mjs +1 -1
  21. package/source/components/form/stylesheet/message-state-button.mjs +1 -1
  22. package/source/components/form/stylesheet/state-button.mjs +1 -1
  23. package/source/components/layout/iframe.mjs +1 -3
  24. package/source/components/style/badge.css +147 -1
  25. package/source/components/style/border.css +65 -1
  26. package/source/components/style/button.css +205 -1
  27. package/source/components/style/card.css +149 -1
  28. package/source/components/style/color.css +166 -1
  29. package/source/components/style/common.css +159 -1
  30. package/source/components/style/control.css +14 -1
  31. package/source/components/style/data-grid.css +447 -1
  32. package/source/components/style/display.css +32 -1
  33. package/source/components/style/floating-ui.css +42 -1
  34. package/source/components/style/form.css +47 -1
  35. package/source/components/style/host.css +14 -1
  36. package/source/components/style/icons.css +1584 -1
  37. package/source/components/style/link.css +37 -1
  38. package/source/components/style/normalize.css +144 -1
  39. package/source/components/style/popper.css +101 -1
  40. package/source/components/style/property.css +327 -1
  41. package/source/components/style/ripple.css +13 -1
  42. package/source/components/style/skeleton.css +164 -1
  43. package/source/components/style/space.css +240 -1
  44. package/source/components/style/spinner.css +7 -1
  45. package/source/components/style/table.css +39 -1
  46. package/source/components/style/theme.css +356 -1
  47. package/source/components/style/typography.css +178 -1
  48. package/source/monster.mjs +1 -0
  49. package/source/types/version.mjs +1 -1
  50. package/test/cases/monster.mjs +1 -1
  51. package/test/web/test.html +2 -2
  52. package/test/web/tests.js +25 -47
@@ -1,2 +1,165 @@
1
1
  /** generated from skeleton.pcss **/
2
- .monster-skeleton-col-10{--monster-skeleton-color:var(--monster-color-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:10%;--monster-skeleton:linear-gradient(90deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-10,.monster-skeleton-col-20{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-20{--monster-skeleton-color:var(--monster-color-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:20%;--monster-skeleton:linear-gradient(90deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-30{--monster-skeleton-color:var(--monster-color-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:30%;--monster-skeleton:linear-gradient(90deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-30,.monster-skeleton-col-40{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-40{--monster-skeleton-color:var(--monster-color-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:40%;--monster-skeleton:linear-gradient(90deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-50{--monster-skeleton-color:var(--monster-color-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:50%;--monster-skeleton:linear-gradient(90deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-50,.monster-skeleton-col-60{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-60{--monster-skeleton-color:var(--monster-color-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:60%;--monster-skeleton:linear-gradient(90deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-70{--monster-skeleton-color:var(--monster-color-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:70%;--monster-skeleton:linear-gradient(90deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-70,.monster-skeleton-col-80{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-80{--monster-skeleton-color:var(--monster-color-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:80%;--monster-skeleton:linear-gradient(90deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-90{--monster-skeleton-color:var(--monster-color-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:90%;--monster-skeleton:linear-gradient(90deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-100,.monster-skeleton-col-90{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-100{--monster-skeleton-color:var(--monster-color-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:100%;--monster-skeleton:linear-gradient(90deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-animated{animation-duration:2.25s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:shimmer;animation-timing-function:linear;border-radius:4px}@keyframes shimmer{0%{filter:brightness(1)}50%{filter:brightness(1.5)}to{filter:brightness(1)}}
2
+ .monster-skeleton-col-10 {
3
+ --monster-skeleton-color: var(--monster-color-gray-3);
4
+ --monster-skeleton-height: 100%;
5
+ --monster-skeleton-width: 10%;
6
+ --monster-skeleton: linear-gradient(
7
+ 90deg,
8
+ var(--monster-skeleton-color) 0,
9
+ transparent var(--monster-skeleton-width)
10
+ );
11
+ }
12
+ .monster-skeleton-col-10,
13
+ .monster-skeleton-col-20 {
14
+ background-image: var(--monster-skeleton);
15
+ background-position: 0 0;
16
+ background-repeat: no-repeat;
17
+ background-size: var(--monster-skeleton-width) var(--monster-skeleton-height);
18
+ color: var(--monster-skeleton-color);
19
+ min-height: 1px;
20
+ }
21
+ .monster-skeleton-col-20 {
22
+ --monster-skeleton-color: var(--monster-color-gray-3);
23
+ --monster-skeleton-height: 100%;
24
+ --monster-skeleton-width: 20%;
25
+ --monster-skeleton: linear-gradient(
26
+ 90deg,
27
+ var(--monster-skeleton-color) 0,
28
+ transparent var(--monster-skeleton-width)
29
+ );
30
+ }
31
+ .monster-skeleton-col-30 {
32
+ --monster-skeleton-color: var(--monster-color-gray-3);
33
+ --monster-skeleton-height: 100%;
34
+ --monster-skeleton-width: 30%;
35
+ --monster-skeleton: linear-gradient(
36
+ 90deg,
37
+ var(--monster-skeleton-color) 0,
38
+ transparent var(--monster-skeleton-width)
39
+ );
40
+ }
41
+ .monster-skeleton-col-30,
42
+ .monster-skeleton-col-40 {
43
+ background-image: var(--monster-skeleton);
44
+ background-position: 0 0;
45
+ background-repeat: no-repeat;
46
+ background-size: var(--monster-skeleton-width) var(--monster-skeleton-height);
47
+ color: var(--monster-skeleton-color);
48
+ min-height: 1px;
49
+ }
50
+ .monster-skeleton-col-40 {
51
+ --monster-skeleton-color: var(--monster-color-gray-3);
52
+ --monster-skeleton-height: 100%;
53
+ --monster-skeleton-width: 40%;
54
+ --monster-skeleton: linear-gradient(
55
+ 90deg,
56
+ var(--monster-skeleton-color) 0,
57
+ transparent var(--monster-skeleton-width)
58
+ );
59
+ }
60
+ .monster-skeleton-col-50 {
61
+ --monster-skeleton-color: var(--monster-color-gray-3);
62
+ --monster-skeleton-height: 100%;
63
+ --monster-skeleton-width: 50%;
64
+ --monster-skeleton: linear-gradient(
65
+ 90deg,
66
+ var(--monster-skeleton-color) 0,
67
+ transparent var(--monster-skeleton-width)
68
+ );
69
+ }
70
+ .monster-skeleton-col-50,
71
+ .monster-skeleton-col-60 {
72
+ background-image: var(--monster-skeleton);
73
+ background-position: 0 0;
74
+ background-repeat: no-repeat;
75
+ background-size: var(--monster-skeleton-width) var(--monster-skeleton-height);
76
+ color: var(--monster-skeleton-color);
77
+ min-height: 1px;
78
+ }
79
+ .monster-skeleton-col-60 {
80
+ --monster-skeleton-color: var(--monster-color-gray-3);
81
+ --monster-skeleton-height: 100%;
82
+ --monster-skeleton-width: 60%;
83
+ --monster-skeleton: linear-gradient(
84
+ 90deg,
85
+ var(--monster-skeleton-color) 0,
86
+ transparent var(--monster-skeleton-width)
87
+ );
88
+ }
89
+ .monster-skeleton-col-70 {
90
+ --monster-skeleton-color: var(--monster-color-gray-3);
91
+ --monster-skeleton-height: 100%;
92
+ --monster-skeleton-width: 70%;
93
+ --monster-skeleton: linear-gradient(
94
+ 90deg,
95
+ var(--monster-skeleton-color) 0,
96
+ transparent var(--monster-skeleton-width)
97
+ );
98
+ }
99
+ .monster-skeleton-col-70,
100
+ .monster-skeleton-col-80 {
101
+ background-image: var(--monster-skeleton);
102
+ background-position: 0 0;
103
+ background-repeat: no-repeat;
104
+ background-size: var(--monster-skeleton-width) var(--monster-skeleton-height);
105
+ color: var(--monster-skeleton-color);
106
+ min-height: 1px;
107
+ }
108
+ .monster-skeleton-col-80 {
109
+ --monster-skeleton-color: var(--monster-color-gray-3);
110
+ --monster-skeleton-height: 100%;
111
+ --monster-skeleton-width: 80%;
112
+ --monster-skeleton: linear-gradient(
113
+ 90deg,
114
+ var(--monster-skeleton-color) 0,
115
+ transparent var(--monster-skeleton-width)
116
+ );
117
+ }
118
+ .monster-skeleton-col-90 {
119
+ --monster-skeleton-color: var(--monster-color-gray-3);
120
+ --monster-skeleton-height: 100%;
121
+ --monster-skeleton-width: 90%;
122
+ --monster-skeleton: linear-gradient(
123
+ 90deg,
124
+ var(--monster-skeleton-color) 0,
125
+ transparent var(--monster-skeleton-width)
126
+ );
127
+ }
128
+ .monster-skeleton-col-100,
129
+ .monster-skeleton-col-90 {
130
+ background-image: var(--monster-skeleton);
131
+ background-position: 0 0;
132
+ background-repeat: no-repeat;
133
+ background-size: var(--monster-skeleton-width) var(--monster-skeleton-height);
134
+ color: var(--monster-skeleton-color);
135
+ min-height: 1px;
136
+ }
137
+ .monster-skeleton-col-100 {
138
+ --monster-skeleton-color: var(--monster-color-gray-3);
139
+ --monster-skeleton-height: 100%;
140
+ --monster-skeleton-width: 100%;
141
+ --monster-skeleton: linear-gradient(
142
+ 90deg,
143
+ var(--monster-skeleton-color) 0,
144
+ transparent var(--monster-skeleton-width)
145
+ );
146
+ }
147
+ .monster-skeleton-animated {
148
+ animation-duration: 2.25s;
149
+ animation-fill-mode: forwards;
150
+ animation-iteration-count: infinite;
151
+ animation-name: shimmer;
152
+ animation-timing-function: linear;
153
+ border-radius: 4px;
154
+ }
155
+ @keyframes shimmer {
156
+ 0% {
157
+ filter: brightness(1);
158
+ }
159
+ 50% {
160
+ filter: brightness(1.5);
161
+ }
162
+ to {
163
+ filter: brightness(1);
164
+ }
165
+ }
@@ -1,2 +1,241 @@
1
1
  /** generated from space.pcss **/
2
- .monster-margin-0{margin:var(--monster-space-0)}.monster-margin-top-0{margin-top:var(--monster-space-0)}.monster-margin-end-0{margin-right:var(--monster-space-0)}.monster-margin-bottom-0{margin-bottom:var(--monster-space-0)}.monster-margin-start-0{margin-left:var(--monster-space-0)}.monster-padding-0{padding:var(--monster-space-0)}.monster-padding-top-0{padding-top:var(--monster-space-0)}.monster-padding-end-0{padding-right:var(--monster-space-0)}.monster-padding-bottom-0{padding-bottom:var(--monster-space-0)}.monster-padding-start-0{padding-left:var(--monster-space-0)}.monster-margin-1{margin:var(--monster-space-1)}.monster-margin-top-1{margin-top:var(--monster-space-1)}.monster-margin-end-1{margin-right:var(--monster-space-1)}.monster-margin-bottom-1{margin-bottom:var(--monster-space-1)}.monster-margin-start-1{margin-left:var(--monster-space-1)}.monster-padding-1{padding:var(--monster-space-1)}.monster-padding-top-1{padding-top:var(--monster-space-1)}.monster-padding-end-1{padding-right:var(--monster-space-1)}.monster-padding-bottom-1{padding-bottom:var(--monster-space-1)}.monster-padding-start-1{padding-left:var(--monster-space-1)}.monster-margin-2{margin:var(--monster-space-2)}.monster-margin-top-2{margin-top:var(--monster-space-2)}.monster-margin-end-2{margin-right:var(--monster-space-2)}.monster-margin-bottom-2{margin-bottom:var(--monster-space-2)}.monster-margin-start-2{margin-left:var(--monster-space-2)}.monster-padding-2{padding:var(--monster-space-2)}.monster-padding-top-2{padding-top:var(--monster-space-2)}.monster-padding-end-2{padding-right:var(--monster-space-2)}.monster-padding-bottom-2{padding-bottom:var(--monster-space-2)}.monster-padding-start-2{padding-left:var(--monster-space-2)}.monster-margin-3{margin:var(--monster-space-3)}.monster-margin-top-3{margin-top:var(--monster-space-3)}.monster-margin-end-3{margin-right:var(--monster-space-3)}.monster-margin-bottom-3{margin-bottom:var(--monster-space-3)}.monster-margin-start-3{margin-left:var(--monster-space-3)}.monster-padding-3{padding:var(--monster-space-3)}.monster-padding-top-3{padding-top:var(--monster-space-3)}.monster-padding-end-3{padding-right:var(--monster-space-3)}.monster-padding-bottom-3{padding-bottom:var(--monster-space-3)}.monster-padding-start-3{padding-left:var(--monster-space-3)}.monster-margin-4{margin:var(--monster-space-4)}.monster-margin-top-4{margin-top:var(--monster-space-4)}.monster-margin-end-4{margin-right:var(--monster-space-4)}.monster-margin-bottom-4{margin-bottom:var(--monster-space-4)}.monster-margin-start-4{margin-left:var(--monster-space-4)}.monster-padding-4{padding:var(--monster-space-4)}.monster-padding-top-4{padding-top:var(--monster-space-4)}.monster-padding-end-4{padding-right:var(--monster-space-4)}.monster-padding-bottom-4{padding-bottom:var(--monster-space-4)}.monster-padding-start-4{padding-left:var(--monster-space-4)}.monster-margin-5{margin:var(--monster-space-5)}.monster-margin-top-5{margin-top:var(--monster-space-5)}.monster-margin-end-5{margin-right:var(--monster-space-5)}.monster-margin-bottom-5{margin-bottom:var(--monster-space-5)}.monster-margin-start-5{margin-left:var(--monster-space-5)}.monster-padding-5{padding:var(--monster-space-5)}.monster-padding-top-5{padding-top:var(--monster-space-5)}.monster-padding-end-5{padding-right:var(--monster-space-5)}.monster-padding-bottom-5{padding-bottom:var(--monster-space-5)}.monster-padding-start-5{padding-left:var(--monster-space-5)}.monster-margin-6{margin:var(--monster-space-6)}.monster-margin-top-6{margin-top:var(--monster-space-6)}.monster-margin-end-6{margin-right:var(--monster-space-6)}.monster-margin-bottom-6{margin-bottom:var(--monster-space-6)}.monster-margin-start-6{margin-left:var(--monster-space-6)}.monster-padding-6{padding:var(--monster-space-6)}.monster-padding-top-6{padding-top:var(--monster-space-6)}.monster-padding-end-6{padding-right:var(--monster-space-6)}.monster-padding-bottom-6{padding-bottom:var(--monster-space-6)}.monster-padding-start-6{padding-left:var(--monster-space-6)}.monster-margin-7{margin:var(--monster-space-7)}.monster-margin-top-7{margin-top:var(--monster-space-7)}.monster-margin-end-7{margin-right:var(--monster-space-7)}.monster-margin-bottom-7{margin-bottom:var(--monster-space-7)}.monster-margin-start-7{margin-left:var(--monster-space-7)}.monster-padding-7{padding:var(--monster-space-7)}.monster-padding-top-7{padding-top:var(--monster-space-7)}.monster-padding-end-7{padding-right:var(--monster-space-7)}.monster-padding-bottom-7{padding-bottom:var(--monster-space-7)}.monster-padding-start-7{padding-left:var(--monster-space-7)}
2
+ .monster-margin-0 {
3
+ margin: var(--monster-space-0);
4
+ }
5
+ .monster-margin-top-0 {
6
+ margin-top: var(--monster-space-0);
7
+ }
8
+ .monster-margin-end-0 {
9
+ margin-right: var(--monster-space-0);
10
+ }
11
+ .monster-margin-bottom-0 {
12
+ margin-bottom: var(--monster-space-0);
13
+ }
14
+ .monster-margin-start-0 {
15
+ margin-left: var(--monster-space-0);
16
+ }
17
+ .monster-padding-0 {
18
+ padding: var(--monster-space-0);
19
+ }
20
+ .monster-padding-top-0 {
21
+ padding-top: var(--monster-space-0);
22
+ }
23
+ .monster-padding-end-0 {
24
+ padding-right: var(--monster-space-0);
25
+ }
26
+ .monster-padding-bottom-0 {
27
+ padding-bottom: var(--monster-space-0);
28
+ }
29
+ .monster-padding-start-0 {
30
+ padding-left: var(--monster-space-0);
31
+ }
32
+ .monster-margin-1 {
33
+ margin: var(--monster-space-1);
34
+ }
35
+ .monster-margin-top-1 {
36
+ margin-top: var(--monster-space-1);
37
+ }
38
+ .monster-margin-end-1 {
39
+ margin-right: var(--monster-space-1);
40
+ }
41
+ .monster-margin-bottom-1 {
42
+ margin-bottom: var(--monster-space-1);
43
+ }
44
+ .monster-margin-start-1 {
45
+ margin-left: var(--monster-space-1);
46
+ }
47
+ .monster-padding-1 {
48
+ padding: var(--monster-space-1);
49
+ }
50
+ .monster-padding-top-1 {
51
+ padding-top: var(--monster-space-1);
52
+ }
53
+ .monster-padding-end-1 {
54
+ padding-right: var(--monster-space-1);
55
+ }
56
+ .monster-padding-bottom-1 {
57
+ padding-bottom: var(--monster-space-1);
58
+ }
59
+ .monster-padding-start-1 {
60
+ padding-left: var(--monster-space-1);
61
+ }
62
+ .monster-margin-2 {
63
+ margin: var(--monster-space-2);
64
+ }
65
+ .monster-margin-top-2 {
66
+ margin-top: var(--monster-space-2);
67
+ }
68
+ .monster-margin-end-2 {
69
+ margin-right: var(--monster-space-2);
70
+ }
71
+ .monster-margin-bottom-2 {
72
+ margin-bottom: var(--monster-space-2);
73
+ }
74
+ .monster-margin-start-2 {
75
+ margin-left: var(--monster-space-2);
76
+ }
77
+ .monster-padding-2 {
78
+ padding: var(--monster-space-2);
79
+ }
80
+ .monster-padding-top-2 {
81
+ padding-top: var(--monster-space-2);
82
+ }
83
+ .monster-padding-end-2 {
84
+ padding-right: var(--monster-space-2);
85
+ }
86
+ .monster-padding-bottom-2 {
87
+ padding-bottom: var(--monster-space-2);
88
+ }
89
+ .monster-padding-start-2 {
90
+ padding-left: var(--monster-space-2);
91
+ }
92
+ .monster-margin-3 {
93
+ margin: var(--monster-space-3);
94
+ }
95
+ .monster-margin-top-3 {
96
+ margin-top: var(--monster-space-3);
97
+ }
98
+ .monster-margin-end-3 {
99
+ margin-right: var(--monster-space-3);
100
+ }
101
+ .monster-margin-bottom-3 {
102
+ margin-bottom: var(--monster-space-3);
103
+ }
104
+ .monster-margin-start-3 {
105
+ margin-left: var(--monster-space-3);
106
+ }
107
+ .monster-padding-3 {
108
+ padding: var(--monster-space-3);
109
+ }
110
+ .monster-padding-top-3 {
111
+ padding-top: var(--monster-space-3);
112
+ }
113
+ .monster-padding-end-3 {
114
+ padding-right: var(--monster-space-3);
115
+ }
116
+ .monster-padding-bottom-3 {
117
+ padding-bottom: var(--monster-space-3);
118
+ }
119
+ .monster-padding-start-3 {
120
+ padding-left: var(--monster-space-3);
121
+ }
122
+ .monster-margin-4 {
123
+ margin: var(--monster-space-4);
124
+ }
125
+ .monster-margin-top-4 {
126
+ margin-top: var(--monster-space-4);
127
+ }
128
+ .monster-margin-end-4 {
129
+ margin-right: var(--monster-space-4);
130
+ }
131
+ .monster-margin-bottom-4 {
132
+ margin-bottom: var(--monster-space-4);
133
+ }
134
+ .monster-margin-start-4 {
135
+ margin-left: var(--monster-space-4);
136
+ }
137
+ .monster-padding-4 {
138
+ padding: var(--monster-space-4);
139
+ }
140
+ .monster-padding-top-4 {
141
+ padding-top: var(--monster-space-4);
142
+ }
143
+ .monster-padding-end-4 {
144
+ padding-right: var(--monster-space-4);
145
+ }
146
+ .monster-padding-bottom-4 {
147
+ padding-bottom: var(--monster-space-4);
148
+ }
149
+ .monster-padding-start-4 {
150
+ padding-left: var(--monster-space-4);
151
+ }
152
+ .monster-margin-5 {
153
+ margin: var(--monster-space-5);
154
+ }
155
+ .monster-margin-top-5 {
156
+ margin-top: var(--monster-space-5);
157
+ }
158
+ .monster-margin-end-5 {
159
+ margin-right: var(--monster-space-5);
160
+ }
161
+ .monster-margin-bottom-5 {
162
+ margin-bottom: var(--monster-space-5);
163
+ }
164
+ .monster-margin-start-5 {
165
+ margin-left: var(--monster-space-5);
166
+ }
167
+ .monster-padding-5 {
168
+ padding: var(--monster-space-5);
169
+ }
170
+ .monster-padding-top-5 {
171
+ padding-top: var(--monster-space-5);
172
+ }
173
+ .monster-padding-end-5 {
174
+ padding-right: var(--monster-space-5);
175
+ }
176
+ .monster-padding-bottom-5 {
177
+ padding-bottom: var(--monster-space-5);
178
+ }
179
+ .monster-padding-start-5 {
180
+ padding-left: var(--monster-space-5);
181
+ }
182
+ .monster-margin-6 {
183
+ margin: var(--monster-space-6);
184
+ }
185
+ .monster-margin-top-6 {
186
+ margin-top: var(--monster-space-6);
187
+ }
188
+ .monster-margin-end-6 {
189
+ margin-right: var(--monster-space-6);
190
+ }
191
+ .monster-margin-bottom-6 {
192
+ margin-bottom: var(--monster-space-6);
193
+ }
194
+ .monster-margin-start-6 {
195
+ margin-left: var(--monster-space-6);
196
+ }
197
+ .monster-padding-6 {
198
+ padding: var(--monster-space-6);
199
+ }
200
+ .monster-padding-top-6 {
201
+ padding-top: var(--monster-space-6);
202
+ }
203
+ .monster-padding-end-6 {
204
+ padding-right: var(--monster-space-6);
205
+ }
206
+ .monster-padding-bottom-6 {
207
+ padding-bottom: var(--monster-space-6);
208
+ }
209
+ .monster-padding-start-6 {
210
+ padding-left: var(--monster-space-6);
211
+ }
212
+ .monster-margin-7 {
213
+ margin: var(--monster-space-7);
214
+ }
215
+ .monster-margin-top-7 {
216
+ margin-top: var(--monster-space-7);
217
+ }
218
+ .monster-margin-end-7 {
219
+ margin-right: var(--monster-space-7);
220
+ }
221
+ .monster-margin-bottom-7 {
222
+ margin-bottom: var(--monster-space-7);
223
+ }
224
+ .monster-margin-start-7 {
225
+ margin-left: var(--monster-space-7);
226
+ }
227
+ .monster-padding-7 {
228
+ padding: var(--monster-space-7);
229
+ }
230
+ .monster-padding-top-7 {
231
+ padding-top: var(--monster-space-7);
232
+ }
233
+ .monster-padding-end-7 {
234
+ padding-right: var(--monster-space-7);
235
+ }
236
+ .monster-padding-bottom-7 {
237
+ padding-bottom: var(--monster-space-7);
238
+ }
239
+ .monster-padding-start-7 {
240
+ padding-left: var(--monster-space-7);
241
+ }
@@ -1,2 +1,8 @@
1
1
  /** generated from spinner.pcss **/
2
- .monster-spinner{height:100%;-webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='red' viewBox='0 0 44 44'%3E%3Cg fill='none' fill-rule='evenodd' stroke-width='2'%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='0s' calcMode='spline' dur='1.8s' keySplines='0.165, 0.84, 0.44, 1' keyTimes='0; 1' repeatCount='indefinite' values='1; 20'/%3E%3Canimate attributeName='stroke-opacity' begin='0s' calcMode='spline' dur='1.8s' keySplines='0.3, 0.61, 0.355, 1' keyTimes='0; 1' repeatCount='indefinite' values='1; 0'/%3E%3C/circle%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='-0.9s' calcMode='spline' dur='1.8s' keySplines='0.165, 0.84, 0.44, 1' keyTimes='0; 1' repeatCount='indefinite' values='1; 20'/%3E%3Canimate attributeName='stroke-opacity' begin='-0.9s' calcMode='spline' dur='1.8s' keySplines='0.3, 0.61, 0.355, 1' keyTimes='0; 1' repeatCount='indefinite' values='1; 0'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E") no-repeat 50% 50%;mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='red' viewBox='0 0 44 44'%3E%3Cg fill='none' fill-rule='evenodd' stroke-width='2'%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='0s' calcMode='spline' dur='1.8s' keySplines='0.165, 0.84, 0.44, 1' keyTimes='0; 1' repeatCount='indefinite' values='1; 20'/%3E%3Canimate attributeName='stroke-opacity' begin='0s' calcMode='spline' dur='1.8s' keySplines='0.3, 0.61, 0.355, 1' keyTimes='0; 1' repeatCount='indefinite' values='1; 0'/%3E%3C/circle%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='-0.9s' calcMode='spline' dur='1.8s' keySplines='0.165, 0.84, 0.44, 1' keyTimes='0; 1' repeatCount='indefinite' values='1; 20'/%3E%3Canimate attributeName='stroke-opacity' begin='-0.9s' calcMode='spline' dur='1.8s' keySplines='0.3, 0.61, 0.355, 1' keyTimes='0; 1' repeatCount='indefinite' values='1; 0'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E") no-repeat 50% 50%}
2
+ .monster-spinner {
3
+ height: 100%;
4
+ -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='red' viewBox='0 0 44 44'%3E%3Cg fill='none' fill-rule='evenodd' stroke-width='2'%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='0s' calcMode='spline' dur='1.8s' keySplines='0.165, 0.84, 0.44, 1' keyTimes='0; 1' repeatCount='indefinite' values='1; 20'/%3E%3Canimate attributeName='stroke-opacity' begin='0s' calcMode='spline' dur='1.8s' keySplines='0.3, 0.61, 0.355, 1' keyTimes='0; 1' repeatCount='indefinite' values='1; 0'/%3E%3C/circle%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='-0.9s' calcMode='spline' dur='1.8s' keySplines='0.165, 0.84, 0.44, 1' keyTimes='0; 1' repeatCount='indefinite' values='1; 20'/%3E%3Canimate attributeName='stroke-opacity' begin='-0.9s' calcMode='spline' dur='1.8s' keySplines='0.3, 0.61, 0.355, 1' keyTimes='0; 1' repeatCount='indefinite' values='1; 0'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E")
5
+ no-repeat 50% 50%;
6
+ mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='red' viewBox='0 0 44 44'%3E%3Cg fill='none' fill-rule='evenodd' stroke-width='2'%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='0s' calcMode='spline' dur='1.8s' keySplines='0.165, 0.84, 0.44, 1' keyTimes='0; 1' repeatCount='indefinite' values='1; 20'/%3E%3Canimate attributeName='stroke-opacity' begin='0s' calcMode='spline' dur='1.8s' keySplines='0.3, 0.61, 0.355, 1' keyTimes='0; 1' repeatCount='indefinite' values='1; 0'/%3E%3C/circle%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='-0.9s' calcMode='spline' dur='1.8s' keySplines='0.165, 0.84, 0.44, 1' keyTimes='0; 1' repeatCount='indefinite' values='1; 20'/%3E%3Canimate attributeName='stroke-opacity' begin='-0.9s' calcMode='spline' dur='1.8s' keySplines='0.3, 0.61, 0.355, 1' keyTimes='0; 1' repeatCount='indefinite' values='1; 0'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E")
7
+ no-repeat 50% 50%;
8
+ }
@@ -1,2 +1,40 @@
1
1
  /** generated from table.pcss **/
2
- th{text-align:inherit}.monster-table{border-collapse:collapse;box-sizing:border-box;color:#212529;margin-bottom:1rem;width:100%}.monster-table tr{margin:10px 0}.monster-table td,.monster-table th{padding:.75rem;vertical-align:top}.monster-table thead th{vertical-align:bottom}.monster-table-container{box-sizing:border-box;display:block;margin:0;overflow-x:auto;padding:8px;width:100%}.monster-table tbody tr td,.monster-table tbody tr th,.monster-table-container{background-color:var(--monster-theme-control-bg-color);color:var(--monster-theme-control-color)}.monster-table tbody tr td,.monster-table tbody tr th{border-bottom:1px solid var(--monster-theme-control-border-color)}
2
+ th {
3
+ text-align: inherit;
4
+ }
5
+ .monster-table {
6
+ border-collapse: collapse;
7
+ box-sizing: border-box;
8
+ color: #212529;
9
+ margin-bottom: 1rem;
10
+ width: 100%;
11
+ }
12
+ .monster-table tr {
13
+ margin: 10px 0;
14
+ }
15
+ .monster-table td,
16
+ .monster-table th {
17
+ padding: .75rem;
18
+ vertical-align: top;
19
+ }
20
+ .monster-table thead th {
21
+ vertical-align: bottom;
22
+ }
23
+ .monster-table-container {
24
+ box-sizing: border-box;
25
+ display: block;
26
+ margin: 0;
27
+ overflow-x: auto;
28
+ padding: 8px;
29
+ width: 100%;
30
+ }
31
+ .monster-table tbody tr td,
32
+ .monster-table tbody tr th,
33
+ .monster-table-container {
34
+ background-color: var(--monster-theme-control-bg-color);
35
+ color: var(--monster-theme-control-color);
36
+ }
37
+ .monster-table tbody tr td,
38
+ .monster-table tbody tr th {
39
+ border-bottom: 1px solid var(--monster-theme-control-border-color);
40
+ }