@mantine/core 8.3.3 → 8.3.4

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 (189) hide show
  1. package/cjs/components/Input/InputClearSection/InputClearSection.cjs +1 -1
  2. package/cjs/components/Input/InputClearSection/InputClearSection.cjs.map +1 -1
  3. package/cjs/components/Transition/get-transition-styles/get-transition-styles.cjs +0 -1
  4. package/cjs/components/Transition/get-transition-styles/get-transition-styles.cjs.map +1 -1
  5. package/esm/components/Input/InputClearSection/InputClearSection.mjs +1 -1
  6. package/esm/components/Input/InputClearSection/InputClearSection.mjs.map +1 -1
  7. package/esm/components/Transition/get-transition-styles/get-transition-styles.mjs +0 -1
  8. package/esm/components/Transition/get-transition-styles/get-transition-styles.mjs.map +1 -1
  9. package/package.json +2 -2
  10. package/styles/Accordion.css +178 -0
  11. package/styles/Accordion.layer.css +179 -0
  12. package/styles/ActionIcon.css +188 -0
  13. package/styles/ActionIcon.layer.css +189 -0
  14. package/styles/Affix.css +8 -0
  15. package/styles/Affix.layer.css +9 -0
  16. package/styles/Alert.css +82 -0
  17. package/styles/Alert.layer.css +83 -0
  18. package/styles/Anchor.css +56 -0
  19. package/styles/Anchor.layer.css +57 -0
  20. package/styles/AngleSlider.css +106 -0
  21. package/styles/AngleSlider.layer.css +107 -0
  22. package/styles/AppShell.css +127 -0
  23. package/styles/AppShell.layer.css +128 -0
  24. package/styles/AspectRatio.css +13 -0
  25. package/styles/AspectRatio.layer.css +14 -0
  26. package/styles/Avatar.css +68 -0
  27. package/styles/Avatar.layer.css +69 -0
  28. package/styles/BackgroundImage.css +9 -0
  29. package/styles/BackgroundImage.layer.css +10 -0
  30. package/styles/Badge.css +127 -0
  31. package/styles/Badge.layer.css +128 -0
  32. package/styles/Blockquote.css +41 -0
  33. package/styles/Blockquote.layer.css +42 -0
  34. package/styles/Breadcrumbs.css +27 -0
  35. package/styles/Breadcrumbs.layer.css +28 -0
  36. package/styles/Burger.css +68 -0
  37. package/styles/Burger.layer.css +69 -0
  38. package/styles/Button.css +261 -0
  39. package/styles/Button.layer.css +262 -0
  40. package/styles/Card.css +54 -0
  41. package/styles/Card.layer.css +55 -0
  42. package/styles/Center.css +9 -0
  43. package/styles/Center.layer.css +10 -0
  44. package/styles/Checkbox.css +110 -0
  45. package/styles/Checkbox.layer.css +111 -0
  46. package/styles/CheckboxCard.css +24 -0
  47. package/styles/CheckboxCard.layer.css +25 -0
  48. package/styles/CheckboxIndicator.css +97 -0
  49. package/styles/CheckboxIndicator.layer.css +98 -0
  50. package/styles/Chip.css +199 -0
  51. package/styles/Chip.layer.css +200 -0
  52. package/styles/CloseButton.css +58 -0
  53. package/styles/CloseButton.layer.css +59 -0
  54. package/styles/Code.css +21 -0
  55. package/styles/Code.layer.css +22 -0
  56. package/styles/ColorInput.css +21 -0
  57. package/styles/ColorInput.layer.css +22 -0
  58. package/styles/ColorPicker.css +160 -0
  59. package/styles/ColorPicker.layer.css +161 -0
  60. package/styles/ColorSwatch.css +71 -0
  61. package/styles/ColorSwatch.layer.css +72 -0
  62. package/styles/Combobox.css +210 -0
  63. package/styles/Combobox.layer.css +211 -0
  64. package/styles/Container.css +37 -0
  65. package/styles/Container.layer.css +38 -0
  66. package/styles/Dialog.css +19 -0
  67. package/styles/Dialog.layer.css +20 -0
  68. package/styles/Divider.css +62 -0
  69. package/styles/Divider.layer.css +63 -0
  70. package/styles/Drawer.css +33 -0
  71. package/styles/Drawer.layer.css +34 -0
  72. package/styles/Fieldset.css +49 -0
  73. package/styles/Fieldset.layer.css +50 -0
  74. package/styles/Flex.css +3 -0
  75. package/styles/Flex.layer.css +4 -0
  76. package/styles/FloatingIndicator.css +20 -0
  77. package/styles/FloatingIndicator.layer.css +21 -0
  78. package/styles/Grid.css +34 -0
  79. package/styles/Grid.layer.css +35 -0
  80. package/styles/Group.css +13 -0
  81. package/styles/Group.layer.css +14 -0
  82. package/styles/Image.css +6 -0
  83. package/styles/Image.layer.css +7 -0
  84. package/styles/Indicator.css +64 -0
  85. package/styles/Indicator.layer.css +65 -0
  86. package/styles/InlineInput.css +66 -0
  87. package/styles/InlineInput.layer.css +67 -0
  88. package/styles/Input.css +333 -0
  89. package/styles/Input.layer.css +334 -0
  90. package/styles/Kbd.css +31 -0
  91. package/styles/Kbd.layer.css +32 -0
  92. package/styles/List.css +51 -0
  93. package/styles/List.layer.css +52 -0
  94. package/styles/Loader.css +114 -0
  95. package/styles/Loader.layer.css +115 -0
  96. package/styles/LoadingOverlay.css +18 -0
  97. package/styles/LoadingOverlay.layer.css +19 -0
  98. package/styles/Mark.css +11 -0
  99. package/styles/Mark.layer.css +12 -0
  100. package/styles/Menu.css +80 -0
  101. package/styles/Menu.layer.css +81 -0
  102. package/styles/Modal.css +61 -0
  103. package/styles/Modal.layer.css +62 -0
  104. package/styles/ModalBase.css +56 -0
  105. package/styles/ModalBase.layer.css +57 -0
  106. package/styles/NavLink.css +118 -0
  107. package/styles/NavLink.layer.css +119 -0
  108. package/styles/Notification.css +131 -0
  109. package/styles/Notification.layer.css +132 -0
  110. package/styles/NumberInput.css +81 -0
  111. package/styles/NumberInput.layer.css +82 -0
  112. package/styles/Overlay.css +19 -0
  113. package/styles/Overlay.layer.css +20 -0
  114. package/styles/Pagination.css +96 -0
  115. package/styles/Pagination.layer.css +97 -0
  116. package/styles/Paper.css +24 -0
  117. package/styles/Paper.layer.css +25 -0
  118. package/styles/PasswordInput.css +62 -0
  119. package/styles/PasswordInput.layer.css +63 -0
  120. package/styles/Pill.css +117 -0
  121. package/styles/Pill.layer.css +118 -0
  122. package/styles/PillsInput.css +45 -0
  123. package/styles/PillsInput.layer.css +46 -0
  124. package/styles/PinInput.css +13 -0
  125. package/styles/PinInput.layer.css +14 -0
  126. package/styles/Popover.css +36 -0
  127. package/styles/Popover.layer.css +37 -0
  128. package/styles/Progress.css +142 -0
  129. package/styles/Progress.layer.css +143 -0
  130. package/styles/Radio.css +109 -0
  131. package/styles/Radio.layer.css +110 -0
  132. package/styles/RadioCard.css +24 -0
  133. package/styles/RadioCard.layer.css +25 -0
  134. package/styles/RadioIndicator.css +91 -0
  135. package/styles/RadioIndicator.layer.css +92 -0
  136. package/styles/Rating.css +82 -0
  137. package/styles/Rating.layer.css +83 -0
  138. package/styles/RingProgress.css +39 -0
  139. package/styles/RingProgress.layer.css +40 -0
  140. package/styles/ScrollArea.css +189 -0
  141. package/styles/ScrollArea.layer.css +190 -0
  142. package/styles/SegmentedControl.css +224 -0
  143. package/styles/SegmentedControl.layer.css +225 -0
  144. package/styles/SemiCircleProgress.css +56 -0
  145. package/styles/SemiCircleProgress.layer.css +57 -0
  146. package/styles/SimpleGrid.css +9 -0
  147. package/styles/SimpleGrid.layer.css +10 -0
  148. package/styles/Skeleton.css +50 -0
  149. package/styles/Skeleton.layer.css +51 -0
  150. package/styles/Slider.css +209 -0
  151. package/styles/Slider.layer.css +210 -0
  152. package/styles/Spoiler.css +21 -0
  153. package/styles/Spoiler.layer.css +22 -0
  154. package/styles/Stack.css +7 -0
  155. package/styles/Stack.layer.css +8 -0
  156. package/styles/Stepper.css +204 -0
  157. package/styles/Stepper.layer.css +205 -0
  158. package/styles/Switch.css +172 -0
  159. package/styles/Switch.layer.css +173 -0
  160. package/styles/Table.css +159 -0
  161. package/styles/Table.layer.css +160 -0
  162. package/styles/TableOfContents.css +38 -0
  163. package/styles/TableOfContents.layer.css +39 -0
  164. package/styles/Tabs.css +368 -0
  165. package/styles/Tabs.layer.css +369 -0
  166. package/styles/Text.css +51 -0
  167. package/styles/Text.layer.css +52 -0
  168. package/styles/ThemeIcon.css +24 -0
  169. package/styles/ThemeIcon.layer.css +25 -0
  170. package/styles/Timeline.css +173 -0
  171. package/styles/Timeline.layer.css +174 -0
  172. package/styles/Title.css +16 -0
  173. package/styles/Title.layer.css +17 -0
  174. package/styles/Tooltip.css +34 -0
  175. package/styles/Tooltip.layer.css +35 -0
  176. package/styles/Tree.css +36 -0
  177. package/styles/Tree.layer.css +37 -0
  178. package/styles/Typography.css +209 -0
  179. package/styles/Typography.layer.css +210 -0
  180. package/styles/UnstyledButton.css +17 -0
  181. package/styles/UnstyledButton.layer.css +18 -0
  182. package/styles/VisuallyHidden.css +11 -0
  183. package/styles/VisuallyHidden.layer.css +12 -0
  184. package/styles/baseline.css +40 -0
  185. package/styles/baseline.layer.css +41 -0
  186. package/styles/default-css-variables.css +519 -0
  187. package/styles/default-css-variables.layer.css +520 -0
  188. package/styles/global.css +40 -0
  189. package/styles/global.layer.css +41 -0
@@ -0,0 +1,127 @@
1
+ .m_347db0ec {
2
+ --badge-height-xs: 16px;
3
+ --badge-height-sm: 18px;
4
+ --badge-height-md: 20px;
5
+ --badge-height-lg: 26px;
6
+ --badge-height-xl: 32px;
7
+
8
+ --badge-fz-xs: 9px;
9
+ --badge-fz-sm: 10px;
10
+ --badge-fz-md: 11px;
11
+ --badge-fz-lg: 13px;
12
+ --badge-fz-xl: 16px;
13
+
14
+ --badge-padding-x-xs: 6px;
15
+ --badge-padding-x-sm: 8px;
16
+ --badge-padding-x-md: 10px;
17
+ --badge-padding-x-lg: 12px;
18
+ --badge-padding-x-xl: 16px;
19
+
20
+ --badge-height: var(--badge-height-md);
21
+ --badge-fz: var(--badge-fz-md);
22
+ --badge-padding-x: var(--badge-padding-x-md);
23
+ --badge-radius: 1000px;
24
+ --badge-lh: calc(var(--badge-height) - calc(0.125rem * var(--mantine-scale)));
25
+ --badge-color: var(--mantine-color-white);
26
+ --badge-bg: var(--mantine-primary-color-filled);
27
+ --badge-border-width: 1px;
28
+ --badge-bd: var(--badge-border-width) solid transparent;
29
+
30
+ -webkit-tap-highlight-color: transparent;
31
+ font-size: var(--badge-fz);
32
+ border-radius: var(--badge-radius);
33
+ height: var(--badge-height);
34
+ line-height: var(--badge-lh);
35
+ text-decoration: none;
36
+ padding: 0 var(--badge-padding-x);
37
+ display: inline-grid;
38
+ align-items: center;
39
+ justify-content: center;
40
+ width: fit-content;
41
+ text-transform: uppercase;
42
+ font-weight: 700;
43
+ letter-spacing: 0.25px;
44
+ cursor: default;
45
+ text-overflow: ellipsis;
46
+ overflow: hidden;
47
+ color: var(--badge-color);
48
+ background: var(--badge-bg);
49
+ border: var(--badge-bd);
50
+ }
51
+
52
+ .m_347db0ec:where([data-with-left-section], [data-variant='dot']) {
53
+ grid-template-columns: auto 1fr;
54
+ }
55
+
56
+ .m_347db0ec:where([data-with-right-section]) {
57
+ grid-template-columns: 1fr auto;
58
+ }
59
+
60
+ .m_347db0ec:where(
61
+ [data-with-left-section][data-with-right-section],
62
+ [data-variant='dot'][data-with-right-section]
63
+ ) {
64
+ grid-template-columns: auto 1fr auto;
65
+ }
66
+
67
+ .m_347db0ec:where([data-block]) {
68
+ display: flex;
69
+ width: 100%;
70
+ }
71
+
72
+ .m_347db0ec:where([data-circle]) {
73
+ padding-inline: 2px;
74
+ display: flex;
75
+ width: var(--badge-height);
76
+ }
77
+
78
+ .m_fbd81e3d {
79
+ --badge-dot-size: calc(var(--badge-height) / 3.4);
80
+ }
81
+
82
+ :where([data-mantine-color-scheme='light']) .m_fbd81e3d {
83
+ background-color: var(--mantine-color-white);
84
+ border-color: var(--mantine-color-gray-4);
85
+ color: var(--mantine-color-black);
86
+ }
87
+
88
+ :where([data-mantine-color-scheme='dark']) .m_fbd81e3d {
89
+ background-color: var(--mantine-color-dark-5);
90
+ border-color: var(--mantine-color-dark-5);
91
+ color: var(--mantine-color-white);
92
+ }
93
+
94
+ .m_fbd81e3d::before {
95
+ content: '';
96
+ display: block;
97
+ width: var(--badge-dot-size);
98
+ height: var(--badge-dot-size);
99
+ border-radius: var(--badge-dot-size);
100
+ background-color: var(--badge-dot-color);
101
+ margin-inline-end: var(--badge-dot-size);
102
+ }
103
+
104
+ .m_5add502a {
105
+ white-space: nowrap;
106
+ overflow: hidden;
107
+ text-overflow: ellipsis;
108
+ text-align: center;
109
+ cursor: inherit;
110
+ }
111
+
112
+ .m_91fdda9b {
113
+ --badge-section-margin: calc(var(--mantine-spacing-xs) / 2);
114
+
115
+ display: inline-flex;
116
+ justify-content: center;
117
+ align-items: center;
118
+ max-height: calc(var(--badge-height) - var(--badge-border-width) * 2);
119
+ }
120
+
121
+ .m_91fdda9b:where([data-position='left']) {
122
+ margin-inline-end: var(--badge-section-margin);
123
+ }
124
+
125
+ .m_91fdda9b:where([data-position='right']) {
126
+ margin-inline-start: var(--badge-section-margin);
127
+ }
@@ -0,0 +1,128 @@
1
+ @layer mantine {.m_347db0ec {
2
+ --badge-height-xs: 16px;
3
+ --badge-height-sm: 18px;
4
+ --badge-height-md: 20px;
5
+ --badge-height-lg: 26px;
6
+ --badge-height-xl: 32px;
7
+
8
+ --badge-fz-xs: 9px;
9
+ --badge-fz-sm: 10px;
10
+ --badge-fz-md: 11px;
11
+ --badge-fz-lg: 13px;
12
+ --badge-fz-xl: 16px;
13
+
14
+ --badge-padding-x-xs: 6px;
15
+ --badge-padding-x-sm: 8px;
16
+ --badge-padding-x-md: 10px;
17
+ --badge-padding-x-lg: 12px;
18
+ --badge-padding-x-xl: 16px;
19
+
20
+ --badge-height: var(--badge-height-md);
21
+ --badge-fz: var(--badge-fz-md);
22
+ --badge-padding-x: var(--badge-padding-x-md);
23
+ --badge-radius: 1000px;
24
+ --badge-lh: calc(var(--badge-height) - calc(0.125rem * var(--mantine-scale)));
25
+ --badge-color: var(--mantine-color-white);
26
+ --badge-bg: var(--mantine-primary-color-filled);
27
+ --badge-border-width: 1px;
28
+ --badge-bd: var(--badge-border-width) solid transparent;
29
+
30
+ -webkit-tap-highlight-color: transparent;
31
+ font-size: var(--badge-fz);
32
+ border-radius: var(--badge-radius);
33
+ height: var(--badge-height);
34
+ line-height: var(--badge-lh);
35
+ text-decoration: none;
36
+ padding: 0 var(--badge-padding-x);
37
+ display: inline-grid;
38
+ align-items: center;
39
+ justify-content: center;
40
+ width: fit-content;
41
+ text-transform: uppercase;
42
+ font-weight: 700;
43
+ letter-spacing: 0.25px;
44
+ cursor: default;
45
+ text-overflow: ellipsis;
46
+ overflow: hidden;
47
+ color: var(--badge-color);
48
+ background: var(--badge-bg);
49
+ border: var(--badge-bd);
50
+ }
51
+
52
+ .m_347db0ec:where([data-with-left-section], [data-variant='dot']) {
53
+ grid-template-columns: auto 1fr;
54
+ }
55
+
56
+ .m_347db0ec:where([data-with-right-section]) {
57
+ grid-template-columns: 1fr auto;
58
+ }
59
+
60
+ .m_347db0ec:where(
61
+ [data-with-left-section][data-with-right-section],
62
+ [data-variant='dot'][data-with-right-section]
63
+ ) {
64
+ grid-template-columns: auto 1fr auto;
65
+ }
66
+
67
+ .m_347db0ec:where([data-block]) {
68
+ display: flex;
69
+ width: 100%;
70
+ }
71
+
72
+ .m_347db0ec:where([data-circle]) {
73
+ padding-inline: 2px;
74
+ display: flex;
75
+ width: var(--badge-height);
76
+ }
77
+
78
+ .m_fbd81e3d {
79
+ --badge-dot-size: calc(var(--badge-height) / 3.4);
80
+ }
81
+
82
+ :where([data-mantine-color-scheme='light']) .m_fbd81e3d {
83
+ background-color: var(--mantine-color-white);
84
+ border-color: var(--mantine-color-gray-4);
85
+ color: var(--mantine-color-black);
86
+ }
87
+
88
+ :where([data-mantine-color-scheme='dark']) .m_fbd81e3d {
89
+ background-color: var(--mantine-color-dark-5);
90
+ border-color: var(--mantine-color-dark-5);
91
+ color: var(--mantine-color-white);
92
+ }
93
+
94
+ .m_fbd81e3d::before {
95
+ content: '';
96
+ display: block;
97
+ width: var(--badge-dot-size);
98
+ height: var(--badge-dot-size);
99
+ border-radius: var(--badge-dot-size);
100
+ background-color: var(--badge-dot-color);
101
+ margin-inline-end: var(--badge-dot-size);
102
+ }
103
+
104
+ .m_5add502a {
105
+ white-space: nowrap;
106
+ overflow: hidden;
107
+ text-overflow: ellipsis;
108
+ text-align: center;
109
+ cursor: inherit;
110
+ }
111
+
112
+ .m_91fdda9b {
113
+ --badge-section-margin: calc(var(--mantine-spacing-xs) / 2);
114
+
115
+ display: inline-flex;
116
+ justify-content: center;
117
+ align-items: center;
118
+ max-height: calc(var(--badge-height) - var(--badge-border-width) * 2);
119
+ }
120
+
121
+ .m_91fdda9b:where([data-position='left']) {
122
+ margin-inline-end: var(--badge-section-margin);
123
+ }
124
+
125
+ .m_91fdda9b:where([data-position='right']) {
126
+ margin-inline-start: var(--badge-section-margin);
127
+ }
128
+ }
@@ -0,0 +1,41 @@
1
+ .m_ddec01c0 {
2
+ --blockquote-border: 3px solid var(--bq-bd);
3
+
4
+ position: relative;
5
+ margin: 0;
6
+ border-inline-start: var(--blockquote-border);
7
+ border-start-end-radius: var(--bq-radius);
8
+ border-end-end-radius: var(--bq-radius);
9
+ padding: var(--mantine-spacing-xl) calc(2.375rem * var(--mantine-scale));
10
+ }
11
+
12
+ :where([data-mantine-color-scheme='light']) .m_ddec01c0 {
13
+ background-color: var(--bq-bg-light);
14
+ }
15
+
16
+ :where([data-mantine-color-scheme='dark']) .m_ddec01c0 {
17
+ background-color: var(--bq-bg-dark);
18
+ }
19
+
20
+ .m_dde7bd57 {
21
+ --blockquote-icon-offset: calc(var(--bq-icon-size) / -2);
22
+
23
+ position: absolute;
24
+ color: var(--bq-bd);
25
+ background-color: var(--mantine-color-body);
26
+ display: flex;
27
+ align-items: center;
28
+ justify-content: center;
29
+ top: var(--blockquote-icon-offset);
30
+ inset-inline-start: var(--blockquote-icon-offset);
31
+ width: var(--bq-icon-size);
32
+ height: var(--bq-icon-size);
33
+ border-radius: var(--bq-icon-size);
34
+ }
35
+
36
+ .m_dde51a35 {
37
+ display: block;
38
+ margin-top: var(--mantine-spacing-md);
39
+ opacity: 0.6;
40
+ font-size: 85%;
41
+ }
@@ -0,0 +1,42 @@
1
+ @layer mantine {.m_ddec01c0 {
2
+ --blockquote-border: 3px solid var(--bq-bd);
3
+
4
+ position: relative;
5
+ margin: 0;
6
+ border-inline-start: var(--blockquote-border);
7
+ border-start-end-radius: var(--bq-radius);
8
+ border-end-end-radius: var(--bq-radius);
9
+ padding: var(--mantine-spacing-xl) calc(2.375rem * var(--mantine-scale));
10
+ }
11
+
12
+ :where([data-mantine-color-scheme='light']) .m_ddec01c0 {
13
+ background-color: var(--bq-bg-light);
14
+ }
15
+
16
+ :where([data-mantine-color-scheme='dark']) .m_ddec01c0 {
17
+ background-color: var(--bq-bg-dark);
18
+ }
19
+
20
+ .m_dde7bd57 {
21
+ --blockquote-icon-offset: calc(var(--bq-icon-size) / -2);
22
+
23
+ position: absolute;
24
+ color: var(--bq-bd);
25
+ background-color: var(--mantine-color-body);
26
+ display: flex;
27
+ align-items: center;
28
+ justify-content: center;
29
+ top: var(--blockquote-icon-offset);
30
+ inset-inline-start: var(--blockquote-icon-offset);
31
+ width: var(--bq-icon-size);
32
+ height: var(--bq-icon-size);
33
+ border-radius: var(--bq-icon-size);
34
+ }
35
+
36
+ .m_dde51a35 {
37
+ display: block;
38
+ margin-top: var(--mantine-spacing-md);
39
+ opacity: 0.6;
40
+ font-size: 85%;
41
+ }
42
+ }
@@ -0,0 +1,27 @@
1
+ .m_8b3717df {
2
+ display: flex;
3
+ align-items: center;
4
+ flex-wrap: wrap;
5
+ }
6
+
7
+ .m_f678d540 {
8
+ line-height: 1;
9
+ white-space: nowrap;
10
+ -webkit-tap-highlight-color: transparent;
11
+ }
12
+
13
+ .m_3b8f2208 {
14
+ margin-inline: var(--bc-separator-margin, var(--mantine-spacing-xs));
15
+ line-height: 1;
16
+ display: flex;
17
+ align-items: center;
18
+ justify-content: center;
19
+ }
20
+
21
+ :where([data-mantine-color-scheme='light']) .m_3b8f2208 {
22
+ color: var(--mantine-color-gray-7);
23
+ }
24
+
25
+ :where([data-mantine-color-scheme='dark']) .m_3b8f2208 {
26
+ color: var(--mantine-color-dark-2);
27
+ }
@@ -0,0 +1,28 @@
1
+ @layer mantine {.m_8b3717df {
2
+ display: flex;
3
+ align-items: center;
4
+ flex-wrap: wrap;
5
+ }
6
+
7
+ .m_f678d540 {
8
+ line-height: 1;
9
+ white-space: nowrap;
10
+ -webkit-tap-highlight-color: transparent;
11
+ }
12
+
13
+ .m_3b8f2208 {
14
+ margin-inline: var(--bc-separator-margin, var(--mantine-spacing-xs));
15
+ line-height: 1;
16
+ display: flex;
17
+ align-items: center;
18
+ justify-content: center;
19
+ }
20
+
21
+ :where([data-mantine-color-scheme='light']) .m_3b8f2208 {
22
+ color: var(--mantine-color-gray-7);
23
+ }
24
+
25
+ :where([data-mantine-color-scheme='dark']) .m_3b8f2208 {
26
+ color: var(--mantine-color-dark-2);
27
+ }
28
+ }
@@ -0,0 +1,68 @@
1
+ .m_fea6bf1a {
2
+ --burger-size-xs: 12px;
3
+ --burger-size-sm: 18px;
4
+ --burger-size-md: 24px;
5
+ --burger-size-lg: 34px;
6
+ --burger-size-xl: 42px;
7
+
8
+ --burger-size: var(--burger-size-md);
9
+ --burger-line-size: calc(var(--burger-size) / 12);
10
+
11
+ width: calc(var(--burger-size) + var(--mantine-spacing-xs));
12
+ height: calc(var(--burger-size) + var(--mantine-spacing-xs));
13
+ padding: calc(var(--mantine-spacing-xs) / 2);
14
+ cursor: pointer;
15
+ }
16
+
17
+ :where([data-mantine-color-scheme='light']) .m_fea6bf1a {
18
+ --burger-color: var(--mantine-color-black);
19
+ }
20
+
21
+ :where([data-mantine-color-scheme='dark']) .m_fea6bf1a {
22
+ --burger-color: var(--mantine-color-white);
23
+ }
24
+
25
+ .m_d4fb9cad {
26
+ position: relative;
27
+ user-select: none;
28
+ }
29
+
30
+ .m_d4fb9cad,
31
+ .m_d4fb9cad::before,
32
+ .m_d4fb9cad::after {
33
+ display: block;
34
+ width: var(--burger-size);
35
+ height: var(--burger-line-size);
36
+ background-color: var(--burger-color);
37
+ outline: 1px solid transparent;
38
+ transition-property: background-color, transform;
39
+ transition-duration: var(--burger-transition-duration, 300ms);
40
+ transition-timing-function: var(--burger-transition-timing-function, ease);
41
+ }
42
+
43
+ .m_d4fb9cad::before,
44
+ .m_d4fb9cad::after {
45
+ position: absolute;
46
+ content: '';
47
+ inset-inline-start: 0;
48
+ }
49
+
50
+ .m_d4fb9cad::before {
51
+ top: calc(var(--burger-size) / -3);
52
+ }
53
+
54
+ .m_d4fb9cad::after {
55
+ top: calc(var(--burger-size) / 3);
56
+ }
57
+
58
+ .m_d4fb9cad[data-opened] {
59
+ background-color: transparent;
60
+ }
61
+
62
+ .m_d4fb9cad[data-opened]::before {
63
+ transform: translateY(calc(var(--burger-size) / 3)) rotate(45deg);
64
+ }
65
+
66
+ .m_d4fb9cad[data-opened]::after {
67
+ transform: translateY(calc(var(--burger-size) / -3)) rotate(-45deg);
68
+ }
@@ -0,0 +1,69 @@
1
+ @layer mantine {.m_fea6bf1a {
2
+ --burger-size-xs: 12px;
3
+ --burger-size-sm: 18px;
4
+ --burger-size-md: 24px;
5
+ --burger-size-lg: 34px;
6
+ --burger-size-xl: 42px;
7
+
8
+ --burger-size: var(--burger-size-md);
9
+ --burger-line-size: calc(var(--burger-size) / 12);
10
+
11
+ width: calc(var(--burger-size) + var(--mantine-spacing-xs));
12
+ height: calc(var(--burger-size) + var(--mantine-spacing-xs));
13
+ padding: calc(var(--mantine-spacing-xs) / 2);
14
+ cursor: pointer;
15
+ }
16
+
17
+ :where([data-mantine-color-scheme='light']) .m_fea6bf1a {
18
+ --burger-color: var(--mantine-color-black);
19
+ }
20
+
21
+ :where([data-mantine-color-scheme='dark']) .m_fea6bf1a {
22
+ --burger-color: var(--mantine-color-white);
23
+ }
24
+
25
+ .m_d4fb9cad {
26
+ position: relative;
27
+ user-select: none;
28
+ }
29
+
30
+ .m_d4fb9cad,
31
+ .m_d4fb9cad::before,
32
+ .m_d4fb9cad::after {
33
+ display: block;
34
+ width: var(--burger-size);
35
+ height: var(--burger-line-size);
36
+ background-color: var(--burger-color);
37
+ outline: 1px solid transparent;
38
+ transition-property: background-color, transform;
39
+ transition-duration: var(--burger-transition-duration, 300ms);
40
+ transition-timing-function: var(--burger-transition-timing-function, ease);
41
+ }
42
+
43
+ .m_d4fb9cad::before,
44
+ .m_d4fb9cad::after {
45
+ position: absolute;
46
+ content: '';
47
+ inset-inline-start: 0;
48
+ }
49
+
50
+ .m_d4fb9cad::before {
51
+ top: calc(var(--burger-size) / -3);
52
+ }
53
+
54
+ .m_d4fb9cad::after {
55
+ top: calc(var(--burger-size) / 3);
56
+ }
57
+
58
+ .m_d4fb9cad[data-opened] {
59
+ background-color: transparent;
60
+ }
61
+
62
+ .m_d4fb9cad[data-opened]::before {
63
+ transform: translateY(calc(var(--burger-size) / 3)) rotate(45deg);
64
+ }
65
+
66
+ .m_d4fb9cad[data-opened]::after {
67
+ transform: translateY(calc(var(--burger-size) / -3)) rotate(-45deg);
68
+ }
69
+ }