@infomaximum/ui-kit 0.9.1

package/dist/components/InternalPicker/styles/DatePanel.styles.js

@@ -0,0 +1,234 @@
+import { prefixCls } from "./common.styles.js";
+const getPickerDatePanelInnerStyle = () => ({
+  [`.${prefixCls}-date-panel,
+      .${prefixCls}-year-panel,
+      .${prefixCls}-decade-panel,
+      .${prefixCls}-quarter-panel,
+      .${prefixCls}-month-panel,
+      .${prefixCls}-week-panel`]: {
+    display: "flex",
+    flexDirection: "column",
+    width: 288
+  },
+  [`.${prefixCls}-datetime-panel`]: {
+    display: "flex"
+  }
+});
+const getPickerDatePanelHeaderStyle = (pickerTokens, theme) => ({
+  [`.${prefixCls}-header`]: {
+    display: "flex",
+    borderBottom: `1px solid ${theme.lineDivider}`,
+    padding: `${theme.paddingL - 2}px ${theme.paddingL}px`,
+    fontSize: theme.iconM
+  },
+  [`.${prefixCls}-header button`]: {
+    display: "inline-flex",
+    alignItems: "center",
+    cursor: "pointer",
+    padding: 0,
+    border: "none",
+    background: "none",
+    font: "inherit"
+  },
+  [`.${prefixCls}-header > button`]: {
+    padding: 2,
+    color: theme.textIcon,
+    ":hover": {
+      color: theme.textIconHover
+    }
+  },
+  [`.${prefixCls}-header > button:disabled`]: {
+    color: theme.textIconDisabled,
+    pointerEvents: "none"
+  },
+  [`.${prefixCls}-header-view`]: {
+    display: "inline-flex",
+    justifyContent: "center",
+    columnGap: theme.marginM,
+    flex: "auto",
+    ...theme.typography.subheader1,
+    fontWeight: 500,
+    color: pickerTokens.pickerText
+  },
+  [`.${prefixCls}-header-view button`]: {
+    color: pickerTokens.pickerText,
+    ":hover": {
+      color: pickerTokens.pickerHover
+    }
+  }
+});
+const getPickerDatePanelBodyStyle = (theme) => ({
+  [`.${prefixCls}-date-panel .${prefixCls}-body`]: {
+    paddingInline: theme.paddingL + theme.paddingS,
+    paddingBlock: theme.paddingM
+  },
+  [`.${prefixCls}-week-panel .${prefixCls}-body`]: {
+    paddingInline: theme.paddingL,
+    paddingBlock: theme.paddingM
+  },
+  [`.${prefixCls}-year-panel .${prefixCls}-body,
+      .${prefixCls}-quarter-panel .${prefixCls}-body,
+      .${prefixCls}-month-panel .${prefixCls}-body`]: {
+    paddingInline: theme.paddingM
+  }
+});
+const getPickerDatePanelTableStyle = () => ({
+  [`.${prefixCls}-year-panel table,
+      .${prefixCls}-decade-panel table,
+      .${prefixCls}-month-panel table`]: {
+    height: 264
+  },
+  [`.${prefixCls}-quarter-panel table`]: {
+    height: 56
+  },
+  [`.${prefixCls}-body table`]: {
+    width: "100%",
+    borderCollapse: "collapse",
+    textAlign: "center"
+  }
+});
+const getPickerDatePanelCellStyle = (pickerTokens, theme) => ({
+  [`.${prefixCls}-body th`]: {
+    fontWeight: 400,
+    height: 36,
+    padding: 0
+  },
+  [`.${prefixCls}-cell`]: {
+    position: "relative",
+    cursor: "pointer",
+    minWidth: 24,
+    padding: `${theme.paddingS}px 0px`,
+    color: pickerTokens.pickerTextSecondary
+  },
+  [`.${prefixCls}-cell::before`]: {
+    content: "''",
+    position: "absolute",
+    insetInlineStart: 0,
+    insetInlineEnd: 0,
+    top: "50%",
+    transform: "translateY(-50%)",
+    height: pickerTokens.pickerCellHeight,
+    pointerEvents: "none"
+  },
+  [`.${prefixCls}-cell-in-view`]: {
+    color: pickerTokens.pickerText
+  },
+  [`.${prefixCls}-week-panel-row .${prefixCls}-cell:first-child::before`]: {
+    borderStartStartRadius: theme.borderRadiusM,
+    borderEndStartRadius: theme.borderRadiusM
+  },
+  [`.${prefixCls}-week-panel-row .${prefixCls}-cell:last-child::before`]: {
+    borderStartEndRadius: theme.borderRadiusM,
+    borderEndEndRadius: theme.borderRadiusM
+  },
+  [`.${prefixCls}-week-panel-row-hover .${prefixCls}-cell::before`]: {
+    backgroundColor: pickerTokens.pickerHover
+  },
+  [`.${prefixCls}-week-panel-row-range-hover .${prefixCls}-cell::before`]: {
+    backgroundColor: pickerTokens.pickerCellWithRangeBgActive
+  },
+  [`.${prefixCls}-week-panel-row-range-start .${prefixCls}-cell::before,
+      .${prefixCls}-week-panel-row-range-end .${prefixCls}-cell::before,
+      .${prefixCls}-week-panel-row-selected .${prefixCls}-cell::before`]: {
+    backgroundColor: pickerTokens.pickerActive
+  },
+  [`.${prefixCls}-week-panel-row:hover.${prefixCls}-week-panel-row-range-start .${prefixCls}-cell::before,
+      .${prefixCls}-week-panel-row:hover.${prefixCls}-week-panel-row-range-end .${prefixCls}-cell::before`]: {
+    backgroundColor: pickerTokens.pickerHover
+  },
+  [`.${prefixCls}-cell-disabled`]: {
+    cursor: "not-allowed",
+    color: pickerTokens.pickerTextSecondary
+  },
+  [`.${prefixCls}-cell-disabled::before`]: {
+    background: pickerTokens.pickerBgDisabled
+  },
+  [`.${prefixCls}-cell-in-view.${prefixCls}-cell-in-range:not(.${prefixCls}-cell-disabled):before,
+      .${prefixCls}-cell-in-view.${prefixCls}-cell-range-start:not(.${prefixCls}-cell-disabled):before,
+      .${prefixCls}-cell-in-view.${prefixCls}-cell-range-end:not(.${prefixCls}-cell-disabled):before`]: {
+    background: pickerTokens.pickerCellWithRangeBgActive
+  },
+  [`.${prefixCls}-cell-in-view.${prefixCls}-cell-range-start:not(.${prefixCls}-cell-disabled):before`]: {
+    insetInlineStart: "50%"
+  },
+  [`.${prefixCls}-cell-in-view.${prefixCls}-cell-range-end:not(.${prefixCls}-cell-disabled):before`]: {
+    insetInlineEnd: "50%"
+  }
+});
+const getPickerDatePanelCellInnerStyle = (pickerTokens, theme) => ({
+  [`.${prefixCls}-cell-inner`]: {
+    position: "relative",
+    display: "inline-block",
+    minWidth: 24,
+    lineHeight: `${pickerTokens.pickerCellHeight}px`,
+    borderRadius: theme.borderRadiusM,
+    boxSizing: "border-box"
+  },
+  [`.${prefixCls}-year-panel .${prefixCls}-cell-inner,
+      .${prefixCls}-quarter-panel .${prefixCls}-cell-inner,
+      .${prefixCls}-month-panel .${prefixCls}-cell-inner`]: {
+    width: pickerTokens.pickerWithoutTimeCellMinWidth,
+    padding: `0px ${theme.paddingM}px`
+  },
+  [`.${prefixCls}-decade-panel .${prefixCls}-cell-inner`]: {
+    padding: `0px ${theme.paddingXS}px`
+  },
+  [`.${prefixCls}-week-panel-row-range-start .${prefixCls}-cell .${prefixCls}-cell-inner,
+      .${prefixCls}-week-panel-row-range-end .${prefixCls}-cell .${prefixCls}-cell-inner,
+      .${prefixCls}-week-panel-row-selected .${prefixCls}-cell .${prefixCls}-cell-inner,
+      .${prefixCls}-week-panel-row-hover .${prefixCls}-cell .${prefixCls}-cell-inner`]: {
+    color: pickerTokens.pickerTextContrast
+  },
+  [`tr:not(.${prefixCls}-week-panel-row-selected) .${prefixCls}-cell:hover:not(.${prefixCls}-cell-selected):not(.${prefixCls}-cell-disabled) .${prefixCls}-cell-inner`]: {
+    background: pickerTokens.pickerHover,
+    color: pickerTokens.pickerTextContrast
+  },
+  [`tr:not(.${prefixCls}-week-panel-row-hover):not(.${prefixCls}-week-panel-row-range-start):not(.${prefixCls}-week-panel-row-range-end) .${prefixCls}-cell:hover:not(.${prefixCls}-cell-in-view):not(.${prefixCls}-cell-disabled) .${prefixCls}-cell-inner`]: {
+    background: pickerTokens.pickerCellSecondaryBgHover,
+    color: pickerTokens.pickerTextSecondary
+  },
+  [`.${prefixCls}-cell-in-view.${prefixCls}-cell-selected:not(.${prefixCls}-cell-disabled) .${prefixCls}-cell-inner,
+      .${prefixCls}-cell-in-view.${prefixCls}-cell-range-start:not(.${prefixCls}-cell-disabled) .${prefixCls}-cell-inner,
+      .${prefixCls}-cell-in-view.${prefixCls}-cell-range-end:not(.${prefixCls}-cell-disabled) .${prefixCls}-cell-inner`]: {
+    background: pickerTokens.pickerActive,
+    color: pickerTokens.pickerTextContrast
+  },
+  [`.${prefixCls}-cell-in-view.${prefixCls}-cell-today .${prefixCls}-cell-inner::before`]: {
+    content: "''",
+    position: "absolute",
+    inset: 0,
+    border: `1px solid ${pickerTokens.pickerActive}`,
+    borderRadius: theme.borderRadiusM
+  },
+  [`.${prefixCls}-cell-disabled.${prefixCls}-cell-today .${prefixCls}-cell-inner::before`]: {
+    borderColor: pickerTokens.pickerTextSecondary
+  },
+  [`.${prefixCls}-week-panel-row-hover .${prefixCls}-cell-in-view.${prefixCls}-cell-today .${prefixCls}-cell-inner::before,
+      .${prefixCls}-week-panel-row-range-start .${prefixCls}-cell-in-view.${prefixCls}-cell-today .${prefixCls}-cell-inner::before,
+      .${prefixCls}-cell-in-view.${prefixCls}-cell-today:not(.${prefixCls}-cell-disabled):hover .${prefixCls}-cell-inner::before`]: {
+    content: "none"
+  },
+  [`.${prefixCls}-cell-in-view.${prefixCls}-cell-range-start:not(.${prefixCls}-cell-range-end) .${prefixCls}-cell-inner`]: {
+    borderStartStartRadius: theme.borderRadiusM,
+    borderEndStartRadius: theme.borderRadiusM,
+    borderStartEndRadius: 0,
+    borderEndEndRadius: 0
+  },
+  [`.${prefixCls}-cell-in-view.${prefixCls}-cell-range-end:not(.${prefixCls}-cell-range-start) .${prefixCls}-cell-inner`]: {
+    borderStartStartRadius: 0,
+    borderEndStartRadius: 0,
+    borderStartEndRadius: theme.borderRadiusM,
+    borderEndEndRadius: theme.borderRadiusM
+  }
+});
+const getPickerDatePanelStyle = (pickerTokens, theme) => ({
+  ...getPickerDatePanelInnerStyle(),
+  ...getPickerDatePanelHeaderStyle(pickerTokens, theme),
+  ...getPickerDatePanelBodyStyle(theme),
+  ...getPickerDatePanelTableStyle(),
+  ...getPickerDatePanelCellStyle(pickerTokens, theme),
+  ...getPickerDatePanelCellInnerStyle(pickerTokens, theme)
+});
+export {
+  getPickerDatePanelStyle
+};