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

package/src/components/MultiSelectList/MultiSelectList.styles.ts

@@ -1,136 +1,138 @@
-import { colors, helpers, ITweakStyles, createThemedStyles } from '../../theme';
-import { IButtonStyles } from '../Button';
-import { ICheckboxStyles } from '../Checkbox';
-import { ISearchInputStyles } from '../SearchInput';
-
-const ITEM_HEIGHT = 40;
-const TOP_GAP = 12;
-
-export const useStyles = createThemedStyles('MultiSelectList', {
-  root: {
-    width: 220,
-    background: colors.CLASSIC_WHITE,
-  },
-
-  list: {
-    paddingTop: TOP_GAP,
-    maxHeight: ITEM_HEIGHT * 5 + TOP_GAP,
-    overscrollBehavior: 'contain',
-    ...helpers.withScrollBar,
-  },
-
-  label: {
-    boxSizing: 'border-box',
-    fontSize: 14,
-    padding: [12, 16],
-    userSelect: 'none',
-    display: 'flex',
-    alignItems: 'center',
-    color: colors.FONT_LABEL,
-  },
-
-  labelChosen: {
-    fontWeight: 'bold',
-    color: colors.FONT_MAIN,
-    padding: [4, 16, 12],
-  },
-
-  withoutTopGap: {
-    paddingTop: 0,
-  },
-
-  item: {
-    boxSizing: 'border-box',
-    padding: 0,
-    maxWidth: '100%',
-    fontSize: 14,
-  },
-
-  option: {
-    display: 'inline-block',
-    userSelect: 'none',
-    maxWidth: '100%',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
-  },
-
-  panel: {
-    display: 'flex',
-    padding: [0, 6, 8],
-  },
-
-  clear: {
-    marginLeft: 'auto',
-  },
-
-  selectedItem: {},
-
-  preloader: {
-    width: 80,
-    height: ITEM_HEIGHT,
-    margin: 'auto',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-
-  dropdownInput: {
-    borderBottom: [1, 'solid', colors.BORDER_MAIN],
-  },
-
-  nothingFound: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    textAlign: 'center',
-    padding: 16,
-    fontSize: 14,
-  },
-});
-
-export const searchInputStyles: ISearchInputStyles = {
-  tweakInput: {
-    inputWrapper: {
-      backgroundColor: 'transparent',
-      border: 'none',
-      height: 40,
-    },
-  },
-};
-
-export const checkboxStyles: ICheckboxStyles = {
-  root: {
-    padding: [11, 16],
-    boxSizing: 'border-box',
-    width: '100%',
-  },
-
-  children: {
-    marginRight: 'auto',
-    overflow: 'hidden',
-  },
-};
-
-export const clearButtonStyles: IButtonStyles = {
-  text: {
-    color: colors.GREY_ACTIVE,
-
-    '&:hover, &:focus': {
-      color: colors.FONT_MEDIUM,
-    },
-
-    '&:active': {
-      color: colors.FONT_MEDIUM,
-    },
-  },
-};
-
-export type IMultiSelectListStyles = ITweakStyles<
-  typeof useStyles,
-  {
-    tweakSearchInput: ISearchInputStyles;
-    tweakCheckbox: ICheckboxStyles;
-    tweakClearButton: IButtonStyles;
-  }
->;
+import { colors, createThemedStyles, helpers, ITweakStyles } from '../../theme';
+import { IButtonStyles } from '../Button';
+import { ICheckboxStyles } from '../Checkbox';
+import { ISearchInputStyles } from '../SearchInput';
+
+const ITEM_HEIGHT = 40;
+const TOP_GAP = 12;
+
+export const useStyles = createThemedStyles('MultiSelectList', {
+  root: {
+    width: 220,
+    background: colors.CLASSIC_WHITE,
+  },
+
+  list: {
+    paddingTop: TOP_GAP,
+    maxHeight: ITEM_HEIGHT * 5 + TOP_GAP,
+    overscrollBehavior: 'contain',
+    ...helpers.withScrollBar,
+  },
+
+  label: {
+    boxSizing: 'border-box',
+    fontSize: 14,
+    padding: [12, 16],
+    userSelect: 'none',
+    display: 'flex',
+    alignItems: 'center',
+    color: colors.FONT_LABEL,
+  },
+
+  labelChosen: {
+    fontWeight: 'bold',
+    color: colors.FONT_MAIN,
+    padding: [4, 16, 12],
+  },
+
+  withoutTopGap: {
+    paddingTop: 0,
+  },
+
+  item: {
+    boxSizing: 'border-box',
+    padding: 0,
+    maxWidth: '100%',
+    fontSize: 14,
+  },
+
+  option: {
+    display: 'inline-block',
+    userSelect: 'none',
+    maxWidth: '100%',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+  },
+
+  panel: {
+    display: 'flex',
+    padding: [0, 6, 8],
+  },
+
+  clear: {
+    marginLeft: 'auto',
+  },
+
+  selectedItem: {},
+
+  preloader: {
+    width: 80,
+    height: ITEM_HEIGHT,
+    margin: 'auto',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+
+  dropdownInput: {
+    borderBottom: [1, 'solid', colors.BORDER_MAIN],
+  },
+
+  nothingFound: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    textAlign: 'center',
+    padding: 16,
+    fontSize: 14,
+  },
+});
+
+export const searchInputStyles: ISearchInputStyles = {
+  tweakInput: {
+    tweakControlWrapper: {
+      root: {
+        '--control-height': '40px',
+        backgroundColor: 'transparent',
+        border: 'none',
+      },
+    },
+  },
+};
+
+export const checkboxStyles: ICheckboxStyles = {
+  root: {
+    padding: [11, 16],
+    boxSizing: 'border-box',
+    width: '100%',
+  },
+
+  children: {
+    marginRight: 'auto',
+    overflow: 'hidden',
+  },
+};
+
+export const clearButtonStyles: IButtonStyles = {
+  text: {
+    color: colors.GREY_ACTIVE,
+
+    '&:hover, &:focus': {
+      color: colors.FONT_MEDIUM,
+    },
+
+    '&:active': {
+      color: colors.FONT_MEDIUM,
+    },
+  },
+};
+
+export type IMultiSelectListStyles = ITweakStyles<
+  typeof useStyles,
+  {
+    tweakSearchInput: ISearchInputStyles;
+    tweakCheckbox: ICheckboxStyles;
+    tweakClearButton: IButtonStyles;
+  }
+>;