@recursica/mui-adapter 0.3.0 → 0.5.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.
- package/CHANGELOG.md +12 -0
- package/dist/mui-adapter.cjs +1 -1
- package/dist/mui-adapter.cjs.map +1 -1
- package/dist/mui-adapter.css +1 -1
- package/dist/mui-adapter.js +216 -178
- package/dist/mui-adapter.js.map +1 -1
- package/dist/src/components/Autocomplete/Autocomplete.d.ts +3 -0
- package/dist/src/components/Autocomplete/index.d.ts +1 -0
- package/dist/src/components/Button/Button.d.ts +9 -2
- package/dist/src/components/Loader/Loader.d.ts +9 -2
- package/dist/src/components/index.d.ts +1 -0
- package/package.json +5 -2
- package/src/GlobalExemptions.modules.css +13 -0
- package/src/components/Accordion/Accordion.module.css +56 -0
- package/src/components/Accordion/Accordion.tsx +1 -0
- package/src/components/AssistiveElement/AssistiveElement.module.css +20 -0
- package/src/components/AssistiveElement/AssistiveElement.tsx +1 -0
- package/src/components/Autocomplete/Autocomplete.module.css +47 -0
- package/src/components/Autocomplete/Autocomplete.stories.tsx +35 -0
- package/src/components/Autocomplete/Autocomplete.tsx +8 -0
- package/src/components/Autocomplete/index.ts +1 -0
- package/src/components/Avatar/Avatar.module.css +74 -0
- package/src/components/Avatar/Avatar.tsx +1 -0
- package/src/components/Badge/Badge.module.css +29 -0
- package/src/components/Badge/Badge.tsx +1 -0
- package/src/components/Breadcrumb/Breadcrumb.module.css +6 -0
- package/src/components/Breadcrumb/Breadcrumb.tsx +1 -0
- package/src/components/Button/BUTTON_IMPLEMENTATION_NOTES.md +16 -0
- package/src/components/Button/Button.module.css +154 -18
- package/src/components/Button/Button.stories.tsx +48 -0
- package/src/components/Button/Button.tsx +35 -3
- package/src/components/Card/Card.module.css +38 -0
- package/src/components/Card/Card.tsx +1 -0
- package/src/components/Checkbox/Checkbox.module.css +39 -0
- package/src/components/Checkbox/Checkbox.tsx +1 -0
- package/src/components/Chip/Chip.module.css +51 -0
- package/src/components/Chip/Chip.tsx +1 -0
- package/src/components/DatePicker/DatePicker.module.css +42 -0
- package/src/components/DatePicker/DatePicker.tsx +1 -0
- package/src/components/Dropdown/Dropdown.module.css +46 -0
- package/src/components/Dropdown/Dropdown.tsx +1 -0
- package/src/components/FileInput/FileInput.module.css +47 -0
- package/src/components/FileInput/FileInput.tsx +1 -0
- package/src/components/FileUpload/FileUpload.module.css +40 -0
- package/src/components/FileUpload/FileUpload.tsx +1 -0
- package/src/components/HoverCard/HoverCard.module.css +23 -0
- package/src/components/HoverCard/HoverCard.tsx +1 -0
- package/src/components/Label/Label.module.css +35 -0
- package/src/components/Label/Label.tsx +1 -0
- package/src/components/Link/Link.module.css +8 -0
- package/src/components/Loader/LOADER_IMPLEMENTATION_NOTES.md +25 -0
- package/src/components/Loader/Loader.module.css +166 -0
- package/src/components/Loader/Loader.stories.tsx +90 -22
- package/src/components/Loader/Loader.tsx +69 -5
- package/src/components/Menu/Menu.module.css +53 -0
- package/src/components/Menu/Menu.tsx +1 -0
- package/src/components/Modal/Modal.module.css +36 -0
- package/src/components/Modal/Modal.tsx +1 -0
- package/src/components/NumberInput/NumberInput.module.css +47 -0
- package/src/components/NumberInput/NumberInput.tsx +1 -0
- package/src/components/Pagination/Pagination.module.css +81 -0
- package/src/components/Pagination/Pagination.tsx +1 -0
- package/src/components/Panel/Panel.module.css +38 -0
- package/src/components/Panel/Panel.tsx +1 -0
- package/src/components/Radio/Radio.module.css +37 -0
- package/src/components/Radio/Radio.tsx +1 -0
- package/src/components/ReadOnlyField/ReadOnlyField.module.css +16 -0
- package/src/components/ReadOnlyField/ReadOnlyField.tsx +1 -0
- package/src/components/SegmentedControl/SegmentedControl.module.css +47 -0
- package/src/components/SegmentedControl/SegmentedControl.tsx +1 -0
- package/src/components/Slider/Slider.module.css +86 -0
- package/src/components/Slider/Slider.tsx +1 -0
- package/src/components/Stepper/Stepper.module.css +71 -0
- package/src/components/Stepper/Stepper.tsx +1 -0
- package/src/components/Switch/Switch.module.css +39 -0
- package/src/components/Switch/Switch.tsx +1 -0
- package/src/components/Tabs/Tabs.module.css +79 -0
- package/src/components/Tabs/Tabs.tsx +1 -0
- package/src/components/TextArea/TextArea.module.css +37 -0
- package/src/components/TextArea/TextArea.tsx +1 -0
- package/src/components/TextField/TextField.module.css +47 -0
- package/src/components/TextField/TextField.tsx +1 -0
- package/src/components/TimePicker/TimePicker.module.css +41 -0
- package/src/components/TimePicker/TimePicker.tsx +1 -0
- package/src/components/Timeline/Timeline.module.css +78 -0
- package/src/components/Timeline/Timeline.tsx +1 -0
- package/src/components/Toast/Toast.module.css +32 -0
- package/src/components/Toast/Toast.tsx +1 -0
- package/src/components/Tooltip/Tooltip.module.css +25 -0
- package/src/components/Tooltip/Tooltip.tsx +1 -0
- package/src/components/TransferList/TransferList.module.css +38 -0
- package/src/components/TransferList/TransferList.tsx +1 -0
- package/src/components/index.ts +1 -0
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
/* EXEMPTIONS:
|
|
2
|
+
This component is a placeholder stub. Once fully implemented, its specific
|
|
3
|
+
tokens will be fully wired up to direct styles. */
|
|
4
|
+
|
|
5
|
+
/* recursica-ignore: --recursica_ui-kit_components_chip_properties_border-radius */
|
|
6
|
+
/* recursica-ignore: --recursica_ui-kit_components_chip_properties_border-size */
|
|
7
|
+
/* recursica-ignore: --recursica_ui-kit_components_chip_properties_close-icon-color */
|
|
8
|
+
/* recursica-ignore: --recursica_ui-kit_components_chip_properties_close-icon-size */
|
|
9
|
+
/* recursica-ignore: --recursica_ui-kit_components_chip_properties_elevation */
|
|
10
|
+
/* recursica-ignore: --recursica_ui-kit_components_chip_properties_horizontal-padding */
|
|
11
|
+
/* recursica-ignore: --recursica_ui-kit_components_chip_properties_icon-size */
|
|
12
|
+
/* recursica-ignore: --recursica_ui-kit_components_chip_properties_icon-text-gap */
|
|
13
|
+
/* recursica-ignore: --recursica_ui-kit_components_chip_properties_leading-icon-color */
|
|
14
|
+
/* recursica-ignore: --recursica_ui-kit_components_chip_properties_max-width */
|
|
15
|
+
/* recursica-ignore: --recursica_ui-kit_components_chip_properties_min-width */
|
|
16
|
+
/* recursica-ignore: --recursica_ui-kit_components_chip_properties_text-size */
|
|
17
|
+
/* recursica-ignore: --recursica_ui-kit_components_chip_properties_text_font-family */
|
|
18
|
+
/* recursica-ignore: --recursica_ui-kit_components_chip_properties_text_font-size */
|
|
19
|
+
/* recursica-ignore: --recursica_ui-kit_components_chip_properties_text_font-style */
|
|
20
|
+
/* recursica-ignore: --recursica_ui-kit_components_chip_properties_text_font-weight */
|
|
21
|
+
/* recursica-ignore: --recursica_ui-kit_components_chip_properties_text_letter-spacing */
|
|
22
|
+
/* recursica-ignore: --recursica_ui-kit_components_chip_properties_text_line-height */
|
|
23
|
+
/* recursica-ignore: --recursica_ui-kit_components_chip_properties_text_text-decoration */
|
|
24
|
+
/* recursica-ignore: --recursica_ui-kit_components_chip_properties_text_text-transform */
|
|
25
|
+
/* recursica-ignore: --recursica_ui-kit_components_chip_properties_vertical-padding */
|
|
26
|
+
/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error-selected_properties_colors_background */
|
|
27
|
+
/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error-selected_properties_colors_border-color */
|
|
28
|
+
/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error-selected_properties_colors_close-icon-color */
|
|
29
|
+
/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error-selected_properties_colors_icon */
|
|
30
|
+
/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error-selected_properties_colors_leading-icon-color */
|
|
31
|
+
/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error-selected_properties_colors_selected-icon-color */
|
|
32
|
+
/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error-selected_properties_colors_text */
|
|
33
|
+
/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error_properties_colors_background */
|
|
34
|
+
/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error_properties_colors_border-color */
|
|
35
|
+
/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error_properties_colors_close-icon-color */
|
|
36
|
+
/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error_properties_colors_icon */
|
|
37
|
+
/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error_properties_colors_leading-icon-color */
|
|
38
|
+
/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error_properties_colors_selected-icon-color */
|
|
39
|
+
/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error_properties_colors_text */
|
|
40
|
+
/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_selected_properties_colors_background */
|
|
41
|
+
/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_selected_properties_colors_border-color */
|
|
42
|
+
/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_selected_properties_colors_close-icon-color */
|
|
43
|
+
/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_selected_properties_colors_leading-icon-color */
|
|
44
|
+
/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_selected_properties_colors_selected-icon-color */
|
|
45
|
+
/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_selected_properties_colors_text */
|
|
46
|
+
/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_unselected_properties_colors_background */
|
|
47
|
+
/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_unselected_properties_colors_border-color */
|
|
48
|
+
/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_unselected_properties_colors_close-icon-color */
|
|
49
|
+
/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_unselected_properties_colors_leading-icon-color */
|
|
50
|
+
/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_unselected_properties_colors_selected-icon-color */
|
|
51
|
+
/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_unselected_properties_colors_text */
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
/* EXEMPTIONS:
|
|
2
|
+
This component is a placeholder stub. Once fully implemented, its specific
|
|
3
|
+
tokens will be fully wired up to direct styles. */
|
|
4
|
+
|
|
5
|
+
/* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_border-radius */
|
|
6
|
+
/* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_horizontal-padding */
|
|
7
|
+
/* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_icon-size */
|
|
8
|
+
/* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_icon-text-gap */
|
|
9
|
+
/* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_min-height */
|
|
10
|
+
/* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_placeholder-opacity */
|
|
11
|
+
/* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_text_font-family */
|
|
12
|
+
/* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_text_font-size */
|
|
13
|
+
/* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_text_font-style */
|
|
14
|
+
/* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_text_font-weight */
|
|
15
|
+
/* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_text_letter-spacing */
|
|
16
|
+
/* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_text_line-height */
|
|
17
|
+
/* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_text_text-decoration */
|
|
18
|
+
/* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_text_text-transform */
|
|
19
|
+
/* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_vertical-padding */
|
|
20
|
+
/* recursica-ignore: --recursica_ui-kit_components_date-picker_properties_width */
|
|
21
|
+
/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_layouts_side-by-side_properties_top-bottom-margin */
|
|
22
|
+
/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_layouts_stacked_properties_top-bottom-margin */
|
|
23
|
+
/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_default_properties_border-size */
|
|
24
|
+
/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_default_properties_colors_background */
|
|
25
|
+
/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_default_properties_colors_border-color */
|
|
26
|
+
/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_default_properties_colors_leading-icon */
|
|
27
|
+
/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_default_properties_colors_text */
|
|
28
|
+
/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_disabled_properties_border-size */
|
|
29
|
+
/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_disabled_properties_colors_background */
|
|
30
|
+
/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_disabled_properties_colors_border-color */
|
|
31
|
+
/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_disabled_properties_colors_leading-icon */
|
|
32
|
+
/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_disabled_properties_colors_text */
|
|
33
|
+
/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_error_properties_border-size */
|
|
34
|
+
/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_error_properties_colors_background */
|
|
35
|
+
/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_error_properties_colors_border-color */
|
|
36
|
+
/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_error_properties_colors_leading-icon */
|
|
37
|
+
/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_error_properties_colors_text */
|
|
38
|
+
/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_focus_properties_border-size */
|
|
39
|
+
/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_focus_properties_colors_background */
|
|
40
|
+
/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_focus_properties_colors_border-color */
|
|
41
|
+
/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_focus_properties_colors_leading-icon */
|
|
42
|
+
/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_focus_properties_colors_text */
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
/* EXEMPTIONS:
|
|
2
|
+
This component is a placeholder stub. Once fully implemented, its specific
|
|
3
|
+
tokens will be fully wired up to direct styles. */
|
|
4
|
+
|
|
5
|
+
/* recursica-ignore: --recursica_ui-kit_components_dropdown_properties_border-radius */
|
|
6
|
+
/* recursica-ignore: --recursica_ui-kit_components_dropdown_properties_horizontal-padding */
|
|
7
|
+
/* recursica-ignore: --recursica_ui-kit_components_dropdown_properties_icon-size */
|
|
8
|
+
/* recursica-ignore: --recursica_ui-kit_components_dropdown_properties_icon-text-gap */
|
|
9
|
+
/* recursica-ignore: --recursica_ui-kit_components_dropdown_properties_max-width */
|
|
10
|
+
/* recursica-ignore: --recursica_ui-kit_components_dropdown_properties_min-height */
|
|
11
|
+
/* recursica-ignore: --recursica_ui-kit_components_dropdown_properties_min-width */
|
|
12
|
+
/* recursica-ignore: --recursica_ui-kit_components_dropdown_properties_text_font-family */
|
|
13
|
+
/* recursica-ignore: --recursica_ui-kit_components_dropdown_properties_text_font-size */
|
|
14
|
+
/* recursica-ignore: --recursica_ui-kit_components_dropdown_properties_text_font-style */
|
|
15
|
+
/* recursica-ignore: --recursica_ui-kit_components_dropdown_properties_text_font-weight */
|
|
16
|
+
/* recursica-ignore: --recursica_ui-kit_components_dropdown_properties_text_letter-spacing */
|
|
17
|
+
/* recursica-ignore: --recursica_ui-kit_components_dropdown_properties_text_line-height */
|
|
18
|
+
/* recursica-ignore: --recursica_ui-kit_components_dropdown_properties_text_text-decoration */
|
|
19
|
+
/* recursica-ignore: --recursica_ui-kit_components_dropdown_properties_text_text-transform */
|
|
20
|
+
/* recursica-ignore: --recursica_ui-kit_components_dropdown_properties_vertical-padding */
|
|
21
|
+
/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_layouts_side-by-side_properties_top-bottom-margin */
|
|
22
|
+
/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_layouts_stacked_properties_top-bottom-margin */
|
|
23
|
+
/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_default_properties_border-size */
|
|
24
|
+
/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_default_properties_colors_background */
|
|
25
|
+
/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_default_properties_colors_border-color */
|
|
26
|
+
/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_default_properties_colors_leading-icon */
|
|
27
|
+
/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_default_properties_colors_text */
|
|
28
|
+
/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_default_properties_colors_trailing-icon */
|
|
29
|
+
/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_disabled_properties_border-size */
|
|
30
|
+
/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_disabled_properties_colors_background */
|
|
31
|
+
/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_disabled_properties_colors_border-color */
|
|
32
|
+
/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_disabled_properties_colors_leading-icon */
|
|
33
|
+
/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_disabled_properties_colors_text */
|
|
34
|
+
/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_disabled_properties_colors_trailing-icon */
|
|
35
|
+
/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_error_properties_border-size */
|
|
36
|
+
/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_error_properties_colors_background */
|
|
37
|
+
/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_error_properties_colors_border-color */
|
|
38
|
+
/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_error_properties_colors_leading-icon */
|
|
39
|
+
/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_error_properties_colors_text */
|
|
40
|
+
/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_error_properties_colors_trailing-icon */
|
|
41
|
+
/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_focus_properties_border-size */
|
|
42
|
+
/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_focus_properties_colors_background */
|
|
43
|
+
/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_focus_properties_colors_border-color */
|
|
44
|
+
/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_focus_properties_colors_leading-icon */
|
|
45
|
+
/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_focus_properties_colors_text */
|
|
46
|
+
/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_focus_properties_colors_trailing-icon */
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
/* EXEMPTIONS:
|
|
2
|
+
This component is a placeholder stub. Once fully implemented, its specific
|
|
3
|
+
tokens will be fully wired up to direct styles. */
|
|
4
|
+
|
|
5
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_border-radius */
|
|
6
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_horizontal-padding */
|
|
7
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_icon-size */
|
|
8
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_icon-text-gap */
|
|
9
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_max-width */
|
|
10
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_min-height */
|
|
11
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_min-width */
|
|
12
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_placeholder-opacity */
|
|
13
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_text_font-family */
|
|
14
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_text_font-size */
|
|
15
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_text_font-style */
|
|
16
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_text_font-weight */
|
|
17
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_text_letter-spacing */
|
|
18
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_text_line-height */
|
|
19
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_text_text-decoration */
|
|
20
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_text_text-transform */
|
|
21
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_vertical-padding */
|
|
22
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_layouts_side-by-side_properties_top-bottom-margin */
|
|
23
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_layouts_stacked_properties_top-bottom-margin */
|
|
24
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_default_properties_border-size */
|
|
25
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_default_properties_colors_background */
|
|
26
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_default_properties_colors_border-color */
|
|
27
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_default_properties_colors_leading-icon */
|
|
28
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_default_properties_colors_text */
|
|
29
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_default_properties_colors_trailing-icon */
|
|
30
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_disabled_properties_border-size */
|
|
31
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_disabled_properties_colors_background */
|
|
32
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_disabled_properties_colors_border-color */
|
|
33
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_disabled_properties_colors_leading-icon */
|
|
34
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_disabled_properties_colors_text */
|
|
35
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_disabled_properties_colors_trailing-icon */
|
|
36
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_error_properties_border-size */
|
|
37
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_error_properties_colors_background */
|
|
38
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_error_properties_colors_border-color */
|
|
39
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_error_properties_colors_leading-icon */
|
|
40
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_error_properties_colors_text */
|
|
41
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_error_properties_colors_trailing-icon */
|
|
42
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_focus_properties_border-size */
|
|
43
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_focus_properties_colors_background */
|
|
44
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_focus_properties_colors_border-color */
|
|
45
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_focus_properties_colors_leading-icon */
|
|
46
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_focus_properties_colors_text */
|
|
47
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_focus_properties_colors_trailing-icon */
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
/* EXEMPTIONS:
|
|
2
|
+
This component is a placeholder stub. Once fully implemented, its specific
|
|
3
|
+
tokens will be fully wired up to direct styles. */
|
|
4
|
+
|
|
5
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_border-radius */
|
|
6
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_border-style */
|
|
7
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_item-gap */
|
|
8
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_list-spacing */
|
|
9
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_padding */
|
|
10
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_text_font-family */
|
|
11
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_text_font-size */
|
|
12
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_text_font-style */
|
|
13
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_text_font-weight */
|
|
14
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_text_letter-spacing */
|
|
15
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_text_line-height */
|
|
16
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_text_text-decoration */
|
|
17
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_text_text-transform */
|
|
18
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_vertical-element-gap */
|
|
19
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_layouts_side-by-side_properties_top-bottom-margin */
|
|
20
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_layouts_stacked_properties_top-bottom-margin */
|
|
21
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_default_properties_border-size */
|
|
22
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_default_properties_colors_background */
|
|
23
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_default_properties_colors_border-color */
|
|
24
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_default_properties_colors_text */
|
|
25
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_default_properties_colors_upload-icon */
|
|
26
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_disabled_properties_border-size */
|
|
27
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_disabled_properties_colors_background */
|
|
28
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_disabled_properties_colors_border-color */
|
|
29
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_disabled_properties_colors_text */
|
|
30
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_disabled_properties_colors_upload-icon */
|
|
31
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_error_properties_border-size */
|
|
32
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_error_properties_colors_background */
|
|
33
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_error_properties_colors_border-color */
|
|
34
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_error_properties_colors_text */
|
|
35
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_error_properties_colors_upload-icon */
|
|
36
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_focus_properties_border-size */
|
|
37
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_focus_properties_colors_background */
|
|
38
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_focus_properties_colors_border-color */
|
|
39
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_focus_properties_colors_text */
|
|
40
|
+
/* recursica-ignore: --recursica_ui-kit_components_file-upload_variants_states_focus_properties_colors_upload-icon */
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/* EXEMPTIONS:
|
|
2
|
+
This component is a placeholder stub. Once fully implemented, its specific
|
|
3
|
+
tokens will be fully wired up to direct styles. */
|
|
4
|
+
|
|
5
|
+
/* recursica-ignore: --recursica_ui-kit_components_hover-card-popover_properties_beak-size */
|
|
6
|
+
/* recursica-ignore: --recursica_ui-kit_components_hover-card-popover_properties_border-radius */
|
|
7
|
+
/* recursica-ignore: --recursica_ui-kit_components_hover-card-popover_properties_border-size */
|
|
8
|
+
/* recursica-ignore: --recursica_ui-kit_components_hover-card-popover_properties_colors_background */
|
|
9
|
+
/* recursica-ignore: --recursica_ui-kit_components_hover-card-popover_properties_colors_border-color */
|
|
10
|
+
/* recursica-ignore: --recursica_ui-kit_components_hover-card-popover_properties_colors_content */
|
|
11
|
+
/* recursica-ignore: --recursica_ui-kit_components_hover-card-popover_properties_content-text_font-family */
|
|
12
|
+
/* recursica-ignore: --recursica_ui-kit_components_hover-card-popover_properties_content-text_font-size */
|
|
13
|
+
/* recursica-ignore: --recursica_ui-kit_components_hover-card-popover_properties_content-text_font-style */
|
|
14
|
+
/* recursica-ignore: --recursica_ui-kit_components_hover-card-popover_properties_content-text_font-weight */
|
|
15
|
+
/* recursica-ignore: --recursica_ui-kit_components_hover-card-popover_properties_content-text_letter-spacing */
|
|
16
|
+
/* recursica-ignore: --recursica_ui-kit_components_hover-card-popover_properties_content-text_line-height */
|
|
17
|
+
/* recursica-ignore: --recursica_ui-kit_components_hover-card-popover_properties_content-text_text-decoration */
|
|
18
|
+
/* recursica-ignore: --recursica_ui-kit_components_hover-card-popover_properties_content-text_text-transform */
|
|
19
|
+
/* recursica-ignore: --recursica_ui-kit_components_hover-card-popover_properties_elevation */
|
|
20
|
+
/* recursica-ignore: --recursica_ui-kit_components_hover-card-popover_properties_horizontal-padding */
|
|
21
|
+
/* recursica-ignore: --recursica_ui-kit_components_hover-card-popover_properties_max-width */
|
|
22
|
+
/* recursica-ignore: --recursica_ui-kit_components_hover-card-popover_properties_min-width */
|
|
23
|
+
/* recursica-ignore: --recursica_ui-kit_components_hover-card-popover_properties_vertical-padding */
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/* EXEMPTIONS:
|
|
2
|
+
This component is a placeholder stub. Once fully implemented, its specific
|
|
3
|
+
tokens will be fully wired up to direct styles. */
|
|
4
|
+
|
|
5
|
+
/* recursica-ignore: --recursica_ui-kit_components_label_properties_colors_asterisk */
|
|
6
|
+
/* recursica-ignore: --recursica_ui-kit_components_label_properties_colors_text */
|
|
7
|
+
/* recursica-ignore: --recursica_ui-kit_components_label_properties_edit-icon-gap */
|
|
8
|
+
/* recursica-ignore: --recursica_ui-kit_components_label_properties_label-optional-text-gap */
|
|
9
|
+
/* recursica-ignore: --recursica_ui-kit_components_label_properties_label-text_font-family */
|
|
10
|
+
/* recursica-ignore: --recursica_ui-kit_components_label_properties_label-text_font-size */
|
|
11
|
+
/* recursica-ignore: --recursica_ui-kit_components_label_properties_label-text_font-style */
|
|
12
|
+
/* recursica-ignore: --recursica_ui-kit_components_label_properties_label-text_font-weight */
|
|
13
|
+
/* recursica-ignore: --recursica_ui-kit_components_label_properties_label-text_letter-spacing */
|
|
14
|
+
/* recursica-ignore: --recursica_ui-kit_components_label_properties_label-text_line-height */
|
|
15
|
+
/* recursica-ignore: --recursica_ui-kit_components_label_properties_label-text_text-decoration */
|
|
16
|
+
/* recursica-ignore: --recursica_ui-kit_components_label_properties_label-text_text-transform */
|
|
17
|
+
/* recursica-ignore: --recursica_ui-kit_components_label_properties_optional-text-opacity */
|
|
18
|
+
/* recursica-ignore: --recursica_ui-kit_components_label_properties_optional-text_font-family */
|
|
19
|
+
/* recursica-ignore: --recursica_ui-kit_components_label_properties_optional-text_font-size */
|
|
20
|
+
/* recursica-ignore: --recursica_ui-kit_components_label_properties_optional-text_font-style */
|
|
21
|
+
/* recursica-ignore: --recursica_ui-kit_components_label_properties_optional-text_font-weight */
|
|
22
|
+
/* recursica-ignore: --recursica_ui-kit_components_label_properties_optional-text_letter-spacing */
|
|
23
|
+
/* recursica-ignore: --recursica_ui-kit_components_label_properties_optional-text_line-height */
|
|
24
|
+
/* recursica-ignore: --recursica_ui-kit_components_label_properties_optional-text_text-decoration */
|
|
25
|
+
/* recursica-ignore: --recursica_ui-kit_components_label_properties_optional-text_text-transform */
|
|
26
|
+
/* recursica-ignore: --recursica_ui-kit_components_label_properties_required-indicator-gap */
|
|
27
|
+
/* recursica-ignore: --recursica_ui-kit_components_label_variants_layouts_side-by-side_properties_gutter */
|
|
28
|
+
/* recursica-ignore: --recursica_ui-kit_components_label_variants_layouts_side-by-side_properties_min-height */
|
|
29
|
+
/* recursica-ignore: --recursica_ui-kit_components_label_variants_layouts_side-by-side_properties_vertical-padding */
|
|
30
|
+
/* recursica-ignore: --recursica_ui-kit_components_label_variants_layouts_side-by-side_variants_sizes_default_properties_width */
|
|
31
|
+
/* recursica-ignore: --recursica_ui-kit_components_label_variants_layouts_side-by-side_variants_sizes_small_properties_width */
|
|
32
|
+
/* recursica-ignore: --recursica_ui-kit_components_label_variants_layouts_stacked_properties_bottom-padding */
|
|
33
|
+
/* recursica-ignore: --recursica_ui-kit_components_label_variants_layouts_stacked_properties_min-height */
|
|
34
|
+
/* recursica-ignore: --recursica_ui-kit_components_label_variants_layouts_stacked_variants_sizes_default_properties_width */
|
|
35
|
+
/* recursica-ignore: --recursica_ui-kit_components_label_variants_layouts_stacked_variants_sizes_small_properties_width */
|
|
@@ -131,3 +131,11 @@ HARDCODED VALUES:
|
|
|
131
131
|
/* HARDCODE: allows text truncation if bounded */
|
|
132
132
|
min-width: 0;
|
|
133
133
|
}
|
|
134
|
+
|
|
135
|
+
/* EXEMPTIONS:
|
|
136
|
+
text_text-transform across multiple link states (default, hover, visited, visited-hover) is ignored
|
|
137
|
+
because links naturally inherit casing directly from text children rather than requiring custom CSS transforms. */
|
|
138
|
+
/* recursica-ignore: --recursica_ui-kit_components_link_variants_states_default_properties_text_text-transform */
|
|
139
|
+
/* recursica-ignore: --recursica_ui-kit_components_link_variants_states_hover_properties_text_text-transform */
|
|
140
|
+
/* recursica-ignore: --recursica_ui-kit_components_link_variants_states_visited_properties_text_text-transform */
|
|
141
|
+
/* recursica-ignore: --recursica_ui-kit_components_link_variants_states_visited-hover_properties_text_text-transform */
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
# Loader Implementation Notes
|
|
2
|
+
|
|
3
|
+
## Architecture & Integration
|
|
4
|
+
|
|
5
|
+
The `Loader` component for the MUI adapter has been completely hand-coded from scratch using pure CSS and basic HTML `<span>` elements. It explicitly **does not** use MUI's native `<CircularProgress>` component.
|
|
6
|
+
|
|
7
|
+
This was a deliberate architectural decision to ensure 100% feature and visual parity with the `mantine-adapter`.
|
|
8
|
+
|
|
9
|
+
### Key Decisions:
|
|
10
|
+
|
|
11
|
+
- **Bypassing Native Components:** MUI's native loaders (like `<CircularProgress>`) are built using complex animated SVGs and only support a circular "oval" shape. Since the Recursica design system mandates `oval`, `bars`, and `dots` variants, relying on MUI's primitives would have forced a fragmented architecture where `oval` used MUI but `bars` and `dots` were hand-coded.
|
|
12
|
+
- **Parity with Mantine:** To guarantee identical animation timing, easing curves, and DOM structures across frameworks, the CSS keyframes and layout strategies used internally by Mantine's `<Loader>` were extracted and directly replicated in this adapter's `Loader.module.css`.
|
|
13
|
+
|
|
14
|
+
### Token Mapping:
|
|
15
|
+
|
|
16
|
+
Sizes are bound through `data-size` attributes (`sm`, `md`, `lg` parsing to target `<div data-size="small">`, etc.).
|
|
17
|
+
|
|
18
|
+
- **Oval Variant:** Uses a CSS spinning `::after` pseudo-element. To avoid CSS border inheritance bugs when computing tokenized border-widths, a custom `--loader-thickness` CSS variable is used to bridge the token into the spinning element.
|
|
19
|
+
- **Bars & Dots Variants:** Render three internal `<span />` elements sequentially, styled via `Loader.module.css` to handle individual keyframe delays for bouncing or fading animations.
|
|
20
|
+
|
|
21
|
+
### Color Contrast Rules:
|
|
22
|
+
|
|
23
|
+
Loaders are hardcoded to map to their explicitly defined design tokens (e.g., `--recursica_ui-kit_components_loader_properties_indicator-color`). By default, they do **not** inherit `currentColor`.
|
|
24
|
+
|
|
25
|
+
When injected into components like the `Button` (where contrast issues may arise against solid backgrounds), it is the responsibility of the parent component (e.g., `Button.module.css`) to use contextual CSS overrides to force `--loader-color: currentColor !important` if necessary.
|
|
@@ -0,0 +1,166 @@
|
|
|
1
|
+
.root {
|
|
2
|
+
/* Default inheritance mapped from component variables if not explicitly overridden by variants */
|
|
3
|
+
--loader-color: var(
|
|
4
|
+
--recursica_ui-kit_components_loader_properties_indicator-color,
|
|
5
|
+
currentColor
|
|
6
|
+
);
|
|
7
|
+
box-sizing: border-box;
|
|
8
|
+
}
|
|
9
|
+
.root * {
|
|
10
|
+
box-sizing: border-box;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
/* data-size mapping */
|
|
14
|
+
|
|
15
|
+
/* SMALL */
|
|
16
|
+
.root[data-size="small"] {
|
|
17
|
+
--loader-size: var(
|
|
18
|
+
--recursica_ui-kit_components_loader_variants_sizes_small_properties_size
|
|
19
|
+
);
|
|
20
|
+
}
|
|
21
|
+
.root[data-size="small"][data-variant="oval"] {
|
|
22
|
+
--loader-thickness: var(
|
|
23
|
+
--recursica_ui-kit_components_loader_variants_sizes_small_properties_thickness
|
|
24
|
+
);
|
|
25
|
+
}
|
|
26
|
+
.root[data-size="small"]:not([data-variant="oval"]) span {
|
|
27
|
+
border-radius: var(
|
|
28
|
+
--recursica_ui-kit_components_loader_variants_sizes_small_properties_border-radius
|
|
29
|
+
);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
/* DEFAULT */
|
|
33
|
+
.root[data-size="default"] {
|
|
34
|
+
--loader-size: var(
|
|
35
|
+
--recursica_ui-kit_components_loader_variants_sizes_default_properties_size
|
|
36
|
+
);
|
|
37
|
+
}
|
|
38
|
+
.root[data-size="default"][data-variant="oval"] {
|
|
39
|
+
--loader-thickness: var(
|
|
40
|
+
--recursica_ui-kit_components_loader_variants_sizes_default_properties_thickness
|
|
41
|
+
);
|
|
42
|
+
}
|
|
43
|
+
.root[data-size="default"]:not([data-variant="oval"]) span {
|
|
44
|
+
border-radius: var(
|
|
45
|
+
--recursica_ui-kit_components_loader_variants_sizes_default_properties_border-radius
|
|
46
|
+
);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/* LARGE */
|
|
50
|
+
.root[data-size="large"] {
|
|
51
|
+
--loader-size: var(
|
|
52
|
+
--recursica_ui-kit_components_loader_variants_sizes_large_properties_size
|
|
53
|
+
);
|
|
54
|
+
}
|
|
55
|
+
.root[data-size="large"][data-variant="oval"] {
|
|
56
|
+
--loader-thickness: var(
|
|
57
|
+
--recursica_ui-kit_components_loader_variants_sizes_large_properties_thickness
|
|
58
|
+
);
|
|
59
|
+
}
|
|
60
|
+
.root[data-size="large"]:not([data-variant="oval"]) span {
|
|
61
|
+
border-radius: var(
|
|
62
|
+
--recursica_ui-kit_components_loader_variants_sizes_large_properties_border-radius
|
|
63
|
+
);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
/* ----- Oval loader ----- */
|
|
67
|
+
@keyframes oval-spin {
|
|
68
|
+
0% {
|
|
69
|
+
transform: rotate(0deg);
|
|
70
|
+
}
|
|
71
|
+
100% {
|
|
72
|
+
transform: rotate(360deg);
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.root[data-variant="oval"] {
|
|
77
|
+
display: inline-block;
|
|
78
|
+
width: var(--loader-size);
|
|
79
|
+
height: var(--loader-size);
|
|
80
|
+
}
|
|
81
|
+
.root[data-variant="oval"]::after {
|
|
82
|
+
content: "";
|
|
83
|
+
display: block;
|
|
84
|
+
width: var(--loader-size);
|
|
85
|
+
height: var(--loader-size);
|
|
86
|
+
border-radius: 10000px;
|
|
87
|
+
border-width: var(--loader-thickness);
|
|
88
|
+
border-style: solid;
|
|
89
|
+
border-color: var(--loader-color) var(--loader-color) var(--loader-color)
|
|
90
|
+
transparent;
|
|
91
|
+
animation: oval-spin 1.2s linear infinite;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
/* ----- Bars loader ----- */
|
|
95
|
+
@keyframes bars-bounce {
|
|
96
|
+
0% {
|
|
97
|
+
transform: scale(0.6);
|
|
98
|
+
opacity: 0;
|
|
99
|
+
}
|
|
100
|
+
50%,
|
|
101
|
+
100% {
|
|
102
|
+
transform: scale(1);
|
|
103
|
+
opacity: 1;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.root[data-variant="bars"] {
|
|
108
|
+
position: relative;
|
|
109
|
+
width: var(--loader-size);
|
|
110
|
+
height: var(--loader-size);
|
|
111
|
+
display: flex;
|
|
112
|
+
align-items: center;
|
|
113
|
+
justify-content: center;
|
|
114
|
+
gap: calc(var(--loader-size) / 5);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.root[data-variant="bars"] span {
|
|
118
|
+
flex: 1;
|
|
119
|
+
height: 100%;
|
|
120
|
+
background: var(--loader-color);
|
|
121
|
+
animation: bars-bounce 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.root[data-variant="bars"] span:nth-of-type(1) {
|
|
125
|
+
animation-delay: -240ms;
|
|
126
|
+
}
|
|
127
|
+
.root[data-variant="bars"] span:nth-of-type(2) {
|
|
128
|
+
animation-delay: -120ms;
|
|
129
|
+
}
|
|
130
|
+
.root[data-variant="bars"] span:nth-of-type(3) {
|
|
131
|
+
animation-delay: 0;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
/* ----- Dots loader ----- */
|
|
135
|
+
@keyframes dots-pulse {
|
|
136
|
+
0%,
|
|
137
|
+
100% {
|
|
138
|
+
transform: scale(1);
|
|
139
|
+
opacity: 1;
|
|
140
|
+
}
|
|
141
|
+
50% {
|
|
142
|
+
transform: scale(0.6);
|
|
143
|
+
opacity: 0.5;
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.root[data-variant="dots"] {
|
|
148
|
+
display: flex;
|
|
149
|
+
justify-content: center;
|
|
150
|
+
align-items: center;
|
|
151
|
+
gap: calc(var(--loader-size) / 10);
|
|
152
|
+
position: relative;
|
|
153
|
+
width: var(--loader-size);
|
|
154
|
+
height: var(--loader-size);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.root[data-variant="dots"] span {
|
|
158
|
+
width: calc(var(--loader-size) / 3 - var(--loader-size) / 15);
|
|
159
|
+
height: calc(var(--loader-size) / 3 - var(--loader-size) / 15);
|
|
160
|
+
background: var(--loader-color);
|
|
161
|
+
animation: dots-pulse 0.8s infinite linear;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.root[data-variant="dots"] span:nth-child(2) {
|
|
165
|
+
animation-delay: 0.4s;
|
|
166
|
+
}
|