@teammodlr/ui-kit 2.3.12 → 2.3.14

package/src/components/modal/style/Modal.css.ts

@@ -1,318 +1,318 @@
-import {
-    createVar,
-    globalKeyframes,
-    style,
-    styleVariants
-} from '@vanilla-extract/css';
-import { themeVars } from '../../../styles/theme.css';
-
-const sizes = {
-    xs: '300px',
-    sm: '400px',
-    md: '640px',
-    lg: '800px',
-    xl: '1140px'
-};
-
-export const vars = {
-    maxWidth: createVar(),
-    backgroundColor: createVar(),
-    borderColor: createVar(),
-    initialLeft: createVar(),
-    initialTop: createVar()
-};
-
-export const size = styleVariants({
-    xs: {
-        vars: {
-            [vars.maxWidth]: sizes.xs
-        }
-    },
-    sm: {
-        vars: {
-            [vars.maxWidth]: sizes.sm
-        }
-    },
-    md: {
-        vars: {
-            [vars.maxWidth]: sizes.md
-        }
-    },
-    lg: {
-        vars: {
-            [vars.maxWidth]: sizes.lg
-        }
-    },
-    xl: {
-        vars: {
-            [vars.maxWidth]: sizes.xl
-        }
-    }
-});
-
-export const wrapper = style({
-    position: 'fixed',
-    top: 0,
-    insetInlineEnd: 0,
-    bottom: 0,
-    insetInlineStart: 0,
-    overflow: 'auto',
-    outline: 0
-});
-
-export const mask = style({
-    position: 'fixed',
-    top: 0,
-    insetInlineEnd: 0,
-    bottom: 0,
-    insetInlineStart: 0,
-    height: '100%',
-    backgroundColor: 'hsla(0,0%,45.1%,0.7)'
-});
-
-export const modal = style({
-    margin: `0 auto`,
-    padding: 0,
-    boxSizing: 'border-box',
-    position: 'relative',
-    width: 'auto',
-    top: 100,
-    paddingBottom: '24px',
-    maxWidth: `calc(100vw - 32px)`,
-    pointerEvents: 'none'
-});
-
-export const centeredWrapper = style({
-    textAlign: 'center',
-    '::before': {
-        display: 'inline-block',
-        width: 0,
-        height: '100%',
-        verticalAlign: 'middle',
-        content: '""'
-    }
-});
-
-export const centeredModal = style({
-    top: 0,
-    display: 'inline-block',
-    paddingBottom: 0,
-    textAlign: 'start',
-    verticalAlign: 'middle'
-});
-
-export const container = style({
-    backgroundColor: '#fff',
-    width: '100%',
-    maxWidth: vars.maxWidth,
-    borderRadius: themeVars.rounded.medium,
-    boxShadow:
-        '0 1px 2px -2px rgba(0, 0, 0, 0.08), 0 3px 6px 0 rgba(0, 0, 0, 0.06), 0 5px 12px 4px rgba(0, 0, 0, 0.04)',
-    border: `1px solid rgba(0, 0, 0, 0.45)`,
-    display: 'flex',
-    flexDirection: 'column',
-    position: 'relative',
-    gap: themeVars.space[2],
-    pointerEvents: 'auto'
-});
-
-export const hasSidebar = style({
-    flexDirection: 'row'
-});
-
-export const header = style({
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'flex-start',
-    padding: `${themeVars.space[4]} ${themeVars.space[4]} 0 ${themeVars.space[4]}`,
-    flexShrink: '0'
-});
-
-export const title = style({
-    margin: 0,
-    fontSize: `${themeVars.fontSize.xlarge}`,
-    fontWeight: '500',
-    display: 'flex',
-    alignItems: 'center',
-    color: themeVars.color.font.default
-});
-
-export const close = style([
-    {
-        outline: `none ${themeVars.color.gray[300]}`,
-        display: 'inline-block',
-        position: 'absolute',
-        top: themeVars.space[3],
-        right: themeVars.space[3],
-        width: '1.5rem',
-        height: '1.5rem',
-        backgroundColor: 'transparent',
-        border: 'none',
-        padding: 0,
-        cursor: 'pointer',
-        transition: 'all 0.2s',
-        borderRadius: themeVars.rounded.full,
-        marginLeft: themeVars.space[2],
-        ':hover': {
-            backgroundColor: themeVars.color.gray[150]
-        },
-        ':focus': {
-            backgroundColor: themeVars.color.gray[150]
-        },
-        '::before': {
-            content: '""',
-            position: 'absolute',
-            top: '50%',
-            left: '50%',
-            transform: 'translate(-50%, -50%) rotate(45deg)',
-            width: '0.8rem',
-            height: '2px',
-            backgroundColor: themeVars.color.gray[500],
-            transformOrigin: 'center',
-            transition: 'all 0.2s'
-        },
-        '::after': {
-            content: '""',
-            position: 'absolute',
-            top: '50%',
-            left: '50%',
-            transform: 'translate(-50%, -50%) rotate(-45deg)',
-            width: '0.8rem',
-            height: '2px',
-            backgroundColor: themeVars.color.gray[500],
-            transformOrigin: 'center',
-            transition: 'all 0.2s'
-        }
-    }
-]);
-
-export const body = style({
-    padding: `${themeVars.space[4]}`,
-    display: 'flex',
-    flexDirection: 'column',
-    flexGrow: '1',
-    color: themeVars.color.font.text
-});
-
-export const footer = style({
-    display: 'flex',
-    width: '100%',
-    alignItems: 'center',
-    padding: `0 ${themeVars.space[4]} ${themeVars.space[4]} ${themeVars.space[4]}`
-});
-
-const fadeOutBackgroundAnimation = 'fade-out-background-animation';
-globalKeyframes(fadeOutBackgroundAnimation, {
-    from: {
-        opacity: 1
-    },
-    to: {
-        opacity: 0
-    }
-});
-
-const fadeInBackgroundAnimation = 'fade-in-background-animation';
-globalKeyframes(fadeInBackgroundAnimation, {
-    from: {
-        opacity: 0
-    },
-    to: {
-        opacity: 1
-    }
-});
-
-const fadeOutAnimation = 'fade-out-animation';
-globalKeyframes(fadeOutAnimation, {
-    from: {
-        opacity: 1,
-        transform: 'scale(1)'
-    },
-    to: {
-        opacity: 0,
-        transform: 'scale(0.8)'
-    }
-});
-
-const fadeInAnimation = 'fade-in-animation';
-globalKeyframes(fadeInAnimation, {
-    '0%': {
-        opacity: 0,
-        transform: 'scale(0.5)',
-        left: vars.initialLeft,
-        top: vars.initialTop
-    },
-    '70%': {
-        opacity: 1,
-        transform: 'scale(1.03)',
-        left: 0,
-        top: 0
-    },
-    '100%': {
-        opacity: 1,
-        transform: 'scale(1)'
-    }
-});
-
-const fadeInAnimationNoBounce = 'fade-in-animation-no-bounce';
-globalKeyframes(fadeInAnimationNoBounce, {
-    '0%': {
-        opacity: 0,
-        transform: 'scale(0.5)',
-        left: vars.initialLeft,
-        top: vars.initialTop
-    },
-    '60%': {
-        opacity: 1
-    },
-    '100%': {
-        opacity: 1,
-        transform: 'scale(1)',
-        left: 0,
-        top: 0
-    }
-});
-
-export const fadeEnterNoBounce = style({
-    animationName: fadeInAnimationNoBounce,
-    animationDuration: '0.2s',
-    animationTimingFunction: 'ease-in-out',
-    transition: 'transform 0.3s ease-out'
-});
-
-export const fadeEnter = style({
-    animationName: fadeInAnimation,
-    animationDuration: '0.25s',
-    animationTimingFunction: 'ease-in-out',
-    transition: themeVars.transition.default
-});
-
-export const fadeLeave = style({
-    animationName: fadeOutAnimation,
-    animationDuration: '0.2s',
-    animationTimingFunction: 'ease-in-out'
-});
-
-export const fadeBackgroundEnter = style({
-    animationName: fadeInBackgroundAnimation,
-    animationDuration: '0.1s',
-    animationTimingFunction: 'ease-in-out'
-});
-
-export const fadeBackgroundLeave = style({
-    animationName: fadeOutBackgroundAnimation,
-    animationDuration: '0.2s',
-    animationTimingFunction: 'ease-in-out'
-});
-
-export const fadeEnterFrom = style({});
-
-export const sidebar = style({
-    borderRadius: `0 ${themeVars.rounded.medium} ${themeVars.rounded.medium} 0`
-});
-
-export const content = style({
-    flex: 1,
-    width: '100%',
-    display: 'flex',
-    flexDirection: 'column'
-});
+import {
+    createVar,
+    globalKeyframes,
+    style,
+    styleVariants
+} from '@vanilla-extract/css';
+import { themeVars } from '../../../styles/theme.css';
+
+const sizes = {
+    xs: '300px',
+    sm: '400px',
+    md: '640px',
+    lg: '800px',
+    xl: '1140px'
+};
+
+export const vars = {
+    maxWidth: createVar(),
+    backgroundColor: createVar(),
+    borderColor: createVar(),
+    initialLeft: createVar(),
+    initialTop: createVar()
+};
+
+export const size = styleVariants({
+    xs: {
+        vars: {
+            [vars.maxWidth]: sizes.xs
+        }
+    },
+    sm: {
+        vars: {
+            [vars.maxWidth]: sizes.sm
+        }
+    },
+    md: {
+        vars: {
+            [vars.maxWidth]: sizes.md
+        }
+    },
+    lg: {
+        vars: {
+            [vars.maxWidth]: sizes.lg
+        }
+    },
+    xl: {
+        vars: {
+            [vars.maxWidth]: sizes.xl
+        }
+    }
+});
+
+export const wrapper = style({
+    position: 'fixed',
+    top: 0,
+    insetInlineEnd: 0,
+    bottom: 0,
+    insetInlineStart: 0,
+    overflow: 'auto',
+    outline: 0
+});
+
+export const mask = style({
+    position: 'fixed',
+    top: 0,
+    insetInlineEnd: 0,
+    bottom: 0,
+    insetInlineStart: 0,
+    height: '100%',
+    backgroundColor: 'hsla(0,0%,45.1%,0.7)'
+});
+
+export const modal = style({
+    margin: `0 auto`,
+    padding: 0,
+    boxSizing: 'border-box',
+    position: 'relative',
+    width: 'auto',
+    top: 100,
+    paddingBottom: '24px',
+    maxWidth: `calc(100vw - 32px)`,
+    pointerEvents: 'none'
+});
+
+export const centeredWrapper = style({
+    textAlign: 'center',
+    '::before': {
+        display: 'inline-block',
+        width: 0,
+        height: '100%',
+        verticalAlign: 'middle',
+        content: '""'
+    }
+});
+
+export const centeredModal = style({
+    top: 0,
+    display: 'inline-block',
+    paddingBottom: 0,
+    textAlign: 'start',
+    verticalAlign: 'middle'
+});
+
+export const container = style({
+    backgroundColor: '#fff',
+    width: '100%',
+    maxWidth: vars.maxWidth,
+    borderRadius: themeVars.rounded.medium,
+    boxShadow:
+        '0 1px 2px -2px rgba(0, 0, 0, 0.08), 0 3px 6px 0 rgba(0, 0, 0, 0.06), 0 5px 12px 4px rgba(0, 0, 0, 0.04)',
+    border: `1px solid rgba(0, 0, 0, 0.45)`,
+    display: 'flex',
+    flexDirection: 'column',
+    position: 'relative',
+    gap: themeVars.space[2],
+    pointerEvents: 'auto'
+});
+
+export const hasSidebar = style({
+    flexDirection: 'row'
+});
+
+export const header = style({
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    padding: `${themeVars.space[4]} ${themeVars.space[4]} 0 ${themeVars.space[4]}`,
+    flexShrink: '0'
+});
+
+export const title = style({
+    margin: 0,
+    fontSize: `${themeVars.fontSize.xlarge}`,
+    fontWeight: '500',
+    display: 'flex',
+    alignItems: 'center',
+    color: themeVars.color.font.default
+});
+
+export const close = style([
+    {
+        outline: `none ${themeVars.color.gray[300]}`,
+        display: 'inline-block',
+        position: 'absolute',
+        top: themeVars.space[3],
+        right: themeVars.space[3],
+        width: '1.5rem',
+        height: '1.5rem',
+        backgroundColor: 'transparent',
+        border: 'none',
+        padding: 0,
+        cursor: 'pointer',
+        transition: 'all 0.2s',
+        borderRadius: themeVars.rounded.full,
+        marginLeft: themeVars.space[2],
+        ':hover': {
+            backgroundColor: themeVars.color.gray[150]
+        },
+        ':focus': {
+            backgroundColor: themeVars.color.gray[150]
+        },
+        '::before': {
+            content: '""',
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%) rotate(45deg)',
+            width: '0.8rem',
+            height: '2px',
+            backgroundColor: themeVars.color.gray[500],
+            transformOrigin: 'center',
+            transition: 'all 0.2s'
+        },
+        '::after': {
+            content: '""',
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%) rotate(-45deg)',
+            width: '0.8rem',
+            height: '2px',
+            backgroundColor: themeVars.color.gray[500],
+            transformOrigin: 'center',
+            transition: 'all 0.2s'
+        }
+    }
+]);
+
+export const body = style({
+    padding: `${themeVars.space[4]}`,
+    display: 'flex',
+    flexDirection: 'column',
+    flexGrow: '1',
+    color: themeVars.color.font.text
+});
+
+export const footer = style({
+    display: 'flex',
+    width: '100%',
+    alignItems: 'center',
+    padding: `0 ${themeVars.space[4]} ${themeVars.space[4]} ${themeVars.space[4]}`
+});
+
+const fadeOutBackgroundAnimation = 'fade-out-background-animation';
+globalKeyframes(fadeOutBackgroundAnimation, {
+    from: {
+        opacity: 1
+    },
+    to: {
+        opacity: 0
+    }
+});
+
+const fadeInBackgroundAnimation = 'fade-in-background-animation';
+globalKeyframes(fadeInBackgroundAnimation, {
+    from: {
+        opacity: 0
+    },
+    to: {
+        opacity: 1
+    }
+});
+
+const fadeOutAnimation = 'fade-out-animation';
+globalKeyframes(fadeOutAnimation, {
+    from: {
+        opacity: 1,
+        transform: 'scale(1)'
+    },
+    to: {
+        opacity: 0,
+        transform: 'scale(0.8)'
+    }
+});
+
+const fadeInAnimation = 'fade-in-animation';
+globalKeyframes(fadeInAnimation, {
+    '0%': {
+        opacity: 0,
+        transform: 'scale(0.5)',
+        left: vars.initialLeft,
+        top: vars.initialTop
+    },
+    '70%': {
+        opacity: 1,
+        transform: 'scale(1.03)',
+        left: 0,
+        top: 0
+    },
+    '100%': {
+        opacity: 1,
+        transform: 'scale(1)'
+    }
+});
+
+const fadeInAnimationNoBounce = 'fade-in-animation-no-bounce';
+globalKeyframes(fadeInAnimationNoBounce, {
+    '0%': {
+        opacity: 0,
+        transform: 'scale(0.5)',
+        left: vars.initialLeft,
+        top: vars.initialTop
+    },
+    '60%': {
+        opacity: 1
+    },
+    '100%': {
+        opacity: 1,
+        transform: 'scale(1)',
+        left: 0,
+        top: 0
+    }
+});
+
+export const fadeEnterNoBounce = style({
+    animationName: fadeInAnimationNoBounce,
+    animationDuration: '0.2s',
+    animationTimingFunction: 'ease-in-out',
+    transition: 'transform 0.3s ease-out'
+});
+
+export const fadeEnter = style({
+    animationName: fadeInAnimation,
+    animationDuration: '0.25s',
+    animationTimingFunction: 'ease-in-out',
+    transition: themeVars.transition.default
+});
+
+export const fadeLeave = style({
+    animationName: fadeOutAnimation,
+    animationDuration: '0.2s',
+    animationTimingFunction: 'ease-in-out'
+});
+
+export const fadeBackgroundEnter = style({
+    animationName: fadeInBackgroundAnimation,
+    animationDuration: '0.1s',
+    animationTimingFunction: 'ease-in-out'
+});
+
+export const fadeBackgroundLeave = style({
+    animationName: fadeOutBackgroundAnimation,
+    animationDuration: '0.2s',
+    animationTimingFunction: 'ease-in-out'
+});
+
+export const fadeEnterFrom = style({});
+
+export const sidebar = style({
+    borderRadius: `0 ${themeVars.rounded.medium} ${themeVars.rounded.medium} 0`
+});
+
+export const content = style({
+    flex: 1,
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'column'
+});

package/src/components/modal/style/index.ts

@@ -1 +1 @@
-export * from './Modal.css';
+export * from './Modal.css';