@schukai/monster 3.89.1 → 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 (53) hide show
  1. package/CHANGELOG.md +25 -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 +2 -4
  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/select.mjs +2 -0
  12. package/source/components/form/style/action-button.pcss +11 -17
  13. package/source/components/form/style/api-bar.pcss +0 -0
  14. package/source/components/form/style/button-bar.pcss +5 -0
  15. package/source/components/form/style/button.pcss +1 -0
  16. package/source/components/form/style/message-state-button.pcss +1 -0
  17. package/source/components/form/style/state-button.pcss +1 -0
  18. package/source/components/form/stylesheet/action-button.mjs +1 -1
  19. package/source/components/form/stylesheet/api-bar.mjs +38 -0
  20. package/source/components/form/stylesheet/button-bar.mjs +1 -1
  21. package/source/components/form/stylesheet/button.mjs +1 -1
  22. package/source/components/form/stylesheet/message-state-button.mjs +1 -1
  23. package/source/components/form/stylesheet/state-button.mjs +1 -1
  24. package/source/components/layout/iframe.mjs +1 -3
  25. package/source/components/style/badge.css +147 -1
  26. package/source/components/style/border.css +65 -1
  27. package/source/components/style/button.css +205 -1
  28. package/source/components/style/card.css +149 -1
  29. package/source/components/style/color.css +166 -1
  30. package/source/components/style/common.css +159 -1
  31. package/source/components/style/control.css +14 -1
  32. package/source/components/style/data-grid.css +447 -1
  33. package/source/components/style/display.css +32 -1
  34. package/source/components/style/floating-ui.css +42 -1
  35. package/source/components/style/form.css +47 -1
  36. package/source/components/style/host.css +14 -1
  37. package/source/components/style/icons.css +1584 -1
  38. package/source/components/style/link.css +37 -1
  39. package/source/components/style/normalize.css +144 -1
  40. package/source/components/style/popper.css +101 -1
  41. package/source/components/style/property.css +327 -1
  42. package/source/components/style/ripple.css +13 -1
  43. package/source/components/style/skeleton.css +164 -1
  44. package/source/components/style/space.css +240 -1
  45. package/source/components/style/spinner.css +7 -1
  46. package/source/components/style/table.css +39 -1
  47. package/source/components/style/theme.css +356 -1
  48. package/source/components/style/typography.css +178 -1
  49. package/source/monster.mjs +1 -0
  50. package/source/types/version.mjs +1 -1
  51. package/test/cases/monster.mjs +1 -1
  52. package/test/web/test.html +2 -2
  53. package/test/web/tests.js +25 -47
@@ -1,2 +1,148 @@
1
1
  /** generated from badge.pcss **/
2
- .monster-badge-primary{padding:.25em .4em}.monster-badge-primary,.monster-badge-primary-pill{background-color:var(--monster-bg-color-primary-4);border-radius:.25rem;color:var(--monster-color-primary-4);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-primary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-secondary{padding:.25em .4em}.monster-badge-secondary,.monster-badge-secondary-pill{background-color:var(--monster-bg-color-secondary-3);border-radius:.25rem;color:var(--monster-color-secondary-3);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-secondary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-tertiary{padding:.25em .4em}.monster-badge-tertiary,.monster-badge-tertiary-pill{background-color:var(--monster-bg-color-tertiary-3);border-radius:.25rem;color:var(--monster-color-tertiary-3);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-tertiary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-destructive{padding:.25em .4em}.monster-badge-destructive,.monster-badge-destructive-pill{background-color:var(--monster-bg-color-destructive-1);border-radius:.25rem;color:var(--monster-color-destructive-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-destructive-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-success{padding:.25em .4em}.monster-badge-success,.monster-badge-success-pill{background-color:var(--monster-bg-color-success-1);border-radius:.25rem;color:var(--monster-color-success-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-success-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-warning{padding:.25em .4em}.monster-badge-warning,.monster-badge-warning-pill{background-color:var(--monster-bg-color-warning-1);border-radius:.25rem;color:var(--monster-color-warning-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-warning-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-error{padding:.25em .4em}.monster-badge-error,.monster-badge-error-pill{background-color:var(--monster-bg-color-error-1);border-radius:.25rem;color:var(--monster-color-error-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-error-pill{border-radius:10rem;padding:.25em .6em}
2
+ .monster-badge-primary {
3
+ padding: .25em .4em;
4
+ }
5
+ .monster-badge-primary,
6
+ .monster-badge-primary-pill {
7
+ background-color: var(--monster-bg-color-primary-4);
8
+ border-radius: .25rem;
9
+ color: var(--monster-color-primary-4);
10
+ display: inline-block;
11
+ font-size: 75%;
12
+ font-weight: 700;
13
+ line-height: 1;
14
+ text-align: center;
15
+ text-decoration: none;
16
+ vertical-align: baseline;
17
+ white-space: nowrap;
18
+ }
19
+ .monster-badge-primary-pill {
20
+ border-radius: 10rem;
21
+ padding: .25em .6em;
22
+ }
23
+ .monster-badge-secondary {
24
+ padding: .25em .4em;
25
+ }
26
+ .monster-badge-secondary,
27
+ .monster-badge-secondary-pill {
28
+ background-color: var(--monster-bg-color-secondary-3);
29
+ border-radius: .25rem;
30
+ color: var(--monster-color-secondary-3);
31
+ display: inline-block;
32
+ font-size: 75%;
33
+ font-weight: 700;
34
+ line-height: 1;
35
+ text-align: center;
36
+ text-decoration: none;
37
+ vertical-align: baseline;
38
+ white-space: nowrap;
39
+ }
40
+ .monster-badge-secondary-pill {
41
+ border-radius: 10rem;
42
+ padding: .25em .6em;
43
+ }
44
+ .monster-badge-tertiary {
45
+ padding: .25em .4em;
46
+ }
47
+ .monster-badge-tertiary,
48
+ .monster-badge-tertiary-pill {
49
+ background-color: var(--monster-bg-color-tertiary-3);
50
+ border-radius: .25rem;
51
+ color: var(--monster-color-tertiary-3);
52
+ display: inline-block;
53
+ font-size: 75%;
54
+ font-weight: 700;
55
+ line-height: 1;
56
+ text-align: center;
57
+ text-decoration: none;
58
+ vertical-align: baseline;
59
+ white-space: nowrap;
60
+ }
61
+ .monster-badge-tertiary-pill {
62
+ border-radius: 10rem;
63
+ padding: .25em .6em;
64
+ }
65
+ .monster-badge-destructive {
66
+ padding: .25em .4em;
67
+ }
68
+ .monster-badge-destructive,
69
+ .monster-badge-destructive-pill {
70
+ background-color: var(--monster-bg-color-destructive-1);
71
+ border-radius: .25rem;
72
+ color: var(--monster-color-destructive-1);
73
+ display: inline-block;
74
+ font-size: 75%;
75
+ font-weight: 700;
76
+ line-height: 1;
77
+ text-align: center;
78
+ text-decoration: none;
79
+ vertical-align: baseline;
80
+ white-space: nowrap;
81
+ }
82
+ .monster-badge-destructive-pill {
83
+ border-radius: 10rem;
84
+ padding: .25em .6em;
85
+ }
86
+ .monster-badge-success {
87
+ padding: .25em .4em;
88
+ }
89
+ .monster-badge-success,
90
+ .monster-badge-success-pill {
91
+ background-color: var(--monster-bg-color-success-1);
92
+ border-radius: .25rem;
93
+ color: var(--monster-color-success-1);
94
+ display: inline-block;
95
+ font-size: 75%;
96
+ font-weight: 700;
97
+ line-height: 1;
98
+ text-align: center;
99
+ text-decoration: none;
100
+ vertical-align: baseline;
101
+ white-space: nowrap;
102
+ }
103
+ .monster-badge-success-pill {
104
+ border-radius: 10rem;
105
+ padding: .25em .6em;
106
+ }
107
+ .monster-badge-warning {
108
+ padding: .25em .4em;
109
+ }
110
+ .monster-badge-warning,
111
+ .monster-badge-warning-pill {
112
+ background-color: var(--monster-bg-color-warning-1);
113
+ border-radius: .25rem;
114
+ color: var(--monster-color-warning-1);
115
+ display: inline-block;
116
+ font-size: 75%;
117
+ font-weight: 700;
118
+ line-height: 1;
119
+ text-align: center;
120
+ text-decoration: none;
121
+ vertical-align: baseline;
122
+ white-space: nowrap;
123
+ }
124
+ .monster-badge-warning-pill {
125
+ border-radius: 10rem;
126
+ padding: .25em .6em;
127
+ }
128
+ .monster-badge-error {
129
+ padding: .25em .4em;
130
+ }
131
+ .monster-badge-error,
132
+ .monster-badge-error-pill {
133
+ background-color: var(--monster-bg-color-error-1);
134
+ border-radius: .25rem;
135
+ color: var(--monster-color-error-1);
136
+ display: inline-block;
137
+ font-size: 75%;
138
+ font-weight: 700;
139
+ line-height: 1;
140
+ text-align: center;
141
+ text-decoration: none;
142
+ vertical-align: baseline;
143
+ white-space: nowrap;
144
+ }
145
+ .monster-badge-error-pill {
146
+ border-radius: 10rem;
147
+ padding: .25em .6em;
148
+ }
@@ -1,2 +1,66 @@
1
1
  /** generated from border.pcss **/
2
- .monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-0{border-radius:0;border-style:none;border-width:0}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-secondary-1{border-color:var(--monster-bg-color-secondary-1)}.monster-border-secondary-2{border-color:var(--monster-bg-color-secondary-2)}.monster-border-secondary-3{border-color:var(--monster-bg-color-secondary-3)}.monster-border-secondary-4{border-color:var(--monster-bg-color-secondary-4)}.monster-border-tertiary-1,.monster-border-tertiary-2,.monster-border-tertiary-3,.monster-border-tertiary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-tertiary-1{border-color:var(--monster-bg-color-tertiary-1)}.monster-border-tertiary-2{border-color:var(--monster-bg-color-tertiary-2)}.monster-border-tertiary-3{border-color:var(--monster-bg-color-tertiary-3)}.monster-border-tertiary-4{border-color:var(--monster-bg-color-tertiary-4)}
2
+ .monster-border-primary-1,
3
+ .monster-border-primary-2,
4
+ .monster-border-primary-3,
5
+ .monster-border-primary-4 {
6
+ border-radius: var(--monster-border-radius);
7
+ border-style: var(--monster-border-style);
8
+ border-width: var(--monster-border-width);
9
+ }
10
+ .monster-border-0 {
11
+ border-radius: 0;
12
+ border-style: none;
13
+ border-width: 0;
14
+ }
15
+ .monster-border-primary-1 {
16
+ border-color: var(--monster-bg-color-primary-1);
17
+ }
18
+ .monster-border-primary-2 {
19
+ border-color: var(--monster-bg-color-primary-2);
20
+ }
21
+ .monster-border-primary-3 {
22
+ border-color: var(--monster-bg-color-primary-3);
23
+ }
24
+ .monster-border-primary-4 {
25
+ border-color: var(--monster-bg-color-primary-4);
26
+ }
27
+ .monster-border-secondary-1,
28
+ .monster-border-secondary-2,
29
+ .monster-border-secondary-3,
30
+ .monster-border-secondary-4 {
31
+ border-radius: var(--monster-border-radius);
32
+ border-style: var(--monster-border-style);
33
+ border-width: var(--monster-border-width);
34
+ }
35
+ .monster-border-secondary-1 {
36
+ border-color: var(--monster-bg-color-secondary-1);
37
+ }
38
+ .monster-border-secondary-2 {
39
+ border-color: var(--monster-bg-color-secondary-2);
40
+ }
41
+ .monster-border-secondary-3 {
42
+ border-color: var(--monster-bg-color-secondary-3);
43
+ }
44
+ .monster-border-secondary-4 {
45
+ border-color: var(--monster-bg-color-secondary-4);
46
+ }
47
+ .monster-border-tertiary-1,
48
+ .monster-border-tertiary-2,
49
+ .monster-border-tertiary-3,
50
+ .monster-border-tertiary-4 {
51
+ border-radius: var(--monster-border-radius);
52
+ border-style: var(--monster-border-style);
53
+ border-width: var(--monster-border-width);
54
+ }
55
+ .monster-border-tertiary-1 {
56
+ border-color: var(--monster-bg-color-tertiary-1);
57
+ }
58
+ .monster-border-tertiary-2 {
59
+ border-color: var(--monster-bg-color-tertiary-2);
60
+ }
61
+ .monster-border-tertiary-3 {
62
+ border-color: var(--monster-bg-color-tertiary-3);
63
+ }
64
+ .monster-border-tertiary-4 {
65
+ border-color: var(--monster-bg-color-tertiary-4);
66
+ }
@@ -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
+ }