@alfalab/core-components-modal 6.1.12 → 7.0.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/Component.desktop.d.ts +1 -1
- package/Component.desktop.js +2 -5
- package/Component.js +3 -3
- package/Component.mobile.d.ts +1 -1
- package/Component.mobile.js +2 -5
- package/Component.responsive.d.ts +1 -1
- package/Component.responsive.js +2 -5
- package/components/content/Component.js +6 -5
- package/components/content/desktop.css +12 -13
- package/components/content/index.css +8 -4
- package/components/content/mobile.css +6 -4
- package/components/footer/Component.js +4 -4
- package/components/footer/desktop.css +12 -13
- package/components/footer/index.css +8 -6
- package/components/footer/layout.css +27 -25
- package/components/footer/mobile.css +5 -3
- package/components/header/Component.d.ts +3 -47
- package/components/header/Component.js +15 -29
- package/components/header/desktop.css +23 -27
- package/components/header/index.css +8 -42
- package/components/header/mobile.css +10 -5
- package/cssm/Component.desktop.d.ts +1 -1
- package/cssm/Component.desktop.js +2 -6
- package/cssm/Component.mobile.d.ts +1 -1
- package/cssm/Component.mobile.js +2 -6
- package/cssm/Component.responsive.d.ts +1 -1
- package/cssm/Component.responsive.js +2 -6
- package/cssm/components/content/Component.js +3 -2
- package/cssm/components/content/desktop.module.css +10 -11
- package/cssm/components/content/index.module.css +6 -2
- package/cssm/components/content/mobile.module.css +3 -1
- package/cssm/components/footer/desktop.module.css +6 -7
- package/cssm/components/footer/index.module.css +4 -2
- package/cssm/components/footer/layout.module.css +2 -0
- package/cssm/components/footer/mobile.module.css +2 -0
- package/cssm/components/header/Component.d.ts +3 -47
- package/cssm/components/header/Component.js +12 -27
- package/cssm/components/header/desktop.module.css +11 -15
- package/cssm/components/header/index.module.css +5 -39
- package/cssm/components/header/mobile.module.css +7 -2
- package/cssm/desktop.js +2 -6
- package/cssm/desktop.module.css +2 -0
- package/cssm/index.js +3 -7
- package/cssm/mobile.js +2 -6
- package/cssm/mobile.module.css +2 -0
- package/cssm/responsive.js +2 -6
- package/cssm/vars.css +2 -0
- package/desktop.css +11 -9
- package/desktop.js +2 -5
- package/esm/Component.desktop.d.ts +1 -1
- package/esm/Component.desktop.js +1 -4
- package/esm/Component.js +3 -3
- package/esm/Component.mobile.d.ts +1 -1
- package/esm/Component.mobile.js +1 -4
- package/esm/Component.responsive.d.ts +1 -1
- package/esm/Component.responsive.js +1 -4
- package/esm/components/content/Component.js +6 -5
- package/esm/components/content/desktop.css +12 -13
- package/esm/components/content/index.css +8 -4
- package/esm/components/content/mobile.css +6 -4
- package/esm/components/footer/Component.js +4 -4
- package/esm/components/footer/desktop.css +12 -13
- package/esm/components/footer/index.css +8 -6
- package/esm/components/footer/layout.css +27 -25
- package/esm/components/footer/mobile.css +5 -3
- package/esm/components/header/Component.d.ts +3 -47
- package/esm/components/header/Component.js +15 -29
- package/esm/components/header/desktop.css +23 -27
- package/esm/components/header/index.css +8 -42
- package/esm/components/header/mobile.css +10 -5
- package/esm/desktop.css +11 -9
- package/esm/desktop.js +2 -5
- package/esm/index.js +3 -6
- package/esm/mobile.css +4 -2
- package/esm/mobile.js +2 -5
- package/esm/responsive.js +2 -5
- package/esm/transitions.css +8 -8
- package/index.js +3 -6
- package/mobile.css +4 -2
- package/mobile.js +2 -5
- package/modern/Component.desktop.d.ts +1 -1
- package/modern/Component.desktop.js +1 -4
- package/modern/Component.js +3 -3
- package/modern/Component.mobile.d.ts +1 -1
- package/modern/Component.mobile.js +1 -4
- package/modern/Component.responsive.d.ts +1 -1
- package/modern/Component.responsive.js +1 -4
- package/modern/components/content/Component.js +5 -4
- package/modern/components/content/desktop.css +12 -13
- package/modern/components/content/index.css +8 -4
- package/modern/components/content/mobile.css +6 -4
- package/modern/components/footer/Component.js +4 -4
- package/modern/components/footer/desktop.css +12 -13
- package/modern/components/footer/index.css +8 -6
- package/modern/components/footer/layout.css +27 -25
- package/modern/components/footer/mobile.css +5 -3
- package/modern/components/header/Component.d.ts +3 -47
- package/modern/components/header/Component.js +14 -28
- package/modern/components/header/desktop.css +23 -27
- package/modern/components/header/index.css +8 -42
- package/modern/components/header/mobile.css +10 -5
- package/modern/desktop.css +11 -9
- package/modern/desktop.js +2 -5
- package/modern/index.js +3 -6
- package/modern/mobile.css +4 -2
- package/modern/mobile.js +2 -5
- package/modern/responsive.js +2 -5
- package/modern/transitions.css +8 -8
- package/package.json +3 -2
- package/responsive.js +2 -5
- package/transitions.css +8 -8
- package/components/closer/Component.d.ts +0 -33
- package/components/closer/Component.js +0 -35
- package/components/closer/index.css +0 -49
- package/cssm/components/closer/Component.d.ts +0 -33
- package/cssm/components/closer/Component.js +0 -34
- package/cssm/components/closer/index.module.css +0 -48
- package/esm/components/closer/Component.d.ts +0 -33
- package/esm/components/closer/Component.js +0 -28
- package/esm/components/closer/index.css +0 -49
- package/modern/components/closer/Component.d.ts +0 -33
- package/modern/components/closer/Component.js +0 -25
- package/modern/components/closer/index.css +0 -49
package/esm/transitions.css
CHANGED
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
/* hash:
|
|
2
|
-
.
|
|
3
|
-
.
|
|
1
|
+
/* hash: kb3u0 */
|
|
2
|
+
.modal__appear_14ixj,
|
|
3
|
+
.modal__enter_14ixj {
|
|
4
4
|
opacity: 0;
|
|
5
5
|
transform: translateY(15px);
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
-
.
|
|
9
|
-
.
|
|
8
|
+
.modal__appearActive_14ixj,
|
|
9
|
+
.modal__enterActive_14ixj {
|
|
10
10
|
opacity: 1;
|
|
11
11
|
transform: translateY(0);
|
|
12
12
|
transition: opacity 200ms ease-in, transform 200ms ease-in;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
-
.
|
|
15
|
+
.modal__exit_14ixj {
|
|
16
16
|
opacity: 1;
|
|
17
17
|
transform: translateY(0);
|
|
18
18
|
}
|
|
19
19
|
|
|
20
|
-
.
|
|
21
|
-
.
|
|
20
|
+
.modal__exitActive_14ixj,
|
|
21
|
+
.modal__exitDone_14ixj {
|
|
22
22
|
opacity: 0;
|
|
23
23
|
transform: translateY(15px);
|
|
24
24
|
transition: opacity 200ms ease-out, transform 200ms ease-out;
|
package/index.js
CHANGED
|
@@ -4,17 +4,14 @@ var Component_responsive = require('./Component.responsive.js');
|
|
|
4
4
|
var Context = require('./Context.js');
|
|
5
5
|
require('tslib');
|
|
6
6
|
require('react');
|
|
7
|
+
require('@alfalab/core-components-navigation-bar');
|
|
7
8
|
require('@alfalab/hooks');
|
|
8
|
-
require('./components/closer/Component.js');
|
|
9
|
-
require('classnames');
|
|
10
|
-
require('@alfalab/core-components-icon-button');
|
|
11
|
-
require('@alfalab/icons-glyph/CrossHeavyMIcon');
|
|
12
|
-
require('@alfalab/core-components-base-modal');
|
|
13
9
|
require('./components/content/Component.js');
|
|
10
|
+
require('classnames');
|
|
14
11
|
require('./ResponsiveContext.js');
|
|
12
|
+
require('@alfalab/core-components-base-modal');
|
|
15
13
|
require('./components/footer/Component.js');
|
|
16
14
|
require('./components/header/Component.js');
|
|
17
|
-
require('@alfalab/icons-glyph/CrossMIcon');
|
|
18
15
|
require('./Component.js');
|
|
19
16
|
require('react-merge-refs');
|
|
20
17
|
|
package/mobile.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 1eoe5 */
|
|
2
2
|
:root {
|
|
3
3
|
} /* deprecated */ :root {
|
|
4
4
|
} :root {
|
|
@@ -25,7 +25,9 @@
|
|
|
25
25
|
/* desktop */
|
|
26
26
|
|
|
27
27
|
/* mobile */
|
|
28
|
-
|
|
28
|
+
|
|
29
|
+
/* paddings */
|
|
30
|
+
} .modal__component_gwnha {
|
|
29
31
|
flex: 1;
|
|
30
32
|
width: 100%;
|
|
31
33
|
}
|
package/mobile.js
CHANGED
|
@@ -3,17 +3,14 @@
|
|
|
3
3
|
var Component_mobile = require('./Component.mobile.js');
|
|
4
4
|
require('tslib');
|
|
5
5
|
require('react');
|
|
6
|
-
require('
|
|
6
|
+
require('@alfalab/core-components-navigation-bar');
|
|
7
|
+
require('./components/content/Component.js');
|
|
7
8
|
require('classnames');
|
|
8
|
-
require('@alfalab/core-components-icon-button');
|
|
9
|
-
require('@alfalab/icons-glyph/CrossHeavyMIcon');
|
|
10
9
|
require('./Context.js');
|
|
11
10
|
require('@alfalab/core-components-base-modal');
|
|
12
|
-
require('./components/content/Component.js');
|
|
13
11
|
require('./ResponsiveContext.js');
|
|
14
12
|
require('./components/footer/Component.js');
|
|
15
13
|
require('./components/header/Component.js');
|
|
16
|
-
require('@alfalab/icons-glyph/CrossMIcon');
|
|
17
14
|
require('./Component.js');
|
|
18
15
|
require('react-merge-refs');
|
|
19
16
|
|
|
@@ -10,6 +10,6 @@ declare const ModalDesktop: React.ForwardRefExoticComponent<BaseModalProps & {
|
|
|
10
10
|
Content: React.FC<import("./typings").ContentProps>;
|
|
11
11
|
Header: React.FC<import("./components/header/Component").HeaderProps>;
|
|
12
12
|
Footer: React.FC<import("./components/footer/Component").FooterProps>;
|
|
13
|
-
Closer: React.FC<import("
|
|
13
|
+
Closer: React.FC<import("@alfalab/core-components-navigation-bar").CloserProps>;
|
|
14
14
|
};
|
|
15
15
|
export { ModalDesktop };
|
|
@@ -1,16 +1,13 @@
|
|
|
1
1
|
import React, { forwardRef } from 'react';
|
|
2
|
-
import { Closer } from '
|
|
2
|
+
import { Closer } from '@alfalab/core-components-navigation-bar/modern';
|
|
3
3
|
import { Content } from './components/content/Component.js';
|
|
4
4
|
import { Footer } from './components/footer/Component.js';
|
|
5
5
|
import { Header } from './components/header/Component.js';
|
|
6
6
|
import { Modal } from './Component.js';
|
|
7
7
|
import 'classnames';
|
|
8
|
-
import '@alfalab/core-components-icon-button/modern';
|
|
9
|
-
import '@alfalab/icons-glyph/CrossHeavyMIcon';
|
|
10
8
|
import './Context.js';
|
|
11
9
|
import '@alfalab/core-components-base-modal/modern';
|
|
12
10
|
import './ResponsiveContext.js';
|
|
13
|
-
import '@alfalab/icons-glyph/CrossMIcon';
|
|
14
11
|
import 'react-merge-refs';
|
|
15
12
|
|
|
16
13
|
const ModalDesktopComponent = forwardRef((props, ref) => (React.createElement(Modal, { ...props, ref: ref, view: 'desktop' })));
|
package/modern/Component.js
CHANGED
|
@@ -4,13 +4,13 @@ import cn from 'classnames';
|
|
|
4
4
|
import { BaseModal } from '@alfalab/core-components-base-modal/modern';
|
|
5
5
|
import { ResponsiveContext } from './ResponsiveContext.js';
|
|
6
6
|
|
|
7
|
-
const desktopStyles = {"wrapper":"
|
|
7
|
+
const desktopStyles = {"wrapper":"modal__wrapper_1h080","component":"modal__component_1h080","fullscreen":"modal__fullscreen_1h080","s":"modal__s_1h080","m":"modal__m_1h080","l":"modal__l_1h080","xl":"modal__xl_1h080"};
|
|
8
8
|
require('./desktop.css')
|
|
9
9
|
|
|
10
|
-
const mobileStyles = {"component":"
|
|
10
|
+
const mobileStyles = {"component":"modal__component_gwnha"};
|
|
11
11
|
require('./mobile.css')
|
|
12
12
|
|
|
13
|
-
const transitions = {"appear":"
|
|
13
|
+
const transitions = {"appear":"modal__appear_14ixj","enter":"modal__enter_14ixj","appearActive":"modal__appearActive_14ixj","enterActive":"modal__enterActive_14ixj","exit":"modal__exit_14ixj","exitActive":"modal__exitActive_14ixj","exitDone":"modal__exitDone_14ixj"};
|
|
14
14
|
require('./transitions.css')
|
|
15
15
|
|
|
16
16
|
const Modal = forwardRef(({ size = 's', fixedPosition, fullscreen, children, className, wrapperClassName, transitionProps = {}, view, ...restProps }, ref) => {
|
|
@@ -5,6 +5,6 @@ declare const ModalMobile: React.ForwardRefExoticComponent<ModalMobileProps & Re
|
|
|
5
5
|
Content: React.FC<import("./typings").ContentProps>;
|
|
6
6
|
Header: React.FC<import("./components/header/Component").HeaderProps>;
|
|
7
7
|
Footer: React.FC<import("./components/footer/Component").FooterProps>;
|
|
8
|
-
Closer: React.FC<import("
|
|
8
|
+
Closer: React.FC<import("@alfalab/core-components-navigation-bar").CloserProps>;
|
|
9
9
|
};
|
|
10
10
|
export { ModalMobile };
|
|
@@ -1,16 +1,13 @@
|
|
|
1
1
|
import React, { forwardRef } from 'react';
|
|
2
|
-
import { Closer } from '
|
|
2
|
+
import { Closer } from '@alfalab/core-components-navigation-bar/modern';
|
|
3
3
|
import { Content } from './components/content/Component.js';
|
|
4
4
|
import { Footer } from './components/footer/Component.js';
|
|
5
5
|
import { Header } from './components/header/Component.js';
|
|
6
6
|
import { Modal } from './Component.js';
|
|
7
7
|
import 'classnames';
|
|
8
|
-
import '@alfalab/core-components-icon-button/modern';
|
|
9
|
-
import '@alfalab/icons-glyph/CrossHeavyMIcon';
|
|
10
8
|
import './Context.js';
|
|
11
9
|
import '@alfalab/core-components-base-modal/modern';
|
|
12
10
|
import './ResponsiveContext.js';
|
|
13
|
-
import '@alfalab/icons-glyph/CrossMIcon';
|
|
14
11
|
import 'react-merge-refs';
|
|
15
12
|
|
|
16
13
|
const ModalMobileComponent = forwardRef((props, ref) => (React.createElement(Modal, { ...props, ref: ref, view: 'mobile' })));
|
|
@@ -12,6 +12,6 @@ declare const ModalResponsive: React.ForwardRefExoticComponent<BaseModalProps &
|
|
|
12
12
|
Header: React.FC<import("./components/header/Component").HeaderProps>;
|
|
13
13
|
Content: React.FC<import("./typings").ContentProps>;
|
|
14
14
|
Footer: React.FC<import("./components/footer/Component").FooterProps>;
|
|
15
|
-
Closer: React.FC<import("
|
|
15
|
+
Closer: React.FC<import("@alfalab/core-components-navigation-bar").CloserProps>;
|
|
16
16
|
};
|
|
17
17
|
export { ModalResponsive };
|
|
@@ -1,17 +1,14 @@
|
|
|
1
1
|
import React, { forwardRef } from 'react';
|
|
2
|
+
import { Closer } from '@alfalab/core-components-navigation-bar/modern';
|
|
2
3
|
import { useMedia } from '@alfalab/hooks';
|
|
3
|
-
import { Closer } from './components/closer/Component.js';
|
|
4
4
|
import { Content } from './components/content/Component.js';
|
|
5
5
|
import { Footer } from './components/footer/Component.js';
|
|
6
6
|
import { Header } from './components/header/Component.js';
|
|
7
7
|
import { Modal } from './Component.js';
|
|
8
8
|
import 'classnames';
|
|
9
|
-
import '@alfalab/core-components-icon-button/modern';
|
|
10
|
-
import '@alfalab/icons-glyph/CrossHeavyMIcon';
|
|
11
9
|
import './Context.js';
|
|
12
10
|
import '@alfalab/core-components-base-modal/modern';
|
|
13
11
|
import './ResponsiveContext.js';
|
|
14
|
-
import '@alfalab/icons-glyph/CrossMIcon';
|
|
15
12
|
import 'react-merge-refs';
|
|
16
13
|
|
|
17
14
|
const ModalResponsiveComponent = forwardRef(({ children, breakpoint = 1024, ...restProps }, ref) => {
|
|
@@ -4,20 +4,21 @@ import { ModalContext } from '../../Context.js';
|
|
|
4
4
|
import { ResponsiveContext } from '../../ResponsiveContext.js';
|
|
5
5
|
import '@alfalab/core-components-base-modal/modern';
|
|
6
6
|
|
|
7
|
-
const desktopStyles = {"s":"
|
|
7
|
+
const desktopStyles = {"s":"modal__s_10lsq","m":"modal__m_10lsq","l":"modal__l_10lsq","xl":"modal__xl_10lsq","fullscreen":"modal__fullscreen_10lsq"};
|
|
8
8
|
require('./desktop.css')
|
|
9
9
|
|
|
10
|
-
const styles = {"content":"
|
|
10
|
+
const styles = {"content":"modal__content_9o5rw","withHeader":"modal__withHeader_9o5rw","flex":"modal__flex_9o5rw"};
|
|
11
11
|
require('./index.css')
|
|
12
12
|
|
|
13
|
-
const mobileStyles = {"content":"
|
|
13
|
+
const mobileStyles = {"content":"modal__content_rvw86"};
|
|
14
14
|
require('./mobile.css')
|
|
15
15
|
|
|
16
16
|
const Content = ({ children, flex, className }) => {
|
|
17
|
-
const { contentRef } = useContext(ModalContext);
|
|
17
|
+
const { contentRef, hasHeader } = useContext(ModalContext);
|
|
18
18
|
const { size, view } = useContext(ResponsiveContext);
|
|
19
19
|
return (React.createElement("div", { className: cn(styles.content, className, {
|
|
20
20
|
[styles.flex]: flex,
|
|
21
|
+
[styles.withHeader]: hasHeader,
|
|
21
22
|
[desktopStyles[size]]: view === 'desktop' && size,
|
|
22
23
|
[mobileStyles.content]: view === 'mobile',
|
|
23
24
|
}), ref: contentRef }, children));
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 31pcf */
|
|
2
2
|
:root {
|
|
3
3
|
} /* deprecated */ :root {
|
|
4
4
|
} :root {
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
/* Hard up */
|
|
13
13
|
} :root {
|
|
14
14
|
} :root {
|
|
15
|
-
--gap-
|
|
15
|
+
--gap-3xl: 40px;
|
|
16
16
|
} :root {
|
|
17
17
|
} :root {
|
|
18
18
|
} :root {
|
|
@@ -20,23 +20,22 @@
|
|
|
20
20
|
/* sizes */
|
|
21
21
|
|
|
22
22
|
/* paddings */
|
|
23
|
-
--modal-s-content-paddings: 0
|
|
24
|
-
--modal-s-content-only-bottom-padding:
|
|
23
|
+
--modal-s-content-paddings: var(--gap-3xl) var(--gap-3xl) 0;
|
|
24
|
+
--modal-s-content-only-bottom-padding: var(--gap-3xl);
|
|
25
25
|
|
|
26
26
|
/* scroll */
|
|
27
27
|
|
|
28
28
|
/* desktop */
|
|
29
29
|
|
|
30
30
|
/* mobile */
|
|
31
|
-
|
|
32
|
-
|
|
31
|
+
|
|
32
|
+
/* paddings */
|
|
33
|
+
} .modal__s_10lsq,
|
|
34
|
+
.modal__m_10lsq,
|
|
35
|
+
.modal__l_10lsq,
|
|
36
|
+
.modal__xl_10lsq,
|
|
37
|
+
.modal__fullscreen_10lsq {
|
|
33
38
|
padding: var(--modal-s-content-paddings)
|
|
34
|
-
} .
|
|
39
|
+
} .modal__s_10lsq:last-child, .modal__m_10lsq:last-child, .modal__l_10lsq:last-child, .modal__xl_10lsq:last-child, .modal__fullscreen_10lsq:last-child {
|
|
35
40
|
padding-bottom: var(--modal-s-content-only-bottom-padding);
|
|
36
|
-
} .modal__l_1rous,
|
|
37
|
-
.modal__xl_1rous,
|
|
38
|
-
.modal__fullscreen_1rous {
|
|
39
|
-
padding: 0 var(--gap-6xl)
|
|
40
|
-
} .modal__l_1rous:last-child, .modal__xl_1rous:last-child, .modal__fullscreen_1rous:last-child {
|
|
41
|
-
padding-bottom: var(--gap-6xl);
|
|
42
41
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 7zqh4 */
|
|
2
2
|
:root {
|
|
3
3
|
} /* deprecated */ :root {
|
|
4
4
|
} :root {
|
|
@@ -25,9 +25,13 @@
|
|
|
25
25
|
/* desktop */
|
|
26
26
|
|
|
27
27
|
/* mobile */
|
|
28
|
-
|
|
28
|
+
|
|
29
|
+
/* paddings */
|
|
30
|
+
} .modal__content_9o5rw {
|
|
29
31
|
box-sizing: border-box;
|
|
30
|
-
width: 100
|
|
31
|
-
} .
|
|
32
|
+
width: 100%
|
|
33
|
+
} .modal__content_9o5rw.modal__withHeader_9o5rw {
|
|
34
|
+
padding-top: 0;
|
|
35
|
+
} .modal__flex_9o5rw {
|
|
32
36
|
flex: 1;
|
|
33
37
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: q0wl1 */
|
|
2
2
|
:root {
|
|
3
3
|
} /* deprecated */ :root {
|
|
4
4
|
} :root {
|
|
@@ -26,8 +26,10 @@
|
|
|
26
26
|
/* desktop */
|
|
27
27
|
|
|
28
28
|
/* mobile */
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
} .
|
|
29
|
+
|
|
30
|
+
/* paddings */
|
|
31
|
+
} .modal__content_rvw86 {
|
|
32
|
+
padding: var(--gap-m) var(--gap-m) 0
|
|
33
|
+
} .modal__content_rvw86:last-child {
|
|
32
34
|
padding-bottom: var(--gap-m);
|
|
33
35
|
}
|
|
@@ -4,16 +4,16 @@ import { ModalContext } from '../../Context.js';
|
|
|
4
4
|
import { ResponsiveContext } from '../../ResponsiveContext.js';
|
|
5
5
|
import '@alfalab/core-components-base-modal/modern';
|
|
6
6
|
|
|
7
|
-
const desktopStyles = {"footer":"
|
|
7
|
+
const desktopStyles = {"footer":"modal__footer_kzf10","sticky":"modal__sticky_kzf10","fullscreen":"modal__fullscreen_kzf10","s":"modal__s_kzf10","m":"modal__m_kzf10","l":"modal__l_kzf10","xl":"modal__xl_kzf10"};
|
|
8
8
|
require('./desktop.css')
|
|
9
9
|
|
|
10
|
-
const styles = {"footer":"
|
|
10
|
+
const styles = {"footer":"modal__footer_19247","sticky":"modal__sticky_19247","highlighted":"modal__highlighted_19247"};
|
|
11
11
|
require('./index.css')
|
|
12
12
|
|
|
13
|
-
const layoutStyles = {"column":"
|
|
13
|
+
const layoutStyles = {"column":"modal__column_161h6","gap-16":"modal__gap-16_161h6","gap-24":"modal__gap-24_161h6","gap-32":"modal__gap-32_161h6","start":"modal__start_161h6","center":"modal__center_161h6","space-between":"modal__space-between_161h6"};
|
|
14
14
|
require('./layout.css')
|
|
15
15
|
|
|
16
|
-
const mobileStyles = {"footer":"
|
|
16
|
+
const mobileStyles = {"footer":"modal__footer_vmdq8","sticky":"modal__sticky_vmdq8"};
|
|
17
17
|
require('./mobile.css')
|
|
18
18
|
|
|
19
19
|
const Footer = ({ children, className, sticky, layout = 'start', gap }) => {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 1hqlk */
|
|
2
2
|
:root {
|
|
3
3
|
} /* deprecated */ :root {
|
|
4
4
|
} :root {
|
|
@@ -14,9 +14,7 @@
|
|
|
14
14
|
--border-radius-l: 12px;
|
|
15
15
|
} :root {
|
|
16
16
|
--gap-xl: 24px;
|
|
17
|
-
--gap-2xl: 32px;
|
|
18
17
|
--gap-3xl: 40px;
|
|
19
|
-
--gap-6xl: 72px;
|
|
20
18
|
} :root {
|
|
21
19
|
} :root {
|
|
22
20
|
} :root {
|
|
@@ -26,25 +24,26 @@
|
|
|
26
24
|
/* sizes */
|
|
27
25
|
|
|
28
26
|
/* paddings */
|
|
29
|
-
--modal-s-footer-paddings: var(--gap-xl)
|
|
27
|
+
--modal-s-footer-paddings: var(--gap-xl) var(--gap-3xl) var(--gap-3xl);
|
|
30
28
|
|
|
31
29
|
/* scroll */
|
|
32
30
|
|
|
33
31
|
/* desktop */
|
|
34
32
|
|
|
35
33
|
/* mobile */
|
|
36
|
-
|
|
34
|
+
|
|
35
|
+
/* paddings */
|
|
36
|
+
} .modal__footer_kzf10 {
|
|
37
37
|
border-bottom-left-radius: var(--modal-border-radius);
|
|
38
38
|
border-bottom-right-radius: var(--modal-border-radius);
|
|
39
|
-
} .
|
|
39
|
+
} .modal__sticky_kzf10 {
|
|
40
40
|
bottom: calc(var(--modal-vertical-padding) * -1)
|
|
41
|
-
} .
|
|
41
|
+
} .modal__sticky_kzf10.modal__fullscreen_kzf10 {
|
|
42
42
|
bottom: 0;
|
|
43
|
-
} .
|
|
44
|
-
.
|
|
43
|
+
} .modal__s_kzf10,
|
|
44
|
+
.modal__m_kzf10,
|
|
45
|
+
.modal__l_kzf10,
|
|
46
|
+
.modal__xl_kzf10,
|
|
47
|
+
.modal__fullscreen_kzf10 {
|
|
45
48
|
padding: var(--modal-s-footer-paddings);
|
|
46
|
-
} .modal__l_1sboe,
|
|
47
|
-
.modal__xl_1sboe,
|
|
48
|
-
.modal__fullscreen_1sboe {
|
|
49
|
-
padding: var(--gap-2xl) var(--gap-6xl) var(--gap-6xl);
|
|
50
49
|
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 19xmn */
|
|
2
2
|
:root {
|
|
3
3
|
} /* deprecated */ :root {
|
|
4
4
|
--color-light-bg-primary: #fff;
|
|
5
|
-
--color-light-border-
|
|
5
|
+
--color-light-border-secondary: #e7e9eb;
|
|
6
6
|
} :root {
|
|
7
7
|
} :root {
|
|
8
8
|
} :root {
|
|
@@ -25,19 +25,21 @@
|
|
|
25
25
|
|
|
26
26
|
/* scroll */
|
|
27
27
|
--modal-footer-highlight-background: var(--color-light-bg-primary);
|
|
28
|
-
--modal-footer-highlight-box-shadow: 0 -1px 0 0 var(--color-light-border-
|
|
28
|
+
--modal-footer-highlight-box-shadow: 0 -1px 0 0 var(--color-light-border-secondary);
|
|
29
29
|
|
|
30
30
|
/* desktop */
|
|
31
31
|
|
|
32
32
|
/* mobile */
|
|
33
|
-
|
|
33
|
+
|
|
34
|
+
/* paddings */
|
|
35
|
+
} .modal__footer_19247 {
|
|
34
36
|
width: 100%;
|
|
35
37
|
box-sizing: border-box;
|
|
36
38
|
transition: box-shadow 0.2s ease, background 0.2s ease;
|
|
37
|
-
} .
|
|
39
|
+
} .modal__sticky_19247 {
|
|
38
40
|
background: var(--modal-footer-background);
|
|
39
41
|
position: sticky;
|
|
40
|
-
} .
|
|
42
|
+
} .modal__highlighted_19247 {
|
|
41
43
|
background: var(--modal-footer-highlight-background);
|
|
42
44
|
box-shadow: var(--modal-footer-highlight-box-shadow);
|
|
43
45
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: e96ok */
|
|
2
2
|
:root {
|
|
3
3
|
} /* deprecated */ :root {
|
|
4
4
|
} :root {
|
|
@@ -29,45 +29,47 @@
|
|
|
29
29
|
/* desktop */
|
|
30
30
|
|
|
31
31
|
/* mobile */
|
|
32
|
-
|
|
32
|
+
|
|
33
|
+
/* paddings */
|
|
34
|
+
} .modal__column_161h6 {
|
|
33
35
|
display: flex;
|
|
34
36
|
flex-direction: column
|
|
35
|
-
} .
|
|
37
|
+
} .modal__column_161h6 > * {
|
|
36
38
|
margin-bottom: var(--modal-footer-default-gap);
|
|
37
|
-
} .
|
|
38
|
-
.
|
|
39
|
+
} .modal__column_161h6 > *:last-child,
|
|
40
|
+
.modal__column_161h6 > *:only-child {
|
|
39
41
|
margin-bottom: 0;
|
|
40
|
-
} .
|
|
42
|
+
} .modal__column_161h6.modal__gap-16_161h6 > * {
|
|
41
43
|
margin-bottom: var(--gap-m);
|
|
42
|
-
} .
|
|
44
|
+
} .modal__column_161h6.modal__gap-24_161h6 > * {
|
|
43
45
|
margin-bottom: var(--gap-xl);
|
|
44
|
-
} .
|
|
46
|
+
} .modal__column_161h6.modal__gap-32_161h6 > * {
|
|
45
47
|
margin-bottom: var(--gap-2xl);
|
|
46
|
-
} .
|
|
48
|
+
} .modal__start_161h6 {
|
|
47
49
|
justify-content: flex-start;
|
|
48
|
-
} .
|
|
50
|
+
} .modal__center_161h6 {
|
|
49
51
|
justify-content: center;
|
|
50
|
-
} .modal__space-
|
|
52
|
+
} .modal__space-between_161h6 {
|
|
51
53
|
justify-content: space-between
|
|
52
|
-
} .modal__space-
|
|
54
|
+
} .modal__space-between_161h6 > * {
|
|
53
55
|
flex: 1;
|
|
54
|
-
} .
|
|
55
|
-
.
|
|
56
|
-
.modal__space-
|
|
56
|
+
} .modal__start_161h6,
|
|
57
|
+
.modal__center_161h6,
|
|
58
|
+
.modal__space-between_161h6 {
|
|
57
59
|
display: flex
|
|
58
|
-
} .
|
|
60
|
+
} .modal__start_161h6 > *, .modal__center_161h6 > *, .modal__space-between_161h6 > * {
|
|
59
61
|
margin-right: var(--modal-footer-default-gap);
|
|
60
|
-
} .
|
|
61
|
-
.
|
|
62
|
-
.
|
|
63
|
-
.
|
|
64
|
-
.modal__space-
|
|
65
|
-
.modal__space-
|
|
62
|
+
} .modal__start_161h6 > *:last-child,
|
|
63
|
+
.modal__start_161h6 > *:only-child,
|
|
64
|
+
.modal__center_161h6 > *:last-child,
|
|
65
|
+
.modal__center_161h6 > *:only-child,
|
|
66
|
+
.modal__space-between_161h6 > *:last-child,
|
|
67
|
+
.modal__space-between_161h6 > *:only-child {
|
|
66
68
|
margin-right: 0;
|
|
67
|
-
} .
|
|
69
|
+
} .modal__start_161h6.modal__gap-16_161h6 > *, .modal__center_161h6.modal__gap-16_161h6 > *, .modal__space-between_161h6.modal__gap-16_161h6 > * {
|
|
68
70
|
margin-right: var(--gap-m);
|
|
69
|
-
} .
|
|
71
|
+
} .modal__start_161h6.modal__gap-24_161h6 > *, .modal__center_161h6.modal__gap-24_161h6 > *, .modal__space-between_161h6.modal__gap-24_161h6 > * {
|
|
70
72
|
margin-right: var(--gap-xl);
|
|
71
|
-
} .
|
|
73
|
+
} .modal__start_161h6.modal__gap-32_161h6 > *, .modal__center_161h6.modal__gap-32_161h6 > *, .modal__space-between_161h6.modal__gap-32_161h6 > * {
|
|
72
74
|
margin-right: var(--gap-2xl);
|
|
73
75
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 5pqlo */
|
|
2
2
|
:root {
|
|
3
3
|
} /* deprecated */ :root {
|
|
4
4
|
} :root {
|
|
@@ -26,8 +26,10 @@
|
|
|
26
26
|
/* desktop */
|
|
27
27
|
|
|
28
28
|
/* mobile */
|
|
29
|
-
|
|
29
|
+
|
|
30
|
+
/* paddings */
|
|
31
|
+
} .modal__footer_vmdq8 {
|
|
30
32
|
padding: var(--gap-m);
|
|
31
|
-
} .
|
|
33
|
+
} .modal__sticky_vmdq8 {
|
|
32
34
|
bottom: 0;
|
|
33
35
|
}
|
|
@@ -1,49 +1,5 @@
|
|
|
1
|
-
import { FC
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
* Контент шапки
|
|
5
|
-
*/
|
|
6
|
-
children?: ReactNode;
|
|
7
|
-
/**
|
|
8
|
-
* Слот слева
|
|
9
|
-
*/
|
|
10
|
-
leftAddons?: ReactNode;
|
|
11
|
-
/**
|
|
12
|
-
* Наличие компонента крестика
|
|
13
|
-
*/
|
|
14
|
-
hasCloser?: ReactNode;
|
|
15
|
-
/**
|
|
16
|
-
* Дополнительный класс
|
|
17
|
-
*/
|
|
18
|
-
className?: string;
|
|
19
|
-
/**
|
|
20
|
-
* Дополнительный класс для аддонов
|
|
21
|
-
*/
|
|
22
|
-
addonClassName?: string;
|
|
23
|
-
/**
|
|
24
|
-
* Дополнительный класс для контента
|
|
25
|
-
*/
|
|
26
|
-
contentClassName?: string;
|
|
27
|
-
/**
|
|
28
|
-
* Заголовок шапки
|
|
29
|
-
*/
|
|
30
|
-
title?: string;
|
|
31
|
-
/**
|
|
32
|
-
* Выравнивание заголовка
|
|
33
|
-
*/
|
|
34
|
-
align?: 'left' | 'center';
|
|
35
|
-
/**
|
|
36
|
-
* Обрезать ли заголовок
|
|
37
|
-
*/
|
|
38
|
-
trim?: boolean;
|
|
39
|
-
/**
|
|
40
|
-
* Фиксирует шапку
|
|
41
|
-
*/
|
|
42
|
-
sticky?: boolean;
|
|
43
|
-
/**
|
|
44
|
-
* Идентификатор для систем автоматизированного тестирования
|
|
45
|
-
*/
|
|
46
|
-
dataTestId?: string;
|
|
47
|
-
};
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { NavigationBarProps } from "@alfalab/core-components-navigation-bar";
|
|
3
|
+
type HeaderProps = Omit<NavigationBarProps, 'size' | 'view' | 'parentRef'>;
|
|
48
4
|
declare const Header: FC<HeaderProps>;
|
|
49
5
|
export { HeaderProps, Header };
|