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

package/src/components/Input/Input.styles.ts

@@ -1,308 +1,98 @@
-import { dimensions, ITweakStyles, createThemedStyles, animations } from '../../theme';
-import { IThemedPreloaderStyles } from '../ThemedPreloader';
-
-const PADDING_X = 12;
-export const AUTOSIZE_MAX_WIDTH = 480;
-
-export const useStyles = createThemedStyles('Input', {
-  root: {
-    width: '100%',
-    boxSizing: 'border-box',
-    position: 'relative',
-  },
-
-  inputWrapper: {
-    display: 'flex',
-    width: '100%',
-    height: dimensions.CONTROL_HEIGHT,
-    boxSizing: 'border-box',
-    transition: animations.defaultTransition,
-    transitionProperty: 'border-color',
-    backgroundColor: 'white',
-    position: 'relative',
-  },
-
-  inputContent: {
-    fontSize: 16,
-    fontFamily: 'inherit',
-    padding: [0, PADDING_X],
-  },
-
-  input: {
-    extend: 'inputContent',
-    width: '100%',
-    height: '100%',
-    outline: 'none',
-    boxSizing: 'border-box',
-    outlineStyle: 'none',
-    transition: animations.defaultTransition,
-    transitionProperty: 'background-color',
-    border: 'none',
-    background: 'none',
-
-    '&::placeholder': {
-      opacity: 1,
-    },
-
-    MozAppearance: 'textfield',
-    '&::-webkit-inner-spin-button,&::-webkit-outer-spin-button': {
-      WebkitAppearance: 'none',
-      margin: 0,
-    },
-  },
-
-  autosize: {
-    display: 'inline-grid',
-    verticalAlign: 'top',
-    alignItems: 'center',
-    justifyContent: 'start',
-
-    '&::after, input': {
-      width: 'auto',
-      minWidth: '1em',
-      gridArea: '1 / 2',
-      font: 'inherit',
-      justifySelf: 'stretch',
-    },
-
-    '&::after': {
-      maxWidth: AUTOSIZE_MAX_WIDTH,
-      content: 'attr(data-value) " "',
-      visibility: 'hidden',
-      whiteSpace: 'pre-wrap',
-    },
-  },
-
-  focused: {
-    position: 'relative',
-    zIndex: 1,
-  },
-
-  unitsWrapper: {
-    extend: 'inputContent',
-    position: 'absolute',
-    left: 0,
-    height: '100%',
-    boxSizing: 'border-box',
-    display: 'flex',
-    alignItems: 'center',
-    pointerEvents: 'none',
-  },
-
-  fakeValue: {
-    visibility: 'hidden',
-  },
-
-  units: {
-    paddingLeft: 4,
-  },
-
-  withFloatingLabel: {
-    paddingTop: 18,
-  },
-
-  floatingLabelWithoutPadding: {
-    paddingTop: 18,
-    paddingLeft: 0,
-  },
-
-  floating: {},
-
-  activeLabel: {
-    display: 'none',
-
-    '&$floating': {
-      display: 'block',
-      transform: 'scale(0.75) translateY(-120%)',
-    },
-  },
-
-  required: {
-    '&:before': {
-      content: '""',
-      position: 'absolute',
-      left: -12,
-      top: '50%',
-      transform: 'translate(0, -50%)',
-      width: 6,
-      height: 6,
-      borderRadius: '50%',
-    },
-  },
-
-  label: {
-    position: 'absolute',
-    pointerEvents: 'none',
-    left: PADDING_X,
-    top: '50%',
-    transformOrigin: 'top left',
-    transform: 'translateY(-50%)',
-    transition: animations.defaultTransition,
-    transitionProperty: 'transform, color',
-    fontSize: 16,
-  },
-
-  floatingWithoutPadding: {
-    left: 0,
-  },
-
-  requiredLabel: {
-    '&:after': {
-      content: '""',
-      position: 'absolute',
-      right: -8,
-      top: 4,
-      transform: 'translate(0, -50%)',
-      width: 6,
-      height: 6,
-      borderRadius: '50%',
-    },
-  },
-
-  activeIcon: {
-    cursor: 'pointer',
-  },
-
-  'border-top': {
-    borderRadius: 0,
-    borderWidth: [1, 0, 0, 0],
-  },
-
-  'border-bottom': {
-    borderRadius: 0,
-    borderWidth: [0, 0, 1, 0],
-  },
-
-  'border-left': {
-    borderRadius: 0,
-    borderWidth: [0, 0, 0, 1],
-  },
-
-  'border-right': {
-    borderRadius: 0,
-    borderWidth: [0, 1, 0, 0],
-  },
-
-  top: {
-    borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 0,
-  },
-
-  bottom: {
-    borderTopLeftRadius: 0,
-    borderTopRightRadius: 0,
-  },
-
-  'top-left': {
-    borderTopRightRadius: 0,
-    borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 0,
-  },
-
-  'top-right': {
-    borderTopLeftRadius: 0,
-    borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 0,
-  },
-
-  'bottom-left': {
-    borderTopLeftRadius: 0,
-    borderTopRightRadius: 0,
-    borderBottomRightRadius: 0,
-  },
-
-  'bottom-right': {
-    borderTopLeftRadius: 0,
-    borderTopRightRadius: 0,
-    borderBottomLeftRadius: 0,
-  },
-
-  left: {
-    borderTopRightRadius: 0,
-    borderBottomRightRadius: 0,
-  },
-
-  right: {
-    borderTopLeftRadius: 0,
-    borderBottomLeftRadius: 0,
-  },
-
-  middle: {
-    borderRadius: 0,
-  },
-
-  controls: {
-    display: 'flex',
-    gridArea: '1 / 3',
-  },
-
-  icon: {
-    display: 'flex',
-    alignItems: 'center',
-    padding: [0, 4],
-    width: 20,
-    transition: animations.defaultTransition,
-    transitionProperty: 'color',
-    boxSizing: 'content-box',
-
-    '&:last-child': {
-      paddingRight: 8,
-    },
-
-    '& + $units': {
-      marginLeft: 4,
-    },
-  },
-
-  clearIcon: {
-    extend: 'icon',
-  },
-
-  inputIcon: {
-    extend: 'icon',
-  },
-
-  withIcons: {
-    paddingRight: 4,
-  },
-
-  withControls: {},
-
-  invalid: {},
-
-  disabled: {},
-
-  invalidLabel: {},
-
-  error: {
-    fontSize: 12,
-  },
-
-  info: {
-    fontSize: 12,
-    paddingTop: 4,
-    paddingLeft: 13,
-  },
-
-  'error-top': {
-    position: 'absolute',
-    top: -18,
-    left: -1,
-    padding: [4, 8],
-    zIndex: 1,
-  },
-
-  'error-bottom': {
-    paddingTop: 4,
-    paddingLeft: 13,
-  },
-
-  loading: {},
-
-  withUnits: {},
-});
-
-export type IInputStyles = ITweakStyles<
-  typeof useStyles,
-  { tweakPreloader: IThemedPreloaderStyles }
->;
+import { createThemedStyles, ITweakStyles } from '../../theme';
+import { IControlGroupStyles } from '../ControlGroup';
+import { IControlWrapperStyles } from '../ControlWrapper';
+
+const PADDING_WITH_UNITS = 8;
+
+export const useStyles = createThemedStyles('Input', {
+  inputContent: {
+    height: 'var(--control-height)',
+    padding: [0, 'var(--control-padding)'],
+    fontSize: 16,
+    fontFamily: 'inherit',
+  },
+
+  input: {
+    extend: 'inputContent',
+    width: '100%',
+    outline: 'none',
+    outlineStyle: 'none',
+    boxSizing: 'border-box',
+    border: 'none',
+    background: 'none',
+    color: 'black',
+
+    '&[readonly]': {
+      cursor: 'default',
+    },
+
+    '&::placeholder': {
+      opacity: 1,
+    },
+
+    '&::-webkit-date-and-time-value': {
+      textAlign: 'left',
+    },
+
+    MozAppearance: 'textfield',
+    '&::-webkit-inner-spin-button,&::-webkit-outer-spin-button,&::-webkit-calendar-picker-indicator':
+      {
+        display: 'none',
+        WebkitAppearance: 'none',
+        margin: 0,
+      },
+  },
+
+  autoSizeWrapper: {
+    position: 'relative',
+    display: 'flex',
+    minWidth: 0,
+    zIndex: 0,
+    flexGrow: 1,
+  },
+
+  autoSized: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    height: '100%',
+  },
+
+  withUnits: {
+    extend: 'autoSized',
+    paddingRight: `calc(${PADDING_WITH_UNITS}px + var(--units-width) - 1px)`,
+
+    '& + $fakeValue': {
+      paddingRight: PADDING_WITH_UNITS,
+    },
+  },
+
+  withLabel: {},
+
+  fakeValue: {
+    extend: 'inputContent',
+    visibility: 'hidden',
+    maxWidth: '100%',
+    overflow: 'hidden',
+    minWidth: 8,
+  },
+
+  units: {
+    alignSelf: 'center',
+    paddingRight: 'var(--control-padding)',
+  },
+
+  focusedInput: {},
+
+  disabledInput: {},
+
+  invalidInput: {},
+});
+
+export type IInputStyles = ITweakStyles<
+  typeof useStyles,
+  {
+    tweakControlWrapper: IControlWrapperStyles;
+    tweakControlGroup: IControlGroupStyles;
+  }
+>;