@gravity-ui/page-constructor 2.15.0-alpha → 2.16.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [2.16.0](https://github.com/gravity-ui/page-constructor/compare/v2.15.0...v2.16.0) (2023-05-11)
+
+
+### Features
+
+* **Navigation:** add iconSize for navigation icons, update margin between icon and text ([#329](https://github.com/gravity-ui/page-constructor/issues/329)) ([1427740](https://github.com/gravity-ui/page-constructor/commit/14277404cfe199847ae0d1834eb433ba1efd919a))
+
+## [2.15.0](https://github.com/gravity-ui/page-constructor/compare/v2.14.0...v2.15.0) (2023-05-03)
+
+
+### Features
+
+* **OverflowScroller:** customize arrow ([#326](https://github.com/gravity-ui/page-constructor/issues/326)) ([edd3dbe](https://github.com/gravity-ui/page-constructor/commit/edd3dbe2b9dfe93a83b21261f4ab8a836e05359a))
+
 ## [2.14.0](https://github.com/gravity-ui/page-constructor/compare/v2.13.1...v2.14.0) (2023-05-02)
 
 

package/build/cjs/models/navigation.d.ts

@@ -11,6 +11,7 @@ export interface NavigationItemBase {
     text: string;
     icon?: ImageProps;
     url?: string;
+    iconSize?: number;
 }
 export declare enum NavigationGithubButtonIcon {
     heart = "octicon-heart",
@@ -61,6 +62,7 @@ export type ThemedNavigationLogoData = NavigationLogoData & ThemeSupporting<Navi
 export interface HeaderData {
     leftItems: NavigationItemModel[];
     rightItems?: NavigationItemModel[];
+    iconSize?: number;
 }
 export interface FooterColumn {
     title: string;

package/build/cjs/navigation/components/Header/Header.js

@@ -25,10 +25,19 @@ const MobileMenuButton = ({ isSidebarOpened, onSidebarOpenedChange, }) => {
             onSidebarOpenedChange(!isSidebarOpened);
         }, size: "l" }, iconProps)));
 };
+const iconSizeKey = 'iconSize';
 const Header = ({ data, logo }) => {
-    const { leftItems, rightItems } = data;
+    const { leftItems, rightItems, iconSize = 20 } = data;
     const [isSidebarOpened, setIsSidebarOpened] = (0, react_1.useState)(false);
     const [activeItemId, setactiveItemId] = (0, react_1.useState)(undefined);
+    const getNavigationItemWithIconSize = (0, react_1.useCallback)((item) => {
+        if (!(iconSizeKey in item)) {
+            return Object.assign(Object.assign({}, item), { iconSize });
+        }
+        return item;
+    }, [iconSize]);
+    const leftItemsWithIconSize = (0, react_1.useMemo)(() => leftItems.map(getNavigationItemWithIconSize), [getNavigationItemWithIconSize, leftItems]);
+    const rightItemsWithIconSize = (0, react_1.useMemo)(() => rightItems === null || rightItems === void 0 ? void 0 : rightItems.map(getNavigationItemWithIconSize), [getNavigationItemWithIconSize, rightItems]);
     const onActiveItemChange = (0, react_1.useCallback)((id) => {
         setactiveItemId(id);
     }, []);
@@ -48,10 +57,10 @@ const Header = ({ data, logo }) => {
                     logo && (react_1.default.createElement("div", { className: b('left') },
                         react_1.default.createElement(Logo_1.default, Object.assign({}, logo, { className: b('logo') })))),
                     react_1.default.createElement("div", { className: b('navigation-container') },
-                        react_1.default.createElement(Navigation_1.default, { className: b('navigation'), links: leftItems, activeItemId: activeItemId, onActiveItemChange: onActiveItemChange })),
+                        react_1.default.createElement(Navigation_1.default, { className: b('navigation'), links: leftItemsWithIconSize, activeItemId: activeItemId, onActiveItemChange: onActiveItemChange })),
                     react_1.default.createElement("div", { className: b('right') },
                         react_1.default.createElement(MobileMenuButton, { isSidebarOpened: isSidebarOpened, onSidebarOpenedChange: onSidebarOpenedChange }),
-                        rightItems && (react_1.default.createElement("ul", { className: b('buttons') }, rightItems.map((button, index) => (react_1.default.createElement(NavigationListItem_1.NavigationListItem, { key: index, className: b('buttons-item'), item: button, index: index, activeItemId: activeItemId, hidePopup: hidePopup, column: constants_1.ItemColumnName.Right, onActiveItemChange: onActiveItemChange })))))),
+                        rightItemsWithIconSize && (react_1.default.createElement("ul", { className: b('buttons') }, rightItemsWithIconSize.map((button, index) => (react_1.default.createElement(NavigationListItem_1.NavigationListItem, { key: index, className: b('buttons-item'), item: button, index: index, activeItemId: activeItemId, hidePopup: hidePopup, column: constants_1.ItemColumnName.Right, onActiveItemChange: onActiveItemChange })))))),
                     react_1.default.createElement(OutsideClick_1.default, { onOutsideClick: () => onSidebarOpenedChange(false) },
                         react_1.default.createElement(MobileNavigation_1.default, { topItems: leftItems, bottomItems: rightItems, isOpened: isSidebarOpened, activeItemId: activeItemId, onActiveItemChange: onActiveItemChange, onClose: hideSidebar })))))));
 };

package/build/cjs/navigation/components/NavigationDropdownItem/NavigationDropdownItem.js

@@ -7,9 +7,9 @@ const NavigationItem_1 = tslib_1.__importDefault(require("../NavigationItem/Navi
 const NavigationPopup_1 = tslib_1.__importDefault(require("../NavigationPopup/NavigationPopup"));
 const NavigationDropdown = ({ className, data, isActive, hidePopup, onClick, }) => {
     const anchorRef = (0, react_1.useRef)(null);
-    const { text, icon, items } = data, popupProps = tslib_1.__rest(data, ["text", "icon", "items"]);
+    const { text, icon, items, iconSize } = data, popupProps = tslib_1.__rest(data, ["text", "icon", "items", "iconSize"]);
     return (react_1.default.createElement(react_1.Fragment, null,
-        react_1.default.createElement(NavigationItem_1.default, { className: className, ref: anchorRef, onClick: onClick, isOpened: isActive, data: { text, type: models_1.NavigationItemType.Dropdown, icon } }),
+        react_1.default.createElement(NavigationItem_1.default, { className: className, ref: anchorRef, onClick: onClick, isOpened: isActive, data: { text, type: models_1.NavigationItemType.Dropdown, icon, iconSize } }),
         react_1.default.createElement(NavigationPopup_1.default, Object.assign({ open: isActive, onClose: hidePopup, items: items, anchorRef: anchorRef }, popupProps))));
 };
 exports.default = NavigationDropdown;

package/build/cjs/navigation/components/NavigationItem/components/ContentWrapper/ContentWrapper.css

@@ -1,7 +1,5 @@
 .pc-content-wrapper__icon {
   display: flex;
-  width: 20px;
-  height: 20px;
-  margin-right: 8px;
+  margin-right: 6px;
   object-fit: cover;
 }

package/build/cjs/navigation/components/NavigationItem/components/ContentWrapper/ContentWrapper.d.ts

@@ -1,6 +1,9 @@
 import React from 'react';
 import { ImageProps } from '../../../../../models';
-export declare const ContentWrapper: React.FC<{
+interface ContentWrapperProps {
     text: string;
     icon?: ImageProps;
-}>;
+    iconSize?: number;
+}
+export declare const ContentWrapper: React.FC<ContentWrapperProps>;
+export {};

package/build/cjs/navigation/components/NavigationItem/components/ContentWrapper/ContentWrapper.js

@@ -6,7 +6,10 @@ const react_1 = tslib_1.__importStar(require("react"));
 const components_1 = require("../../../../../components");
 const utils_1 = require("../../../../../utils");
 const b = (0, utils_1.block)('content-wrapper');
-const ContentWrapper = ({ text, icon }) => (react_1.default.createElement(react_1.Fragment, null,
-    icon && typeof icon !== 'string' && react_1.default.createElement(components_1.Image, Object.assign({ className: b('icon') }, icon)),
-    react_1.default.createElement("span", { className: b('text') }, text)));
+const ContentWrapper = ({ text, icon, iconSize }) => {
+    const iconSizeStyle = (0, react_1.useMemo)(() => (iconSize ? { height: `${iconSize}px`, width: `${iconSize}px` } : {}), [iconSize]);
+    return (react_1.default.createElement(react_1.Fragment, null,
+        icon && typeof icon !== 'string' && (react_1.default.createElement(components_1.Image, Object.assign({ className: b('icon') }, icon, { style: iconSizeStyle }))),
+        react_1.default.createElement("span", { className: b('text') }, text)));
+};
 exports.ContentWrapper = ContentWrapper;

package/build/cjs/navigation/components/NavigationItem/components/NavigationDropdown/NavigationDropdown.js

@@ -10,10 +10,10 @@ const ContentWrapper_1 = require("../ContentWrapper/ContentWrapper");
 const b = (0, utils_2.block)('navigation-dropdown');
 const TOGGLE_ARROW_SIZE = 12;
 exports.NavigationDropdown = react_1.default.forwardRef((_a, ref) => {
-    var { text, icon, isOpened, className } = _a, props = tslib_1.__rest(_a, ["text", "icon", "isOpened", "className"]);
+    var { text, icon, isOpened, className, iconSize } = _a, props = tslib_1.__rest(_a, ["text", "icon", "isOpened", "className", "iconSize"]);
     const iconData = icon && (0, utils_1.getMediaImage)(icon);
     return (react_1.default.createElement("span", Object.assign({ ref: ref }, props, { className: b(null, className) }),
-        react_1.default.createElement(ContentWrapper_1.ContentWrapper, { text: text, icon: iconData }),
+        react_1.default.createElement(ContentWrapper_1.ContentWrapper, { text: text, icon: iconData, iconSize: iconSize }),
         react_1.default.createElement(components_1.ToggleArrow, { className: b('arrow'), size: TOGGLE_ARROW_SIZE, type: 'vertical', iconType: "navigation", open: isOpened })));
 });
 exports.NavigationDropdown.displayName = 'NavigationDropdown';

package/build/cjs/navigation/components/NavigationItem/components/NavigationLink/NavigationLink.js

@@ -12,12 +12,12 @@ const ContentWrapper_1 = require("../ContentWrapper/ContentWrapper");
 const b = (0, utils_2.block)('navigation-link');
 const NavigationLink = (props) => {
     const { hostname, Link } = (0, react_1.useContext)(locationContext_1.LocationContext);
-    const { url, text, icon, arrow, target, className } = props, rest = tslib_1.__rest(props, ["url", "text", "icon", "arrow", "target", "className"]);
+    const { url, text, icon, arrow, target, className, iconSize } = props, rest = tslib_1.__rest(props, ["url", "text", "icon", "arrow", "target", "className", "iconSize"]);
     const linkExtraProps = (0, utils_2.getLinkProps)(url, hostname, target);
     const iconData = icon && (0, utils_1.getMediaImage)(icon);
     const classes = b(null, className);
     const content = (react_1.default.createElement(react_1.Fragment, null,
-        react_1.default.createElement(ContentWrapper_1.ContentWrapper, { text: text, icon: iconData }),
+        react_1.default.createElement(ContentWrapper_1.ContentWrapper, { text: text, icon: iconData, iconSize: iconSize }),
         arrow && react_1.default.createElement(icons_1.NavigationArrow, { className: b('arrow') })));
     if ((linkExtraProps === null || linkExtraProps === void 0 ? void 0 : linkExtraProps.target) || !Link) {
         return (react_1.default.createElement("a", Object.assign({ href: url, title: text, className: classes }, rest, linkExtraProps), content));

package/build/cjs/navigation/schema.d.ts

@@ -56,5 +56,8 @@ export declare const NavigationHeaderProps: {
                 };
             }[];
         };
+        iconSize: {
+            type: string;
+        };
     };
 };

package/build/cjs/navigation/schema.js

@@ -36,6 +36,9 @@ const NavigationItemBaseProps = {
         type: 'string',
         pattern: schema_1.urlPattern,
     },
+    iconSize: {
+        type: 'number',
+    },
 };
 const NavigationItemBaseLinkProps = (0, lodash_1.omit)(NavigationItemBaseProps, ['url']);
 const NavigationLinkItemProps = {
@@ -76,5 +79,8 @@ exports.NavigationHeaderProps = {
     properties: {
         leftItems: NavigationItemProps,
         rightItems: NavigationItemProps,
+        iconSize: {
+            type: 'number',
+        },
     },
 };

package/build/cjs/schema/index.d.ts

@@ -96,6 +96,9 @@ export declare function generateDefaultSchema(config?: SchemaCustomConfig): {
                         };
                     }[];
                 };
+                iconSize: {
+                    type: string;
+                };
             };
         };
         blocks: {

package/build/esm/models/navigation.d.ts

@@ -11,6 +11,7 @@ export interface NavigationItemBase {
     text: string;
     icon?: ImageProps;
     url?: string;
+    iconSize?: number;
 }
 export declare enum NavigationGithubButtonIcon {
     heart = "octicon-heart",
@@ -61,6 +62,7 @@ export type ThemedNavigationLogoData = NavigationLogoData & ThemeSupporting<Navi
 export interface HeaderData {
     leftItems: NavigationItemModel[];
     rightItems?: NavigationItemModel[];
+    iconSize?: number;
 }
 export interface FooterColumn {
     title: string;

package/build/esm/navigation/components/Header/Header.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import Control from '../../../components/Control/Control';
 import OutsideClick from '../../../components/OutsideClick/OutsideClick';
 import { Col, Grid, Row } from '../../../grid';
@@ -22,10 +22,19 @@ const MobileMenuButton = ({ isSidebarOpened, onSidebarOpenedChange, }) => {
             onSidebarOpenedChange(!isSidebarOpened);
         }, size: "l" }, iconProps)));
 };
+const iconSizeKey = 'iconSize';
 export const Header = ({ data, logo }) => {
-    const { leftItems, rightItems } = data;
+    const { leftItems, rightItems, iconSize = 20 } = data;
     const [isSidebarOpened, setIsSidebarOpened] = useState(false);
     const [activeItemId, setactiveItemId] = useState(undefined);
+    const getNavigationItemWithIconSize = useCallback((item) => {
+        if (!(iconSizeKey in item)) {
+            return Object.assign(Object.assign({}, item), { iconSize });
+        }
+        return item;
+    }, [iconSize]);
+    const leftItemsWithIconSize = useMemo(() => leftItems.map(getNavigationItemWithIconSize), [getNavigationItemWithIconSize, leftItems]);
+    const rightItemsWithIconSize = useMemo(() => rightItems === null || rightItems === void 0 ? void 0 : rightItems.map(getNavigationItemWithIconSize), [getNavigationItemWithIconSize, rightItems]);
     const onActiveItemChange = useCallback((id) => {
         setactiveItemId(id);
     }, []);
@@ -45,10 +54,10 @@ export const Header = ({ data, logo }) => {
                     logo && (React.createElement("div", { className: b('left') },
                         React.createElement(Logo, Object.assign({}, logo, { className: b('logo') })))),
                     React.createElement("div", { className: b('navigation-container') },
-                        React.createElement(Navigation, { className: b('navigation'), links: leftItems, activeItemId: activeItemId, onActiveItemChange: onActiveItemChange })),
+                        React.createElement(Navigation, { className: b('navigation'), links: leftItemsWithIconSize, activeItemId: activeItemId, onActiveItemChange: onActiveItemChange })),
                     React.createElement("div", { className: b('right') },
                         React.createElement(MobileMenuButton, { isSidebarOpened: isSidebarOpened, onSidebarOpenedChange: onSidebarOpenedChange }),
-                        rightItems && (React.createElement("ul", { className: b('buttons') }, rightItems.map((button, index) => (React.createElement(NavigationListItem, { key: index, className: b('buttons-item'), item: button, index: index, activeItemId: activeItemId, hidePopup: hidePopup, column: ItemColumnName.Right, onActiveItemChange: onActiveItemChange })))))),
+                        rightItemsWithIconSize && (React.createElement("ul", { className: b('buttons') }, rightItemsWithIconSize.map((button, index) => (React.createElement(NavigationListItem, { key: index, className: b('buttons-item'), item: button, index: index, activeItemId: activeItemId, hidePopup: hidePopup, column: ItemColumnName.Right, onActiveItemChange: onActiveItemChange })))))),
                     React.createElement(OutsideClick, { onOutsideClick: () => onSidebarOpenedChange(false) },
                         React.createElement(MobileNavigation, { topItems: leftItems, bottomItems: rightItems, isOpened: isSidebarOpened, activeItemId: activeItemId, onActiveItemChange: onActiveItemChange, onClose: hideSidebar })))))));
 };

package/build/esm/navigation/components/NavigationDropdownItem/NavigationDropdownItem.js

@@ -5,9 +5,9 @@ import NavigationItem from '../NavigationItem/NavigationItem';
 import NavigationPopup from '../NavigationPopup/NavigationPopup';
 const NavigationDropdown = ({ className, data, isActive, hidePopup, onClick, }) => {
     const anchorRef = useRef(null);
-    const { text, icon, items } = data, popupProps = __rest(data, ["text", "icon", "items"]);
+    const { text, icon, items, iconSize } = data, popupProps = __rest(data, ["text", "icon", "items", "iconSize"]);
     return (React.createElement(Fragment, null,
-        React.createElement(NavigationItem, { className: className, ref: anchorRef, onClick: onClick, isOpened: isActive, data: { text, type: NavigationItemType.Dropdown, icon } }),
+        React.createElement(NavigationItem, { className: className, ref: anchorRef, onClick: onClick, isOpened: isActive, data: { text, type: NavigationItemType.Dropdown, icon, iconSize } }),
         React.createElement(NavigationPopup, Object.assign({ open: isActive, onClose: hidePopup, items: items, anchorRef: anchorRef }, popupProps))));
 };
 export default NavigationDropdown;

package/build/esm/navigation/components/NavigationItem/components/ContentWrapper/ContentWrapper.css

@@ -1,7 +1,5 @@
 .pc-content-wrapper__icon {
   display: flex;
-  width: 20px;
-  height: 20px;
-  margin-right: 8px;
+  margin-right: 6px;
   object-fit: cover;
 }

package/build/esm/navigation/components/NavigationItem/components/ContentWrapper/ContentWrapper.d.ts

@@ -1,7 +1,10 @@
 import React from 'react';
 import { ImageProps } from '../../../../../models';
 import './ContentWrapper.css';
-export declare const ContentWrapper: React.FC<{
+interface ContentWrapperProps {
     text: string;
     icon?: ImageProps;
-}>;
+    iconSize?: number;
+}
+export declare const ContentWrapper: React.FC<ContentWrapperProps>;
+export {};

package/build/esm/navigation/components/NavigationItem/components/ContentWrapper/ContentWrapper.js

@@ -1,8 +1,11 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, useMemo } from 'react';
 import { Image } from '../../../../../components';
 import { block } from '../../../../../utils';
 import './ContentWrapper.css';
 const b = block('content-wrapper');
-export const ContentWrapper = ({ text, icon }) => (React.createElement(Fragment, null,
-    icon && typeof icon !== 'string' && React.createElement(Image, Object.assign({ className: b('icon') }, icon)),
-    React.createElement("span", { className: b('text') }, text)));
+export const ContentWrapper = ({ text, icon, iconSize }) => {
+    const iconSizeStyle = useMemo(() => (iconSize ? { height: `${iconSize}px`, width: `${iconSize}px` } : {}), [iconSize]);
+    return (React.createElement(Fragment, null,
+        icon && typeof icon !== 'string' && (React.createElement(Image, Object.assign({ className: b('icon') }, icon, { style: iconSizeStyle }))),
+        React.createElement("span", { className: b('text') }, text)));
+};

package/build/esm/navigation/components/NavigationItem/components/NavigationDropdown/NavigationDropdown.js

@@ -8,10 +8,10 @@ import './NavigationDropdown.css';
 const b = block('navigation-dropdown');
 const TOGGLE_ARROW_SIZE = 12;
 export const NavigationDropdown = React.forwardRef((_a, ref) => {
-    var { text, icon, isOpened, className } = _a, props = __rest(_a, ["text", "icon", "isOpened", "className"]);
+    var { text, icon, isOpened, className, iconSize } = _a, props = __rest(_a, ["text", "icon", "isOpened", "className", "iconSize"]);
     const iconData = icon && getMediaImage(icon);
     return (React.createElement("span", Object.assign({ ref: ref }, props, { className: b(null, className) }),
-        React.createElement(ContentWrapper, { text: text, icon: iconData }),
+        React.createElement(ContentWrapper, { text: text, icon: iconData, iconSize: iconSize }),
         React.createElement(ToggleArrow, { className: b('arrow'), size: TOGGLE_ARROW_SIZE, type: 'vertical', iconType: "navigation", open: isOpened })));
 });
 NavigationDropdown.displayName = 'NavigationDropdown';

package/build/esm/navigation/components/NavigationItem/components/NavigationLink/NavigationLink.js

@@ -10,12 +10,12 @@ import './NavigationLink.css';
 const b = block('navigation-link');
 export const NavigationLink = (props) => {
     const { hostname, Link } = useContext(LocationContext);
-    const { url, text, icon, arrow, target, className } = props, rest = __rest(props, ["url", "text", "icon", "arrow", "target", "className"]);
+    const { url, text, icon, arrow, target, className, iconSize } = props, rest = __rest(props, ["url", "text", "icon", "arrow", "target", "className", "iconSize"]);
     const linkExtraProps = getLinkProps(url, hostname, target);
     const iconData = icon && getMediaImage(icon);
     const classes = b(null, className);
     const content = (React.createElement(Fragment, null,
-        React.createElement(ContentWrapper, { text: text, icon: iconData }),
+        React.createElement(ContentWrapper, { text: text, icon: iconData, iconSize: iconSize }),
         arrow && React.createElement(NavigationArrow, { className: b('arrow') })));
     if ((linkExtraProps === null || linkExtraProps === void 0 ? void 0 : linkExtraProps.target) || !Link) {
         return (React.createElement("a", Object.assign({ href: url, title: text, className: classes }, rest, linkExtraProps), content));

package/build/esm/navigation/schema.d.ts

@@ -56,5 +56,8 @@ export declare const NavigationHeaderProps: {
                 };
             }[];
         };
+        iconSize: {
+            type: string;
+        };
     };
 };

package/build/esm/navigation/schema.js

@@ -33,6 +33,9 @@ const NavigationItemBaseProps = {
         type: 'string',
         pattern: urlPattern,
     },
+    iconSize: {
+        type: 'number',
+    },
 };
 const NavigationItemBaseLinkProps = omit(NavigationItemBaseProps, ['url']);
 const NavigationLinkItemProps = {
@@ -73,5 +76,8 @@ export const NavigationHeaderProps = {
     properties: {
         leftItems: NavigationItemProps,
         rightItems: NavigationItemProps,
+        iconSize: {
+            type: 'number',
+        },
     },
 };

package/build/esm/schema/index.d.ts

@@ -96,6 +96,9 @@ export declare function generateDefaultSchema(config?: SchemaCustomConfig): {
                         };
                     }[];
                 };
+                iconSize: {
+                    type: string;
+                };
             };
         };
         blocks: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "2.15.0-alpha",
+  "version": "2.16.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {
@@ -138,8 +138,5 @@
     "*.{json,yaml,yml,md}": [
       "prettier --write"
     ]
-  },
-  "publishConfig": {
-    "tag": "alpha"
   }
 }

package/server/models/navigation.d.ts

@@ -11,6 +11,7 @@ export interface NavigationItemBase {
     text: string;
     icon?: ImageProps;
     url?: string;
+    iconSize?: number;
 }
 export declare enum NavigationGithubButtonIcon {
     heart = "octicon-heart",
@@ -61,6 +62,7 @@ export type ThemedNavigationLogoData = NavigationLogoData & ThemeSupporting<Navi
 export interface HeaderData {
     leftItems: NavigationItemModel[];
     rightItems?: NavigationItemModel[];
+    iconSize?: number;
 }
 export interface FooterColumn {
     title: string;

package/styles/variables.scss

@@ -22,6 +22,8 @@ $contentMargin: $indentM;
 $contentLiftIndent: $indentXL;
 $contentLiftIndentMobile: $indentM;
 
+$navigationIconIndent: 6px;
+
 //slider
 $sliderArrowSize: 42px;
 $headerSliderLargeBreakpoint: 1410px;