@true-engineering/true-react-common-ui-kit 3.45.2 → 4.0.0-alpha1

package/src/components/Modal/Modal.styles.ts

@@ -1,318 +1,318 @@
-import { rgba } from '../../helpers';
-import { colors, dimensions, ITweakStyles, createThemedStyles } from '../../theme';
-import { IIconButtonStyles } from '../IconButton';
-
-const VERTICAL_OVERLAY_PADDING = 50;
-
-const MODAL_HORIZONTAL_PADDING_L = 40;
-const MODAL_HORIZONTAL_PADDING_M = 36;
-const MODAL_HORIZONTAL_PADDING_S = 26;
-
-const MODAL_CLOSE_BUTTON_SIZE = 40;
-const MODAL_CLOSE_BUTTON_ICON_SIZE = 30;
-
-export const useStyles = createThemedStyles('Modal', {
-  root: {},
-
-  fixedPosition: {
-    position: 'fixed',
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-    zIndex: 999,
-    overflowX: 'hidden',
-    '-webkit-overflow-scrolling': 'touch',
-
-    '& $innerOverlay': {
-      display: 'flex',
-      width: '100%',
-      minHeight: '100%',
-      boxSizing: 'border-box',
-    },
-  },
-
-  innerOverlay: {},
-
-  sideBar: {
-    '& $modal': {
-      borderRadius: 0,
-      margin: 0,
-      minHeight: '100%',
-    },
-  },
-
-  'position-static': {},
-
-  'position-left': {},
-
-  'position-right': {
-    justifyContent: 'flex-end',
-  },
-
-  'position-center': {
-    padding: [VERTICAL_OVERLAY_PADDING, 30],
-  },
-
-  overlay: {
-    backgroundColor: rgba(colors.BORDER_MAIN, 0.5),
-  },
-
-  modal: {
-    backgroundColor: colors.CLASSIC_WHITE,
-    borderRadius: dimensions.BORDER_RADIUS_LARGE,
-    boxShadow: `0 8px 32px -8px ${rgba(colors.FONT_MAIN, 0.24)}, 0 -2px 6px 0 ${rgba(
-      colors.FONT_MAIN,
-      0.04,
-    )}, 0 0 1px 0 ${rgba(colors.FONT_MAIN, 0.15)}`,
-    margin: 'auto',
-    position: 'relative',
-    // do not override this
-    maxWidth: '100%',
-  },
-
-  title: {
-    fontSize: 28,
-    lineHeight: 1.3,
-    marginTop: 0,
-  },
-
-  titleWithCloseButton: {
-    paddingRight: 32,
-  },
-
-  close: {
-    position: 'absolute',
-  },
-
-  content: {},
-
-  footer: {
-    display: 'flex',
-    gap: 12,
-  },
-
-  stickyFooterWrapper: {
-    position: 'sticky',
-    bottom: 0,
-    marginTop: 'auto',
-    zIndex: 1,
-  },
-
-  stickyFooter: {
-    borderTop: [1, 'solid', colors.BORDER_LIGHT],
-    padding: [16, 40],
-    borderBottomLeftRadius: dimensions.BORDER_RADIUS_LARGE,
-    borderBottomRightRadius: dimensions.BORDER_RADIUS_LARGE,
-    backgroundColor: colors.CLASSIC_WHITE,
-  },
-
-  'buttons-left': {
-    justifyContent: 'flex-start',
-  },
-
-  'buttons-center': {
-    justifyContent: 'center',
-  },
-
-  'buttons-right': {
-    justifyContent: 'flex-end',
-  },
-
-  withoutFooter: {},
-
-  withStickyFooter: {
-    display: 'flex',
-    flexDirection: 'column',
-
-    '& $content': {
-      position: 'relative',
-      zIndex: 1,
-    },
-  },
-
-  footerWrapper: {},
-
-  l: {
-    '& $modal': {
-      padding: [36, MODAL_HORIZONTAL_PADDING_L],
-      fontSize: 16,
-      width: 560,
-
-      '&$withStickyFooter': {
-        paddingBottom: 0,
-      },
-    },
-
-    '& $withoutFooter': {
-      paddingBottom: 54,
-    },
-
-    '& $title': {
-      fontSize: 28,
-      marginBottom: 32,
-    },
-
-    '& $close': {
-      right: 27,
-      top: 22,
-    },
-
-    '& $footerWrapper': {
-      paddingTop: 40,
-    },
-
-    '& $stickyFooter': {
-      paddingLeft: MODAL_HORIZONTAL_PADDING_L,
-      paddingRight: MODAL_HORIZONTAL_PADDING_L,
-      marginLeft: -MODAL_HORIZONTAL_PADDING_L,
-      marginRight: -MODAL_HORIZONTAL_PADDING_L,
-    },
-  },
-
-  m: {
-    '& $modal': {
-      padding: [32, MODAL_HORIZONTAL_PADDING_M],
-      width: 480,
-
-      '&$withStickyFooter': {
-        paddingBottom: 0,
-      },
-    },
-
-    '& $withoutFooter': {
-      paddingBottom: 48,
-    },
-
-    '& $title': {
-      fontSize: 24,
-      marginBottom: 28,
-    },
-
-    '& $close': {
-      right: 23,
-      top: 18,
-    },
-
-    '& $footerWrapper': {
-      paddingTop: 36,
-    },
-
-    '& $stickyFooter': {
-      paddingLeft: MODAL_HORIZONTAL_PADDING_M,
-      paddingRight: MODAL_HORIZONTAL_PADDING_M,
-      marginLeft: -MODAL_HORIZONTAL_PADDING_M,
-      marginRight: -MODAL_HORIZONTAL_PADDING_M,
-    },
-  },
-
-  s: {
-    '& $modal': {
-      padding: [24, MODAL_HORIZONTAL_PADDING_S],
-      fontSize: 14,
-      width: 360,
-
-      '&$withStickyFooter': {
-        paddingBottom: 0,
-      },
-    },
-
-    '& $withoutFooter': {
-      paddingBottom: 40,
-    },
-
-    '& $title': {
-      fontSize: 20,
-      marginBottom: 15,
-    },
-
-    '& $close': {
-      right: 14,
-      top: 11,
-    },
-
-    '& $footerWrapper': {
-      paddingTop: 28,
-    },
-
-    '& $stickyFooter': {
-      paddingLeft: MODAL_HORIZONTAL_PADDING_S,
-      paddingRight: MODAL_HORIZONTAL_PADDING_S,
-      marginLeft: -MODAL_HORIZONTAL_PADDING_S,
-      marginRight: -MODAL_HORIZONTAL_PADDING_S,
-    },
-  },
-
-  modalWrapper: {
-    display: 'flex',
-    width: '100%',
-  },
-
-  // TODO: вынести анимацию ?
-  /* ----------- SHOW / HIDE ANIMATION ----------- */
-  animationEnd: {
-    '& $modal': {
-      opacity: 0,
-    },
-
-    '& $position-center $modal': {
-      transform: 'translateY(35px)',
-    },
-
-    '& $position-right $modal': {
-      transform: 'translateX(35px)',
-    },
-
-    '& $position-left $modal': {
-      transform: 'translateX(-35px)',
-    },
-
-    '& $overlay': {
-      opacity: 0,
-    },
-  },
-
-  animationStart: {
-    '& $modal': {
-      opacity: 1,
-      transition: '0.15s ease',
-      transitionProperty: 'transform, opacity',
-    },
-
-    '& $position-center $modal': {
-      transform: 'translateY(0)',
-    },
-
-    '& $position-right $modal': {
-      transform: 'translateX(0)',
-    },
-
-    '& $position-left $modal': {
-      transform: 'translateX(0)',
-    },
-
-    '& $overlay': {
-      opacity: 1,
-      transition: 'opacity 0.2s ease',
-    },
-  },
-
-  'modal-enter': { extend: 'animationEnd' },
-  'modal-enter-active': { extend: 'animationStart' },
-  'modal-exit': { extend: 'animationStart' },
-  'modal-exit-active': { extend: 'animationEnd' },
-});
-
-export const closeButtonStyles: IIconButtonStyles = {
-  m: {
-    width: MODAL_CLOSE_BUTTON_SIZE,
-    height: MODAL_CLOSE_BUTTON_SIZE,
-  },
-
-  icon: {
-    width: MODAL_CLOSE_BUTTON_ICON_SIZE,
-    height: MODAL_CLOSE_BUTTON_ICON_SIZE,
-  },
-};
-
-export type IModalStyles = ITweakStyles<typeof useStyles, { tweakCloseButton: IIconButtonStyles }>;
+import { rgba } from '../../helpers';
+import { colors, dimensions, ITweakStyles, createThemedStyles } from '../../theme';
+import { IIconButtonStyles } from '../IconButton';
+
+const VERTICAL_OVERLAY_PADDING = 50;
+
+const MODAL_HORIZONTAL_PADDING_L = 40;
+const MODAL_HORIZONTAL_PADDING_M = 36;
+const MODAL_HORIZONTAL_PADDING_S = 26;
+
+const MODAL_CLOSE_BUTTON_SIZE = 40;
+const MODAL_CLOSE_BUTTON_ICON_SIZE = 30;
+
+export const useStyles = createThemedStyles('Modal', {
+  root: {},
+
+  fixedPosition: {
+    position: 'fixed',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    zIndex: 999,
+    overflowX: 'hidden',
+    '-webkit-overflow-scrolling': 'touch',
+
+    '& $innerOverlay': {
+      display: 'flex',
+      width: '100%',
+      minHeight: '100%',
+      boxSizing: 'border-box',
+    },
+  },
+
+  innerOverlay: {},
+
+  sideBar: {
+    '& $modal': {
+      borderRadius: 0,
+      margin: 0,
+      minHeight: '100%',
+    },
+  },
+
+  'position-static': {},
+
+  'position-left': {},
+
+  'position-right': {
+    justifyContent: 'flex-end',
+  },
+
+  'position-center': {
+    padding: [VERTICAL_OVERLAY_PADDING, 30],
+  },
+
+  overlay: {
+    backgroundColor: rgba(colors.BORDER_MAIN, 0.5),
+  },
+
+  modal: {
+    backgroundColor: colors.CLASSIC_WHITE,
+    borderRadius: dimensions.BORDER_RADIUS_LARGE,
+    boxShadow: `0 8px 32px -8px ${rgba(colors.FONT_MAIN, 0.24)}, 0 -2px 6px 0 ${rgba(
+      colors.FONT_MAIN,
+      0.04,
+    )}, 0 0 1px 0 ${rgba(colors.FONT_MAIN, 0.15)}`,
+    margin: 'auto',
+    position: 'relative',
+    // do not override this
+    maxWidth: '100%',
+  },
+
+  title: {
+    fontSize: 28,
+    lineHeight: 1.3,
+    marginTop: 0,
+  },
+
+  titleWithCloseButton: {
+    paddingRight: 32,
+  },
+
+  close: {
+    position: 'absolute',
+  },
+
+  content: {},
+
+  footer: {
+    display: 'flex',
+    gap: 12,
+  },
+
+  stickyFooterWrapper: {
+    position: 'sticky',
+    bottom: 0,
+    marginTop: 'auto',
+    zIndex: 1,
+  },
+
+  stickyFooter: {
+    borderTop: [1, 'solid', colors.BORDER_LIGHT],
+    padding: [16, 40],
+    borderBottomLeftRadius: dimensions.BORDER_RADIUS_LARGE,
+    borderBottomRightRadius: dimensions.BORDER_RADIUS_LARGE,
+    backgroundColor: colors.CLASSIC_WHITE,
+  },
+
+  'buttons-left': {
+    justifyContent: 'flex-start',
+  },
+
+  'buttons-center': {
+    justifyContent: 'center',
+  },
+
+  'buttons-right': {
+    justifyContent: 'flex-end',
+  },
+
+  withoutFooter: {},
+
+  withStickyFooter: {
+    display: 'flex',
+    flexDirection: 'column',
+
+    '& $content': {
+      position: 'relative',
+      zIndex: 1,
+    },
+  },
+
+  footerWrapper: {},
+
+  l: {
+    '& $modal': {
+      padding: [36, MODAL_HORIZONTAL_PADDING_L],
+      fontSize: 16,
+      width: 560,
+
+      '&$withStickyFooter': {
+        paddingBottom: 0,
+      },
+    },
+
+    '& $withoutFooter': {
+      paddingBottom: 54,
+    },
+
+    '& $title': {
+      fontSize: 28,
+      marginBottom: 32,
+    },
+
+    '& $close': {
+      right: 27,
+      top: 22,
+    },
+
+    '& $footerWrapper': {
+      paddingTop: 40,
+    },
+
+    '& $stickyFooter': {
+      paddingLeft: MODAL_HORIZONTAL_PADDING_L,
+      paddingRight: MODAL_HORIZONTAL_PADDING_L,
+      marginLeft: -MODAL_HORIZONTAL_PADDING_L,
+      marginRight: -MODAL_HORIZONTAL_PADDING_L,
+    },
+  },
+
+  m: {
+    '& $modal': {
+      padding: [32, MODAL_HORIZONTAL_PADDING_M],
+      width: 480,
+
+      '&$withStickyFooter': {
+        paddingBottom: 0,
+      },
+    },
+
+    '& $withoutFooter': {
+      paddingBottom: 48,
+    },
+
+    '& $title': {
+      fontSize: 24,
+      marginBottom: 28,
+    },
+
+    '& $close': {
+      right: 23,
+      top: 18,
+    },
+
+    '& $footerWrapper': {
+      paddingTop: 36,
+    },
+
+    '& $stickyFooter': {
+      paddingLeft: MODAL_HORIZONTAL_PADDING_M,
+      paddingRight: MODAL_HORIZONTAL_PADDING_M,
+      marginLeft: -MODAL_HORIZONTAL_PADDING_M,
+      marginRight: -MODAL_HORIZONTAL_PADDING_M,
+    },
+  },
+
+  s: {
+    '& $modal': {
+      padding: [24, MODAL_HORIZONTAL_PADDING_S],
+      fontSize: 14,
+      width: 360,
+
+      '&$withStickyFooter': {
+        paddingBottom: 0,
+      },
+    },
+
+    '& $withoutFooter': {
+      paddingBottom: 40,
+    },
+
+    '& $title': {
+      fontSize: 20,
+      marginBottom: 15,
+    },
+
+    '& $close': {
+      right: 14,
+      top: 11,
+    },
+
+    '& $footerWrapper': {
+      paddingTop: 28,
+    },
+
+    '& $stickyFooter': {
+      paddingLeft: MODAL_HORIZONTAL_PADDING_S,
+      paddingRight: MODAL_HORIZONTAL_PADDING_S,
+      marginLeft: -MODAL_HORIZONTAL_PADDING_S,
+      marginRight: -MODAL_HORIZONTAL_PADDING_S,
+    },
+  },
+
+  modalWrapper: {
+    display: 'flex',
+    width: '100%',
+  },
+
+  // TODO: вынести анимацию ?
+  /* ----------- SHOW / HIDE ANIMATION ----------- */
+  animationEnd: {
+    '& $modal': {
+      opacity: 0,
+    },
+
+    '& $position-center $modal': {
+      transform: 'translateY(35px)',
+    },
+
+    '& $position-right $modal': {
+      transform: 'translateX(35px)',
+    },
+
+    '& $position-left $modal': {
+      transform: 'translateX(-35px)',
+    },
+
+    '& $overlay': {
+      opacity: 0,
+    },
+  },
+
+  animationStart: {
+    '& $modal': {
+      opacity: 1,
+      transition: '0.15s ease',
+      transitionProperty: 'transform, opacity',
+    },
+
+    '& $position-center $modal': {
+      transform: 'translateY(0)',
+    },
+
+    '& $position-right $modal': {
+      transform: 'translateX(0)',
+    },
+
+    '& $position-left $modal': {
+      transform: 'translateX(0)',
+    },
+
+    '& $overlay': {
+      opacity: 1,
+      transition: 'opacity 0.2s ease',
+    },
+  },
+
+  'modal-enter': { extend: 'animationEnd' },
+  'modal-enter-active': { extend: 'animationStart' },
+  'modal-exit': { extend: 'animationStart' },
+  'modal-exit-active': { extend: 'animationEnd' },
+});
+
+export const closeButtonStyles: IIconButtonStyles = {
+  m: {
+    width: MODAL_CLOSE_BUTTON_SIZE,
+    height: MODAL_CLOSE_BUTTON_SIZE,
+  },
+
+  icon: {
+    width: MODAL_CLOSE_BUTTON_ICON_SIZE,
+    height: MODAL_CLOSE_BUTTON_ICON_SIZE,
+  },
+};
+
+export type IModalStyles = ITweakStyles<typeof useStyles, { tweakCloseButton: IIconButtonStyles }>;