@teammodlr/ui-kit 2.0.25 → 2.0.27

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

@@ -1,258 +1,258 @@
-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 background = style({
-    zIndex: 100,
-    backgroundColor: 'hsla(0,0%,45.1%,0.7)',
-    position: "fixed",
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-});
-
-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",
-});
-
-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: 'relative',
-        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({
-
+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 background = style({
+    zIndex: 100,
+    backgroundColor: 'hsla(0,0%,45.1%,0.7)',
+    position: "fixed",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+});
+
+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",
+});
+
+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: 'relative',
+        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({
+
 });

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

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