@teammodlr/ui-kit 3.0.0-beta.23 → 3.0.0-beta.24

package/src/components/select/style/Select.css.ts

@@ -6,7 +6,7 @@ import {
 } from '@vanilla-extract/css';
 import { themeVars } from '../../../styles/theme.css';
 
-const sizes = {
+const heights = {
     xs: '26px',
     sm: '30px',
     md: '38px',
@@ -42,7 +42,7 @@ export const wrapper = style({
 
 export const base = style({
     vars: {
-        [vars.height]: sizes.md,
+        [vars.height]: heights.md,
         [vars.radius]: borderRadiuses.md,
         [vars.paddingX]: themeVars.space[2],
         [vars.paddingY]: themeVars.space[0],
@@ -371,12 +371,104 @@ export const arrow = style({
     height: themeVars.space[4],
     position: 'absolute',
     right: themeVars.space[3],
-    top: themeVars.space[3],
+    top: '50%',
+    transform: 'translateY(-50%)',
     display: 'flex',
     color: themeVars.color.gray[500],
     transition: 'transform 0.3s ease',
 });
 
 export const arrowOpen = style({
-    transform: 'rotate(180deg)',
+    transform: 'translateY(-50%) rotate(180deg)',
 })
+
+export const fillRoot = style({
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    width: '100%'
+});
+
+export const fill = style({
+    flexGrow: 1,
+    width: '100%',
+    minHeight: 0
+});
+
+export const sizes = styleVariants({
+    xs: {
+        vars: {
+            [vars.height]: heights.xs,
+            [vars.radius]: borderRadiuses.xs,
+            [vars.paddingX]: themeVars.space[1]
+        },
+        fontSize: themeVars.fontSize.small
+    },
+    sm: {
+        vars: {
+            [vars.height]: heights.sm,
+            [vars.radius]: borderRadiuses.sm,
+            [vars.paddingX]: themeVars.space[1.5]
+        },
+        fontSize: themeVars.fontSize.small
+    },
+    md: {
+        vars: {
+            [vars.height]: heights.md,
+            [vars.radius]: borderRadiuses.md
+        }
+    },
+    lg: {
+        vars: {
+            [vars.height]: heights.lg,
+            [vars.radius]: borderRadiuses.lg,
+            [vars.paddingX]: themeVars.space[2.5]
+        },
+        fontSize: themeVars.fontSize.large
+    },
+    xl: {
+        vars: {
+            [vars.height]: heights.xl,
+            [vars.radius]: borderRadiuses.xl,
+            [vars.paddingX]: themeVars.space[3]
+        },
+        fontSize: themeVars.fontSize.large
+    }
+});
+
+export const fillBase = style({
+    minHeight: 'unset',
+    height: '100%',
+    lineHeight: 'normal',
+    display: 'flex',
+    alignItems: 'center',
+    overflow: 'hidden',
+    paddingRight: '2rem'
+});
+
+export const fillLabel = style({
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    flex: 1,
+    minWidth: 0
+});
+
+export const noBorder = style({
+    vars: {
+        [vars.borderColor]: 'transparent'
+    },
+    borderRadius: 0,
+    boxShadow: 'none',
+    ':hover': {
+        vars: {
+            [vars.borderColor]: 'transparent'
+        }
+    },
+    ':focus': {
+        vars: {
+            [vars.borderColor]: 'transparent'
+        },
+        boxShadow: 'none'
+    }
+});