@schukai/monster 3.90.0 → 3.92.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 (60) hide show
  1. package/CHANGELOG.md +22 -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/datatable/save-button.mjs +3 -0
  6. package/source/components/form/action-button.mjs +11 -40
  7. package/source/components/form/api-bar.mjs +551 -0
  8. package/source/components/form/button.mjs +1 -3
  9. package/source/components/form/context-error.mjs +2 -13
  10. package/source/components/form/context-help.mjs +1 -1
  11. package/source/components/form/field-set.mjs +1 -3
  12. package/source/components/form/message-state-button.mjs +10 -12
  13. package/source/components/form/password.mjs +3 -3
  14. package/source/components/form/reload.mjs +1 -1
  15. package/source/components/form/shadow-reload.mjs +1 -1
  16. package/source/components/form/style/action-button.pcss +11 -17
  17. package/source/components/form/style/api-bar.pcss +0 -0
  18. package/source/components/form/style/button-bar.pcss +5 -0
  19. package/source/components/form/style/button.pcss +1 -0
  20. package/source/components/form/style/message-state-button.pcss +1 -0
  21. package/source/components/form/style/state-button.pcss +1 -0
  22. package/source/components/form/stylesheet/action-button.mjs +1 -1
  23. package/source/components/form/stylesheet/api-bar.mjs +38 -0
  24. package/source/components/form/stylesheet/button-bar.mjs +1 -1
  25. package/source/components/form/stylesheet/button.mjs +1 -1
  26. package/source/components/form/stylesheet/message-state-button.mjs +1 -1
  27. package/source/components/form/stylesheet/state-button.mjs +1 -1
  28. package/source/components/form/template.mjs +49 -18
  29. package/source/components/form/tree-select.mjs +60 -42
  30. package/source/components/layout/iframe.mjs +1 -3
  31. package/source/components/layout/tabs.mjs +38 -3
  32. package/source/components/style/badge.css +147 -1
  33. package/source/components/style/border.css +65 -1
  34. package/source/components/style/button.css +205 -1
  35. package/source/components/style/card.css +149 -1
  36. package/source/components/style/color.css +166 -1
  37. package/source/components/style/common.css +159 -1
  38. package/source/components/style/control.css +14 -1
  39. package/source/components/style/data-grid.css +447 -1
  40. package/source/components/style/display.css +32 -1
  41. package/source/components/style/floating-ui.css +42 -1
  42. package/source/components/style/form.css +47 -1
  43. package/source/components/style/host.css +14 -1
  44. package/source/components/style/icons.css +1584 -1
  45. package/source/components/style/link.css +37 -1
  46. package/source/components/style/normalize.css +144 -1
  47. package/source/components/style/popper.css +101 -1
  48. package/source/components/style/property.css +327 -1
  49. package/source/components/style/ripple.css +13 -1
  50. package/source/components/style/skeleton.css +164 -1
  51. package/source/components/style/space.css +240 -1
  52. package/source/components/style/spinner.css +7 -1
  53. package/source/components/style/table.css +39 -1
  54. package/source/components/style/theme.css +356 -1
  55. package/source/components/style/typography.css +178 -1
  56. package/source/monster.mjs +1 -0
  57. package/source/types/version.mjs +1 -1
  58. package/test/cases/monster.mjs +1 -1
  59. package/test/web/test.html +2 -2
  60. package/test/web/tests.js +119 -64
@@ -1,2 +1,206 @@
1
1
  /** generated from button.pcss **/
2
- .monster-button-primary,button{align-items:center;background-color:var(--monster-bg-color-primary-1);background-position:50%;border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);color:var(--monster-color-primary-1);cursor:pointer;display:flex;font-family:var(--monster-font-family);font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}.monster-button-primary{background-color:var(--monster-bg-color-primary-4);border-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-button-secondary{background-color:var(--monster-bg-color-primary-1);background-color:var(--monster-bg-color-secondary-4);border-color:var(--monster-bg-color-secondary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-color-primary-1);color:var(--monster-color-secondary-4)}.monster-button-secondary,.monster-button-tertiary{align-items:center;background-position:50%;box-shadow:var(--monster-box-shadow-1);cursor:pointer;display:flex;font-family:var(--monster-font-family);font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}.monster-button-tertiary{background-color:var(--monster-bg-color-primary-1);background-color:var(--monster-bg-color-tertiary-4);border-color:var(--monster-bg-color-tertiary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-color-primary-1);color:var(--monster-color-tertiary-4)}.monster-button-outline-primary{background-color:var(--monster-bg-color-primary-1);background-color:var(--monster-color-primary-4);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-color-primary-1);color:var(--monster-bg-color-primary-4)}.monster-button-outline-primary,.monster-button-outline-secondary{align-items:center;background-position:50%;box-shadow:var(--monster-box-shadow-1);cursor:pointer;display:flex;font-family:var(--monster-font-family);font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}.monster-button-outline-secondary{background-color:var(--monster-bg-color-primary-1);background-color:var(--monster-color-secondary-4);border-color:var(--monster-bg-color-secondary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-color-primary-1);color:var(--monster-bg-color-secondary-4)}.monster-button-outline-tertiary{align-items:center;background-color:var(--monster-bg-color-primary-1);background-color:var(--monster-color-tertiary-4);background-position:50%;border-color:var(--monster-bg-color-tertiary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);color:var(--monster-color-primary-1);color:var(--monster-bg-color-tertiary-4);cursor:pointer;display:flex;font-family:var(--monster-font-family);font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}button:active,button:hover{box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s}button:active{z-index:var(--monster-z-index-outline)}.monster-button-bar,.monster-button-group{align-content:center;align-items:stretch;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between}.monster-button-group{box-sizing:border-box;gap:0;margin:1rem 0}.monster-button-group>:not(:last-child){margin-right:calc(var(--monster-border-width)*-1)}.monster-button-group :hover{box-shadow:none}button:focus{outline:1px dashed var(--monster-color-selection-4);outline-offset:2px;z-index:var(--monster-z-index-outline)}@media (prefers-color-scheme:light){button:focus{outline:1px dashed var(--monster-color-selection-3);outline-offset:2px;z-index:var(--monster-z-index-outline)}}
2
+ .monster-button-primary,
3
+ button {
4
+ align-items: center;
5
+ background-color: var(--monster-bg-color-primary-1);
6
+ background-position: 50%;
7
+ border-radius: var(--monster-border-radius);
8
+ border-style: var(--monster-border-style);
9
+ border-width: var(--monster-border-width);
10
+ box-shadow: var(--monster-box-shadow-1);
11
+ color: var(--monster-color-primary-1);
12
+ cursor: pointer;
13
+ display: flex;
14
+ font-family: var(--monster-font-family);
15
+ font-size: 1rem;
16
+ font-weight: 400;
17
+ gap: .4rem;
18
+ justify-content: center;
19
+ line-height: 1.5;
20
+ outline: none;
21
+ overflow: hidden;
22
+ padding: .375rem .75rem;
23
+ position: relative;
24
+ text-align: center;
25
+ text-decoration: none;
26
+ -webkit-user-select: none;
27
+ -moz-user-select: none;
28
+ user-select: none;
29
+ vertical-align: middle;
30
+ width: -webkit-fill-available;
31
+ width: -moz-available;
32
+ width: stretch;
33
+ }
34
+ .monster-button-primary {
35
+ background-color: var(--monster-bg-color-primary-4);
36
+ border-color: var(--monster-bg-color-primary-4);
37
+ color: var(--monster-color-primary-4);
38
+ }
39
+ .monster-button-secondary {
40
+ background-color: var(--monster-bg-color-primary-1);
41
+ background-color: var(--monster-bg-color-secondary-4);
42
+ border-color: var(--monster-bg-color-secondary-4);
43
+ border-radius: var(--monster-border-radius);
44
+ border-style: var(--monster-border-style);
45
+ border-width: var(--monster-border-width);
46
+ color: var(--monster-color-primary-1);
47
+ color: var(--monster-color-secondary-4);
48
+ }
49
+ .monster-button-secondary,
50
+ .monster-button-tertiary {
51
+ align-items: center;
52
+ background-position: 50%;
53
+ box-shadow: var(--monster-box-shadow-1);
54
+ cursor: pointer;
55
+ display: flex;
56
+ font-family: var(--monster-font-family);
57
+ font-size: 1rem;
58
+ font-weight: 400;
59
+ gap: .4rem;
60
+ justify-content: center;
61
+ line-height: 1.5;
62
+ outline: none;
63
+ overflow: hidden;
64
+ padding: .375rem .75rem;
65
+ position: relative;
66
+ text-align: center;
67
+ text-decoration: none;
68
+ -webkit-user-select: none;
69
+ -moz-user-select: none;
70
+ user-select: none;
71
+ vertical-align: middle;
72
+ width: -webkit-fill-available;
73
+ width: -moz-available;
74
+ width: stretch;
75
+ }
76
+ .monster-button-tertiary {
77
+ background-color: var(--monster-bg-color-primary-1);
78
+ background-color: var(--monster-bg-color-tertiary-4);
79
+ border-color: var(--monster-bg-color-tertiary-4);
80
+ border-radius: var(--monster-border-radius);
81
+ border-style: var(--monster-border-style);
82
+ border-width: var(--monster-border-width);
83
+ color: var(--monster-color-primary-1);
84
+ color: var(--monster-color-tertiary-4);
85
+ }
86
+ .monster-button-outline-primary {
87
+ background-color: var(--monster-bg-color-primary-1);
88
+ background-color: var(--monster-color-primary-4);
89
+ border-color: var(--monster-bg-color-primary-4);
90
+ border-radius: var(--monster-border-radius);
91
+ border-style: var(--monster-border-style);
92
+ border-width: var(--monster-border-width);
93
+ color: var(--monster-color-primary-1);
94
+ color: var(--monster-bg-color-primary-4);
95
+ }
96
+ .monster-button-outline-primary,
97
+ .monster-button-outline-secondary {
98
+ align-items: center;
99
+ background-position: 50%;
100
+ box-shadow: var(--monster-box-shadow-1);
101
+ cursor: pointer;
102
+ display: flex;
103
+ font-family: var(--monster-font-family);
104
+ font-size: 1rem;
105
+ font-weight: 400;
106
+ gap: .4rem;
107
+ justify-content: center;
108
+ line-height: 1.5;
109
+ outline: none;
110
+ overflow: hidden;
111
+ padding: .375rem .75rem;
112
+ position: relative;
113
+ text-align: center;
114
+ text-decoration: none;
115
+ -webkit-user-select: none;
116
+ -moz-user-select: none;
117
+ user-select: none;
118
+ vertical-align: middle;
119
+ width: -webkit-fill-available;
120
+ width: -moz-available;
121
+ width: stretch;
122
+ }
123
+ .monster-button-outline-secondary {
124
+ background-color: var(--monster-bg-color-primary-1);
125
+ background-color: var(--monster-color-secondary-4);
126
+ border-color: var(--monster-bg-color-secondary-4);
127
+ border-radius: var(--monster-border-radius);
128
+ border-style: var(--monster-border-style);
129
+ border-width: var(--monster-border-width);
130
+ color: var(--monster-color-primary-1);
131
+ color: var(--monster-bg-color-secondary-4);
132
+ }
133
+ .monster-button-outline-tertiary {
134
+ align-items: center;
135
+ background-color: var(--monster-bg-color-primary-1);
136
+ background-color: var(--monster-color-tertiary-4);
137
+ background-position: 50%;
138
+ border-color: var(--monster-bg-color-tertiary-4);
139
+ border-radius: var(--monster-border-radius);
140
+ border-style: var(--monster-border-style);
141
+ border-width: var(--monster-border-width);
142
+ box-shadow: var(--monster-box-shadow-1);
143
+ color: var(--monster-color-primary-1);
144
+ color: var(--monster-bg-color-tertiary-4);
145
+ cursor: pointer;
146
+ display: flex;
147
+ font-family: var(--monster-font-family);
148
+ font-size: 1rem;
149
+ font-weight: 400;
150
+ gap: .4rem;
151
+ justify-content: center;
152
+ line-height: 1.5;
153
+ outline: none;
154
+ overflow: hidden;
155
+ padding: .375rem .75rem;
156
+ position: relative;
157
+ text-align: center;
158
+ text-decoration: none;
159
+ -webkit-user-select: none;
160
+ -moz-user-select: none;
161
+ user-select: none;
162
+ vertical-align: middle;
163
+ width: -webkit-fill-available;
164
+ width: -moz-available;
165
+ width: stretch;
166
+ }
167
+ button:active,
168
+ button:hover {
169
+ box-shadow: var(--monster-box-shadow-2);
170
+ transition: background .8s, color .25s .0833333333s;
171
+ }
172
+ button:active {
173
+ z-index: var(--monster-z-index-outline);
174
+ }
175
+ .monster-button-bar,
176
+ .monster-button-group {
177
+ align-content: center;
178
+ align-items: stretch;
179
+ display: flex;
180
+ flex-direction: row;
181
+ flex-wrap: nowrap;
182
+ justify-content: space-between;
183
+ }
184
+ .monster-button-group {
185
+ box-sizing: border-box;
186
+ gap: 0;
187
+ margin: 1rem 0;
188
+ }
189
+ .monster-button-group > :not(:last-child) {
190
+ margin-right: calc(var(--monster-border-width) * -1);
191
+ }
192
+ .monster-button-group :hover {
193
+ box-shadow: none;
194
+ }
195
+ button:focus {
196
+ outline: 1px dashed var(--monster-color-selection-4);
197
+ outline-offset: 2px;
198
+ z-index: var(--monster-z-index-outline);
199
+ }
200
+ @media (prefers-color-scheme: light) {
201
+ button:focus {
202
+ outline: 1px dashed var(--monster-color-selection-3);
203
+ outline-offset: 2px;
204
+ z-index: var(--monster-z-index-outline);
205
+ }
206
+ }
@@ -1,2 +1,150 @@
1
1
  /** generated from card.pcss **/
2
- .cards{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:22px}.cards .card{align-content:stretch;align-items:stretch;background-color:var(--monster-bg-color-primary-1);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-sizing:border-box;color:var(--monster-color-primary-1);display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:space-between;border-shadow:var(--monster-box-shadow-1);overflow:hidden}:is(.cards .card) img{display:block;margin-left:0;-o-object-fit:scale-down;object-fit:scale-down;overflow:hidden;padding:0;width:101%}:is(:is(.cards .card) img):hover{box-shadow:var(--monster-box-shadow-2);transform:scale(1.05);transition:background .8s,color .25s .0833333333s}:is(.cards .card) h1,:is(.cards .card) h2,:is(.cards .card) h3,:is(.cards .card) h4,:is(.cards .card) h5,:is(.cards .card) h6,:is(.cards .card) p{margin:0;padding-left:1rem;padding-right:1rem}:is(.cards .card) h1:last-child,:is(.cards .card) h2:last-child,:is(.cards .card) h3:last-child,:is(.cards .card) h4:last-child,:is(.cards .card) h5:last-child,:is(.cards .card) h6:last-child,:is(.cards .card) p:last-child{padding-bottom:1rem}:is(.cards .card) h1:first-child,:is(.cards .card) h2:first-child,:is(.cards .card) h3:first-child,:is(.cards .card) h4:first-child,:is(.cards .card) h5:first-child,:is(.cards .card) h6:first-child,:is(.cards .card) p:first-child{padding-top:1rem}:is(.cards .card) img+h1,:is(.cards .card) img+h2,:is(.cards .card) img+h3,:is(.cards .card) img+h4,:is(.cards .card) img+h5,:is(.cards .card) img+h6,:is(.cards .card) img+p{padding-top:1rem}:is(.cards .card) h1+img,:is(.cards .card) h2+img,:is(.cards .card) h3+img,:is(.cards .card) h4+img,:is(.cards .card) h5+img,:is(.cards .card) h6+img,:is(.cards .card) p+img{padding-bottom:1rem}:is(.cards .card) h1+p,:is(.cards .card) h2+p,:is(.cards .card) h3+p,:is(.cards .card) h4+p,:is(.cards .card) h5+p,:is(.cards .card) h6+p,:is(.cards .card) p+p{padding-top:1rem}:is(.cards .card) .button+h1,:is(.cards .card) .button+h2,:is(.cards .card) .button+h3,:is(.cards .card) .button+h4,:is(.cards .card) .button+h5,:is(.cards .card) .button+h6,:is(.cards .card) .button+p,:is(.cards .card) button+h1,:is(.cards .card) button+h2,:is(.cards .card) button+h3,:is(.cards .card) button+h4,:is(.cards .card) button+h5,:is(.cards .card) button+h6,:is(.cards .card) button+p{padding-bottom:1rem}:is(.cards .card) h1+.button,:is(.cards .card) h1+button,:is(.cards .card) h2+.button,:is(.cards .card) h2+button,:is(.cards .card) h3+.button,:is(.cards .card) h3+button,:is(.cards .card) h4+.button,:is(.cards .card) h4+button,:is(.cards .card) h5+.button,:is(.cards .card) h5+button,:is(.cards .card) h6+.button,:is(.cards .card) h6+button,:is(.cards .card) p+.button,:is(.cards .card) p+button{margin-top:1rem}:is(.cards .card) .button,:is(.cards .card) button{border-left:none;border-right:none}:is(.cards .card) .button:first-child,:is(.cards .card) button:first-child{border-top:none}:is(.cards .card) .button:last-child,:is(.cards .card) button:last-child{border-bottom:none}:is(:is(.cards .card) button:last-child,:is(.cards .card) .button:last-child):hover{box-shadow:var(--monster-box-shadow-2);transform:scale(1.05);transition:background .8s,color .25s .0833333333s}.card:is(.cards .card):hover{box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s;z-index:var(--monster-z-index-outline)}
2
+ .cards {
3
+ display: grid;
4
+ grid-template-columns: repeat(4, 1fr);
5
+ grid-gap: 22px;
6
+ }
7
+ .cards .card {
8
+ align-content: stretch;
9
+ align-items: stretch;
10
+ background-color: var(--monster-bg-color-primary-1);
11
+ border-radius: var(--monster-border-radius);
12
+ border-style: var(--monster-border-style);
13
+ border-width: var(--monster-border-width);
14
+ box-sizing: border-box;
15
+ color: var(--monster-color-primary-1);
16
+ display: flex;
17
+ flex-direction: column;
18
+ flex-wrap: nowrap;
19
+ justify-content: space-between;
20
+ border-shadow: var(--monster-box-shadow-1);
21
+ overflow: hidden;
22
+ }
23
+ :is(.cards .card) img {
24
+ display: block;
25
+ margin-left: 0;
26
+ -o-object-fit: scale-down;
27
+ object-fit: scale-down;
28
+ overflow: hidden;
29
+ padding: 0;
30
+ width: 101%;
31
+ }
32
+ :is(:is(.cards .card) img):hover {
33
+ box-shadow: var(--monster-box-shadow-2);
34
+ transform: scale(1.05);
35
+ transition: background .8s, color .25s .0833333333s;
36
+ }
37
+ :is(.cards .card) h1,
38
+ :is(.cards .card) h2,
39
+ :is(.cards .card) h3,
40
+ :is(.cards .card) h4,
41
+ :is(.cards .card) h5,
42
+ :is(.cards .card) h6,
43
+ :is(.cards .card) p {
44
+ margin: 0;
45
+ padding-left: 1rem;
46
+ padding-right: 1rem;
47
+ }
48
+ :is(.cards .card) h1:last-child,
49
+ :is(.cards .card) h2:last-child,
50
+ :is(.cards .card) h3:last-child,
51
+ :is(.cards .card) h4:last-child,
52
+ :is(.cards .card) h5:last-child,
53
+ :is(.cards .card) h6:last-child,
54
+ :is(.cards .card) p:last-child {
55
+ padding-bottom: 1rem;
56
+ }
57
+ :is(.cards .card) h1:first-child,
58
+ :is(.cards .card) h2:first-child,
59
+ :is(.cards .card) h3:first-child,
60
+ :is(.cards .card) h4:first-child,
61
+ :is(.cards .card) h5:first-child,
62
+ :is(.cards .card) h6:first-child,
63
+ :is(.cards .card) p:first-child {
64
+ padding-top: 1rem;
65
+ }
66
+ :is(.cards .card) img + h1,
67
+ :is(.cards .card) img + h2,
68
+ :is(.cards .card) img + h3,
69
+ :is(.cards .card) img + h4,
70
+ :is(.cards .card) img + h5,
71
+ :is(.cards .card) img + h6,
72
+ :is(.cards .card) img + p {
73
+ padding-top: 1rem;
74
+ }
75
+ :is(.cards .card) h1 + img,
76
+ :is(.cards .card) h2 + img,
77
+ :is(.cards .card) h3 + img,
78
+ :is(.cards .card) h4 + img,
79
+ :is(.cards .card) h5 + img,
80
+ :is(.cards .card) h6 + img,
81
+ :is(.cards .card) p + img {
82
+ padding-bottom: 1rem;
83
+ }
84
+ :is(.cards .card) h1 + p,
85
+ :is(.cards .card) h2 + p,
86
+ :is(.cards .card) h3 + p,
87
+ :is(.cards .card) h4 + p,
88
+ :is(.cards .card) h5 + p,
89
+ :is(.cards .card) h6 + p,
90
+ :is(.cards .card) p + p {
91
+ padding-top: 1rem;
92
+ }
93
+ :is(.cards .card) .button + h1,
94
+ :is(.cards .card) .button + h2,
95
+ :is(.cards .card) .button + h3,
96
+ :is(.cards .card) .button + h4,
97
+ :is(.cards .card) .button + h5,
98
+ :is(.cards .card) .button + h6,
99
+ :is(.cards .card) .button + p,
100
+ :is(.cards .card) button + h1,
101
+ :is(.cards .card) button + h2,
102
+ :is(.cards .card) button + h3,
103
+ :is(.cards .card) button + h4,
104
+ :is(.cards .card) button + h5,
105
+ :is(.cards .card) button + h6,
106
+ :is(.cards .card) button + p {
107
+ padding-bottom: 1rem;
108
+ }
109
+ :is(.cards .card) h1 + .button,
110
+ :is(.cards .card) h1 + button,
111
+ :is(.cards .card) h2 + .button,
112
+ :is(.cards .card) h2 + button,
113
+ :is(.cards .card) h3 + .button,
114
+ :is(.cards .card) h3 + button,
115
+ :is(.cards .card) h4 + .button,
116
+ :is(.cards .card) h4 + button,
117
+ :is(.cards .card) h5 + .button,
118
+ :is(.cards .card) h5 + button,
119
+ :is(.cards .card) h6 + .button,
120
+ :is(.cards .card) h6 + button,
121
+ :is(.cards .card) p + .button,
122
+ :is(.cards .card) p + button {
123
+ margin-top: 1rem;
124
+ }
125
+ :is(.cards .card) .button,
126
+ :is(.cards .card) button {
127
+ border-left: none;
128
+ border-right: none;
129
+ }
130
+ :is(.cards .card) .button:first-child,
131
+ :is(.cards .card) button:first-child {
132
+ border-top: none;
133
+ }
134
+ :is(.cards .card) .button:last-child,
135
+ :is(.cards .card) button:last-child {
136
+ border-bottom: none;
137
+ }
138
+ :is(
139
+ :is(.cards .card) button:last-child,
140
+ :is(.cards .card) .button:last-child
141
+ ):hover {
142
+ box-shadow: var(--monster-box-shadow-2);
143
+ transform: scale(1.05);
144
+ transition: background .8s, color .25s .0833333333s;
145
+ }
146
+ .card:is(.cards .card):hover {
147
+ box-shadow: var(--monster-box-shadow-2);
148
+ transition: background .8s, color .25s .0833333333s;
149
+ z-index: var(--monster-z-index-outline);
150
+ }
@@ -1,2 +1,167 @@
1
1
  /** generated from color.pcss **/
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}
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
+ }