@dreamcommerce/aurora 2.7.0 → 2.7.1-1
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/build/cjs/packages/aurora/src/components/dropdown/components/content.js +11 -6
- package/build/cjs/packages/aurora/src/components/dropdown/components/content.js.map +1 -1
- package/build/cjs/packages/aurora/src/components/tabs/components/tabs.js +7 -2
- package/build/cjs/packages/aurora/src/components/tabs/components/tabs.js.map +1 -1
- package/build/cjs/packages/aurora/src/components/tabs/css_classes.js +1 -0
- package/build/cjs/packages/aurora/src/components/tabs/css_classes.js.map +1 -1
- package/build/cjs/packages/aurora/src/css/tabs/main.module.less.js +2 -2
- package/build/esm/packages/aurora/src/components/dropdown/components/content.js +11 -6
- package/build/esm/packages/aurora/src/components/dropdown/components/content.js.map +1 -1
- package/build/esm/packages/aurora/src/components/tabs/components/tabs.js +6 -2
- package/build/esm/packages/aurora/src/components/tabs/components/tabs.js.map +1 -1
- package/build/esm/packages/aurora/src/components/tabs/css_classes.d.ts +1 -0
- package/build/esm/packages/aurora/src/components/tabs/css_classes.js +1 -0
- package/build/esm/packages/aurora/src/components/tabs/css_classes.js.map +1 -1
- package/build/esm/packages/aurora/src/components/tabs/types.d.ts +1 -0
- package/build/esm/packages/aurora/src/css/tabs/main.module.less.js +2 -2
- package/package.json +1 -1
|
@@ -37,6 +37,7 @@ const Content = ({ headerComponent, headerGoBackText, headerGoBackIcon, children
|
|
|
37
37
|
const [t] = useTranslation.useTranslation();
|
|
38
38
|
const contentRef = React.useRef(null);
|
|
39
39
|
const { wrapperRef, toggleDropdown, isOpen } = index.useDropdownContext();
|
|
40
|
+
const [bounding, setBounding] = React.useState();
|
|
40
41
|
const [styles, setStyles] = React.useState({
|
|
41
42
|
top: '0px',
|
|
42
43
|
bottom: '0px',
|
|
@@ -45,18 +46,22 @@ const Content = ({ headerComponent, headerGoBackText, headerGoBackIcon, children
|
|
|
45
46
|
});
|
|
46
47
|
const windowYScroll = window.scrollY;
|
|
47
48
|
const windowHeightMinusYOffset = window.innerHeight - windowYScroll;
|
|
49
|
+
React.useEffect(() => {
|
|
50
|
+
contentRef.current && setBounding(utilities.getBounding(contentRef.current));
|
|
51
|
+
return () => {
|
|
52
|
+
setBounding(undefined);
|
|
53
|
+
};
|
|
54
|
+
}, [contentRef.current]);
|
|
48
55
|
const checkIfIsOutsideTopViewport = () => {
|
|
49
|
-
if (!contentRef.current)
|
|
56
|
+
if (!contentRef.current || !bounding)
|
|
50
57
|
return;
|
|
51
|
-
const bounding = utilities.getBounding(contentRef.current);
|
|
52
58
|
return bounding.top <= 0;
|
|
53
59
|
};
|
|
54
60
|
const checkIfIsOutsideBottomViewport = () => {
|
|
55
|
-
if (!contentRef.current)
|
|
61
|
+
if (!contentRef.current || !bounding)
|
|
56
62
|
return;
|
|
57
|
-
const
|
|
58
|
-
|
|
59
|
-
return elementHeight + element.offsetTop > window.innerHeight + windowYScroll;
|
|
63
|
+
const elementHeight = bounding.height;
|
|
64
|
+
return elementHeight + bounding.top > window.innerHeight + windowYScroll;
|
|
60
65
|
};
|
|
61
66
|
const dropdownIsOutsideTopViewport = checkIfIsOutsideTopViewport();
|
|
62
67
|
const dropdownIsOutsideBottomViewport = checkIfIsOutsideBottomViewport();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,oEAAwE;AACrG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,oEAAwE;AACrG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var React = require('react');
|
|
6
|
+
var classnames = require('classnames');
|
|
6
7
|
var css_classes = require('../css_classes.js');
|
|
7
8
|
var context = require('../context.js');
|
|
8
9
|
var main_module = require('../../../css/tabs/main.module.less.js');
|
|
@@ -10,16 +11,20 @@ var main_module = require('../../../css/tabs/main.module.less.js');
|
|
|
10
11
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
11
12
|
|
|
12
13
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
14
|
+
var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
|
|
13
15
|
|
|
14
|
-
const Tabs = ({ initialActiveTabId, children, onChange }) => {
|
|
16
|
+
const Tabs = ({ initialActiveTabId, secondary, children, onChange }) => {
|
|
15
17
|
const { setActiveId, activeId } = React.useContext(context.TabsContext);
|
|
18
|
+
const tabsClasses = classnames__default['default'](main_module['default'][css_classes['default'].tabs], {
|
|
19
|
+
[main_module['default'][css_classes['default'].tabsSecondary]]: secondary
|
|
20
|
+
});
|
|
16
21
|
React.useEffect(() => {
|
|
17
22
|
setActiveId(initialActiveTabId);
|
|
18
23
|
}, [setActiveId, initialActiveTabId]);
|
|
19
24
|
React.useEffect(() => {
|
|
20
25
|
activeId && (onChange === null || onChange === void 0 ? void 0 : onChange(activeId));
|
|
21
26
|
}, [activeId]);
|
|
22
|
-
return React__default['default'].createElement("div", { className:
|
|
27
|
+
return React__default['default'].createElement("div", { className: tabsClasses }, children);
|
|
23
28
|
};
|
|
24
29
|
|
|
25
30
|
exports.default = Tabs;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var styleInject_es = require('../../../../../external/style-inject/dist/style-inject.es.js');
|
|
6
6
|
|
|
7
|
-
var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_tabs__item-list__2R9BF {\n display: flex;\n
|
|
8
|
-
var cssClasses = {"tabs__item-list":"main-module_tabs__item-list__2R9BF","tabs__item":"main-module_tabs__item__2peSO","tabs__item_active":"main-module_tabs__item_active__1LSjR","tabs__panel-list":"main-module_tabs__panel-list__3Ob_w"};
|
|
7
|
+
var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_tabs__item-list__2R9BF {\n display: flex;\n list-style: none;\n}\n.main-module_tabs__item-list__2R9BF:not(.main-module_tabs_secondary__1QmBJ .main-module_tabs__item-list__2R9BF) {\n gap: 8px;\n}\n.main-module_tabs__item__2peSO {\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n.main-module_tabs__item__2peSO:not(.main-module_tabs_secondary__1QmBJ .main-module_tabs__item__2peSO) {\n padding: 8px 12px;\n background-color: #f3f4f8;\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n font-weight: 600;\n color: #5c657e;\n text-transform: uppercase;\n}\n.main-module_tabs__item_active__1LSjR {\n position: relative;\n z-index: 1;\n}\n.main-module_tabs__item_active__1LSjR:not(.main-module_tabs_secondary__1QmBJ .main-module_tabs__item_active__1LSjR) {\n margin-top: -2px;\n margin-bottom: -1px;\n background-color: #ffffff;\n border-top: 2px solid #3c83ec;\n border-bottom: 1px solid #ffffff;\n color: #2d3748;\n box-shadow: 0 0 9px 0 rgba(92, 101, 126, 0.2);\n -webkit-clip-path: inset(-9px -9px 0 -9px);\n clip-path: inset(-9px -9px 0 -9px);\n}\n.main-module_tabs__panel-list__3Ob_w:not(.main-module_tabs_secondary__1QmBJ .main-module_tabs__panel-list__3Ob_w) {\n margin: 0 -16px;\n padding: 16px 16px 0 16px;\n background-color: #ffffff;\n box-shadow: 0 -1px 5px 0 rgba(92, 101, 126, 0.1);\n -webkit-clip-path: inset(-5px 0 0 0);\n clip-path: inset(-5px 0 0 0);\n}\n.main-module_tabs_secondary__1QmBJ .main-module_tabs__item-list__2R9BF {\n border: 1px solid #f3f4f8;\n border-radius: 2px;\n}\n.main-module_tabs_secondary__1QmBJ .main-module_tabs__item__2peSO {\n position: relative;\n flex: 1;\n justify-content: center;\n padding: 10px;\n background-color: transparent;\n}\n.main-module_tabs_secondary__1QmBJ .main-module_tabs__item__2peSO:not(.main-module_tabs_secondary__1QmBJ .main-module_tabs__item__2peSO:last-child) {\n border-right: 1px solid #f3f4f8;\n}\n.main-module_tabs_secondary__1QmBJ .main-module_tabs__item_active__1LSjR {\n background-color: #3c83ec;\n color: #ffffff;\n}\n.main-module_tabs_secondary__1QmBJ .main-module_tabs__item_active__1LSjR > * {\n fill: #ffffff;\n}\n.main-module_tabs_secondary__1QmBJ .main-module_tabs__item_active__1LSjR:first-child {\n border-top-left-radius: 2px;\n border-bottom-left-radius: 2px;\n}\n.main-module_tabs_secondary__1QmBJ .main-module_tabs__item_active__1LSjR:last-child {\n border-top-right-radius: 2px;\n border-bottom-right-radius: 2px;\n}\n.main-module_tabs_secondary__1QmBJ .main-module_tabs__item_active__1LSjR::after {\n content: '';\n position: absolute;\n bottom: -8px;\n width: 0;\n height: 0;\n border-left: 7px solid transparent;\n border-right: 7px solid transparent;\n border-top: 8px solid #3c83ec;\n}\n.main-module_tabs_secondary__1QmBJ .main-module_tabs__panel-list__3Ob_w {\n margin-top: 8px;\n}\n";
|
|
8
|
+
var cssClasses = {"tabs__item-list":"main-module_tabs__item-list__2R9BF","tabs_secondary":"main-module_tabs_secondary__1QmBJ","tabs__item":"main-module_tabs__item__2peSO","tabs__item_active":"main-module_tabs__item_active__1LSjR","tabs__panel-list":"main-module_tabs__panel-list__3Ob_w"};
|
|
9
9
|
styleInject_es['default'](css_248z);
|
|
10
10
|
|
|
11
11
|
exports.default = cssClasses;
|
|
@@ -28,6 +28,7 @@ const Content = ({ headerComponent, headerGoBackText, headerGoBackIcon, children
|
|
|
28
28
|
const [t] = useTranslation();
|
|
29
29
|
const contentRef = useRef(null);
|
|
30
30
|
const { wrapperRef, toggleDropdown, isOpen } = useDropdownContext();
|
|
31
|
+
const [bounding, setBounding] = useState();
|
|
31
32
|
const [styles, setStyles] = useState({
|
|
32
33
|
top: '0px',
|
|
33
34
|
bottom: '0px',
|
|
@@ -36,18 +37,22 @@ const Content = ({ headerComponent, headerGoBackText, headerGoBackIcon, children
|
|
|
36
37
|
});
|
|
37
38
|
const windowYScroll = window.scrollY;
|
|
38
39
|
const windowHeightMinusYOffset = window.innerHeight - windowYScroll;
|
|
40
|
+
useEffect(() => {
|
|
41
|
+
contentRef.current && setBounding(getBounding(contentRef.current));
|
|
42
|
+
return () => {
|
|
43
|
+
setBounding(undefined);
|
|
44
|
+
};
|
|
45
|
+
}, [contentRef.current]);
|
|
39
46
|
const checkIfIsOutsideTopViewport = () => {
|
|
40
|
-
if (!contentRef.current)
|
|
47
|
+
if (!contentRef.current || !bounding)
|
|
41
48
|
return;
|
|
42
|
-
const bounding = getBounding(contentRef.current);
|
|
43
49
|
return bounding.top <= 0;
|
|
44
50
|
};
|
|
45
51
|
const checkIfIsOutsideBottomViewport = () => {
|
|
46
|
-
if (!contentRef.current)
|
|
52
|
+
if (!contentRef.current || !bounding)
|
|
47
53
|
return;
|
|
48
|
-
const
|
|
49
|
-
|
|
50
|
-
return elementHeight + element.offsetTop > window.innerHeight + windowYScroll;
|
|
54
|
+
const elementHeight = bounding.height;
|
|
55
|
+
return elementHeight + bounding.top > window.innerHeight + windowYScroll;
|
|
51
56
|
};
|
|
52
57
|
const dropdownIsOutsideTopViewport = checkIfIsOutsideTopViewport();
|
|
53
58
|
const dropdownIsOutsideBottomViewport = checkIfIsOutsideBottomViewport();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,oEAAwE;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,oEAAwE;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1,17 +1,21 @@
|
|
|
1
1
|
import React, { useContext, useEffect } from 'react';
|
|
2
|
+
import classnames from 'classnames';
|
|
2
3
|
import CSS_CLASSES from '../css_classes.js';
|
|
3
4
|
import { TabsContext } from '../context.js';
|
|
4
5
|
import cssClasses from '../../../css/tabs/main.module.less.js';
|
|
5
6
|
|
|
6
|
-
const Tabs = ({ initialActiveTabId, children, onChange }) => {
|
|
7
|
+
const Tabs = ({ initialActiveTabId, secondary, children, onChange }) => {
|
|
7
8
|
const { setActiveId, activeId } = useContext(TabsContext);
|
|
9
|
+
const tabsClasses = classnames(cssClasses[CSS_CLASSES.tabs], {
|
|
10
|
+
[cssClasses[CSS_CLASSES.tabsSecondary]]: secondary
|
|
11
|
+
});
|
|
8
12
|
useEffect(() => {
|
|
9
13
|
setActiveId(initialActiveTabId);
|
|
10
14
|
}, [setActiveId, initialActiveTabId]);
|
|
11
15
|
useEffect(() => {
|
|
12
16
|
activeId && (onChange === null || onChange === void 0 ? void 0 : onChange(activeId));
|
|
13
17
|
}, [activeId]);
|
|
14
|
-
return React.createElement("div", { className:
|
|
18
|
+
return React.createElement("div", { className: tabsClasses }, children);
|
|
15
19
|
};
|
|
16
20
|
|
|
17
21
|
export default Tabs;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../../../../external/style-inject/dist/style-inject.es.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_tabs__item-list__2R9BF {\n display: flex;\n
|
|
4
|
-
var cssClasses = {"tabs__item-list":"main-module_tabs__item-list__2R9BF","tabs__item":"main-module_tabs__item__2peSO","tabs__item_active":"main-module_tabs__item_active__1LSjR","tabs__panel-list":"main-module_tabs__panel-list__3Ob_w"};
|
|
3
|
+
var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_tabs__item-list__2R9BF {\n display: flex;\n list-style: none;\n}\n.main-module_tabs__item-list__2R9BF:not(.main-module_tabs_secondary__1QmBJ .main-module_tabs__item-list__2R9BF) {\n gap: 8px;\n}\n.main-module_tabs__item__2peSO {\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n.main-module_tabs__item__2peSO:not(.main-module_tabs_secondary__1QmBJ .main-module_tabs__item__2peSO) {\n padding: 8px 12px;\n background-color: #f3f4f8;\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n font-weight: 600;\n color: #5c657e;\n text-transform: uppercase;\n}\n.main-module_tabs__item_active__1LSjR {\n position: relative;\n z-index: 1;\n}\n.main-module_tabs__item_active__1LSjR:not(.main-module_tabs_secondary__1QmBJ .main-module_tabs__item_active__1LSjR) {\n margin-top: -2px;\n margin-bottom: -1px;\n background-color: #ffffff;\n border-top: 2px solid #3c83ec;\n border-bottom: 1px solid #ffffff;\n color: #2d3748;\n box-shadow: 0 0 9px 0 rgba(92, 101, 126, 0.2);\n -webkit-clip-path: inset(-9px -9px 0 -9px);\n clip-path: inset(-9px -9px 0 -9px);\n}\n.main-module_tabs__panel-list__3Ob_w:not(.main-module_tabs_secondary__1QmBJ .main-module_tabs__panel-list__3Ob_w) {\n margin: 0 -16px;\n padding: 16px 16px 0 16px;\n background-color: #ffffff;\n box-shadow: 0 -1px 5px 0 rgba(92, 101, 126, 0.1);\n -webkit-clip-path: inset(-5px 0 0 0);\n clip-path: inset(-5px 0 0 0);\n}\n.main-module_tabs_secondary__1QmBJ .main-module_tabs__item-list__2R9BF {\n border: 1px solid #f3f4f8;\n border-radius: 2px;\n}\n.main-module_tabs_secondary__1QmBJ .main-module_tabs__item__2peSO {\n position: relative;\n flex: 1;\n justify-content: center;\n padding: 10px;\n background-color: transparent;\n}\n.main-module_tabs_secondary__1QmBJ .main-module_tabs__item__2peSO:not(.main-module_tabs_secondary__1QmBJ .main-module_tabs__item__2peSO:last-child) {\n border-right: 1px solid #f3f4f8;\n}\n.main-module_tabs_secondary__1QmBJ .main-module_tabs__item_active__1LSjR {\n background-color: #3c83ec;\n color: #ffffff;\n}\n.main-module_tabs_secondary__1QmBJ .main-module_tabs__item_active__1LSjR > * {\n fill: #ffffff;\n}\n.main-module_tabs_secondary__1QmBJ .main-module_tabs__item_active__1LSjR:first-child {\n border-top-left-radius: 2px;\n border-bottom-left-radius: 2px;\n}\n.main-module_tabs_secondary__1QmBJ .main-module_tabs__item_active__1LSjR:last-child {\n border-top-right-radius: 2px;\n border-bottom-right-radius: 2px;\n}\n.main-module_tabs_secondary__1QmBJ .main-module_tabs__item_active__1LSjR::after {\n content: '';\n position: absolute;\n bottom: -8px;\n width: 0;\n height: 0;\n border-left: 7px solid transparent;\n border-right: 7px solid transparent;\n border-top: 8px solid #3c83ec;\n}\n.main-module_tabs_secondary__1QmBJ .main-module_tabs__panel-list__3Ob_w {\n margin-top: 8px;\n}\n";
|
|
4
|
+
var cssClasses = {"tabs__item-list":"main-module_tabs__item-list__2R9BF","tabs_secondary":"main-module_tabs_secondary__1QmBJ","tabs__item":"main-module_tabs__item__2peSO","tabs__item_active":"main-module_tabs__item_active__1LSjR","tabs__panel-list":"main-module_tabs__panel-list__3Ob_w"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export default cssClasses;
|