@teammodlr/ui-kit 2.0.25 → 2.0.28

package/src/components/pagination/style/Pagination.css.ts

@@ -1,88 +1,88 @@
-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 = {
-    backgroundColor: createVar(),
-    color: createVar(),
-}
-
-export const pagination = style({
-    display: "inline-flex",
-    alignItems: "center",
-    fontSize: themeVars.fontSize.small,
-    boxSizing: "border-box"
-});
-
-export const buttons = style({
-    display: "inline-flex",
-    alignItems: "center",
-    fontSize: themeVars.fontSize.small,
-    boxSizing: "border-box",
-    gap: themeVars.space["2.5"]
-});
-
-export const pages = style({
-    display: "inline-flex",
-    alignItems: "center",
-    margin: 0,
-    gap: themeVars.space["1"]
-});
-
-export const page = style({
-    vars: {
-        [vars.backgroundColor]: "transparent",
-        [vars.color]: themeVars.color.gray["700"]
-    },
-    height: "28px",
-    width: "28px",
-    borderRadius: themeVars.rounded.default,
-    outline: "none",
-    border: "none",
-    fontSize: 'inherit',
-    padding: `0px ${themeVars.space["2"]}`,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    lineHeight: 1,
-    color: vars.color,
-    backgroundColor: vars.backgroundColor,
-    cursor: "pointer",
-    selectors: {
-        '&:hover': {
-            vars: {
-                [vars.backgroundColor]: themeVars.color.gray["150"],
-            }
-        }
-    }
-});
-
-export const active = style({
-    vars: {
-        [vars.backgroundColor]: themeVars.color.blue["600"],
-        [vars.color]: "#FFF"
-    },
-    selectors: {
-        '&:hover': {
-            vars: {
-                [vars.backgroundColor]: themeVars.color.blue["700"],
-            }
-        }
-    }
-});
-
-export const svg = style({
-    height: "calc(1em + 2px)",
-    width: "calc(1em + 2px)",
-    display: "inline-block",
-    fontSize: "inherit",
-    userSelect: "none",
-
+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 = {
+    backgroundColor: createVar(),
+    color: createVar(),
+}
+
+export const pagination = style({
+    display: "inline-flex",
+    alignItems: "center",
+    fontSize: themeVars.fontSize.small,
+    boxSizing: "border-box"
+});
+
+export const buttons = style({
+    display: "inline-flex",
+    alignItems: "center",
+    fontSize: themeVars.fontSize.small,
+    boxSizing: "border-box",
+    gap: themeVars.space["2.5"]
+});
+
+export const pages = style({
+    display: "inline-flex",
+    alignItems: "center",
+    margin: 0,
+    gap: themeVars.space["1"]
+});
+
+export const page = style({
+    vars: {
+        [vars.backgroundColor]: "transparent",
+        [vars.color]: themeVars.color.gray["700"]
+    },
+    height: "28px",
+    width: "28px",
+    borderRadius: themeVars.rounded.default,
+    outline: "none",
+    border: "none",
+    fontSize: 'inherit',
+    padding: `0px ${themeVars.space["2"]}`,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    lineHeight: 1,
+    color: vars.color,
+    backgroundColor: vars.backgroundColor,
+    cursor: "pointer",
+    selectors: {
+        '&:hover': {
+            vars: {
+                [vars.backgroundColor]: themeVars.color.gray["150"],
+            }
+        }
+    }
+});
+
+export const active = style({
+    vars: {
+        [vars.backgroundColor]: themeVars.color.blue["600"],
+        [vars.color]: "#FFF"
+    },
+    selectors: {
+        '&:hover': {
+            vars: {
+                [vars.backgroundColor]: themeVars.color.blue["700"],
+            }
+        }
+    }
+});
+
+export const svg = style({
+    height: "calc(1em + 2px)",
+    width: "calc(1em + 2px)",
+    display: "inline-block",
+    fontSize: "inherit",
+    userSelect: "none",
+
 });

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

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

package/src/components/radio/Checkbox.css

@@ -1,185 +1,185 @@
-.m-checkbox {
-    --checkbox-width: 22px;
-    --checkbox-height: 22px;
-    --checkbox-border-radius: 6px;
-    --checkbox-border-width: 1px;
-    --checkbox-background-color: var(--white);
-    --checkbox-border-color: var(--gray-300);
-    --checkbox-gap: 6px;
-
-    --checkbox-tick-width: 4px;
-    --checkbox-tick-height: 10px;
-    --checkbox-tick-height-negative: -10px;
-
-    --checkbox-tick-top: 8px;
-    --checkbox-tick-left: 3px;
-    --checkbox-tick-border-width: 3px;
-
-    display: flex;
-    align-items: center;
-    position: relative;
-    font-weight: bold;
-    cursor: pointer;
-    gap: var(--checkbox-gap);
-}
-
-.m-checkbox.m-checkbox--xs {
-    --checkbox-width: 16px;
-    --checkbox-height: 16px;
-    --checkbox-border-radius: 4px;
-    --checkbox-border-width: 1px;
-    --checkbox-tick-top: 6px;
-    --checkbox-tick-left: 1px;
-
-    --checkbox-tick-width: 3px;
-    --checkbox-tick-height: 8px;
-    --checkbox-tick-height-negative: -8px;
-}
-
-.m-checkbox.m-checkbox--sm {
-    --checkbox-width: 20px;
-    --checkbox-height: 20px;
-    --checkbox-border-radius: 4px;
-    --checkbox-border-width: 1px;
-    --checkbox-tick-top: 7px;
-    --checkbox-tick-left: 2px;
-}
-
-.m-checkbox.m-checkbox--lg {
-    --checkbox-width: 26px;
-    --checkbox-height: 26px;
-    --checkbox-border-radius: 8px;
-    --checkbox-border-width: 1px;
-
-    --checkbox-tick-top: 10px;
-    --checkbox-tick-left: 3px;
-
-    --checkbox-tick-border-width: 4px;
-    --checkbox-tick-width: 4px;
-    --checkbox-tick-height: 14px;
-    --checkbox-tick-height-negative: -14px;
-}
-
-.m-checkbox.m-checkbox--xl {
-    --checkbox-width: 32px;
-    --checkbox-height: 32px;
-    --checkbox-border-radius: 8px;
-    --checkbox-border-width: 1px;
-
-    --checkbox-tick-top: 14px;
-    --checkbox-tick-left: 5px;
-
-    --checkbox-tick-border-width: 4px;
-    --checkbox-tick-width: 5px;
-    --checkbox-tick-height: 16px;
-    --checkbox-tick-height-negative: -16px;
-}
-
-.m-checkbox.m-checkbox--blue.m-checkbox--checked {
-    --checkbox-background-color: var(--blue);
-    --checkbox-border-color: var(--blue);
-}
-
-.m-checkbox.m-checkbox--green.m-checkbox--checked {
-    --checkbox-background-color: var(--green);
-    --checkbox-border-color: var(--green);
-}
-
-.m-checkbox.m-checkbox--red.m-checkbox--checked {
-    --checkbox-background-color: var(--red);
-    --checkbox-border-color: var(--red);
-}
-
-.m-checkbox.m-checkbox--yellow.m-checkbox--checked {
-    --checkbox-background-color: var(--yellow);
-    --checkbox-border-color: var(--yellow);
-}
-
-.m-checkbox input {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    height: 0;
-    width: 0;
-    display: none;
-}
-
-.m-checkbox span {
-    display: flex;
-    height: var(--checkbox-height);
-    width: var(--checkbox-width);
-    border-radius: var(--checkbox-border-radius);
-    border: var(--checkbox-border-width) solid var(--checkbox-border-color);
-    background-color: var(--checkbox-background-color);
-    transition: all 125ms cubic-bezier(0.4, 0, 0.2, 1);
-    position: relative;
-}
-
-.m-checkbox:hover:not(.m-checkbox--checked):not(.m-checkbox--disabled) span {
-    --checkbox-border-color: var(--gray-400);
-    --checkbox-background-color: var(--gray-100);
-}
-
-.m-checkbox.m-checkbox--disabled span, 
-.m-checkbox.m-checkbox--disabled .m-checkbox__label {
-    cursor: not-allowed;
-}
-
-.m-checkbox.m-checkbox--disabled span {
-    opacity: 0.6;
-}
-
-.m-checkbox:not(.m-checkbox--checked).m-checkbox--disabled span {
-    --checkbox-border-color: var(--gray-300);
-    --checkbox-background-color: var(--gray-100);
-}
-
-.m-checkbox.m-checkbox--checked span {
-    background-color: var(--checkbox-background-color);
-    border-color: var(--checkbox-background-color);
-}
-
-.m-checkbox.m-checkbox--checked span::before {
-    content: "";
-    position: absolute;
-    transform: rotate(45deg);
-    border-right: var(--checkbox-tick-border-width) solid transparent;
-    border-bottom: var(--checkbox-tick-border-width) solid transparent;
-    top: var(--checkbox-tick-top);
-    left: var(--checkbox-tick-left);
-    color: #FFFFFF;
-    transform-origin: 0% 100%;
-    animation: draw-tick 125ms 170ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
-}
-
-.m-checkbox .m-checkbox__label {
-    display: inline-block;
-    vertical-align: middle;
-    font-size: 14px;
-    line-height: 24px;
-    color: #000000;
-    font-weight: 400;
-    user-select: none;
-}
-
-@keyframes draw-tick {
-    0% {
-        height: 0px;
-        width: 0px;
-        border-color: #FFF;
-        transform: translate3d(0, 0, 0) rotate(45deg);
-    }
-
-    25% {
-        height: 0px;
-        width: var(--checkbox-tick-width);
-        transform: translate3d(0, 0, 0) rotate(45deg);
-    }
-
-    100% {
-        border-color: #FFF;
-        height: var(--checkbox-tick-height);
-        width: var(--checkbox-tick-width);
-        transform: translate3d(0, var(--checkbox-tick-height-negative), 0) rotate(45deg);
-    }
-}
+.m-checkbox {
+    --checkbox-width: 22px;
+    --checkbox-height: 22px;
+    --checkbox-border-radius: 6px;
+    --checkbox-border-width: 1px;
+    --checkbox-background-color: var(--white);
+    --checkbox-border-color: var(--gray-300);
+    --checkbox-gap: 6px;
+
+    --checkbox-tick-width: 4px;
+    --checkbox-tick-height: 10px;
+    --checkbox-tick-height-negative: -10px;
+
+    --checkbox-tick-top: 8px;
+    --checkbox-tick-left: 3px;
+    --checkbox-tick-border-width: 3px;
+
+    display: flex;
+    align-items: center;
+    position: relative;
+    font-weight: bold;
+    cursor: pointer;
+    gap: var(--checkbox-gap);
+}
+
+.m-checkbox.m-checkbox--xs {
+    --checkbox-width: 16px;
+    --checkbox-height: 16px;
+    --checkbox-border-radius: 4px;
+    --checkbox-border-width: 1px;
+    --checkbox-tick-top: 6px;
+    --checkbox-tick-left: 1px;
+
+    --checkbox-tick-width: 3px;
+    --checkbox-tick-height: 8px;
+    --checkbox-tick-height-negative: -8px;
+}
+
+.m-checkbox.m-checkbox--sm {
+    --checkbox-width: 20px;
+    --checkbox-height: 20px;
+    --checkbox-border-radius: 4px;
+    --checkbox-border-width: 1px;
+    --checkbox-tick-top: 7px;
+    --checkbox-tick-left: 2px;
+}
+
+.m-checkbox.m-checkbox--lg {
+    --checkbox-width: 26px;
+    --checkbox-height: 26px;
+    --checkbox-border-radius: 8px;
+    --checkbox-border-width: 1px;
+
+    --checkbox-tick-top: 10px;
+    --checkbox-tick-left: 3px;
+
+    --checkbox-tick-border-width: 4px;
+    --checkbox-tick-width: 4px;
+    --checkbox-tick-height: 14px;
+    --checkbox-tick-height-negative: -14px;
+}
+
+.m-checkbox.m-checkbox--xl {
+    --checkbox-width: 32px;
+    --checkbox-height: 32px;
+    --checkbox-border-radius: 8px;
+    --checkbox-border-width: 1px;
+
+    --checkbox-tick-top: 14px;
+    --checkbox-tick-left: 5px;
+
+    --checkbox-tick-border-width: 4px;
+    --checkbox-tick-width: 5px;
+    --checkbox-tick-height: 16px;
+    --checkbox-tick-height-negative: -16px;
+}
+
+.m-checkbox.m-checkbox--blue.m-checkbox--checked {
+    --checkbox-background-color: var(--blue);
+    --checkbox-border-color: var(--blue);
+}
+
+.m-checkbox.m-checkbox--green.m-checkbox--checked {
+    --checkbox-background-color: var(--green);
+    --checkbox-border-color: var(--green);
+}
+
+.m-checkbox.m-checkbox--red.m-checkbox--checked {
+    --checkbox-background-color: var(--red);
+    --checkbox-border-color: var(--red);
+}
+
+.m-checkbox.m-checkbox--yellow.m-checkbox--checked {
+    --checkbox-background-color: var(--yellow);
+    --checkbox-border-color: var(--yellow);
+}
+
+.m-checkbox input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+    display: none;
+}
+
+.m-checkbox span {
+    display: flex;
+    height: var(--checkbox-height);
+    width: var(--checkbox-width);
+    border-radius: var(--checkbox-border-radius);
+    border: var(--checkbox-border-width) solid var(--checkbox-border-color);
+    background-color: var(--checkbox-background-color);
+    transition: all 125ms cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+}
+
+.m-checkbox:hover:not(.m-checkbox--checked):not(.m-checkbox--disabled) span {
+    --checkbox-border-color: var(--gray-400);
+    --checkbox-background-color: var(--gray-100);
+}
+
+.m-checkbox.m-checkbox--disabled span, 
+.m-checkbox.m-checkbox--disabled .m-checkbox__label {
+    cursor: not-allowed;
+}
+
+.m-checkbox.m-checkbox--disabled span {
+    opacity: 0.6;
+}
+
+.m-checkbox:not(.m-checkbox--checked).m-checkbox--disabled span {
+    --checkbox-border-color: var(--gray-300);
+    --checkbox-background-color: var(--gray-100);
+}
+
+.m-checkbox.m-checkbox--checked span {
+    background-color: var(--checkbox-background-color);
+    border-color: var(--checkbox-background-color);
+}
+
+.m-checkbox.m-checkbox--checked span::before {
+    content: "";
+    position: absolute;
+    transform: rotate(45deg);
+    border-right: var(--checkbox-tick-border-width) solid transparent;
+    border-bottom: var(--checkbox-tick-border-width) solid transparent;
+    top: var(--checkbox-tick-top);
+    left: var(--checkbox-tick-left);
+    color: #FFFFFF;
+    transform-origin: 0% 100%;
+    animation: draw-tick 125ms 170ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+.m-checkbox .m-checkbox__label {
+    display: inline-block;
+    vertical-align: middle;
+    font-size: 14px;
+    line-height: 24px;
+    color: #000000;
+    font-weight: 400;
+    user-select: none;
+}
+
+@keyframes draw-tick {
+    0% {
+        height: 0px;
+        width: 0px;
+        border-color: #FFF;
+        transform: translate3d(0, 0, 0) rotate(45deg);
+    }
+
+    25% {
+        height: 0px;
+        width: var(--checkbox-tick-width);
+        transform: translate3d(0, 0, 0) rotate(45deg);
+    }
+
+    100% {
+        border-color: #FFF;
+        height: var(--checkbox-tick-height);
+        width: var(--checkbox-tick-width);
+        transform: translate3d(0, var(--checkbox-tick-height-negative), 0) rotate(45deg);
+    }
+}