@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,38 @@
1
1
  /** generated from link.pcss **/
2
- a,a:active,a:focus,a:hover,a:link,a:visited{color:var(--monster-color-secondary-1);outline:none;text-decoration:none;transition:color .3s ease-in-out,text-decoration-color .3s ease-in-out}a:active,a:focus,a:hover{color:var(--monster-color-primary-2);text-decoration:underline;text-decoration-color:var(--monster-color-secondary-1 );text-decoration-thickness:1px;text-underline-offset:2px}a:focus{outline:1px dashed var(--monster-color-selection-1);outline-offset:2px}@media (prefers-color-scheme:dark){a,a:active,a:focus,a:hover,a:link,a:visited{color:var(--monster-color-amber-2)}a:focus{outline:1px dashed var(--monster-color-selection-4)}}
2
+ a,
3
+ a:active,
4
+ a:focus,
5
+ a:hover,
6
+ a:link,
7
+ a:visited {
8
+ color: var(--monster-color-secondary-1);
9
+ outline: none;
10
+ text-decoration: none;
11
+ transition: color .3s ease-in-out, text-decoration-color .3s ease-in-out;
12
+ }
13
+ a:active,
14
+ a:focus,
15
+ a:hover {
16
+ color: var(--monster-color-primary-2);
17
+ text-decoration: underline;
18
+ text-decoration-color: var(--monster-color-secondary-1);
19
+ text-decoration-thickness: 1px;
20
+ text-underline-offset: 2px;
21
+ }
22
+ a:focus {
23
+ outline: 1px dashed var(--monster-color-selection-1);
24
+ outline-offset: 2px;
25
+ }
26
+ @media (prefers-color-scheme: dark) {
27
+ a,
28
+ a:active,
29
+ a:focus,
30
+ a:hover,
31
+ a:link,
32
+ a:visited {
33
+ color: var(--monster-color-amber-2);
34
+ }
35
+ a:focus {
36
+ outline: 1px dashed var(--monster-color-selection-4);
37
+ }
38
+ }
@@ -1,2 +1,145 @@
1
1
  /** generated from normalize.pcss **/
2
- :where(html){line-height:1.15;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}:where(h1){font-size:2em;margin-block-end:.67em;margin-block-start:.67em}:where(dl,ol,ul) :where(dl,ol,ul){margin-block-end:0;margin-block-start:0}:where(hr){box-sizing:content-box;color:inherit;height:0}:where(abbr[title]){text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(b,strong){font-weight:bolder}:where(code,kbd,pre,samp){font-family:monospace,monospace;font-size:1em}:where(small){font-size:80%}:where(table){border-color:currentColor;text-indent:0}:where(button,input,select){margin:0}:where(button){text-transform:none}:where(button,input:is([type=button i],[type=reset i],[type=submit i])){-webkit-appearance:button}:where(progress){vertical-align:baseline}:where(select){text-transform:none}:where(textarea){margin:0}:where(input[type=search i]){-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focus-inner{border-style:none;padding:0}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focusring{outline:1px dotted ButtonText}:where(:-moz-ui-invalid){box-shadow:none}:where(dialog){background-color:#fff;border:solid;color:#000;height:-moz-fit-content;height:fit-content;left:0;margin:auto;padding:1em;position:absolute;right:0;width:-moz-fit-content;width:fit-content}:where(dialog:not([open])){display:none}:where(summary){display:list-item}html{height:100%}body,html{min-height:calc(100vh - 40px)}body{box-sizing:border-box;margin:0;padding:0;word-break:break-word}body:focus-visible{outline:none}:focus-visible{outline:none}
2
+ :where(html) {
3
+ line-height: 1.15;
4
+ -webkit-text-size-adjust: 100%;
5
+ -moz-text-size-adjust: 100%;
6
+ text-size-adjust: 100%;
7
+ }
8
+ :where(h1) {
9
+ font-size: 2em;
10
+ margin-block-end: .67em;
11
+ margin-block-start: .67em;
12
+ }
13
+ :where(dl, ol, ul) :where(dl, ol, ul) {
14
+ margin-block-end: 0;
15
+ margin-block-start: 0;
16
+ }
17
+ :where(hr) {
18
+ box-sizing: content-box;
19
+ color: inherit;
20
+ height: 0;
21
+ }
22
+ :where(abbr[title]) {
23
+ text-decoration: underline;
24
+ -webkit-text-decoration: underline dotted;
25
+ text-decoration: underline dotted;
26
+ }
27
+ :where(b, strong) {
28
+ font-weight: bolder;
29
+ }
30
+ :where(code, kbd, pre, samp) {
31
+ font-family: monospace, monospace;
32
+ font-size: 1em;
33
+ }
34
+ :where(small) {
35
+ font-size: 80%;
36
+ }
37
+ :where(table) {
38
+ border-color: currentColor;
39
+ text-indent: 0;
40
+ }
41
+ :where(button, input, select) {
42
+ margin: 0;
43
+ }
44
+ :where(button) {
45
+ text-transform: none;
46
+ }
47
+ :where(
48
+ button,
49
+ input:is([type="button" i], [type="reset" i], [type="submit" i])
50
+ ) {
51
+ -webkit-appearance: button;
52
+ }
53
+ :where(progress) {
54
+ vertical-align: baseline;
55
+ }
56
+ :where(select) {
57
+ text-transform: none;
58
+ }
59
+ :where(textarea) {
60
+ margin: 0;
61
+ }
62
+ :where(input[type="search" i]) {
63
+ -webkit-appearance: textfield;
64
+ outline-offset: -2px;
65
+ }
66
+ ::-webkit-inner-spin-button,
67
+ ::-webkit-outer-spin-button {
68
+ height: auto;
69
+ }
70
+ ::-webkit-input-placeholder {
71
+ color: inherit;
72
+ opacity: 0.54;
73
+ }
74
+ ::-webkit-search-decoration {
75
+ -webkit-appearance: none;
76
+ }
77
+ ::-webkit-file-upload-button {
78
+ -webkit-appearance: button;
79
+ font: inherit;
80
+ }
81
+ :where(
82
+ button,
83
+ input:is(
84
+ [type="button" i],
85
+ [type="color" i],
86
+ [type="reset" i],
87
+ [type="submit" i]
88
+ )
89
+ )::-moz-focus-inner {
90
+ border-style: none;
91
+ padding: 0;
92
+ }
93
+ :where(
94
+ button,
95
+ input:is(
96
+ [type="button" i],
97
+ [type="color" i],
98
+ [type="reset" i],
99
+ [type="submit" i]
100
+ )
101
+ )::-moz-focusring {
102
+ outline: 1px dotted ButtonText;
103
+ }
104
+ :where(:-moz-ui-invalid) {
105
+ box-shadow: none;
106
+ }
107
+ :where(dialog) {
108
+ background-color: #fff;
109
+ border: solid;
110
+ color: #000;
111
+ height: -moz-fit-content;
112
+ height: fit-content;
113
+ left: 0;
114
+ margin: auto;
115
+ padding: 1em;
116
+ position: absolute;
117
+ right: 0;
118
+ width: -moz-fit-content;
119
+ width: fit-content;
120
+ }
121
+ :where(dialog:not([open])) {
122
+ display: none;
123
+ }
124
+ :where(summary) {
125
+ display: list-item;
126
+ }
127
+ html {
128
+ height: 100%;
129
+ }
130
+ body,
131
+ html {
132
+ min-height: calc(100vh - 40px);
133
+ }
134
+ body {
135
+ box-sizing: border-box;
136
+ margin: 0;
137
+ padding: 0;
138
+ word-break: break-word;
139
+ }
140
+ body:focus-visible {
141
+ outline: none;
142
+ }
143
+ :focus-visible {
144
+ outline: none;
145
+ }
@@ -1,2 +1,102 @@
1
1
  /** generated from popper.pcss **/
2
- div[data-monster-role=popper]{background:var(--monster-bg-color-primary-1);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);box-shadow:var(--monster-box-shadow-1);box-sizing:border-box;color:var(--monster-color-primary-1);display:none;padding:1.1em;z-index:var(--monster-z-index-modal)}[data-popper-arrow],[data-popper-arrow]:before{background:inherit;height:calc(max(var(--monster-popper-witharrrow-distance), -1*var(--monster-popper-witharrrow-distance))*2);position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1*var(--monster-popper-witharrrow-distance))*2)}[data-popper-arrow]{visibility:hidden}[data-popper-arrow]:before{box-sizing:border-box;content:"";transform:rotate(45deg);visibility:visible}div[data-popper-placement^=top]>[data-popper-arrow]{bottom:calc(var(--monster-popper-witharrrow-distance) - var(--monster-border-width)/2)}div[data-popper-placement^=top]>[data-popper-arrow]:before{border-bottom:var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);border-left:transparent;border-right:var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);border-top:transparent}div[data-popper-placement^=bottom]>[data-popper-arrow]{top:calc(var(--monster-popper-witharrrow-distance) - var(--monster-border-width))}div[data-popper-placement^=bottom]>[data-popper-arrow]:before{border-bottom:transparent;border-left:var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);border-right:transparent;border-top:var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4)}div[data-popper-placement^=left]>[data-popper-arrow]{right:calc(var(--monster-popper-witharrrow-distance) - var(--monster-border-width))}div[data-popper-placement^=left]>[data-popper-arrow]:before{border-bottom:transparent;border-left:transparent;border-right:var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);border-top:var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4)}div[data-popper-placement^=right]>[data-popper-arrow]{left:calc(var(--monster-popper-witharrrow-distance) - var(--monster-border-width)/2)}div[data-popper-placement^=right]>[data-popper-arrow]:before{border-bottom:var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);border-left:var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);border-right:transparent;border-top:transparent}
2
+ div[data-monster-role="popper"] {
3
+ background: var(--monster-bg-color-primary-1);
4
+ border-color: var(--monster-bg-color-primary-4);
5
+ border-radius: var(--monster-border-radius);
6
+ border-style: var(--monster-border-style);
7
+ border-width: var(--monster-border-width);
8
+ box-shadow: var(--monster-box-shadow-1);
9
+ box-sizing: border-box;
10
+ color: var(--monster-color-primary-1);
11
+ display: none;
12
+ padding: 1.1em;
13
+ z-index: var(--monster-z-index-modal);
14
+ }
15
+ [data-popper-arrow],
16
+ [data-popper-arrow]:before {
17
+ background: inherit;
18
+ height: calc(
19
+ max(
20
+ var(--monster-popper-witharrrow-distance),
21
+ -1 *
22
+ var(--monster-popper-witharrrow-distance)
23
+ ) *
24
+ 2
25
+ );
26
+ position: absolute;
27
+ width: calc(
28
+ max(
29
+ var(--monster-popper-witharrrow-distance),
30
+ -1 *
31
+ var(--monster-popper-witharrrow-distance)
32
+ ) *
33
+ 2
34
+ );
35
+ }
36
+ [data-popper-arrow] {
37
+ visibility: hidden;
38
+ }
39
+ [data-popper-arrow]:before {
40
+ box-sizing: border-box;
41
+ content: "";
42
+ transform: rotate(45deg);
43
+ visibility: visible;
44
+ }
45
+ div[data-popper-placement^="top"] > [data-popper-arrow] {
46
+ bottom: calc(
47
+ var(--monster-popper-witharrrow-distance) -
48
+ var(--monster-border-width) /
49
+ 2
50
+ );
51
+ }
52
+ div[data-popper-placement^="top"] > [data-popper-arrow]:before {
53
+ border-bottom: var(--monster-border-width) var(--monster-border-style)
54
+ var(--monster-bg-color-primary-4);
55
+ border-left: transparent;
56
+ border-right: var(--monster-border-width) var(--monster-border-style)
57
+ var(--monster-bg-color-primary-4);
58
+ border-top: transparent;
59
+ }
60
+ div[data-popper-placement^="bottom"] > [data-popper-arrow] {
61
+ top: calc(
62
+ var(--monster-popper-witharrrow-distance) -
63
+ var(--monster-border-width)
64
+ );
65
+ }
66
+ div[data-popper-placement^="bottom"] > [data-popper-arrow]:before {
67
+ border-bottom: transparent;
68
+ border-left: var(--monster-border-width) var(--monster-border-style)
69
+ var(--monster-bg-color-primary-4);
70
+ border-right: transparent;
71
+ border-top: var(--monster-border-width) var(--monster-border-style)
72
+ var(--monster-bg-color-primary-4);
73
+ }
74
+ div[data-popper-placement^="left"] > [data-popper-arrow] {
75
+ right: calc(
76
+ var(--monster-popper-witharrrow-distance) -
77
+ var(--monster-border-width)
78
+ );
79
+ }
80
+ div[data-popper-placement^="left"] > [data-popper-arrow]:before {
81
+ border-bottom: transparent;
82
+ border-left: transparent;
83
+ border-right: var(--monster-border-width) var(--monster-border-style)
84
+ var(--monster-bg-color-primary-4);
85
+ border-top: var(--monster-border-width) var(--monster-border-style)
86
+ var(--monster-bg-color-primary-4);
87
+ }
88
+ div[data-popper-placement^="right"] > [data-popper-arrow] {
89
+ left: calc(
90
+ var(--monster-popper-witharrrow-distance) -
91
+ var(--monster-border-width) /
92
+ 2
93
+ );
94
+ }
95
+ div[data-popper-placement^="right"] > [data-popper-arrow]:before {
96
+ border-bottom: var(--monster-border-width) var(--monster-border-style)
97
+ var(--monster-bg-color-primary-4);
98
+ border-left: var(--monster-border-width) var(--monster-border-style)
99
+ var(--monster-bg-color-primary-4);
100
+ border-right: transparent;
101
+ border-top: transparent;
102
+ }
@@ -1,2 +1,328 @@
1
1
  /** generated from property.pcss **/
2
- :after,:before,:root{--monster-font-family:-apple-system,BlinkMacSystemFont,"Quicksand","Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--monster-font-family-monospace:"Consolas","Courier New","Roboto Mono","Source Code Pro","Fira Mono",monospace;--monster-color-primary-1:var(--monster-color-gray-6);--monster-color-primary-2:var(--monster-color-gray-6);--monster-color-primary-3:var(--monster-color-cinnamon-1);--monster-color-primary-4:var(--monster-color-cinnamon-1);--monster-bg-color-primary-1:var(--monster-color-gray-1);--monster-bg-color-primary-2:var(--monster-color-gray-2);--monster-bg-color-primary-3:var(--monster-color-gray-6);--monster-bg-color-primary-4:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-1:var(--monster-color-gray-1);--monster-color-primary-2:var(--monster-color-gray-1);--monster-color-primary-3:var(--monster-color-gray-6);--monster-color-primary-4:var(--monster-color-gray-6);--monster-bg-color-primary-1:var(--monster-color-gray-6);--monster-bg-color-primary-2:var(--monster-color-gray-3);--monster-bg-color-primary-3:var(--monster-color-gray-2);--monster-bg-color-primary-4:var(--monster-color-gray-1)}}:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-4);--monster-color-secondary-2:var(--monster-color-red-4);--monster-color-secondary-3:var(--monster-color-red-1);--monster-color-secondary-4:var(--monster-color-red-1);--monster-bg-color-secondary-1:var(--monster-color-gray-1);--monster-bg-color-secondary-2:var(--monster-color-red-2);--monster-bg-color-secondary-3:var(--monster-color-red-3);--monster-bg-color-secondary-4:var(--monster-color-red-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-1);--monster-color-secondary-2:var(--monster-color-red-1);--monster-color-secondary-3:var(--monster-color-red-6);--monster-color-secondary-4:var(--monster-color-red-4);--monster-bg-color-secondary-1:var(--monster-color-gray-6);--monster-bg-color-secondary-2:var(--monster-color-red-3);--monster-bg-color-secondary-3:var(--monster-color-red-2);--monster-bg-color-secondary-4:var(--monster-color-red-1)}}:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-4);--monster-color-tertiary-2:var(--monster-color-magenta-4);--monster-color-tertiary-3:var(--monster-color-magenta-6);--monster-color-tertiary-4:var(--monster-color-magenta-1);--monster-bg-color-tertiary-1:var(--monster-color-gray-1);--monster-bg-color-tertiary-2:var(--monster-color-magenta-1);--monster-bg-color-tertiary-3:var(--monster-color-magenta-2);--monster-bg-color-tertiary-4:var(--monster-color-magenta-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-1);--monster-color-tertiary-2:var(--monster-color-magenta-6);--monster-color-tertiary-3:var(--monster-color-magenta-4);--monster-color-tertiary-4:var(--monster-color-magenta-4);--monster-bg-color-tertiary-1:var(--monster-color-gray-6);--monster-bg-color-tertiary-2:var(--monster-color-magenta-2);--monster-bg-color-tertiary-3:var(--monster-color-magenta-1);--monster-bg-color-tertiary-4:var(--monster-color-magenta-1)}}:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-4);--monster-color-destructive-3:var(--monster-color-red-6);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-4);--monster-bg-color-destructive-2:var(--monster-color-gray-1);--monster-bg-color-destructive-3:var(--monster-color-red-2);--monster-bg-color-destructive-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-3);--monster-color-destructive-3:var(--monster-color-red-4);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-5);--monster-bg-color-destructive-2:var(--monster-color-gray-6);--monster-bg-color-destructive-3:var(--monster-color-red-1);--monster-bg-color-destructive-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-4);--monster-color-success-3:var(--monster-color-green-6);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-3);--monster-bg-color-success-2:var(--monster-color-gray-1);--monster-bg-color-success-3:var(--monster-color-green-2);--monster-bg-color-success-4:var(--monster-color-green-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-2);--monster-color-success-3:var(--monster-color-green-4);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-5);--monster-bg-color-success-2:var(--monster-color-gray-6);--monster-bg-color-success-3:var(--monster-color-green-1);--monster-bg-color-success-4:var(--monster-color-green-3)}}:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-4);--monster-color-warning-3:var(--monster-color-orange-6);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-3);--monster-bg-color-warning-2:var(--monster-color-gray-1);--monster-bg-color-warning-3:var(--monster-color-orange-2);--monster-bg-color-warning-4:var(--monster-color-orange-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-3);--monster-color-warning-3:var(--monster-color-orange-4);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-5);--monster-bg-color-warning-2:var(--monster-color-gray-6);--monster-bg-color-warning-3:var(--monster-color-orange-1);--monster-bg-color-warning-4:var(--monster-color-orange-3)}}:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-4);--monster-color-error-3:var(--monster-color-red-6);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-4);--monster-bg-color-error-2:var(--monster-color-gray-1);--monster-bg-color-error-3:var(--monster-color-red-2);--monster-bg-color-error-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-3);--monster-color-error-3:var(--monster-color-red-4);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-5);--monster-bg-color-error-2:var(--monster-color-gray-6);--monster-bg-color-error-3:var(--monster-color-red-1);--monster-bg-color-error-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}}:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-4);--monster-color-primary-disabled-4:var(--monster-color-gray-4);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-1);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-3);--monster-color-primary-disabled-4:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-6);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-1)}}:after,:before,:root{--monster-color-gradient-1:#833ab4;--monster-color-gradient-2:#fd1d1d;--monster-color-gradient-3:#fcb045;--monster-box-shadow-1:none;--monster-box-shadow-2:-1px 1px 10px 1px hsla(0,0%,76%,.61);--monster-text-shadow:none;--monster-theme-control-bg-color:var(--monster-color-seashell-1);--monster-theme-control-color:var(--monster-color-seashell-6);--monster-theme-control-hover-color:var(--monster-color-seashell-6);--monster-theme-control-hover-bg-color:var(--monster-color-seashell-2);--monster-theme-control-border-width:2px;--monster-theme-control-border-style:solid;--monster-theme-control-border-radius:0;--monster-theme-control-border-color:var(--monster-color-primary-1)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-control-bg-color:var(--monster-color-gray-5);--monster-theme-control-color:var(--monster-color-gray-1);--monster-theme-control-border-color:var(--monster-color-gray-3);--monster-theme-control-hover-color:var(--monster-color-gray-1);--monster-theme-control-hover-bg-color:var(--monster-color-gray-6)}}:after,:before,:root{--monster-theme-on-color:var(--monster-color-green-1);--monster-theme-on-bg-color:var(--monster-color-green-5);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-on-color:var(--monster-color-gray-6);--monster-theme-on-bg-color:var(--monster-color-gray-1);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-5)}}:after,:before,:root{--monster-border-style:solid;--monster-border-width:3px;--monster-border-radius:0;--monster-popper-witharrrow-distance:-4px;--monster-z-index-default:0;--monster-z-index-outline:10;--monster-z-index-dropdown:200;--monster-z-index-dropdown-overlay:210;--monster-z-index-sticky:300;--monster-z-index-sticky-overlay:310;--monster-z-index-fixed:400;--monster-z-index-fixed-overlay:410;--monster-z-index-modal-backdrop:500;--monster-z-index-modal-backdrop-overlay:510;--monster-z-index-offcanvas:600;--monster-z-index-offcanvas-overlay:610;--monster-z-index-modal:700;--monster-z-index-modal-overlay:710;--monster-z-index-popover:800;--monster-z-index-popover-overlay:810;--monster-z-index-tooltip:800;--monster-z-index-tooltip-overlay:910;--monster-space-0:0;--monster-space-1:2px;--monster-space-2:4px;--monster-space-3:6px;--monster-space-4:10px;--monster-space-5:16px;--monster-space-6:26px;--monster-space-7:42px;--monster-breakpoint-0:480px;--monster-breakpoint-4:480px;--monster-breakpoint-7:768px;--monster-breakpoint-9:992px;--monster-breakpoint-12:1200px;--monster-dragger-width:2px;--monster-dragger-handle-width:4px;--monster-dragger-handle-height:50px}
2
+ :after,
3
+ :before,
4
+ :root {
5
+ --monster-font-family:
6
+ -apple-system, BlinkMacSystemFont, "Quicksand", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
7
+ --monster-font-family-monospace: "Consolas", "Courier New", "Roboto Mono",
8
+ "Source Code Pro", "Fira Mono", monospace;
9
+ --monster-color-primary-1: var(--monster-color-gray-6);
10
+ --monster-color-primary-2: var(--monster-color-gray-6);
11
+ --monster-color-primary-3: var(--monster-color-cinnamon-1);
12
+ --monster-color-primary-4: var(--monster-color-cinnamon-1);
13
+ --monster-bg-color-primary-1: var(--monster-color-gray-1);
14
+ --monster-bg-color-primary-2: var(--monster-color-gray-2);
15
+ --monster-bg-color-primary-3: var(--monster-color-gray-6);
16
+ --monster-bg-color-primary-4: var(--monster-color-gray-4);
17
+ }
18
+ @media (prefers-color-scheme: dark) {
19
+ :after,
20
+ :before,
21
+ :root {
22
+ --monster-color-primary-1: var(--monster-color-gray-1);
23
+ --monster-color-primary-2: var(--monster-color-gray-1);
24
+ --monster-color-primary-3: var(--monster-color-gray-6);
25
+ --monster-color-primary-4: var(--monster-color-gray-6);
26
+ --monster-bg-color-primary-1: var(--monster-color-gray-6);
27
+ --monster-bg-color-primary-2: var(--monster-color-gray-3);
28
+ --monster-bg-color-primary-3: var(--monster-color-gray-2);
29
+ --monster-bg-color-primary-4: var(--monster-color-gray-1);
30
+ }
31
+ }
32
+ :after,
33
+ :before,
34
+ :root {
35
+ --monster-color-secondary-1: var(--monster-color-red-4);
36
+ --monster-color-secondary-2: var(--monster-color-red-4);
37
+ --monster-color-secondary-3: var(--monster-color-red-1);
38
+ --monster-color-secondary-4: var(--monster-color-red-1);
39
+ --monster-bg-color-secondary-1: var(--monster-color-gray-1);
40
+ --monster-bg-color-secondary-2: var(--monster-color-red-2);
41
+ --monster-bg-color-secondary-3: var(--monster-color-red-3);
42
+ --monster-bg-color-secondary-4: var(--monster-color-red-6);
43
+ }
44
+ @media (prefers-color-scheme: dark) {
45
+ :after,
46
+ :before,
47
+ :root {
48
+ --monster-color-secondary-1: var(--monster-color-red-1);
49
+ --monster-color-secondary-2: var(--monster-color-red-1);
50
+ --monster-color-secondary-3: var(--monster-color-red-6);
51
+ --monster-color-secondary-4: var(--monster-color-red-4);
52
+ --monster-bg-color-secondary-1: var(--monster-color-gray-6);
53
+ --monster-bg-color-secondary-2: var(--monster-color-red-3);
54
+ --monster-bg-color-secondary-3: var(--monster-color-red-2);
55
+ --monster-bg-color-secondary-4: var(--monster-color-red-1);
56
+ }
57
+ }
58
+ :after,
59
+ :before,
60
+ :root {
61
+ --monster-color-tertiary-1: var(--monster-color-magenta-4);
62
+ --monster-color-tertiary-2: var(--monster-color-magenta-4);
63
+ --monster-color-tertiary-3: var(--monster-color-magenta-6);
64
+ --monster-color-tertiary-4: var(--monster-color-magenta-1);
65
+ --monster-bg-color-tertiary-1: var(--monster-color-gray-1);
66
+ --monster-bg-color-tertiary-2: var(--monster-color-magenta-1);
67
+ --monster-bg-color-tertiary-3: var(--monster-color-magenta-2);
68
+ --monster-bg-color-tertiary-4: var(--monster-color-magenta-6);
69
+ }
70
+ @media (prefers-color-scheme: dark) {
71
+ :after,
72
+ :before,
73
+ :root {
74
+ --monster-color-tertiary-1: var(--monster-color-magenta-1);
75
+ --monster-color-tertiary-2: var(--monster-color-magenta-6);
76
+ --monster-color-tertiary-3: var(--monster-color-magenta-4);
77
+ --monster-color-tertiary-4: var(--monster-color-magenta-4);
78
+ --monster-bg-color-tertiary-1: var(--monster-color-gray-6);
79
+ --monster-bg-color-tertiary-2: var(--monster-color-magenta-2);
80
+ --monster-bg-color-tertiary-3: var(--monster-color-magenta-1);
81
+ --monster-bg-color-tertiary-4: var(--monster-color-magenta-1);
82
+ }
83
+ }
84
+ :after,
85
+ :before,
86
+ :root {
87
+ --monster-color-destructive-1: var(--monster-color-red-1);
88
+ --monster-color-destructive-2: var(--monster-color-red-4);
89
+ --monster-color-destructive-3: var(--monster-color-red-6);
90
+ --monster-color-destructive-4: var(--monster-color-red-1);
91
+ --monster-bg-color-destructive-1: var(--monster-color-red-4);
92
+ --monster-bg-color-destructive-2: var(--monster-color-gray-1);
93
+ --monster-bg-color-destructive-3: var(--monster-color-red-2);
94
+ --monster-bg-color-destructive-4: var(--monster-color-red-5);
95
+ }
96
+ @media (prefers-color-scheme: dark) {
97
+ :after,
98
+ :before,
99
+ :root {
100
+ --monster-color-destructive-1: var(--monster-color-red-1);
101
+ --monster-color-destructive-2: var(--monster-color-red-3);
102
+ --monster-color-destructive-3: var(--monster-color-red-4);
103
+ --monster-color-destructive-4: var(--monster-color-red-1);
104
+ --monster-bg-color-destructive-1: var(--monster-color-red-5);
105
+ --monster-bg-color-destructive-2: var(--monster-color-gray-6);
106
+ --monster-bg-color-destructive-3: var(--monster-color-red-1);
107
+ --monster-bg-color-destructive-4: var(--monster-color-red-4);
108
+ }
109
+ }
110
+ :after,
111
+ :before,
112
+ :root {
113
+ --monster-color-success-1: var(--monster-color-green-1);
114
+ --monster-color-success-2: var(--monster-color-green-4);
115
+ --monster-color-success-3: var(--monster-color-green-6);
116
+ --monster-color-success-4: var(--monster-color-green-1);
117
+ --monster-bg-color-success-1: var(--monster-color-green-3);
118
+ --monster-bg-color-success-2: var(--monster-color-gray-1);
119
+ --monster-bg-color-success-3: var(--monster-color-green-2);
120
+ --monster-bg-color-success-4: var(--monster-color-green-5);
121
+ }
122
+ @media (prefers-color-scheme: dark) {
123
+ :after,
124
+ :before,
125
+ :root {
126
+ --monster-color-success-1: var(--monster-color-green-1);
127
+ --monster-color-success-2: var(--monster-color-green-2);
128
+ --monster-color-success-3: var(--monster-color-green-4);
129
+ --monster-color-success-4: var(--monster-color-green-1);
130
+ --monster-bg-color-success-1: var(--monster-color-green-5);
131
+ --monster-bg-color-success-2: var(--monster-color-gray-6);
132
+ --monster-bg-color-success-3: var(--monster-color-green-1);
133
+ --monster-bg-color-success-4: var(--monster-color-green-3);
134
+ }
135
+ }
136
+ :after,
137
+ :before,
138
+ :root {
139
+ --monster-color-warning-1: var(--monster-color-orange-1);
140
+ --monster-color-warning-2: var(--monster-color-orange-4);
141
+ --monster-color-warning-3: var(--monster-color-orange-6);
142
+ --monster-color-warning-4: var(--monster-color-orange-1);
143
+ --monster-bg-color-warning-1: var(--monster-color-orange-3);
144
+ --monster-bg-color-warning-2: var(--monster-color-gray-1);
145
+ --monster-bg-color-warning-3: var(--monster-color-orange-2);
146
+ --monster-bg-color-warning-4: var(--monster-color-orange-5);
147
+ }
148
+ @media (prefers-color-scheme: dark) {
149
+ :after,
150
+ :before,
151
+ :root {
152
+ --monster-color-warning-1: var(--monster-color-orange-1);
153
+ --monster-color-warning-2: var(--monster-color-orange-3);
154
+ --monster-color-warning-3: var(--monster-color-orange-4);
155
+ --monster-color-warning-4: var(--monster-color-orange-1);
156
+ --monster-bg-color-warning-1: var(--monster-color-orange-5);
157
+ --monster-bg-color-warning-2: var(--monster-color-gray-6);
158
+ --monster-bg-color-warning-3: var(--monster-color-orange-1);
159
+ --monster-bg-color-warning-4: var(--monster-color-orange-3);
160
+ }
161
+ }
162
+ :after,
163
+ :before,
164
+ :root {
165
+ --monster-color-error-1: var(--monster-color-red-1);
166
+ --monster-color-error-2: var(--monster-color-red-4);
167
+ --monster-color-error-3: var(--monster-color-red-6);
168
+ --monster-color-error-4: var(--monster-color-red-1);
169
+ --monster-bg-color-error-1: var(--monster-color-red-4);
170
+ --monster-bg-color-error-2: var(--monster-color-gray-1);
171
+ --monster-bg-color-error-3: var(--monster-color-red-2);
172
+ --monster-bg-color-error-4: var(--monster-color-red-5);
173
+ }
174
+ @media (prefers-color-scheme: dark) {
175
+ :after,
176
+ :before,
177
+ :root {
178
+ --monster-color-error-1: var(--monster-color-red-1);
179
+ --monster-color-error-2: var(--monster-color-red-3);
180
+ --monster-color-error-3: var(--monster-color-red-4);
181
+ --monster-color-error-4: var(--monster-color-red-1);
182
+ --monster-bg-color-error-1: var(--monster-color-red-5);
183
+ --monster-bg-color-error-2: var(--monster-color-gray-6);
184
+ --monster-bg-color-error-3: var(--monster-color-red-1);
185
+ --monster-bg-color-error-4: var(--monster-color-red-4);
186
+ }
187
+ }
188
+ :after,
189
+ :before,
190
+ :root {
191
+ --monster-color-selection-1: var(--monster-color-gray-6);
192
+ --monster-color-selection-2: var(--monster-color-gray-6);
193
+ --monster-color-selection-3: var(--monster-color-gray-6);
194
+ --monster-color-selection-4: var(--monster-color-gray-1);
195
+ --monster-bg-color-selection-1: var(--monster-color-yellow-2);
196
+ --monster-bg-color-selection-2: var(--monster-color-yellow-1);
197
+ --monster-bg-color-selection-3: var(--monster-color-yellow-2);
198
+ --monster-bg-color-selection-4: var(--monster-color-yellow-6);
199
+ }
200
+ @media (prefers-color-scheme: dark) {
201
+ :after,
202
+ :before,
203
+ :root {
204
+ --monster-color-selection-1: var(--monster-color-gray-6);
205
+ --monster-color-selection-2: var(--monster-color-gray-6);
206
+ --monster-color-selection-3: var(--monster-color-gray-6);
207
+ --monster-color-selection-4: var(--monster-color-gray-1);
208
+ --monster-bg-color-selection-1: var(--monster-color-yellow-2);
209
+ --monster-bg-color-selection-2: var(--monster-color-yellow-1);
210
+ --monster-bg-color-selection-3: var(--monster-color-yellow-2);
211
+ --monster-bg-color-selection-4: var(--monster-color-yellow-6);
212
+ }
213
+ }
214
+ :after,
215
+ :before,
216
+ :root {
217
+ --monster-color-primary-disabled-1: var(--monster-color-gray-4);
218
+ --monster-color-primary-disabled-2: var(--monster-color-gray-4);
219
+ --monster-color-primary-disabled-3: var(--monster-color-gray-4);
220
+ --monster-color-primary-disabled-4: var(--monster-color-gray-4);
221
+ --monster-bg-color-primary-disabled-1: var(--monster-color-gray-1);
222
+ --monster-bg-color-primary-disabled-2: var(--monster-color-gray-2);
223
+ --monster-bg-color-primary-disabled-3: var(--monster-color-gray-3);
224
+ --monster-bg-color-primary-disabled-4: var(--monster-color-gray-6);
225
+ }
226
+ @media (prefers-color-scheme: dark) {
227
+ :after,
228
+ :before,
229
+ :root {
230
+ --monster-color-primary-disabled-1: var(--monster-color-gray-4);
231
+ --monster-color-primary-disabled-2: var(--monster-color-gray-4);
232
+ --monster-color-primary-disabled-3: var(--monster-color-gray-3);
233
+ --monster-color-primary-disabled-4: var(--monster-color-gray-3);
234
+ --monster-bg-color-primary-disabled-1: var(--monster-color-gray-6);
235
+ --monster-bg-color-primary-disabled-2: var(--monster-color-gray-3);
236
+ --monster-bg-color-primary-disabled-3: var(--monster-color-gray-2);
237
+ --monster-bg-color-primary-disabled-4: var(--monster-color-gray-1);
238
+ }
239
+ }
240
+ :after,
241
+ :before,
242
+ :root {
243
+ --monster-color-gradient-1: #833ab4;
244
+ --monster-color-gradient-2: #fd1d1d;
245
+ --monster-color-gradient-3: #fcb045;
246
+ --monster-box-shadow-1: none;
247
+ --monster-box-shadow-2: -1px 1px 10px 1px hsla(0, 0%, 76%, 0.61);
248
+ --monster-text-shadow: none;
249
+ --monster-theme-control-bg-color: var(--monster-color-seashell-1);
250
+ --monster-theme-control-color: var(--monster-color-seashell-6);
251
+ --monster-theme-control-hover-color: var(--monster-color-seashell-6);
252
+ --monster-theme-control-hover-bg-color: var(--monster-color-seashell-2);
253
+ --monster-theme-control-border-width: 2px;
254
+ --monster-theme-control-border-style: solid;
255
+ --monster-theme-control-border-radius: 0;
256
+ --monster-theme-control-border-color: var(--monster-color-primary-1);
257
+ }
258
+ @media (prefers-color-scheme: dark) {
259
+ :after,
260
+ :before,
261
+ :root {
262
+ --monster-theme-control-bg-color: var(--monster-color-gray-5);
263
+ --monster-theme-control-color: var(--monster-color-gray-1);
264
+ --monster-theme-control-border-color: var(--monster-color-gray-3);
265
+ --monster-theme-control-hover-color: var(--monster-color-gray-1);
266
+ --monster-theme-control-hover-bg-color: var(--monster-color-gray-6);
267
+ }
268
+ }
269
+ :after,
270
+ :before,
271
+ :root {
272
+ --monster-theme-on-color: var(--monster-color-green-1);
273
+ --monster-theme-on-bg-color: var(--monster-color-green-5);
274
+ --monster-theme-off-color: var(--monster-color-gray-1);
275
+ --monster-theme-off-bg-color: var(--monster-color-gray-4);
276
+ }
277
+ @media (prefers-color-scheme: dark) {
278
+ :after,
279
+ :before,
280
+ :root {
281
+ --monster-theme-on-color: var(--monster-color-gray-6);
282
+ --monster-theme-on-bg-color: var(--monster-color-gray-1);
283
+ --monster-theme-off-color: var(--monster-color-gray-1);
284
+ --monster-theme-off-bg-color: var(--monster-color-gray-5);
285
+ }
286
+ }
287
+ :after,
288
+ :before,
289
+ :root {
290
+ --monster-border-style: solid;
291
+ --monster-border-width: 3px;
292
+ --monster-border-radius: 0;
293
+ --monster-popper-witharrrow-distance: -4px;
294
+ --monster-z-index-default: 0;
295
+ --monster-z-index-outline: 10;
296
+ --monster-z-index-dropdown: 200;
297
+ --monster-z-index-dropdown-overlay: 210;
298
+ --monster-z-index-sticky: 300;
299
+ --monster-z-index-sticky-overlay: 310;
300
+ --monster-z-index-fixed: 400;
301
+ --monster-z-index-fixed-overlay: 410;
302
+ --monster-z-index-modal-backdrop: 500;
303
+ --monster-z-index-modal-backdrop-overlay: 510;
304
+ --monster-z-index-offcanvas: 600;
305
+ --monster-z-index-offcanvas-overlay: 610;
306
+ --monster-z-index-modal: 700;
307
+ --monster-z-index-modal-overlay: 710;
308
+ --monster-z-index-popover: 800;
309
+ --monster-z-index-popover-overlay: 810;
310
+ --monster-z-index-tooltip: 800;
311
+ --monster-z-index-tooltip-overlay: 910;
312
+ --monster-space-0: 0;
313
+ --monster-space-1: 2px;
314
+ --monster-space-2: 4px;
315
+ --monster-space-3: 6px;
316
+ --monster-space-4: 10px;
317
+ --monster-space-5: 16px;
318
+ --monster-space-6: 26px;
319
+ --monster-space-7: 42px;
320
+ --monster-breakpoint-0: 480px;
321
+ --monster-breakpoint-4: 480px;
322
+ --monster-breakpoint-7: 768px;
323
+ --monster-breakpoint-9: 992px;
324
+ --monster-breakpoint-12: 1200px;
325
+ --monster-dragger-width: 2px;
326
+ --monster-dragger-handle-width: 4px;
327
+ --monster-dragger-handle-height: 50px;
328
+ }
@@ -1,2 +1,14 @@
1
1
  /** generated from ripple.pcss **/
2
- span.monster-fx-ripple{animation:monster-fx-ripple .6s linear;background-color:hsla(0,0%,100%,.7);border-radius:50%;position:absolute;transform:scale(0)}@keyframes monster-fx-ripple{to{opacity:0;transform:scale(4)}}
2
+ span.monster-fx-ripple {
3
+ animation: monster-fx-ripple .6s linear;
4
+ background-color: hsla(0, 0%, 100%, 0.7);
5
+ border-radius: 50%;
6
+ position: absolute;
7
+ transform: scale(0);
8
+ }
9
+ @keyframes monster-fx-ripple {
10
+ to {
11
+ opacity: 0;
12
+ transform: scale(4);
13
+ }
14
+ }