@true-engineering/true-react-common-ui-kit 1.12.1 → 2.0.0

package/src/components/FiltersPane/FilterSelect/FilterSelect.styles.ts

@@ -1,144 +1,144 @@
-import { colors, helpers } from '../../../theme';
-import { ComponentStyles } from '../../../types';
-
-const ITEM_HEIGHT = 40;
-const LIST_GAP = 12;
-
-export const styles = {
-  root: {
-    width: ({ width }: { width: string | number }): string | number =>
-      width ?? 220,
-    background: colors.CLASSIC_WHITE,
-  },
-
-  list: {
-    paddingTop: LIST_GAP,
-    padding: [LIST_GAP, 0],
-    maxHeight: ITEM_HEIGHT * 5 + LIST_GAP * 2,
-    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,
-  },
-
-  withClearButton: {
-    paddingBottom: 0,
-    maxHeight: ITEM_HEIGHT * 5 + LIST_GAP,
-  },
-
-  item: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    padding: [10, 16],
-    maxWidth: '100%',
-    cursor: 'pointer',
-    fontSize: 14,
-    minHeight: ITEM_HEIGHT,
-    transition: 'background-color 0.25s ease-in-out',
-    boxSizing: 'border-box',
-  },
-
-  option: {
-    display: 'inline-block',
-    userSelect: 'none',
-    width: '100%',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
-  },
-
-  icon: {
-    width: 20,
-    height: 20,
-    marginRight: 4,
-    alignSelf: 'center',
-    flexShrink: 0,
-  },
-
-  panel: {
-    display: 'flex',
-    padding: [0, 6, 8],
-    gap: 8,
-  },
-
-  panelWithFooter: {
-    borderTop: [1, 'solid', colors.BORDER_MAIN],
-    padding: [8, 16],
-  },
-
-  footer: {
-    wordBreak: 'break-word',
-    alignSelf: 'center',
-  },
-
-  clear: {
-    marginLeft: 'auto',
-    alignSelf: 'center',
-  },
-
-  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',
-    textAlign: 'center',
-    padding: 16,
-    fontSize: 14,
-  },
-
-  tweakSearchInput: {
-    tweakInput: {
-      inputWrapper: {
-        backgroundColor: 'transparent',
-        border: 'none',
-        height: 40,
-      },
-    },
-  },
-
-  tweakClearButton: {
-    text: {
-      color: colors.GREY_ACTIVE,
-
-      '&:hover, &:focus': {
-        color: colors.FONT_MEDIUM,
-      },
-
-      '&:active': {
-        color: colors.FONT_MEDIUM,
-      },
-    },
-  },
-};
-
-export type FilterSelectStyles = ComponentStyles<typeof styles>;
+import { colors, helpers } from '../../../theme';
+import { ComponentStyles } from '../../../types';
+
+const ITEM_HEIGHT = 40;
+const LIST_GAP = 12;
+
+export const styles = {
+  root: {
+    width: ({ width }: { width: string | number }): string | number =>
+      width ?? 220,
+    background: colors.CLASSIC_WHITE,
+  },
+
+  list: {
+    paddingTop: LIST_GAP,
+    padding: [LIST_GAP, 0],
+    maxHeight: ITEM_HEIGHT * 5 + LIST_GAP * 2,
+    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,
+  },
+
+  withClearButton: {
+    paddingBottom: 0,
+    maxHeight: ITEM_HEIGHT * 5 + LIST_GAP,
+  },
+
+  item: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: [10, 16],
+    maxWidth: '100%',
+    cursor: 'pointer',
+    fontSize: 14,
+    minHeight: ITEM_HEIGHT,
+    transition: 'background-color 0.25s ease-in-out',
+    boxSizing: 'border-box',
+  },
+
+  option: {
+    display: 'inline-block',
+    userSelect: 'none',
+    width: '100%',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+  },
+
+  icon: {
+    width: 20,
+    height: 20,
+    marginRight: 4,
+    alignSelf: 'center',
+    flexShrink: 0,
+  },
+
+  panel: {
+    display: 'flex',
+    padding: [0, 6, 8],
+    gap: 8,
+  },
+
+  panelWithFooter: {
+    borderTop: [1, 'solid', colors.BORDER_MAIN],
+    padding: [8, 16],
+  },
+
+  footer: {
+    wordBreak: 'break-word',
+    alignSelf: 'center',
+  },
+
+  clear: {
+    marginLeft: 'auto',
+    alignSelf: 'center',
+  },
+
+  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',
+    textAlign: 'center',
+    padding: 16,
+    fontSize: 14,
+  },
+
+  tweakSearchInput: {
+    tweakInput: {
+      inputWrapper: {
+        backgroundColor: 'transparent',
+        border: 'none',
+        height: 40,
+      },
+    },
+  },
+
+  tweakClearButton: {
+    text: {
+      color: colors.GREY_ACTIVE,
+
+      '&:hover, &:focus': {
+        color: colors.FONT_MEDIUM,
+      },
+
+      '&:active': {
+        color: colors.FONT_MEDIUM,
+      },
+    },
+  },
+};
+
+export type FilterSelectStyles = ComponentStyles<typeof styles>;