@kubit-ui-web/react-components 2.0.0-beta.2 → 2.0.0-beta.20
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/README.md +17 -28
- package/dist/cjs/_virtual/jsx-runtime.js +1 -1
- package/dist/cjs/components/accordion/accordionStandAlone.js +1 -1
- package/dist/cjs/components/alert/alertControlled.js +1 -0
- package/dist/cjs/components/alert/alertStandAlone.js +1 -0
- package/dist/cjs/components/alert/index.js +2 -0
- package/dist/cjs/components/avatar/fragments/drawContent.js +1 -1
- package/dist/cjs/components/badge/badgeStandAlone.js +1 -1
- package/dist/cjs/components/breadcrumbs/components/crumbStandAlone/crumbStandAlone.js +1 -1
- package/dist/cjs/components/button/button.js +1 -1
- package/dist/cjs/components/button/buttonStandAlone.js +1 -1
- package/dist/cjs/components/calendar/list/list.js +1 -1
- package/dist/cjs/components/calendar/selector/monthSelector/monthSelector.js +1 -1
- package/dist/cjs/components/calendar/selector/selector.js +1 -1
- package/dist/cjs/components/cardImage/cardImageStandAlone.js +1 -1
- package/dist/cjs/components/carousel/hooks/useCarousel.js +1 -1
- package/dist/cjs/components/carousel/hooks/useCarouselKeyNavigation.js +1 -1
- package/dist/cjs/components/carousel/hooks/useCarouselSwipe.js +1 -1
- package/dist/cjs/components/carousel/hooks/utils/calc.utils.js +1 -1
- package/dist/cjs/components/carousel/hooks/utils/dom.utils.js +1 -1
- package/dist/cjs/components/checkbox/checkboxStandAlone.js +1 -1
- package/dist/cjs/components/checkboxBase/checkboxBaseStandAlone.js +1 -1
- package/dist/cjs/components/chip/chipStandAlone.js +1 -1
- package/dist/cjs/components/container/containerStandAlone.js +1 -1
- package/dist/cjs/components/dataTable/dataTableStandAlone.js +1 -1
- package/dist/cjs/components/dataTable/hooks/useDataTableHasScroll.js +1 -1
- package/dist/cjs/components/dataTable/hooks/useDataTableShadow.js +1 -1
- package/dist/cjs/components/dataTable/hooks/useDataTableStickyDividers.js +1 -1
- package/dist/cjs/components/dataTable/hooks/useDataTableStickyLeftColumns.js +1 -1
- package/dist/cjs/components/dataTable/hooks/useDataTableStickyRightColumns.js +1 -1
- package/dist/cjs/components/dropdownSelected/dropdownSelectedControlled.js +1 -1
- package/dist/cjs/components/dropdownSelected/dropdownSelectedStandAlone.js +1 -1
- package/dist/cjs/components/image/image.css +1 -38
- package/dist/cjs/components/input/input.js +1 -1
- package/dist/cjs/components/input/inputStandAlone.js +1 -1
- package/dist/cjs/components/inputBase/inputBase.js +1 -1
- package/dist/cjs/components/inputDecoration/inputDecorationStandAlone.js +1 -1
- package/dist/cjs/components/inputSignature/inputSignatureStandAlone.js +1 -1
- package/dist/cjs/components/label/labelStandAlone.js +1 -1
- package/dist/cjs/components/link/linkStandAlone.js +1 -1
- package/dist/cjs/components/listOptions/listOptionsStandAlone.js +1 -1
- package/dist/cjs/components/modal/fragments/modalHeader.js +1 -1
- package/dist/cjs/components/modal/modalControlled.js +1 -1
- package/dist/cjs/components/modal/modalStandAlone.js +1 -1
- package/dist/cjs/components/modal/modalUnControlled.js +1 -1
- package/dist/cjs/components/option/optionStandAlone.js +1 -1
- package/dist/cjs/components/pageControl/components/arrowControlStandAlone.js +1 -1
- package/dist/cjs/components/pageControl/components/controls.js +1 -1
- package/dist/cjs/components/pageControl/pageControlStandAlone.js +1 -1
- package/dist/cjs/components/pagination/fragments/paginationButtonControl.js +1 -1
- package/dist/cjs/components/popover/hooks/positioning/middlewareUtils.js +1 -1
- package/dist/cjs/components/popover/hooks/usePopoverInteractions.js +1 -1
- package/dist/cjs/components/popover/hooks/usePopoverLifecycle.js +1 -1
- package/dist/cjs/components/popover/hooks/usePopoverPositioning.js +1 -1
- package/dist/cjs/components/popover/popover.js +1 -1
- package/dist/cjs/components/popover/styles/index.css +1 -10
- package/dist/cjs/components/popover/styles/keyframes.css +1 -421
- package/dist/cjs/components/popover/styles/popover-arrow.css +1 -42
- package/dist/cjs/components/popover/styles/popover.css +1 -189
- package/dist/cjs/components/progressBar/progressBarStandAlone.js +1 -1
- package/dist/cjs/components/radioButton/radioButtonStandAlone.js +1 -1
- package/dist/cjs/components/selectorBoxFile/components/selectorBoxFileAnimation.js +1 -1
- package/dist/cjs/components/selectorBoxFile/components/selectorBoxFileContainerBox.js +1 -1
- package/dist/cjs/components/selectorBoxFile/selectorBoxFile.js +1 -1
- package/dist/cjs/components/selectorBoxFile/selectorBoxFileStandAlone.js +1 -1
- package/dist/cjs/components/skeleton/skeleton.css +1 -20
- package/dist/cjs/components/slider/components/sliderHelperTextStandAlone.js +1 -1
- package/dist/cjs/components/slider/components/sliderScaleStandAlone.js +1 -1
- package/dist/cjs/components/slider/components/sliderThumbStandAlone.js +1 -1
- package/dist/cjs/components/slider/sliderStandAlone.js +1 -1
- package/dist/cjs/components/stepperNumber/stepperNumberStandAlone.js +1 -1
- package/dist/cjs/components/table/hooks/useTableHasScroll.js +1 -1
- package/dist/cjs/components/table/hooks/useTableShadow.js +1 -1
- package/dist/cjs/components/table/hooks/useTableStickyLeftColumns.js +1 -1
- package/dist/cjs/components/table/hooks/useTableStickyRightColumns.js +1 -1
- package/dist/cjs/components/tabs/tabsStandAlone.js +1 -1
- package/dist/cjs/components/tag/tagStandAlone.js +1 -1
- package/dist/cjs/components/text/text.css +1 -14
- package/dist/cjs/components/text/textStandAlone.js +1 -1
- package/dist/cjs/components/textArea/components/errorStandAlone.js +1 -1
- package/dist/cjs/components/textArea/components/helpMessageStandAlone.js +1 -1
- package/dist/cjs/components/textArea/components/titleStandAlone.js +1 -1
- package/dist/cjs/components/textArea/textAreaStandAlone.js +1 -1
- package/dist/cjs/components/toggle/toggleStandAlone.js +1 -1
- package/dist/cjs/components/tooltip/hooks/useTooltip.js +1 -1
- package/dist/cjs/components/tooltip/tooltip.css +1 -69
- package/dist/cjs/components/tooltip/tooltipControlled.js +1 -1
- package/dist/cjs/components/tooltip/tooltipStandAlone.js +1 -1
- package/dist/cjs/components/tooltip/tooltipUnControlled.js +1 -1
- package/dist/cjs/components/virtualKeyboard/virtualKeyboardStandAlone.js +1 -1
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/lib/components/customComponent/customComponent.js +1 -1
- package/dist/cjs/lib/components/elementOrIcon/elementOrIcon.js +1 -0
- package/dist/cjs/lib/components/errorMessage/errorMessageStandAlone.js +1 -1
- package/dist/cjs/lib/components/itemRove/itemRove.js +1 -0
- package/dist/cjs/lib/components/overlay/overlay.js +1 -0
- package/dist/cjs/lib/components/overlay/overlayStandAlone.js +1 -0
- package/dist/cjs/lib/designSystem/kubit/css/kubit.css +1 -0
- package/dist/cjs/lib/designSystem/kubit/css/kubit.min.css +1 -0
- package/dist/cjs/lib/hooks/useClickOutside/useClickOutside.js +1 -1
- package/dist/cjs/lib/hooks/useContentVisibility/useContentVisibility.js +1 -1
- package/dist/cjs/lib/hooks/useManageState/useManageState.js +1 -1
- package/dist/cjs/lib/hooks/useScrollDetection/useScrollDetection.js +1 -0
- package/dist/cjs/lib/hooks/useScrollEffect/useScrollEffect.js +1 -1
- package/dist/cjs/lib/hooks/useSwipeDown/useSwipeDown.js +1 -1
- package/dist/cjs/lib/provider/cssProvider/provider.js +1 -1
- package/dist/cjs/lib/provider/cssProvider/stats/stats.js +1 -1641
- package/dist/cjs/lib/provider/stylesProvider/stylesProvider.js +1 -1
- package/dist/cjs/lib/storybook/components/divider/divider.css +1 -0
- package/dist/cjs/lib/storybook/components/note/styles.css +1 -0
- package/dist/cjs/lib/utils/keyboard/keyboard.js +1 -1
- package/dist/cjs/lib/utils/process/processCommonProp.js +1 -0
- package/dist/cjs/react-components.css +1 -1
- package/dist/esm/_virtual/jsx-runtime.js +1 -1
- package/dist/esm/components/accordion/accordionStandAlone.js +4 -4
- package/dist/esm/components/alert/alertControlled.js +2 -0
- package/dist/esm/components/alert/alertStandAlone.js +2 -0
- package/dist/esm/components/alert/index.js +1 -0
- package/dist/esm/components/avatar/fragments/drawContent.js +1 -4
- package/dist/esm/components/badge/badgeStandAlone.js +7 -9
- package/dist/esm/components/breadcrumbs/components/crumbStandAlone/crumbStandAlone.js +3 -6
- package/dist/esm/components/button/button.js +1 -1
- package/dist/esm/components/button/buttonStandAlone.js +3 -5
- package/dist/esm/components/calendar/list/list.js +1 -1
- package/dist/esm/components/calendar/selector/monthSelector/monthSelector.js +1 -1
- package/dist/esm/components/calendar/selector/selector.js +7 -9
- package/dist/esm/components/cardImage/cardImageStandAlone.js +7 -7
- package/dist/esm/components/carousel/hooks/useCarousel.js +1 -1
- package/dist/esm/components/carousel/hooks/useCarouselKeyNavigation.js +1 -1
- package/dist/esm/components/carousel/hooks/useCarouselSwipe.js +1 -1
- package/dist/esm/components/carousel/hooks/utils/calc.utils.js +1 -1
- package/dist/esm/components/carousel/hooks/utils/dom.utils.js +1 -1
- package/dist/esm/components/checkbox/checkboxStandAlone.js +5 -7
- package/dist/esm/components/checkboxBase/checkboxBaseStandAlone.js +4 -4
- package/dist/esm/components/chip/chipStandAlone.js +8 -9
- package/dist/esm/components/container/containerStandAlone.js +4 -4
- package/dist/esm/components/dataTable/dataTableStandAlone.js +10 -14
- package/dist/esm/components/dataTable/hooks/useDataTableHasScroll.js +1 -1
- package/dist/esm/components/dataTable/hooks/useDataTableShadow.js +1 -1
- package/dist/esm/components/dataTable/hooks/useDataTableStickyDividers.js +1 -1
- package/dist/esm/components/dataTable/hooks/useDataTableStickyLeftColumns.js +1 -1
- package/dist/esm/components/dataTable/hooks/useDataTableStickyRightColumns.js +1 -1
- package/dist/esm/components/dropdownSelected/dropdownSelectedControlled.js +1 -1
- package/dist/esm/components/dropdownSelected/dropdownSelectedStandAlone.js +5 -6
- package/dist/esm/components/image/image.css +1 -38
- package/dist/esm/components/input/input.js +2 -2
- package/dist/esm/components/input/inputStandAlone.js +3 -5
- package/dist/esm/components/inputBase/inputBase.js +2 -2
- package/dist/esm/components/inputDecoration/inputDecorationStandAlone.js +2 -2
- package/dist/esm/components/inputSignature/inputSignatureStandAlone.js +3 -4
- package/dist/esm/components/label/labelStandAlone.js +2 -3
- package/dist/esm/components/link/linkStandAlone.js +3 -3
- package/dist/esm/components/listOptions/listOptionsStandAlone.js +2 -4
- package/dist/esm/components/modal/fragments/modalHeader.js +3 -9
- package/dist/esm/components/modal/modalControlled.js +1 -1
- package/dist/esm/components/modal/modalStandAlone.js +4 -5
- package/dist/esm/components/modal/modalUnControlled.js +2 -2
- package/dist/esm/components/option/optionStandAlone.js +8 -11
- package/dist/esm/components/pageControl/components/arrowControlStandAlone.js +2 -2
- package/dist/esm/components/pageControl/components/controls.js +2 -4
- package/dist/esm/components/pageControl/pageControlStandAlone.js +6 -8
- package/dist/esm/components/pagination/fragments/paginationButtonControl.js +2 -2
- package/dist/esm/components/popover/hooks/positioning/middlewareUtils.js +1 -1
- package/dist/esm/components/popover/hooks/usePopoverInteractions.js +1 -1
- package/dist/esm/components/popover/hooks/usePopoverLifecycle.js +1 -1
- package/dist/esm/components/popover/hooks/usePopoverPositioning.js +1 -1
- package/dist/esm/components/popover/popover.js +1 -1
- package/dist/esm/components/popover/styles/index.css +1 -10
- package/dist/esm/components/popover/styles/keyframes.css +1 -421
- package/dist/esm/components/popover/styles/popover-arrow.css +1 -42
- package/dist/esm/components/popover/styles/popover.css +1 -189
- package/dist/esm/components/progressBar/progressBarStandAlone.js +4 -4
- package/dist/esm/components/radioButton/radioButtonStandAlone.js +4 -8
- package/dist/esm/components/selectorBoxFile/components/selectorBoxFileAnimation.js +3 -7
- package/dist/esm/components/selectorBoxFile/components/selectorBoxFileContainerBox.js +8 -13
- package/dist/esm/components/selectorBoxFile/selectorBoxFile.js +2 -2
- package/dist/esm/components/selectorBoxFile/selectorBoxFileStandAlone.js +4 -8
- package/dist/esm/components/skeleton/skeleton.css +1 -20
- package/dist/esm/components/slider/components/sliderHelperTextStandAlone.js +1 -3
- package/dist/esm/components/slider/components/sliderScaleStandAlone.js +2 -2
- package/dist/esm/components/slider/components/sliderThumbStandAlone.js +1 -1
- package/dist/esm/components/slider/sliderStandAlone.js +17 -19
- package/dist/esm/components/stepperNumber/stepperNumberStandAlone.js +8 -8
- package/dist/esm/components/table/hooks/useTableHasScroll.js +1 -1
- package/dist/esm/components/table/hooks/useTableShadow.js +1 -1
- package/dist/esm/components/table/hooks/useTableStickyLeftColumns.js +1 -1
- package/dist/esm/components/table/hooks/useTableStickyRightColumns.js +1 -1
- package/dist/esm/components/tabs/tabsStandAlone.js +5 -6
- package/dist/esm/components/tag/tagStandAlone.js +4 -4
- package/dist/esm/components/text/text.css +1 -14
- package/dist/esm/components/text/textStandAlone.js +1 -1
- package/dist/esm/components/textArea/components/errorStandAlone.js +3 -3
- package/dist/esm/components/textArea/components/helpMessageStandAlone.js +1 -1
- package/dist/esm/components/textArea/components/titleStandAlone.js +1 -1
- package/dist/esm/components/textArea/textAreaStandAlone.js +10 -11
- package/dist/esm/components/toggle/toggleStandAlone.js +4 -4
- package/dist/esm/components/tooltip/hooks/useTooltip.js +1 -1
- package/dist/esm/components/tooltip/tooltip.css +1 -69
- package/dist/esm/components/tooltip/tooltipControlled.js +1 -1
- package/dist/esm/components/tooltip/tooltipStandAlone.js +8 -10
- package/dist/esm/components/tooltip/tooltipUnControlled.js +1 -1
- package/dist/esm/components/virtualKeyboard/virtualKeyboardStandAlone.js +4 -4
- package/dist/esm/index.js +1 -1
- package/dist/esm/lib/components/customComponent/customComponent.js +2 -2
- package/dist/esm/lib/components/elementOrIcon/elementOrIcon.js +1 -0
- package/dist/esm/lib/components/errorMessage/errorMessageStandAlone.js +4 -4
- package/dist/esm/lib/components/itemRove/itemRove.js +2 -0
- package/dist/esm/lib/components/overlay/overlay.js +2 -0
- package/dist/esm/lib/components/overlay/overlayStandAlone.js +2 -0
- package/dist/esm/lib/designSystem/kubit/css/kubit.css +1 -0
- package/dist/esm/lib/designSystem/kubit/css/kubit.min.css +1 -0
- package/dist/esm/lib/hooks/useClickOutside/useClickOutside.js +1 -1
- package/dist/esm/lib/hooks/useContentVisibility/useContentVisibility.js +1 -1
- package/dist/esm/lib/hooks/useManageState/useManageState.js +1 -1
- package/dist/esm/lib/hooks/useScrollDetection/useScrollDetection.js +1 -0
- package/dist/esm/lib/hooks/useScrollEffect/useScrollEffect.js +1 -1
- package/dist/esm/lib/hooks/useSwipeDown/useSwipeDown.js +1 -1
- package/dist/esm/lib/provider/cssProvider/provider.js +1 -1
- package/dist/esm/lib/provider/cssProvider/stats/stats.js +1 -1641
- package/dist/esm/lib/provider/stylesProvider/stylesProvider.js +2 -2
- package/dist/esm/lib/storybook/components/divider/divider.css +1 -0
- package/dist/esm/lib/storybook/components/note/styles.css +1 -0
- package/dist/esm/lib/utils/keyboard/keyboard.js +1 -1
- package/dist/esm/lib/utils/process/processCommonProp.js +1 -0
- package/dist/esm/react-components.css +1 -1
- package/dist/styles/kubit/css/kubit.css +10 -57
- package/dist/styles/kubit/css/kubit.min.css +1 -1
- package/dist/types/index.d.ts +1038 -292
- package/package.json +70 -46
- package/dist/cjs/components/elementOrIcon/elementOrIcon.js +0 -1
- package/dist/cjs/components/elementOrIcon/index.js +0 -2
- package/dist/cjs/components/itemRove/index.js +0 -2
- package/dist/cjs/components/itemRove/itemRove.js +0 -1
- package/dist/cjs/components/message/index.js +0 -4
- package/dist/cjs/components/message/messageControlled.js +0 -1
- package/dist/cjs/components/message/messageStandAlone.js +0 -1
- package/dist/cjs/components/message/messageUnControlled.js +0 -1
- package/dist/cjs/components/overlay/index.js +0 -1
- package/dist/cjs/components/overlay/overlay.js +0 -1
- package/dist/cjs/components/overlay/overlayStandAlone.js +0 -1
- package/dist/cjs/components/renderIf/renderIf.js +0 -1
- package/dist/cjs/components/selectorBoxFile/components/selectorBoxFileErrorMessage.js +0 -1
- package/dist/cjs/components/selectorBoxFile/components/selectorBoxFileHeader.js +0 -1
- package/dist/cjs/components/selectorBoxFile/components/selectorBoxFileTooltip.js +0 -1
- package/dist/cjs/components/table/__stories__/css/table.css +0 -7
- package/dist/cjs/lib/hooks/useContentVisibilityDetection/useContentVisibilityDetection.js +0 -1
- package/dist/cjs/lib/hooks/useId/useId.js +0 -1
- package/dist/cjs/lib/hooks/useInputFocus/useInputFocus.js +0 -1
- package/dist/cjs/lib/hooks/useScrollDetectionWithAutoFocus/useScrollDetectionWithAutoFocus.js +0 -1
- package/dist/cjs/lib/utils/changeCssProperty/changeCssProperty.js +0 -1
- package/dist/cjs/lib/utils/is/isReactNode.js +0 -1
- package/dist/cjs/lib/utils/is/isString.js +0 -1
- package/dist/cjs/lib/utils/process/processIcon/processIcon.js +0 -1
- package/dist/cjs/lib/utils/process/processText/processText.js +0 -1
- package/dist/cjs/lib/utils/resizeObserver/resizeObserver.js +0 -1
- package/dist/esm/components/elementOrIcon/elementOrIcon.js +0 -1
- package/dist/esm/components/elementOrIcon/index.js +0 -1
- package/dist/esm/components/itemRove/index.js +0 -1
- package/dist/esm/components/itemRove/itemRove.js +0 -2
- package/dist/esm/components/message/index.js +0 -2
- package/dist/esm/components/message/messageControlled.js +0 -2
- package/dist/esm/components/message/messageStandAlone.js +0 -10
- package/dist/esm/components/message/messageUnControlled.js +0 -2
- package/dist/esm/components/overlay/index.js +0 -1
- package/dist/esm/components/overlay/overlay.js +0 -2
- package/dist/esm/components/overlay/overlayStandAlone.js +0 -2
- package/dist/esm/components/renderIf/renderIf.js +0 -1
- package/dist/esm/components/selectorBoxFile/components/selectorBoxFileErrorMessage.js +0 -3
- package/dist/esm/components/selectorBoxFile/components/selectorBoxFileHeader.js +0 -9
- package/dist/esm/components/selectorBoxFile/components/selectorBoxFileTooltip.js +0 -1
- package/dist/esm/components/table/__stories__/css/table.css +0 -7
- package/dist/esm/lib/hooks/useContentVisibilityDetection/useContentVisibilityDetection.js +0 -1
- package/dist/esm/lib/hooks/useId/useId.js +0 -1
- package/dist/esm/lib/hooks/useInputFocus/useInputFocus.js +0 -1
- package/dist/esm/lib/hooks/useScrollDetectionWithAutoFocus/useScrollDetectionWithAutoFocus.js +0 -1
- package/dist/esm/lib/utils/changeCssProperty/changeCssProperty.js +0 -1
- package/dist/esm/lib/utils/is/isReactNode.js +0 -1
- package/dist/esm/lib/utils/is/isString.js +0 -1
- package/dist/esm/lib/utils/process/processIcon/processIcon.js +0 -1
- package/dist/esm/lib/utils/process/processText/processText.js +0 -1
- package/dist/esm/lib/utils/resizeObserver/resizeObserver.js +0 -1
- /package/dist/cjs/lib/hooks/{useContentVisibilityDetection → useContentVisibility}/utils/contentVisibility.js +0 -0
- /package/dist/cjs/lib/{hooks/syncRefs → utils/refs}/syncRefs.js +0 -0
- /package/dist/esm/lib/hooks/{useContentVisibilityDetection → useContentVisibility}/utils/contentVisibility.js +0 -0
- /package/dist/esm/lib/{hooks/syncRefs → utils/refs}/syncRefs.js +0 -0
|
@@ -1,421 +1 @@
|
|
|
1
|
-
|
|
2
|
-
* CSS animations for popover positioning
|
|
3
|
-
* Each animation corresponds to a specific body position from positionStyles.ts
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
/* ========================================
|
|
7
|
-
CENTER POSITION ANIMATIONS
|
|
8
|
-
======================================== */
|
|
9
|
-
|
|
10
|
-
/* Center position - scales from center */
|
|
11
|
-
@keyframes popover-enter-center {
|
|
12
|
-
from {
|
|
13
|
-
opacity: 0;
|
|
14
|
-
transform: translate(-50%, -50%) scale(0.8);
|
|
15
|
-
}
|
|
16
|
-
to {
|
|
17
|
-
opacity: 1;
|
|
18
|
-
transform: translate(-50%, -50%) scale(1);
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
@keyframes popover-exit-center {
|
|
23
|
-
from {
|
|
24
|
-
opacity: 1;
|
|
25
|
-
transform: translate(-50%, -50%) scale(1);
|
|
26
|
-
}
|
|
27
|
-
to {
|
|
28
|
-
opacity: 0;
|
|
29
|
-
transform: translate(-50%, -50%) scale(0.8);
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
/* ========================================
|
|
34
|
-
TOP POSITION ANIMATIONS
|
|
35
|
-
======================================== */
|
|
36
|
-
|
|
37
|
-
/* Top center - slides down and fades in */
|
|
38
|
-
@keyframes popover-enter-top {
|
|
39
|
-
from {
|
|
40
|
-
opacity: 0;
|
|
41
|
-
transform: translateX(-50%) translateY(-20px);
|
|
42
|
-
}
|
|
43
|
-
to {
|
|
44
|
-
opacity: 1;
|
|
45
|
-
transform: translateX(-50%) translateY(0);
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
@keyframes popover-exit-top {
|
|
50
|
-
from {
|
|
51
|
-
opacity: 1;
|
|
52
|
-
transform: translateX(-50%) translateY(0);
|
|
53
|
-
}
|
|
54
|
-
to {
|
|
55
|
-
opacity: 0;
|
|
56
|
-
transform: translateX(-50%) translateY(-20px);
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
/* Top start (left) - slides down only (same as top) */
|
|
61
|
-
@keyframes popover-enter-top-start {
|
|
62
|
-
from {
|
|
63
|
-
opacity: 0;
|
|
64
|
-
transform: translateY(-20px);
|
|
65
|
-
}
|
|
66
|
-
to {
|
|
67
|
-
opacity: 1;
|
|
68
|
-
transform: translateY(0);
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
@keyframes popover-exit-top-start {
|
|
73
|
-
from {
|
|
74
|
-
opacity: 1;
|
|
75
|
-
transform: translateY(0);
|
|
76
|
-
}
|
|
77
|
-
to {
|
|
78
|
-
opacity: 0;
|
|
79
|
-
transform: translateY(-20px);
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
/* Top end (right) - slides down only (same as top) */
|
|
84
|
-
@keyframes popover-enter-top-end {
|
|
85
|
-
from {
|
|
86
|
-
opacity: 0;
|
|
87
|
-
transform: translateY(-20px);
|
|
88
|
-
}
|
|
89
|
-
to {
|
|
90
|
-
opacity: 1;
|
|
91
|
-
transform: translateY(0);
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
@keyframes popover-exit-top-end {
|
|
96
|
-
from {
|
|
97
|
-
opacity: 1;
|
|
98
|
-
transform: translateY(0);
|
|
99
|
-
}
|
|
100
|
-
to {
|
|
101
|
-
opacity: 0;
|
|
102
|
-
transform: translateY(-20px);
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
/* ========================================
|
|
107
|
-
BOTTOM POSITION ANIMATIONS
|
|
108
|
-
======================================== */
|
|
109
|
-
|
|
110
|
-
/* Bottom center - slides up and fades in */
|
|
111
|
-
@keyframes popover-enter-bottom {
|
|
112
|
-
from {
|
|
113
|
-
opacity: 0;
|
|
114
|
-
transform: translateX(-50%) translateY(20px);
|
|
115
|
-
}
|
|
116
|
-
to {
|
|
117
|
-
opacity: 1;
|
|
118
|
-
transform: translateX(-50%) translateY(0);
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
@keyframes popover-exit-bottom {
|
|
123
|
-
from {
|
|
124
|
-
opacity: 1;
|
|
125
|
-
transform: translateX(-50%) translateY(0);
|
|
126
|
-
}
|
|
127
|
-
to {
|
|
128
|
-
opacity: 0;
|
|
129
|
-
transform: translateX(-50%) translateY(20px);
|
|
130
|
-
}
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
/* Bottom start (left) - slides up only (same as bottom) */
|
|
134
|
-
@keyframes popover-enter-bottom-start {
|
|
135
|
-
from {
|
|
136
|
-
opacity: 0;
|
|
137
|
-
transform: translateY(20px);
|
|
138
|
-
}
|
|
139
|
-
to {
|
|
140
|
-
opacity: 1;
|
|
141
|
-
transform: translateY(0);
|
|
142
|
-
}
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
@keyframes popover-exit-bottom-start {
|
|
146
|
-
from {
|
|
147
|
-
opacity: 1;
|
|
148
|
-
transform: translateY(0);
|
|
149
|
-
}
|
|
150
|
-
to {
|
|
151
|
-
opacity: 0;
|
|
152
|
-
transform: translateY(20px);
|
|
153
|
-
}
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
/* Bottom end (right) - slides up only (same as bottom) */
|
|
157
|
-
@keyframes popover-enter-bottom-end {
|
|
158
|
-
from {
|
|
159
|
-
opacity: 0;
|
|
160
|
-
transform: translateY(20px);
|
|
161
|
-
}
|
|
162
|
-
to {
|
|
163
|
-
opacity: 1;
|
|
164
|
-
transform: translateY(0);
|
|
165
|
-
}
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
@keyframes popover-exit-bottom-end {
|
|
169
|
-
from {
|
|
170
|
-
opacity: 1;
|
|
171
|
-
transform: translateY(0);
|
|
172
|
-
}
|
|
173
|
-
to {
|
|
174
|
-
opacity: 0;
|
|
175
|
-
transform: translateY(20px);
|
|
176
|
-
}
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
/* ========================================
|
|
180
|
-
LEFT POSITION ANIMATIONS
|
|
181
|
-
======================================== */
|
|
182
|
-
|
|
183
|
-
/* Left center - slides right and fades in */
|
|
184
|
-
@keyframes popover-enter-left {
|
|
185
|
-
from {
|
|
186
|
-
opacity: 0;
|
|
187
|
-
transform: translateY(-50%) translateX(-20px);
|
|
188
|
-
}
|
|
189
|
-
to {
|
|
190
|
-
opacity: 1;
|
|
191
|
-
transform: translateY(-50%) translateX(0);
|
|
192
|
-
}
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
@keyframes popover-exit-left {
|
|
196
|
-
from {
|
|
197
|
-
opacity: 1;
|
|
198
|
-
transform: translateY(-50%) translateX(0);
|
|
199
|
-
}
|
|
200
|
-
to {
|
|
201
|
-
opacity: 0;
|
|
202
|
-
transform: translateY(-50%) translateX(-20px);
|
|
203
|
-
}
|
|
204
|
-
}
|
|
205
|
-
|
|
206
|
-
/* Left start (top) - slides right only (same as left) */
|
|
207
|
-
@keyframes popover-enter-left-start {
|
|
208
|
-
from {
|
|
209
|
-
opacity: 0;
|
|
210
|
-
transform: translateX(-20px);
|
|
211
|
-
}
|
|
212
|
-
to {
|
|
213
|
-
opacity: 1;
|
|
214
|
-
transform: translateX(0);
|
|
215
|
-
}
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
@keyframes popover-exit-left-start {
|
|
219
|
-
from {
|
|
220
|
-
opacity: 1;
|
|
221
|
-
transform: translateX(0);
|
|
222
|
-
}
|
|
223
|
-
to {
|
|
224
|
-
opacity: 0;
|
|
225
|
-
transform: translateX(-20px);
|
|
226
|
-
}
|
|
227
|
-
}
|
|
228
|
-
|
|
229
|
-
/* Left end (bottom) - slides right only (same as left) */
|
|
230
|
-
@keyframes popover-enter-left-end {
|
|
231
|
-
from {
|
|
232
|
-
opacity: 0;
|
|
233
|
-
transform: translateX(-20px);
|
|
234
|
-
}
|
|
235
|
-
to {
|
|
236
|
-
opacity: 1;
|
|
237
|
-
transform: translateX(0);
|
|
238
|
-
}
|
|
239
|
-
}
|
|
240
|
-
|
|
241
|
-
@keyframes popover-exit-left-end {
|
|
242
|
-
from {
|
|
243
|
-
opacity: 1;
|
|
244
|
-
transform: translateX(0);
|
|
245
|
-
}
|
|
246
|
-
to {
|
|
247
|
-
opacity: 0;
|
|
248
|
-
transform: translateX(-20px);
|
|
249
|
-
}
|
|
250
|
-
}
|
|
251
|
-
|
|
252
|
-
/* ========================================
|
|
253
|
-
RIGHT POSITION ANIMATIONS
|
|
254
|
-
======================================== */
|
|
255
|
-
|
|
256
|
-
/* Right center - slides left and fades in */
|
|
257
|
-
@keyframes popover-enter-right {
|
|
258
|
-
from {
|
|
259
|
-
opacity: 0;
|
|
260
|
-
transform: translateY(-50%) translateX(20px);
|
|
261
|
-
}
|
|
262
|
-
to {
|
|
263
|
-
opacity: 1;
|
|
264
|
-
transform: translateY(-50%) translateX(0);
|
|
265
|
-
}
|
|
266
|
-
}
|
|
267
|
-
|
|
268
|
-
@keyframes popover-exit-right {
|
|
269
|
-
from {
|
|
270
|
-
opacity: 1;
|
|
271
|
-
transform: translateY(-50%) translateX(0);
|
|
272
|
-
}
|
|
273
|
-
to {
|
|
274
|
-
opacity: 0;
|
|
275
|
-
transform: translateY(-50%) translateX(20px);
|
|
276
|
-
}
|
|
277
|
-
}
|
|
278
|
-
|
|
279
|
-
/* Right start (top) - slides left only (same as right) */
|
|
280
|
-
@keyframes popover-enter-right-start {
|
|
281
|
-
from {
|
|
282
|
-
opacity: 0;
|
|
283
|
-
transform: translateX(20px);
|
|
284
|
-
}
|
|
285
|
-
to {
|
|
286
|
-
opacity: 1;
|
|
287
|
-
transform: translateX(0);
|
|
288
|
-
}
|
|
289
|
-
}
|
|
290
|
-
|
|
291
|
-
@keyframes popover-exit-right-start {
|
|
292
|
-
from {
|
|
293
|
-
opacity: 1;
|
|
294
|
-
transform: translateX(0);
|
|
295
|
-
}
|
|
296
|
-
to {
|
|
297
|
-
opacity: 0;
|
|
298
|
-
transform: translateX(20px);
|
|
299
|
-
}
|
|
300
|
-
}
|
|
301
|
-
|
|
302
|
-
/* Right end (bottom) - slides left only (same as right) */
|
|
303
|
-
@keyframes popover-enter-right-end {
|
|
304
|
-
from {
|
|
305
|
-
opacity: 0;
|
|
306
|
-
transform: translateX(20px);
|
|
307
|
-
}
|
|
308
|
-
to {
|
|
309
|
-
opacity: 1;
|
|
310
|
-
transform: translateX(0);
|
|
311
|
-
}
|
|
312
|
-
}
|
|
313
|
-
|
|
314
|
-
@keyframes popover-exit-right-end {
|
|
315
|
-
from {
|
|
316
|
-
opacity: 1;
|
|
317
|
-
transform: translateX(0);
|
|
318
|
-
}
|
|
319
|
-
to {
|
|
320
|
-
opacity: 0;
|
|
321
|
-
transform: translateX(20px);
|
|
322
|
-
}
|
|
323
|
-
}
|
|
324
|
-
|
|
325
|
-
/* ========================================
|
|
326
|
-
NOTE: No default animation needed
|
|
327
|
-
======================================== */
|
|
328
|
-
/* When no placement is specified, center animation is used as fallback */
|
|
329
|
-
|
|
330
|
-
/* ========================================
|
|
331
|
-
UTILITY CLASSES FOR APPLYING ANIMATIONS
|
|
332
|
-
======================================== */
|
|
333
|
-
|
|
334
|
-
/* Animation duration and timing */
|
|
335
|
-
.popover-animate {
|
|
336
|
-
animation-duration: 200ms;
|
|
337
|
-
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
|
|
338
|
-
animation-fill-mode: forwards;
|
|
339
|
-
}
|
|
340
|
-
|
|
341
|
-
/* Enter animations by position */
|
|
342
|
-
.popover-enter-center {
|
|
343
|
-
animation-name: popover-enter-center;
|
|
344
|
-
}
|
|
345
|
-
.popover-enter-top {
|
|
346
|
-
animation-name: popover-enter-top;
|
|
347
|
-
}
|
|
348
|
-
.popover-enter-top-start {
|
|
349
|
-
animation-name: popover-enter-top-start;
|
|
350
|
-
}
|
|
351
|
-
.popover-enter-top-end {
|
|
352
|
-
animation-name: popover-enter-top-end;
|
|
353
|
-
}
|
|
354
|
-
.popover-enter-bottom {
|
|
355
|
-
animation-name: popover-enter-bottom;
|
|
356
|
-
}
|
|
357
|
-
.popover-enter-bottom-start {
|
|
358
|
-
animation-name: popover-enter-bottom-start;
|
|
359
|
-
}
|
|
360
|
-
.popover-enter-bottom-end {
|
|
361
|
-
animation-name: popover-enter-bottom-end;
|
|
362
|
-
}
|
|
363
|
-
.popover-enter-left {
|
|
364
|
-
animation-name: popover-enter-left;
|
|
365
|
-
}
|
|
366
|
-
.popover-enter-left-start {
|
|
367
|
-
animation-name: popover-enter-left-start;
|
|
368
|
-
}
|
|
369
|
-
.popover-enter-left-end {
|
|
370
|
-
animation-name: popover-enter-left-end;
|
|
371
|
-
}
|
|
372
|
-
.popover-enter-right {
|
|
373
|
-
animation-name: popover-enter-right;
|
|
374
|
-
}
|
|
375
|
-
.popover-enter-right-start {
|
|
376
|
-
animation-name: popover-enter-right-start;
|
|
377
|
-
}
|
|
378
|
-
.popover-enter-right-end {
|
|
379
|
-
animation-name: popover-enter-right-end;
|
|
380
|
-
}
|
|
381
|
-
|
|
382
|
-
/* Exit animations by position */
|
|
383
|
-
.popover-exit-center {
|
|
384
|
-
animation-name: popover-exit-center;
|
|
385
|
-
}
|
|
386
|
-
.popover-exit-top {
|
|
387
|
-
animation-name: popover-exit-top;
|
|
388
|
-
}
|
|
389
|
-
.popover-exit-top-start {
|
|
390
|
-
animation-name: popover-exit-top-start;
|
|
391
|
-
}
|
|
392
|
-
.popover-exit-top-end {
|
|
393
|
-
animation-name: popover-exit-top-end;
|
|
394
|
-
}
|
|
395
|
-
.popover-exit-bottom {
|
|
396
|
-
animation-name: popover-exit-bottom;
|
|
397
|
-
}
|
|
398
|
-
.popover-exit-bottom-start {
|
|
399
|
-
animation-name: popover-exit-bottom-start;
|
|
400
|
-
}
|
|
401
|
-
.popover-exit-bottom-end {
|
|
402
|
-
animation-name: popover-exit-bottom-end;
|
|
403
|
-
}
|
|
404
|
-
.popover-exit-left {
|
|
405
|
-
animation-name: popover-exit-left;
|
|
406
|
-
}
|
|
407
|
-
.popover-exit-left-start {
|
|
408
|
-
animation-name: popover-exit-left-start;
|
|
409
|
-
}
|
|
410
|
-
.popover-exit-left-end {
|
|
411
|
-
animation-name: popover-exit-left-end;
|
|
412
|
-
}
|
|
413
|
-
.popover-exit-right {
|
|
414
|
-
animation-name: popover-exit-right;
|
|
415
|
-
}
|
|
416
|
-
.popover-exit-right-start {
|
|
417
|
-
animation-name: popover-exit-right-start;
|
|
418
|
-
}
|
|
419
|
-
.popover-exit-right-end {
|
|
420
|
-
animation-name: popover-exit-right-end;
|
|
421
|
-
}
|
|
1
|
+
@keyframes popover-enter-center{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes popover-exit-center{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(.8)}}@keyframes popover-enter-top{0%{opacity:0;transform:translateX(-50%) translateY(-20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}@keyframes popover-exit-top{0%{opacity:1;transform:translateX(-50%) translateY(0)}to{opacity:0;transform:translateX(-50%) translateY(-20px)}}@keyframes popover-enter-top-start{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes popover-exit-top-start{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}@keyframes popover-enter-top-end{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes popover-exit-top-end{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}@keyframes popover-enter-bottom{0%{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}@keyframes popover-exit-bottom{0%{opacity:1;transform:translateX(-50%) translateY(0)}to{opacity:0;transform:translateX(-50%) translateY(20px)}}@keyframes popover-enter-bottom-start{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes popover-exit-bottom-start{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px)}}@keyframes popover-enter-bottom-end{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes popover-exit-bottom-end{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px)}}@keyframes popover-enter-left{0%{opacity:0;transform:translateY(-50%) translateX(-20px)}to{opacity:1;transform:translateY(-50%) translateX(0)}}@keyframes popover-exit-left{0%{opacity:1;transform:translateY(-50%) translateX(0)}to{opacity:0;transform:translateY(-50%) translateX(-20px)}}@keyframes popover-enter-left-start{0%{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}@keyframes popover-exit-left-start{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-20px)}}@keyframes popover-enter-left-end{0%{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}@keyframes popover-exit-left-end{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-20px)}}@keyframes popover-enter-right{0%{opacity:0;transform:translateY(-50%) translateX(20px)}to{opacity:1;transform:translateY(-50%) translateX(0)}}@keyframes popover-exit-right{0%{opacity:1;transform:translateY(-50%) translateX(0)}to{opacity:0;transform:translateY(-50%) translateX(20px)}}@keyframes popover-enter-right-start{0%{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}@keyframes popover-exit-right-start{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(20px)}}@keyframes popover-enter-right-end{0%{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}@keyframes popover-exit-right-end{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(20px)}}.popover-animate{animation-duration:.2s;animation-fill-mode:forwards;animation-timing-function:cubic-bezier(.16,1,.3,1)}.popover-enter-center{animation-name:popover-enter-center}.popover-enter-top{animation-name:popover-enter-top}.popover-enter-top-start{animation-name:popover-enter-top-start}.popover-enter-top-end{animation-name:popover-enter-top-end}.popover-enter-bottom{animation-name:popover-enter-bottom}.popover-enter-bottom-start{animation-name:popover-enter-bottom-start}.popover-enter-bottom-end{animation-name:popover-enter-bottom-end}.popover-enter-left{animation-name:popover-enter-left}.popover-enter-left-start{animation-name:popover-enter-left-start}.popover-enter-left-end{animation-name:popover-enter-left-end}.popover-enter-right{animation-name:popover-enter-right}.popover-enter-right-start{animation-name:popover-enter-right-start}.popover-enter-right-end{animation-name:popover-enter-right-end}.popover-exit-center{animation-name:popover-exit-center}.popover-exit-top{animation-name:popover-exit-top}.popover-exit-top-start{animation-name:popover-exit-top-start}.popover-exit-top-end{animation-name:popover-exit-top-end}.popover-exit-bottom{animation-name:popover-exit-bottom}.popover-exit-bottom-start{animation-name:popover-exit-bottom-start}.popover-exit-bottom-end{animation-name:popover-exit-bottom-end}.popover-exit-left{animation-name:popover-exit-left}.popover-exit-left-start{animation-name:popover-exit-left-start}.popover-exit-left-end{animation-name:popover-exit-left-end}.popover-exit-right{animation-name:popover-exit-right}.popover-exit-right-start{animation-name:popover-exit-right-start}.popover-exit-right-end{animation-name:popover-exit-right-end}
|
|
@@ -1,42 +1 @@
|
|
|
1
|
-
|
|
2
|
-
/* PopoverV2 Arrow Styles */
|
|
3
|
-
/* ============================================= */
|
|
4
|
-
|
|
5
|
-
/* Arrow base styles */
|
|
6
|
-
[data-kbt-id='popover-arrow'] {
|
|
7
|
-
position: absolute;
|
|
8
|
-
transform: rotate(45deg);
|
|
9
|
-
z-index: -1;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
/* Arrow positioning based on placement */
|
|
13
|
-
[data-kbt-id='popover-arrow'][data-kbt-placement^='top'] {
|
|
14
|
-
bottom: calc(-1 * var(--arrow-size, 8px) / 2);
|
|
15
|
-
left: 50%;
|
|
16
|
-
transform: translateX(-50%) rotate(45deg);
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
[data-kbt-id='popover-arrow'][data-kbt-placement^='bottom'] {
|
|
20
|
-
top: calc(-1 * var(--arrow-size, 8px) / 2);
|
|
21
|
-
left: 50%;
|
|
22
|
-
transform: translateX(-50%) rotate(45deg);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
[data-kbt-id='popover-arrow'][data-kbt-placement^='left'] {
|
|
26
|
-
right: calc(-1 * var(--arrow-size, 8px) / 2);
|
|
27
|
-
top: 50%;
|
|
28
|
-
transform: translateY(-50%) rotate(45deg);
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
[data-kbt-id='popover-arrow'][data-kbt-placement^='right'] {
|
|
32
|
-
left: calc(-1 * var(--arrow-size, 8px) / 2);
|
|
33
|
-
top: 50%;
|
|
34
|
-
transform: translateY(-50%) rotate(45deg);
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
/* Center placement arrow - default to bottom position */
|
|
38
|
-
[data-kbt-id='popover-arrow'][data-kbt-placement='center'] {
|
|
39
|
-
top: calc(-1 * var(--arrow-size, 8px) / 2);
|
|
40
|
-
left: 50%;
|
|
41
|
-
transform: translateX(-50%) rotate(45deg);
|
|
42
|
-
}
|
|
1
|
+
[data-kbt-id=popover-arrow]{position:absolute;transform:rotate(45deg);z-index:-1}[data-kbt-id=popover-arrow][data-kbt-placement^=top]{bottom:calc(var(--arrow-size, 8px)*-1/2);left:50%;transform:translateX(-50%) rotate(45deg)}[data-kbt-id=popover-arrow][data-kbt-placement^=bottom]{left:50%;top:calc(var(--arrow-size, 8px)*-1/2);transform:translateX(-50%) rotate(45deg)}[data-kbt-id=popover-arrow][data-kbt-placement^=left]{right:calc(var(--arrow-size, 8px)*-1/2);top:50%;transform:translateY(-50%) rotate(45deg)}[data-kbt-id=popover-arrow][data-kbt-placement^=right]{left:calc(var(--arrow-size, 8px)*-1/2);top:50%;transform:translateY(-50%) rotate(45deg)}[data-kbt-id=popover-arrow][data-kbt-placement=center]{left:50%;top:calc(var(--arrow-size, 8px)*-1/2);transform:translateX(-50%) rotate(45deg)}
|
|
@@ -1,189 +1 @@
|
|
|
1
|
-
|
|
2
|
-
* PopoverV2 Main Styles
|
|
3
|
-
* Contains animation logic and positioning styles
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
/* Import all animation keyframes */
|
|
7
|
-
@import './keyframes.css';
|
|
8
|
-
|
|
9
|
-
/* Popover Animation Styles */
|
|
10
|
-
/* ============================================= */
|
|
11
|
-
|
|
12
|
-
/* Base animation properties - ALWAYS applied (even with disableAnimations=true) */
|
|
13
|
-
/* This allows additionalClasses to work properly */
|
|
14
|
-
[data-kbt-id='popover'][data-kbt-placement] {
|
|
15
|
-
animation-duration: 500ms;
|
|
16
|
-
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
|
|
17
|
-
animation-fill-mode: forwards;
|
|
18
|
-
animation-iteration-count: 1;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
/* Opening animations based on placement - ONLY when animations are enabled */
|
|
22
|
-
[data-kbt-id='popover'][data-kbt-closing='false']:not(
|
|
23
|
-
[data-kbt-disable-animations='true']
|
|
24
|
-
) {
|
|
25
|
-
--animation-prefix: 'popover-enter-';
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
[data-kbt-id='popover'][data-kbt-placement='center'][data-kbt-closing='false']:not(
|
|
29
|
-
[data-kbt-disable-animations='true']
|
|
30
|
-
) {
|
|
31
|
-
animation-name: popover-enter-center;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
[data-kbt-id='popover'][data-kbt-placement^='top'][data-kbt-closing='false']:not(
|
|
35
|
-
[data-kbt-disable-animations='true']
|
|
36
|
-
) {
|
|
37
|
-
animation-name: var(--animation-name, popover-enter-top);
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
[data-kbt-id='popover'][data-kbt-placement='top-start'][data-kbt-closing='false']:not(
|
|
41
|
-
[data-kbt-disable-animations='true']
|
|
42
|
-
) {
|
|
43
|
-
animation-name: popover-enter-top-start;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
[data-kbt-id='popover'][data-kbt-placement='top-end'][data-kbt-closing='false']:not(
|
|
47
|
-
[data-kbt-disable-animations='true']
|
|
48
|
-
) {
|
|
49
|
-
animation-name: popover-enter-top-end;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
[data-kbt-id='popover'][data-kbt-placement^='bottom'][data-kbt-closing='false']:not(
|
|
53
|
-
[data-kbt-disable-animations='true']
|
|
54
|
-
) {
|
|
55
|
-
animation-name: var(--animation-name, popover-enter-bottom);
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
[data-kbt-id='popover'][data-kbt-placement='bottom-start'][data-kbt-closing='false']:not(
|
|
59
|
-
[data-kbt-disable-animations='true']
|
|
60
|
-
) {
|
|
61
|
-
animation-name: popover-enter-bottom-start;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
[data-kbt-id='popover'][data-kbt-placement='bottom-end'][data-kbt-closing='false']:not(
|
|
65
|
-
[data-kbt-disable-animations='true']
|
|
66
|
-
) {
|
|
67
|
-
animation-name: popover-enter-bottom-end;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
[data-kbt-id='popover'][data-kbt-placement^='left'][data-kbt-closing='false']:not(
|
|
71
|
-
[data-kbt-disable-animations='true']
|
|
72
|
-
) {
|
|
73
|
-
animation-name: var(--animation-name, popover-enter-left);
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
[data-kbt-id='popover'][data-kbt-placement='left-start'][data-kbt-closing='false']:not(
|
|
77
|
-
[data-kbt-disable-animations='true']
|
|
78
|
-
) {
|
|
79
|
-
animation-name: popover-enter-left-start;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
[data-kbt-id='popover'][data-kbt-placement='left-end'][data-kbt-closing='false']:not(
|
|
83
|
-
[data-kbt-disable-animations='true']
|
|
84
|
-
) {
|
|
85
|
-
animation-name: popover-enter-left-end;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
[data-kbt-id='popover'][data-kbt-placement^='right'][data-kbt-closing='false']:not(
|
|
89
|
-
[data-kbt-disable-animations='true']
|
|
90
|
-
) {
|
|
91
|
-
animation-name: var(--animation-name, popover-enter-right);
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
[data-kbt-id='popover'][data-kbt-placement='right-start'][data-kbt-closing='false']:not(
|
|
95
|
-
[data-kbt-disable-animations='true']
|
|
96
|
-
) {
|
|
97
|
-
animation-name: popover-enter-right-start;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
[data-kbt-id='popover'][data-kbt-placement='right-end'][data-kbt-closing='false']:not(
|
|
101
|
-
[data-kbt-disable-animations='true']
|
|
102
|
-
) {
|
|
103
|
-
animation-name: popover-enter-right-end;
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
/* Closing animations based on placement - ONLY when animations are enabled */
|
|
107
|
-
[data-kbt-id='popover'][data-kbt-closing='true']:not(
|
|
108
|
-
[data-kbt-disable-animations='true']
|
|
109
|
-
) {
|
|
110
|
-
--animation-prefix: 'popover-exit-';
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
[data-kbt-id='popover'][data-kbt-placement='center'][data-kbt-closing='true']:not(
|
|
114
|
-
[data-kbt-disable-animations='true']
|
|
115
|
-
) {
|
|
116
|
-
animation-name: popover-exit-center;
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
[data-kbt-id='popover'][data-kbt-placement^='top'][data-kbt-closing='true']:not(
|
|
120
|
-
[data-kbt-disable-animations='true']
|
|
121
|
-
) {
|
|
122
|
-
animation-name: var(--exit-animation-name, popover-exit-top);
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
[data-kbt-id='popover'][data-kbt-placement='top-start'][data-kbt-closing='true']:not(
|
|
126
|
-
[data-kbt-disable-animations='true']
|
|
127
|
-
) {
|
|
128
|
-
animation-name: popover-exit-top-start;
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
[data-kbt-id='popover'][data-kbt-placement='top-end'][data-kbt-closing='true']:not(
|
|
132
|
-
[data-kbt-disable-animations='true']
|
|
133
|
-
) {
|
|
134
|
-
animation-name: popover-exit-top-end;
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
[data-kbt-id='popover'][data-kbt-placement^='bottom'][data-kbt-closing='true']:not(
|
|
138
|
-
[data-kbt-disable-animations='true']
|
|
139
|
-
) {
|
|
140
|
-
animation-name: var(--exit-animation-name, popover-exit-bottom);
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
[data-kbt-id='popover'][data-kbt-placement='bottom-start'][data-kbt-closing='true']:not(
|
|
144
|
-
[data-kbt-disable-animations='true']
|
|
145
|
-
) {
|
|
146
|
-
animation-name: popover-exit-bottom-start;
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
[data-kbt-id='popover'][data-kbt-placement='bottom-end'][data-kbt-closing='true']:not(
|
|
150
|
-
[data-kbt-disable-animations='true']
|
|
151
|
-
) {
|
|
152
|
-
animation-name: popover-exit-bottom-end;
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
[data-kbt-id='popover'][data-kbt-placement^='left'][data-kbt-closing='true']:not(
|
|
156
|
-
[data-kbt-disable-animations='true']
|
|
157
|
-
) {
|
|
158
|
-
animation-name: var(--exit-animation-name, popover-exit-left);
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
[data-kbt-id='popover'][data-kbt-placement='left-start'][data-kbt-closing='true']:not(
|
|
162
|
-
[data-kbt-disable-animations='true']
|
|
163
|
-
) {
|
|
164
|
-
animation-name: popover-exit-left-start;
|
|
165
|
-
}
|
|
166
|
-
|
|
167
|
-
[data-kbt-id='popover'][data-kbt-placement='left-end'][data-kbt-closing='true']:not(
|
|
168
|
-
[data-kbt-disable-animations='true']
|
|
169
|
-
) {
|
|
170
|
-
animation-name: popover-exit-left-end;
|
|
171
|
-
}
|
|
172
|
-
|
|
173
|
-
[data-kbt-id='popover'][data-kbt-placement^='right'][data-kbt-closing='true']:not(
|
|
174
|
-
[data-kbt-disable-animations='true']
|
|
175
|
-
) {
|
|
176
|
-
animation-name: var(--exit-animation-name, popover-exit-right);
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
[data-kbt-id='popover'][data-kbt-placement='right-start'][data-kbt-closing='true']:not(
|
|
180
|
-
[data-kbt-disable-animations='true']
|
|
181
|
-
) {
|
|
182
|
-
animation-name: popover-exit-right-start;
|
|
183
|
-
}
|
|
184
|
-
|
|
185
|
-
[data-kbt-id='popover'][data-kbt-placement='right-end'][data-kbt-closing='true']:not(
|
|
186
|
-
[data-kbt-disable-animations='true']
|
|
187
|
-
) {
|
|
188
|
-
animation-name: popover-exit-right-end;
|
|
189
|
-
}
|
|
1
|
+
@import "./keyframes.css";[data-kbt-id=popover][data-kbt-placement]{animation-duration:.5s;animation-fill-mode:forwards;animation-iteration-count:1;animation-timing-function:cubic-bezier(.16,1,.3,1)}[data-kbt-id=popover][data-kbt-closing=false]:not([data-kbt-disable-animations=true]){--animation-prefix:"popover-enter-"}[data-kbt-id=popover][data-kbt-placement=center][data-kbt-closing=false]:not([data-kbt-disable-animations=true]){animation-name:popover-enter-center}[data-kbt-id=popover][data-kbt-placement^=top][data-kbt-closing=false]:not([data-kbt-disable-animations=true]){animation-name:var(--animation-name,popover-enter-top)}[data-kbt-id=popover][data-kbt-placement=top-start][data-kbt-closing=false]:not([data-kbt-disable-animations=true]){animation-name:popover-enter-top-start}[data-kbt-id=popover][data-kbt-placement=top-end][data-kbt-closing=false]:not([data-kbt-disable-animations=true]){animation-name:popover-enter-top-end}[data-kbt-id=popover][data-kbt-placement^=bottom][data-kbt-closing=false]:not([data-kbt-disable-animations=true]){animation-name:var(--animation-name,popover-enter-bottom)}[data-kbt-id=popover][data-kbt-placement=bottom-start][data-kbt-closing=false]:not([data-kbt-disable-animations=true]){animation-name:popover-enter-bottom-start}[data-kbt-id=popover][data-kbt-placement=bottom-end][data-kbt-closing=false]:not([data-kbt-disable-animations=true]){animation-name:popover-enter-bottom-end}[data-kbt-id=popover][data-kbt-placement^=left][data-kbt-closing=false]:not([data-kbt-disable-animations=true]){animation-name:var(--animation-name,popover-enter-left)}[data-kbt-id=popover][data-kbt-placement=left-start][data-kbt-closing=false]:not([data-kbt-disable-animations=true]){animation-name:popover-enter-left-start}[data-kbt-id=popover][data-kbt-placement=left-end][data-kbt-closing=false]:not([data-kbt-disable-animations=true]){animation-name:popover-enter-left-end}[data-kbt-id=popover][data-kbt-placement^=right][data-kbt-closing=false]:not([data-kbt-disable-animations=true]){animation-name:var(--animation-name,popover-enter-right)}[data-kbt-id=popover][data-kbt-placement=right-start][data-kbt-closing=false]:not([data-kbt-disable-animations=true]){animation-name:popover-enter-right-start}[data-kbt-id=popover][data-kbt-placement=right-end][data-kbt-closing=false]:not([data-kbt-disable-animations=true]){animation-name:popover-enter-right-end}[data-kbt-id=popover][data-kbt-closing=true]:not([data-kbt-disable-animations=true]){--animation-prefix:"popover-exit-"}[data-kbt-id=popover][data-kbt-placement=center][data-kbt-closing=true]:not([data-kbt-disable-animations=true]){animation-name:popover-exit-center}[data-kbt-id=popover][data-kbt-placement^=top][data-kbt-closing=true]:not([data-kbt-disable-animations=true]){animation-name:var(--exit-animation-name,popover-exit-top)}[data-kbt-id=popover][data-kbt-placement=top-start][data-kbt-closing=true]:not([data-kbt-disable-animations=true]){animation-name:popover-exit-top-start}[data-kbt-id=popover][data-kbt-placement=top-end][data-kbt-closing=true]:not([data-kbt-disable-animations=true]){animation-name:popover-exit-top-end}[data-kbt-id=popover][data-kbt-placement^=bottom][data-kbt-closing=true]:not([data-kbt-disable-animations=true]){animation-name:var(--exit-animation-name,popover-exit-bottom)}[data-kbt-id=popover][data-kbt-placement=bottom-start][data-kbt-closing=true]:not([data-kbt-disable-animations=true]){animation-name:popover-exit-bottom-start}[data-kbt-id=popover][data-kbt-placement=bottom-end][data-kbt-closing=true]:not([data-kbt-disable-animations=true]){animation-name:popover-exit-bottom-end}[data-kbt-id=popover][data-kbt-placement^=left][data-kbt-closing=true]:not([data-kbt-disable-animations=true]){animation-name:var(--exit-animation-name,popover-exit-left)}[data-kbt-id=popover][data-kbt-placement=left-start][data-kbt-closing=true]:not([data-kbt-disable-animations=true]){animation-name:popover-exit-left-start}[data-kbt-id=popover][data-kbt-placement=left-end][data-kbt-closing=true]:not([data-kbt-disable-animations=true]){animation-name:popover-exit-left-end}[data-kbt-id=popover][data-kbt-placement^=right][data-kbt-closing=true]:not([data-kbt-disable-animations=true]){animation-name:var(--exit-animation-name,popover-exit-right)}[data-kbt-id=popover][data-kbt-placement=right-start][data-kbt-closing=true]:not([data-kbt-disable-animations=true]){animation-name:popover-exit-right-start}[data-kbt-id=popover][data-kbt-placement=right-end][data-kbt-closing=true]:not([data-kbt-disable-animations=true]){animation-name:popover-exit-right-end}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as r}from"../../_virtual/jsx-runtime.js";import{forwardRef as s}from"react";import{classNames as a}from"../../lib/utils/classNames/classNames.js";
|
|
2
|
-
return r.jsx("div",{ref:
|
|
3
|
-
/* @__PURE__ */r.jsx("div",{className:a(
|
|
4
|
-
/* @__PURE__ */r.jsx("div",{className:a(
|
|
1
|
+
import{j as r}from"../../_virtual/jsx-runtime.js";import{forwardRef as s}from"react";import{classNames as a}from"../../lib/utils/classNames/classNames.js";const e=s(({barAriaLabel:s,color:e,cssSizeClasses:i,cssVariantClasses:o,progressAnimation:t,progressCompleted:l,...n},c)=>{const d=n["data-testid"]||"progress-bar",m={backgroundColor:e?.bar},b={backgroundColor:e?.progressBar,transition:`width ${t?.duration} ${t?.timingFunction}`,width:`${l}%`};/* @__PURE__ */
|
|
2
|
+
return r.jsx("div",{ref:c,className:o?.progress_bar,"data-testid":`${d}-progressbar`,children:/* @__PURE__ */r.jsxs("div",{className:o?.barcontainer,children:[
|
|
3
|
+
/* @__PURE__ */r.jsx("div",{"aria-label":s,"aria-valuemax":100,"aria-valuemin":0,"aria-valuenow":l,className:a(i?.bar,o?.bar),"data-testid":d,role:"progressbar",style:m}),
|
|
4
|
+
/* @__PURE__ */r.jsx("div",{className:a(i?.progressbar,o?.progressbar),style:b})]})})});export{e as ProgressBarStandalone};
|