@alfalab/core-components-gallery 5.1.19 → 5.2.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.js +5 -3
- package/buttons-fc45def4.d.ts +11 -0
- package/buttons-fc45def4.js +37 -0
- package/components/header/Component.js +5 -6
- package/components/header/buttons.d.ts +0 -11
- package/components/header/buttons.js +14 -27
- package/components/header/index.css +14 -7
- package/components/header/index.js +3 -1
- package/components/header-info-block/Component.js +6 -4
- package/components/header-info-block/index.css +5 -5
- package/components/header-info-block/index.js +2 -0
- package/components/image-preview/Component.js +5 -3
- package/components/image-preview/index.css +22 -19
- package/components/image-preview/index.js +2 -0
- package/components/image-preview/paths.js +2 -0
- package/components/image-viewer/component.js +3 -1
- package/components/image-viewer/index.css +32 -31
- package/components/image-viewer/index.js +3 -1
- package/components/image-viewer/paths.js +2 -0
- package/components/image-viewer/slide.js +3 -1
- package/components/index.js +7 -5
- package/components/navigation-bar/Component.js +3 -1
- package/components/navigation-bar/index.css +7 -9
- package/components/navigation-bar/index.js +2 -0
- package/context.js +2 -0
- package/cssm/Component.js +2 -0
- package/cssm/components/header/Component.js +2 -0
- package/cssm/components/header/buttons.js +8 -4
- package/cssm/components/header/index.js +2 -0
- package/cssm/components/header/index.module.css +11 -4
- package/cssm/components/header-info-block/Component.js +5 -3
- package/cssm/components/header-info-block/index.js +2 -0
- package/cssm/components/image-preview/Component.js +4 -2
- package/cssm/components/image-preview/index.js +2 -0
- package/cssm/components/image-preview/index.module.css +11 -8
- package/cssm/components/image-preview/paths.js +2 -0
- package/cssm/components/image-viewer/component.js +2 -0
- package/cssm/components/image-viewer/index.js +2 -0
- package/cssm/components/image-viewer/index.module.css +13 -12
- package/cssm/components/image-viewer/paths.js +2 -0
- package/cssm/components/image-viewer/slide.js +5 -3
- package/cssm/components/index.js +6 -4
- package/cssm/components/navigation-bar/Component.js +2 -0
- package/cssm/components/navigation-bar/index.js +2 -0
- package/cssm/components/navigation-bar/index.module.css +1 -3
- package/cssm/context.js +2 -0
- package/cssm/index.js +2 -0
- package/cssm/index.module.css +3 -1
- package/cssm/utils/constants.js +2 -0
- package/cssm/utils/index.js +2 -0
- package/cssm/utils/split-filename.js +2 -0
- package/cssm/utils/utils.js +2 -0
- package/esm/Component.js +3 -3
- package/esm/buttons-e3d668f3.d.ts +11 -0
- package/esm/buttons-e3d668f3.js +27 -0
- package/esm/components/header/Component.js +1 -4
- package/esm/components/header/buttons.d.ts +0 -11
- package/esm/components/header/buttons.js +9 -24
- package/esm/components/header/index.css +14 -7
- package/esm/components/header/index.js +1 -1
- package/esm/components/header-info-block/Component.js +4 -4
- package/esm/components/header-info-block/index.css +5 -5
- package/esm/components/image-preview/Component.js +3 -3
- package/esm/components/image-preview/index.css +22 -19
- package/esm/components/image-viewer/component.js +1 -1
- package/esm/components/image-viewer/index.css +32 -31
- package/esm/components/image-viewer/index.js +1 -1
- package/esm/components/image-viewer/slide.js +1 -1
- package/esm/components/index.js +5 -5
- package/esm/components/navigation-bar/Component.js +1 -1
- package/esm/components/navigation-bar/index.css +7 -9
- package/esm/index.css +6 -4
- package/esm/index.js +2 -2
- package/esm/{slide-c2ddd972.js → slide-91252b0b.js} +4 -4
- package/index.css +6 -4
- package/index.js +4 -2
- package/modern/Component.js +3 -3
- package/modern/buttons-ecc0dae2.d.ts +11 -0
- package/modern/buttons-ecc0dae2.js +20 -0
- package/modern/components/header/Component.js +1 -4
- package/modern/components/header/buttons.d.ts +0 -11
- package/modern/components/header/buttons.js +8 -17
- package/modern/components/header/index.css +14 -7
- package/modern/components/header/index.js +1 -1
- package/modern/components/header-info-block/Component.js +4 -4
- package/modern/components/header-info-block/index.css +5 -5
- package/modern/components/image-preview/Component.js +3 -3
- package/modern/components/image-preview/index.css +22 -19
- package/modern/components/image-viewer/component.js +1 -1
- package/modern/components/image-viewer/index.css +32 -31
- package/modern/components/image-viewer/index.js +1 -1
- package/modern/components/image-viewer/slide.js +1 -1
- package/modern/components/index.js +5 -5
- package/modern/components/navigation-bar/Component.js +1 -1
- package/modern/components/navigation-bar/index.css +7 -9
- package/modern/index.css +6 -4
- package/modern/index.js +2 -2
- package/modern/{slide-2e865179.js → slide-8b790c66.js} +4 -4
- package/package.json +5 -5
- package/{slide-7b9c9b36.js → slide-ac3f2828.js} +4 -4
- package/utils/constants.js +2 -0
- package/utils/index.js +2 -0
- package/utils/split-filename.js +2 -0
- package/utils/utils.js +2 -0
- /package/esm/{slide-c2ddd972.d.ts → slide-91252b0b.d.ts} +0 -0
- /package/modern/{slide-2e865179.d.ts → slide-8b790c66.d.ts} +0 -0
- /package/{slide-7b9c9b36.d.ts → slide-ac3f2828.d.ts} +0 -0
package/Component.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
3
5
|
var React = require('react');
|
|
4
6
|
var coreComponentsBaseModal = require('@alfalab/core-components-base-modal');
|
|
5
7
|
var components_navigationBar_Component = require('./components/navigation-bar/Component.js');
|
|
@@ -15,7 +17,7 @@ require('./components/image-preview/paths.js');
|
|
|
15
17
|
require('./components/header-info-block/Component.js');
|
|
16
18
|
require('@alfalab/core-components-typography');
|
|
17
19
|
require('./utils/split-filename.js');
|
|
18
|
-
require('./
|
|
20
|
+
require('./buttons-fc45def4.js');
|
|
19
21
|
require('tslib');
|
|
20
22
|
require('@alfalab/core-components-icon-button');
|
|
21
23
|
require('@alfalab/core-components-tooltip');
|
|
@@ -28,7 +30,7 @@ require('swiper');
|
|
|
28
30
|
require('swiper/react');
|
|
29
31
|
require('@alfalab/icons-glyph/ChevronBackHeavyMIcon');
|
|
30
32
|
require('@alfalab/icons-glyph/ChevronForwardHeavyMIcon');
|
|
31
|
-
require('./slide-
|
|
33
|
+
require('./slide-ac3f2828.js');
|
|
32
34
|
require('./components/image-viewer/paths.js');
|
|
33
35
|
require('swiper/swiper.min.css');
|
|
34
36
|
|
|
@@ -36,7 +38,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
|
|
|
36
38
|
|
|
37
39
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
38
40
|
|
|
39
|
-
var styles = {"container":"
|
|
41
|
+
var styles = {"container":"gallery__container_qo3ef","modal":"gallery__modal_qo3ef"};
|
|
40
42
|
require('./index.css')
|
|
41
43
|
|
|
42
44
|
var Backdrop = function () { return null; };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { FC, MutableRefObject } from 'react';
|
|
2
|
+
import { IconButtonProps } from "@alfalab/core-components-icon-button";
|
|
3
|
+
type Props = Omit<IconButtonProps, 'icon' | 'colors'> & {
|
|
4
|
+
buttonRef?: MutableRefObject<HTMLButtonElement | null>;
|
|
5
|
+
download?: string | boolean;
|
|
6
|
+
};
|
|
7
|
+
declare const Fullscreen: FC<Props>;
|
|
8
|
+
declare const ExitFullscreen: FC<Props>;
|
|
9
|
+
declare const Download: FC<Props>;
|
|
10
|
+
declare const Exit: FC<Props>;
|
|
11
|
+
export { Fullscreen, ExitFullscreen, Download, Exit };
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var tslib = require('tslib');
|
|
4
|
+
var React = require('react');
|
|
5
|
+
var coreComponentsIconButton = require('@alfalab/core-components-icon-button');
|
|
6
|
+
var coreComponentsTooltip = require('@alfalab/core-components-tooltip');
|
|
7
|
+
var ArrowsInwardMIcon = require('@alfalab/icons-glyph/ArrowsInwardMIcon');
|
|
8
|
+
var ArrowsOutwardMIcon = require('@alfalab/icons-glyph/ArrowsOutwardMIcon');
|
|
9
|
+
var CrossMIcon = require('@alfalab/icons-glyph/CrossMIcon');
|
|
10
|
+
var PointerDownMIcon = require('@alfalab/icons-glyph/PointerDownMIcon');
|
|
11
|
+
|
|
12
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
13
|
+
|
|
14
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
15
|
+
|
|
16
|
+
var styles = {"header":"gallery__header_egwod","buttons":"gallery__buttons_egwod","iconButton":"gallery__iconButton_egwod"};
|
|
17
|
+
require('./components/header/index.css')
|
|
18
|
+
|
|
19
|
+
var Fullscreen = function (_a) {
|
|
20
|
+
var buttonRef = _a.buttonRef, restProps = tslib.__rest(_a, ["buttonRef"]);
|
|
21
|
+
return (React__default.default.createElement(coreComponentsTooltip.Tooltip, { trigger: 'hover', position: 'bottom', content: '\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u0432 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u043C \u0440\u0435\u0436\u0438\u043C\u0435', fallbackPlacements: ['bottom-end'] },
|
|
22
|
+
React__default.default.createElement(coreComponentsIconButton.IconButton, tslib.__assign({}, restProps, { ref: buttonRef, icon: ArrowsOutwardMIcon.ArrowsOutwardMIcon, colors: 'inverted', "aria-label": '\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u0432 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u043C \u0440\u0435\u0436\u0438\u043C\u0435', className: styles.iconButton }))));
|
|
23
|
+
};
|
|
24
|
+
var ExitFullscreen = function (_a) {
|
|
25
|
+
var buttonRef = _a.buttonRef, restProps = tslib.__rest(_a, ["buttonRef"]);
|
|
26
|
+
return (React__default.default.createElement(coreComponentsTooltip.Tooltip, { trigger: 'hover', position: 'bottom', content: '\u0412\u044B\u0439\u0442\u0438 \u0438\u0437 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0440\u0435\u0436\u0438\u043C\u0430', fallbackPlacements: ['bottom-end'] },
|
|
27
|
+
React__default.default.createElement(coreComponentsIconButton.IconButton, tslib.__assign({}, restProps, { ref: buttonRef, icon: ArrowsInwardMIcon.ArrowsInwardMIcon, colors: 'inverted', "aria-label": '\u0412\u044B\u0439\u0442\u0438 \u0438\u0437 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0440\u0435\u0436\u0438\u043C\u0430', className: styles.iconButton }))));
|
|
28
|
+
};
|
|
29
|
+
var Download = function (props) { return (React__default.default.createElement(coreComponentsTooltip.Tooltip, { trigger: 'hover', position: 'bottom', content: '\u0421\u043A\u0430\u0447\u0430\u0442\u044C', fallbackPlacements: ['bottom-end'] },
|
|
30
|
+
React__default.default.createElement(coreComponentsIconButton.IconButton, tslib.__assign({}, props, { icon: PointerDownMIcon.PointerDownMIcon, colors: 'inverted', "aria-label": '\u0421\u043A\u0430\u0447\u0430\u0442\u044C', className: styles.iconButton })))); };
|
|
31
|
+
var Exit = function (props) { return (React__default.default.createElement(coreComponentsIconButton.IconButton, tslib.__assign({}, props, { icon: CrossMIcon.CrossMIcon, colors: 'inverted', "aria-label": '\u0417\u0430\u043A\u0440\u044B\u0442\u044C', className: styles.iconButton }))); };
|
|
32
|
+
|
|
33
|
+
exports.Download = Download;
|
|
34
|
+
exports.Exit = Exit;
|
|
35
|
+
exports.ExitFullscreen = ExitFullscreen;
|
|
36
|
+
exports.Fullscreen = Fullscreen;
|
|
37
|
+
exports.styles = styles;
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
3
5
|
var React = require('react');
|
|
4
6
|
var context = require('../../context.js');
|
|
5
7
|
var utils_utils = require('../../utils/utils.js');
|
|
6
8
|
var utils_constants = require('../../utils/constants.js');
|
|
7
9
|
var components_headerInfoBlock_Component = require('../header-info-block/Component.js');
|
|
8
|
-
var components_header_buttons = require('
|
|
10
|
+
var components_header_buttons = require('../../buttons-fc45def4.js');
|
|
9
11
|
require('@alfalab/core-components-typography');
|
|
10
12
|
require('../../utils/split-filename.js');
|
|
11
13
|
require('tslib');
|
|
@@ -20,9 +22,6 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
|
|
|
20
22
|
|
|
21
23
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
22
24
|
|
|
23
|
-
var styles = {"header":"gallery__header_x51pz","buttons":"gallery__buttons_x51pz"};
|
|
24
|
-
require('./index.css')
|
|
25
|
-
|
|
26
25
|
var Header = function () {
|
|
27
26
|
var _a;
|
|
28
27
|
var _b = React.useContext(context.GalleryContext), currentSlideIndex = _b.currentSlideIndex, singleSlide = _b.singleSlide, images = _b.images, fullScreen = _b.fullScreen, getCurrentImageMeta = _b.getCurrentImageMeta, getCurrentImage = _b.getCurrentImage, setFullScreen = _b.setFullScreen, onClose = _b.onClose;
|
|
@@ -50,9 +49,9 @@ var Header = function () {
|
|
|
50
49
|
var renderToggleFullScreenButton = function () {
|
|
51
50
|
return fullScreen ? (React__default.default.createElement(components_header_buttons.ExitFullscreen, { onClick: closeFullScreen, buttonRef: toggleFullScreenButton, dataTestId: utils_constants.TestIds.EXIT_FULLSCREEN_BUTTON })) : (React__default.default.createElement(components_header_buttons.Fullscreen, { onClick: openFullScreen, buttonRef: toggleFullScreenButton, dataTestId: utils_constants.TestIds.FULLSCREEN_BUTTON }));
|
|
52
51
|
};
|
|
53
|
-
return (React__default.default.createElement("div", { className: styles.header },
|
|
52
|
+
return (React__default.default.createElement("div", { className: components_header_buttons.styles.header },
|
|
54
53
|
React__default.default.createElement(components_headerInfoBlock_Component.HeaderInfoBlock, { filename: filename, description: description }),
|
|
55
|
-
React__default.default.createElement("div", { className: styles.buttons },
|
|
54
|
+
React__default.default.createElement("div", { className: components_header_buttons.styles.buttons },
|
|
56
55
|
showFullScreenButton && renderToggleFullScreenButton(),
|
|
57
56
|
showDownloadButton && (React__default.default.createElement(components_header_buttons.Download, { href: currentImage === null || currentImage === void 0 ? void 0 : currentImage.src, download: currentImage === null || currentImage === void 0 ? void 0 : currentImage.name, dataTestId: utils_constants.TestIds.DOWNLOAD_BUTTON })),
|
|
58
57
|
React__default.default.createElement(components_header_buttons.Exit, { onClick: onClose, dataTestId: utils_constants.TestIds.CLOSE_BUTTON }))));
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { FC, MutableRefObject } from 'react';
|
|
2
|
-
import { IconButtonProps } from "@alfalab/core-components-icon-button";
|
|
3
|
-
type Props = Omit<IconButtonProps, 'icon' | 'colors'> & {
|
|
4
|
-
buttonRef?: MutableRefObject<HTMLButtonElement | null>;
|
|
5
|
-
download?: string | boolean;
|
|
6
|
-
};
|
|
7
|
-
declare const Fullscreen: FC<Props>;
|
|
8
|
-
declare const ExitFullscreen: FC<Props>;
|
|
9
|
-
declare const Download: FC<Props>;
|
|
10
|
-
declare const Exit: FC<Props>;
|
|
11
|
-
export { Fullscreen, ExitFullscreen, Download, Exit };
|
|
@@ -1,33 +1,20 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
var React = require('react');
|
|
5
|
-
var coreComponentsIconButton = require('@alfalab/core-components-icon-button');
|
|
6
|
-
var coreComponentsTooltip = require('@alfalab/core-components-tooltip');
|
|
7
|
-
var ArrowsInwardMIcon = require('@alfalab/icons-glyph/ArrowsInwardMIcon');
|
|
8
|
-
var ArrowsOutwardMIcon = require('@alfalab/icons-glyph/ArrowsOutwardMIcon');
|
|
9
|
-
var CrossMIcon = require('@alfalab/icons-glyph/CrossMIcon');
|
|
10
|
-
var PointerDownMIcon = require('@alfalab/icons-glyph/PointerDownMIcon');
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
11
4
|
|
|
12
|
-
|
|
5
|
+
require('tslib');
|
|
6
|
+
require('react');
|
|
7
|
+
require('@alfalab/core-components-icon-button');
|
|
8
|
+
require('@alfalab/core-components-tooltip');
|
|
9
|
+
require('@alfalab/icons-glyph/ArrowsInwardMIcon');
|
|
10
|
+
require('@alfalab/icons-glyph/ArrowsOutwardMIcon');
|
|
11
|
+
require('@alfalab/icons-glyph/CrossMIcon');
|
|
12
|
+
require('@alfalab/icons-glyph/PointerDownMIcon');
|
|
13
|
+
var components_header_buttons = require('../../buttons-fc45def4.js');
|
|
13
14
|
|
|
14
|
-
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
15
15
|
|
|
16
|
-
var Fullscreen = function (_a) {
|
|
17
|
-
var buttonRef = _a.buttonRef, restProps = tslib.__rest(_a, ["buttonRef"]);
|
|
18
|
-
return (React__default.default.createElement(coreComponentsTooltip.Tooltip, { trigger: 'hover', position: 'bottom', content: '\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u0432 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u043C \u0440\u0435\u0436\u0438\u043C\u0435', fallbackPlacements: ['bottom-end'] },
|
|
19
|
-
React__default.default.createElement(coreComponentsIconButton.IconButton, tslib.__assign({}, restProps, { ref: buttonRef, icon: ArrowsOutwardMIcon.ArrowsOutwardMIcon, colors: 'inverted', "aria-label": '\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u0432 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u043C \u0440\u0435\u0436\u0438\u043C\u0435' }))));
|
|
20
|
-
};
|
|
21
|
-
var ExitFullscreen = function (_a) {
|
|
22
|
-
var buttonRef = _a.buttonRef, restProps = tslib.__rest(_a, ["buttonRef"]);
|
|
23
|
-
return (React__default.default.createElement(coreComponentsTooltip.Tooltip, { trigger: 'hover', position: 'bottom', content: '\u0412\u044B\u0439\u0442\u0438 \u0438\u0437 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0440\u0435\u0436\u0438\u043C\u0430', fallbackPlacements: ['bottom-end'] },
|
|
24
|
-
React__default.default.createElement(coreComponentsIconButton.IconButton, tslib.__assign({}, restProps, { ref: buttonRef, icon: ArrowsInwardMIcon.ArrowsInwardMIcon, colors: 'inverted', "aria-label": '\u0412\u044B\u0439\u0442\u0438 \u0438\u0437 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0440\u0435\u0436\u0438\u043C\u0430' }))));
|
|
25
|
-
};
|
|
26
|
-
var Download = function (props) { return (React__default.default.createElement(coreComponentsTooltip.Tooltip, { trigger: 'hover', position: 'bottom', content: '\u0421\u043A\u0430\u0447\u0430\u0442\u044C', fallbackPlacements: ['bottom-end'] },
|
|
27
|
-
React__default.default.createElement(coreComponentsIconButton.IconButton, tslib.__assign({}, props, { icon: PointerDownMIcon.PointerDownMIcon, colors: 'inverted', "aria-label": '\u0421\u043A\u0430\u0447\u0430\u0442\u044C' })))); };
|
|
28
|
-
var Exit = function (props) { return (React__default.default.createElement(coreComponentsIconButton.IconButton, tslib.__assign({}, props, { icon: CrossMIcon.CrossMIcon, colors: 'inverted', "aria-label": '\u0417\u0430\u043A\u0440\u044B\u0442\u044C' }))); };
|
|
29
16
|
|
|
30
|
-
exports.Download = Download;
|
|
31
|
-
exports.Exit = Exit;
|
|
32
|
-
exports.ExitFullscreen = ExitFullscreen;
|
|
33
|
-
exports.Fullscreen = Fullscreen;
|
|
17
|
+
exports.Download = components_header_buttons.Download;
|
|
18
|
+
exports.Exit = components_header_buttons.Exit;
|
|
19
|
+
exports.ExitFullscreen = components_header_buttons.ExitFullscreen;
|
|
20
|
+
exports.Fullscreen = components_header_buttons.Fullscreen;
|
|
@@ -1,7 +1,9 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: d3omy */
|
|
2
2
|
:root {
|
|
3
3
|
} /* deprecated */ :root {
|
|
4
|
-
--color-
|
|
4
|
+
--color-static-graphic-light: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
5
|
+
--color-static-graphic-light-shade-7: rgb(237, 237, 237);
|
|
6
|
+
--color-static-graphic-light-shade-15: rgb(217, 217, 217);
|
|
5
7
|
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
6
8
|
} :root {
|
|
7
9
|
} :root {
|
|
@@ -18,15 +20,20 @@
|
|
|
18
20
|
--gap-2xl: 32px;
|
|
19
21
|
} :root {
|
|
20
22
|
} :root {
|
|
21
|
-
} .
|
|
23
|
+
} .gallery__header_egwod {
|
|
22
24
|
display: flex;
|
|
23
25
|
justify-content: space-between;
|
|
24
26
|
flex-shrink: 0;
|
|
25
27
|
width: 100%;
|
|
26
28
|
padding: var(--gap-m) var(--gap-xl);
|
|
27
|
-
background-color: var(--color-light-bg-tertiary-inverted);
|
|
28
29
|
box-sizing: border-box;
|
|
29
|
-
} .
|
|
30
|
+
} .gallery__buttons_egwod {
|
|
30
31
|
display: flex;
|
|
31
|
-
padding-left: var(--gap-2xl)
|
|
32
|
-
}
|
|
32
|
+
padding-left: var(--gap-2xl)
|
|
33
|
+
} .gallery__buttons_egwod path {
|
|
34
|
+
color: var(--color-static-graphic-light);
|
|
35
|
+
} /* TODO: применять static цвет через prop IconButton'а */ .gallery__iconButton_egwod:hover path {
|
|
36
|
+
color: var(--color-static-graphic-light-shade-7);
|
|
37
|
+
} .gallery__iconButton_egwod:active path {
|
|
38
|
+
color: var(--color-static-graphic-light-shade-15);
|
|
39
|
+
}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
3
5
|
var components_header_Component = require('./Component.js');
|
|
4
6
|
require('react');
|
|
5
7
|
require('../../context.js');
|
|
@@ -8,7 +10,7 @@ require('../../utils/constants.js');
|
|
|
8
10
|
require('../header-info-block/Component.js');
|
|
9
11
|
require('@alfalab/core-components-typography');
|
|
10
12
|
require('../../utils/split-filename.js');
|
|
11
|
-
require('
|
|
13
|
+
require('../../buttons-fc45def4.js');
|
|
12
14
|
require('tslib');
|
|
13
15
|
require('@alfalab/core-components-icon-button');
|
|
14
16
|
require('@alfalab/core-components-tooltip');
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
3
5
|
var React = require('react');
|
|
4
6
|
var coreComponentsTypography = require('@alfalab/core-components-typography');
|
|
5
7
|
var utils_splitFilename = require('../../utils/split-filename.js');
|
|
@@ -8,7 +10,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
|
|
|
8
10
|
|
|
9
11
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
10
12
|
|
|
11
|
-
var styles = {"info":"
|
|
13
|
+
var styles = {"info":"gallery__info_1080b","filenameHead":"gallery__filenameHead_1080b","filenameContainer":"gallery__filenameContainer_1080b","description":"gallery__description_1080b"};
|
|
12
14
|
require('./index.css')
|
|
13
15
|
|
|
14
16
|
var HeaderInfoBlock = function (_a) {
|
|
@@ -16,9 +18,9 @@ var HeaderInfoBlock = function (_a) {
|
|
|
16
18
|
var _b = utils_splitFilename.splitFilename(filename), head = _b[0], tail = _b[1];
|
|
17
19
|
return (React__default.default.createElement("div", { className: styles.info },
|
|
18
20
|
React__default.default.createElement("div", { className: styles.filenameContainer },
|
|
19
|
-
React__default.default.createElement(coreComponentsTypography.Typography.Title, { tag: 'h1', className: styles.filenameHead, view: 'xsmall', font: 'system', color: 'primary-
|
|
20
|
-
React__default.default.createElement(coreComponentsTypography.Typography.Title, { tag: 'h1', view: 'xsmall', font: 'system', color: 'primary-
|
|
21
|
-
description ? (React__default.default.createElement(coreComponentsTypography.Typography.Text, { className: styles.description, tag: 'div', view: 'primary-medium', color: 'secondary-
|
|
21
|
+
React__default.default.createElement(coreComponentsTypography.Typography.Title, { tag: 'h1', className: styles.filenameHead, view: 'xsmall', font: 'system', color: 'static-primary-light' }, head),
|
|
22
|
+
React__default.default.createElement(coreComponentsTypography.Typography.Title, { tag: 'h1', view: 'xsmall', font: 'system', color: 'static-primary-light' }, tail)),
|
|
23
|
+
description ? (React__default.default.createElement(coreComponentsTypography.Typography.Text, { className: styles.description, tag: 'div', view: 'primary-medium', color: 'static-secondary-light' }, description)) : null));
|
|
22
24
|
};
|
|
23
25
|
|
|
24
26
|
exports.HeaderInfoBlock = HeaderInfoBlock;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 1in1n */
|
|
2
2
|
:root {
|
|
3
3
|
} /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
4
4
|
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
@@ -15,21 +15,21 @@
|
|
|
15
15
|
--gap-2xs: 4px;
|
|
16
16
|
} :root {
|
|
17
17
|
} :root {
|
|
18
|
-
} .
|
|
18
|
+
} .gallery__info_1080b {
|
|
19
19
|
height: 100%;
|
|
20
20
|
display: flex;
|
|
21
21
|
flex-direction: column;
|
|
22
22
|
justify-content: center;
|
|
23
23
|
overflow: hidden;
|
|
24
|
-
} .
|
|
24
|
+
} .gallery__filenameHead_1080b {
|
|
25
25
|
display: inline;
|
|
26
26
|
text-overflow: ellipsis;
|
|
27
27
|
overflow: hidden;
|
|
28
28
|
white-space: nowrap;
|
|
29
|
-
} .
|
|
29
|
+
} .gallery__filenameContainer_1080b {
|
|
30
30
|
overflow: hidden;
|
|
31
31
|
display: inline-flex;
|
|
32
|
-
} .
|
|
32
|
+
} .gallery__description_1080b {
|
|
33
33
|
display: inline;
|
|
34
34
|
text-overflow: ellipsis;
|
|
35
35
|
overflow: hidden;
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
3
5
|
var React = require('react');
|
|
4
6
|
var cn = require('classnames');
|
|
5
7
|
var hooks = require('@alfalab/hooks');
|
|
@@ -11,7 +13,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
|
|
|
11
13
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
12
14
|
var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
13
15
|
|
|
14
|
-
var styles = {"component":"
|
|
16
|
+
var styles = {"component":"gallery__component_1fm76","active":"gallery__active_1fm76","image":"gallery__image_1fm76","preview":"gallery__preview_1fm76","loading":"gallery__loading_1fm76","brokenImageWrapper":"gallery__brokenImageWrapper_1fm76","brokenIcon":"gallery__brokenIcon_1fm76","focused":"gallery__focused_1fm76"};
|
|
15
17
|
require('./index.css')
|
|
16
18
|
|
|
17
19
|
var ImagePreview = function (_a) {
|
|
@@ -34,8 +36,8 @@ var ImagePreview = function (_a) {
|
|
|
34
36
|
React__default.default.createElement("div", { className: styles.brokenIcon },
|
|
35
37
|
React__default.default.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '40', height: '40', viewBox: '0 0 40 40', fill: 'none' },
|
|
36
38
|
React__default.default.createElement("rect", { width: '40', height: '40', fill: 'none' }),
|
|
37
|
-
React__default.default.createElement("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: components_imagePreview_paths.NoImagePaths.baseImage, fill: '#
|
|
38
|
-
React__default.default.createElement("path", { d: components_imagePreview_paths.NoImagePaths.triangleImage, fill: '#
|
|
39
|
+
React__default.default.createElement("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: components_imagePreview_paths.NoImagePaths.baseImage, fill: '#89898A' }),
|
|
40
|
+
React__default.default.createElement("path", { d: components_imagePreview_paths.NoImagePaths.triangleImage, fill: '#89898A' }))))) : (React__default.default.createElement("div", { className: cn__default.default(styles.preview, styles.image, (_c = {},
|
|
39
41
|
_c[styles.broken] = isBroken,
|
|
40
42
|
_c[styles.loading] = !meta,
|
|
41
43
|
_c)), style: { backgroundImage: "url(".concat(image.src, ")") } }))));
|
|
@@ -1,10 +1,12 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 193tx */
|
|
2
2
|
:root {
|
|
3
3
|
} /* deprecated */ :root {
|
|
4
4
|
--color-light-bg-primary: #fff;
|
|
5
|
-
--color-light-border-
|
|
6
|
-
--color-
|
|
7
|
-
|
|
5
|
+
--color-light-border-link: #0072ef;
|
|
6
|
+
--color-static-bg-quaternary-dark: #3a3a3c;
|
|
7
|
+
--color-static-bg-secondary-dark: #202022; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
8
|
+
} :root {
|
|
9
|
+
--color-static-overlay-white-xhigh: rgba(255, 255, 255, 0.4); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
8
10
|
} :root {
|
|
9
11
|
} :root {
|
|
10
12
|
|
|
@@ -21,7 +23,7 @@
|
|
|
21
23
|
} :root {
|
|
22
24
|
} :root {
|
|
23
25
|
--focus-color: var(--color-light-border-link);
|
|
24
|
-
} .
|
|
26
|
+
} .gallery__component_1fm76 {
|
|
25
27
|
display: flex;
|
|
26
28
|
padding: var(--gap-2xs);
|
|
27
29
|
border: 2px solid rgba(0, 0, 0, 0);
|
|
@@ -29,11 +31,11 @@
|
|
|
29
31
|
overflow: hidden;
|
|
30
32
|
transition: border 0.15s ease-in-out;
|
|
31
33
|
outline: none;
|
|
32
|
-
} .
|
|
33
|
-
border-color: var(--color-
|
|
34
|
-
} .
|
|
34
|
+
} .gallery__active_1fm76 {
|
|
35
|
+
border-color: var(--color-static-overlay-white-xhigh)
|
|
36
|
+
} .gallery__active_1fm76 > .gallery__image_1fm76 {
|
|
35
37
|
opacity: 0.7;
|
|
36
|
-
} .
|
|
38
|
+
} .gallery__preview_1fm76 {
|
|
37
39
|
width: 56px;
|
|
38
40
|
height: 56px;
|
|
39
41
|
flex-shrink: 0;
|
|
@@ -41,28 +43,29 @@
|
|
|
41
43
|
cursor: pointer;
|
|
42
44
|
-webkit-user-select: none;
|
|
43
45
|
user-select: none;
|
|
44
|
-
} .
|
|
46
|
+
} .gallery__image_1fm76 {
|
|
45
47
|
background-color: var(--color-light-bg-primary);
|
|
46
48
|
background-size: cover;
|
|
47
49
|
background-repeat: no-repeat;
|
|
48
50
|
background-position: center;
|
|
49
51
|
transition: opacity 0.15s ease-in-out
|
|
50
|
-
} .
|
|
52
|
+
} .gallery__image_1fm76:hover {
|
|
51
53
|
opacity: 0.7;
|
|
52
|
-
} .
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
54
|
+
} .gallery__loading_1fm76 {
|
|
55
|
+
background-color: var(--color-static-bg-secondary-dark)
|
|
56
|
+
} .gallery__loading_1fm76 .gallery__active_1fm76 {
|
|
57
|
+
background-color: var(--color-static-bg-quaternary-dark);
|
|
58
|
+
} .gallery__brokenImageWrapper_1fm76 {
|
|
56
59
|
display: flex;
|
|
57
60
|
justify-content: center;
|
|
58
61
|
align-items: center;
|
|
59
|
-
background-color: var(--color-
|
|
60
|
-
} .
|
|
62
|
+
background-color: var(--color-static-bg-quaternary-dark)
|
|
63
|
+
} .gallery__brokenImageWrapper_1fm76:hover {
|
|
61
64
|
opacity: 0.7;
|
|
62
|
-
} .
|
|
65
|
+
} .gallery__brokenIcon_1fm76 {
|
|
63
66
|
width: 40px;
|
|
64
67
|
height: 40px;
|
|
65
|
-
} .
|
|
68
|
+
} .gallery__focused_1fm76 {
|
|
66
69
|
outline: 2px solid var(--focus-color);
|
|
67
70
|
outline-offset: 2px;
|
|
68
71
|
}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
3
5
|
var NoImagePaths = {
|
|
4
6
|
baseImage: 'M 30.5 6.5 L 4 6.5 C 2.894531 6.5 2 7.394531 2 8.5 L 2 31.5 C 2 32.605469 2.894531 33.5 4 33.5 L 36 33.5 C 37.105469 33.5 38 32.605469 38 31.5 L 38 14 L 32.367188 14 C 31.335938 14 30.5 13.164062 30.5 12.132812 Z M 11.917969 15.667969 C 12.285156 15.296875 12.882812 15.296875 13.25 15.667969 L 14.25 16.667969 L 15.25 15.667969 C 15.617188 15.296875 16.214844 15.296875 16.582031 15.667969 C 16.953125 16.035156 16.953125 16.632812 16.582031 17 L 15.582031 18 L 16.582031 19 C 16.953125 19.367188 16.953125 19.964844 16.582031 20.332031 C 16.214844 20.703125 15.617188 20.703125 15.25 20.332031 L 14.25 19.332031 L 13.25 20.332031 C 12.882812 20.703125 12.285156 20.703125 11.917969 20.332031 C 11.546875 19.964844 11.546875 19.367188 11.917969 19 L 12.917969 18 L 11.917969 17 C 11.546875 16.632812 11.546875 16.035156 11.917969 15.667969 Z M 24.75 15.667969 C 24.382812 15.296875 23.785156 15.296875 23.414062 15.667969 C 23.046875 16.035156 23.046875 16.632812 23.414062 17 L 24.414062 18 L 23.414062 19 C 23.046875 19.367188 23.046875 19.964844 23.414062 20.332031 C 23.785156 20.703125 24.378906 20.703125 24.75 20.332031 L 25.75 19.332031 L 26.75 20.332031 C 27.117188 20.703125 27.714844 20.703125 28.082031 20.332031 C 28.449219 19.964844 28.449219 19.367188 28.082031 19 L 27.082031 18 L 28.082031 17 C 28.449219 16.632812 28.449219 16.035156 28.082031 15.667969 C 27.714844 15.296875 27.117188 15.296875 26.75 15.667969 L 25.75 16.667969 Z M 14.40625 27.914062 L 14.402344 27.914062 C 13.898438 28.136719 13.308594 27.910156 13.085938 27.40625 C 12.863281 26.902344 13.089844 26.308594 13.59375 26.085938 L 14 27 C 13.59375 26.085938 13.59375 26.085938 13.59375 26.085938 L 13.597656 26.085938 L 13.601562 26.082031 L 13.609375 26.078125 L 13.621094 26.074219 L 13.636719 26.066406 C 13.660156 26.058594 13.695312 26.042969 13.734375 26.027344 C 13.816406 25.996094 13.933594 25.949219 14.082031 25.898438 C 14.378906 25.796875 14.808594 25.660156 15.359375 25.527344 C 16.457031 25.261719 18.035156 25 20 25 C 21.964844 25 23.542969 25.261719 24.640625 25.527344 C 25.191406 25.660156 25.621094 25.796875 25.917969 25.898438 C 25.96875 25.917969 26.015625 25.933594 26.058594 25.949219 C 26.144531 25.980469 26.210938 26.007812 26.265625 26.027344 C 26.285156 26.035156 26.304688 26.042969 26.320312 26.050781 C 26.335938 26.054688 26.351562 26.0625 26.363281 26.066406 L 26.382812 26.078125 L 26.390625 26.078125 L 26.398438 26.082031 L 26.402344 26.085938 L 26.40625 26.085938 C 26.40625 26.085938 26.40625 26.085938 26.402344 26.089844 L 26.398438 26.105469 L 26.40625 26.085938 C 26.910156 26.308594 27.136719 26.902344 26.914062 27.40625 C 26.691406 27.910156 26.101562 28.136719 25.597656 27.914062 L 20.449219 27.914062 L 25.59375 27.914062 L 25.585938 27.910156 C 25.574219 27.90625 25.554688 27.898438 25.527344 27.886719 C 25.472656 27.863281 25.382812 27.832031 25.261719 27.789062 C 25.019531 27.703125 24.652344 27.589844 24.171875 27.472656 C 23.207031 27.238281 21.785156 27 20 27 C 18.214844 27 16.792969 27.238281 15.828125 27.472656 C 15.347656 27.589844 14.980469 27.703125 14.738281 27.789062 C 14.617188 27.832031 14.527344 27.863281 14.472656 27.886719 C 14.445312 27.898438 14.425781 27.90625 14.414062 27.910156 L 14.40625 27.914062 L 20.449219 27.914062 Z M 14.40625 27.914062',
|
|
5
7
|
triangleImage: 'M 38 12 L 32.5 12 L 32.5 6.5 Z M 38 12',
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
3
5
|
var tslib = require('tslib');
|
|
4
6
|
var React = require('react');
|
|
5
7
|
var cn = require('classnames');
|
|
@@ -12,7 +14,7 @@ var ChevronForwardHeavyMIcon = require('@alfalab/icons-glyph/ChevronForwardHeavy
|
|
|
12
14
|
var context = require('../../context.js');
|
|
13
15
|
var utils_utils = require('../../utils/utils.js');
|
|
14
16
|
var utils_constants = require('../../utils/constants.js');
|
|
15
|
-
var components_imageViewer_slide = require('../../slide-
|
|
17
|
+
var components_imageViewer_slide = require('../../slide-ac3f2828.js');
|
|
16
18
|
require('swiper/swiper.min.css');
|
|
17
19
|
require('@alfalab/core-components-typography');
|
|
18
20
|
require('./paths.js');
|
|
@@ -1,12 +1,14 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: hw9ow */
|
|
2
2
|
:root {
|
|
3
3
|
} /* deprecated */ :root {
|
|
4
4
|
--color-light-bg-primary: #fff;
|
|
5
|
-
--color-light-border-link: #
|
|
6
|
-
--color-
|
|
7
|
-
--color-
|
|
8
|
-
--color-
|
|
9
|
-
--color-
|
|
5
|
+
--color-light-border-link: #0072ef;
|
|
6
|
+
--color-static-bg-primary-dark: #121212;
|
|
7
|
+
--color-static-bg-quaternary-dark: #3a3a3c;
|
|
8
|
+
--color-static-bg-secondary-dark: #202022;
|
|
9
|
+
--color-static-graphic-light: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
10
|
+
--color-static-bg-primary-dark-tint-15: rgb(54, 54, 54);
|
|
11
|
+
--color-static-bg-primary-dark-tint-20: rgb(65, 65, 65);
|
|
10
12
|
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
11
13
|
} :root {
|
|
12
14
|
} :root {
|
|
@@ -25,13 +27,13 @@
|
|
|
25
27
|
} :root {
|
|
26
28
|
} :root {
|
|
27
29
|
--focus-color: var(--color-light-border-link);
|
|
28
|
-
} .
|
|
30
|
+
} .gallery__component_pw918 {
|
|
29
31
|
display: flex;
|
|
30
32
|
flex-grow: 1;
|
|
31
33
|
justify-content: center;
|
|
32
34
|
align-items: center;
|
|
33
|
-
background-color: var(--color-
|
|
34
|
-
} .
|
|
35
|
+
background-color: var(--color-static-bg-primary-dark);
|
|
36
|
+
} .gallery__swiper_pw918 {
|
|
35
37
|
display: flex;
|
|
36
38
|
width: 100%;
|
|
37
39
|
height: 100%;
|
|
@@ -40,43 +42,42 @@
|
|
|
40
42
|
max-height: calc(100vh - 168px);
|
|
41
43
|
padding: var(--gap-2xl) var(--gap-m);
|
|
42
44
|
box-sizing: border-box;
|
|
43
|
-
} .
|
|
45
|
+
} .gallery__singleSlide_pw918 .gallery__swiper_pw918 {
|
|
44
46
|
max-height: calc(100vh - 80px);
|
|
45
47
|
padding: var(--gap-2xl);
|
|
46
|
-
} .
|
|
48
|
+
} .gallery__hidden_pw918 {
|
|
47
49
|
display: none;
|
|
48
|
-
} .
|
|
50
|
+
} .gallery__slide_pw918 {
|
|
49
51
|
position: relative;
|
|
50
52
|
display: flex;
|
|
51
53
|
justify-content: center;
|
|
52
54
|
align-items: center;
|
|
53
55
|
width: 100%;
|
|
54
56
|
height: 100%;
|
|
55
|
-
} .
|
|
56
|
-
|
|
57
|
-
background-color: #e9eaeb;
|
|
57
|
+
} .gallery__slideLoading_pw918 {
|
|
58
|
+
background-color: var(--color-static-bg-secondary-dark);
|
|
58
59
|
border-radius: var(--border-radius-m);
|
|
59
|
-
} .
|
|
60
|
+
} .gallery__image_pw918 {
|
|
60
61
|
width: 0;
|
|
61
62
|
height: 0;
|
|
62
63
|
-webkit-user-select: none;
|
|
63
64
|
user-select: none;
|
|
64
65
|
background-color: var(--color-light-bg-primary);
|
|
65
66
|
border-radius: var(--border-radius-m);
|
|
66
|
-
} .
|
|
67
|
+
} .gallery__smallImage_pw918 {
|
|
67
68
|
position: relative;
|
|
68
69
|
width: auto;
|
|
69
70
|
height: auto;
|
|
70
71
|
-webkit-user-select: none;
|
|
71
72
|
user-select: none;
|
|
72
73
|
background-color: var(--color-light-bg-primary);
|
|
73
|
-
} .
|
|
74
|
+
} .gallery__verticalImageFit_pw918 {
|
|
74
75
|
width: auto;
|
|
75
76
|
height: 100%;
|
|
76
|
-
} .
|
|
77
|
+
} .gallery__horizontalImageFit_pw918 {
|
|
77
78
|
width: 100%;
|
|
78
79
|
height: auto;
|
|
79
|
-
} .
|
|
80
|
+
} .gallery__arrow_pw918 {
|
|
80
81
|
display: flex;
|
|
81
82
|
flex-direction: column;
|
|
82
83
|
justify-content: center;
|
|
@@ -85,36 +86,36 @@
|
|
|
85
86
|
width: 96px;
|
|
86
87
|
height: 100%;
|
|
87
88
|
cursor: pointer;
|
|
88
|
-
color: var(--color-
|
|
89
|
+
color: var(--color-static-graphic-light);
|
|
89
90
|
transition: background-color 0.15s ease-in-out;
|
|
90
91
|
outline: none
|
|
91
|
-
} .
|
|
92
|
-
background-color: var(--color-
|
|
93
|
-
} .
|
|
94
|
-
background-color: var(--color-
|
|
95
|
-
} .
|
|
92
|
+
} .gallery__arrow_pw918:hover {
|
|
93
|
+
background-color: var(--color-static-bg-primary-dark-tint-15);
|
|
94
|
+
} .gallery__arrow_pw918:active {
|
|
95
|
+
background-color: var(--color-static-bg-primary-dark-tint-20);
|
|
96
|
+
} .gallery__focused_pw918 {
|
|
96
97
|
outline: 2px solid var(--focus-color);
|
|
97
98
|
outline-offset: 2px;
|
|
98
|
-
} .
|
|
99
|
+
} .gallery__placeholder_pw918 {
|
|
99
100
|
display: flex;
|
|
100
101
|
justify-content: center;
|
|
101
102
|
align-items: center;
|
|
102
103
|
width: 400px;
|
|
103
104
|
height: 300px;
|
|
104
105
|
border-radius: var(--border-radius-m);
|
|
105
|
-
background-color: var(--color-
|
|
106
|
-
} .
|
|
106
|
+
background-color: var(--color-static-bg-quaternary-dark);
|
|
107
|
+
} .gallery__brokenImgWrapper_pw918 {
|
|
107
108
|
position: relative;
|
|
108
109
|
display: flex;
|
|
109
110
|
flex-direction: column;
|
|
110
111
|
align-items: center;
|
|
111
112
|
width: 150px;
|
|
112
113
|
text-align: center;
|
|
113
|
-
} .
|
|
114
|
+
} .gallery__brokenImgIcon_pw918 {
|
|
114
115
|
width: 80px;
|
|
115
116
|
height: 80px;
|
|
116
117
|
margin-bottom: var(--gap-2xs);
|
|
117
|
-
} .
|
|
118
|
+
} .gallery__fullScreenImage_pw918 {
|
|
118
119
|
width: 100%;
|
|
119
120
|
height: auto;
|
|
120
121
|
background-color: var(--color-light-bg-primary);
|