first commit
This commit is contained in:
rayd1o
601
frontend/node_modules/antd/lib/date-picker/style/panel.js
generated
vendored
Normal file
601
frontend/node_modules/antd/lib/date-picker/style/panel.js
generated
vendored
Normal file
@@ -0,0 +1,601 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.genPanelStyle = exports.default = void 0;
|
||||
var _cssinjs = require("@ant-design/cssinjs");
|
||||
var _fastColor = require("@ant-design/fast-color");
|
||||
const genPickerCellInnerStyle = token => {
|
||||
const {
|
||||
pickerCellCls,
|
||||
pickerCellInnerCls,
|
||||
cellHeight,
|
||||
borderRadiusSM,
|
||||
motionDurationMid,
|
||||
cellHoverBg,
|
||||
lineWidth,
|
||||
lineType,
|
||||
colorPrimary,
|
||||
cellActiveWithRangeBg,
|
||||
colorTextLightSolid,
|
||||
colorTextDisabled,
|
||||
cellBgDisabled,
|
||||
colorFillSecondary
|
||||
} = token;
|
||||
return {
|
||||
'&::before': {
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
insetInlineStart: 0,
|
||||
insetInlineEnd: 0,
|
||||
zIndex: 1,
|
||||
height: cellHeight,
|
||||
transform: 'translateY(-50%)',
|
||||
content: '""',
|
||||
pointerEvents: 'none'
|
||||
},
|
||||
// >>> Default
|
||||
[pickerCellInnerCls]: {
|
||||
position: 'relative',
|
||||
zIndex: 2,
|
||||
display: 'inline-block',
|
||||
minWidth: cellHeight,
|
||||
height: cellHeight,
|
||||
lineHeight: (0, _cssinjs.unit)(cellHeight),
|
||||
borderRadius: borderRadiusSM,
|
||||
transition: `background ${motionDurationMid}`
|
||||
},
|
||||
// >>> Hover
|
||||
[`&:hover:not(${pickerCellCls}-in-view):not(${pickerCellCls}-disabled),
|
||||
&:hover:not(${pickerCellCls}-selected):not(${pickerCellCls}-range-start):not(${pickerCellCls}-range-end):not(${pickerCellCls}-disabled)`]: {
|
||||
[pickerCellInnerCls]: {
|
||||
background: cellHoverBg
|
||||
}
|
||||
},
|
||||
// >>> Today
|
||||
[`&-in-view${pickerCellCls}-today ${pickerCellInnerCls}`]: {
|
||||
'&::before': {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
insetInlineEnd: 0,
|
||||
bottom: 0,
|
||||
insetInlineStart: 0,
|
||||
zIndex: 1,
|
||||
border: `${(0, _cssinjs.unit)(lineWidth)} ${lineType} ${colorPrimary}`,
|
||||
borderRadius: borderRadiusSM,
|
||||
content: '""'
|
||||
}
|
||||
},
|
||||
// >>> In Range
|
||||
[`&-in-view${pickerCellCls}-in-range,
|
||||
&-in-view${pickerCellCls}-range-start,
|
||||
&-in-view${pickerCellCls}-range-end`]: {
|
||||
position: 'relative',
|
||||
[`&:not(${pickerCellCls}-disabled):before`]: {
|
||||
background: cellActiveWithRangeBg
|
||||
}
|
||||
},
|
||||
// >>> Selected
|
||||
[`&-in-view${pickerCellCls}-selected,
|
||||
&-in-view${pickerCellCls}-range-start,
|
||||
&-in-view${pickerCellCls}-range-end`]: {
|
||||
[`&:not(${pickerCellCls}-disabled) ${pickerCellInnerCls}`]: {
|
||||
color: colorTextLightSolid,
|
||||
background: colorPrimary
|
||||
},
|
||||
[`&${pickerCellCls}-disabled ${pickerCellInnerCls}`]: {
|
||||
background: colorFillSecondary
|
||||
}
|
||||
},
|
||||
[`&-in-view${pickerCellCls}-range-start:not(${pickerCellCls}-disabled):before`]: {
|
||||
insetInlineStart: '50%'
|
||||
},
|
||||
[`&-in-view${pickerCellCls}-range-end:not(${pickerCellCls}-disabled):before`]: {
|
||||
insetInlineEnd: '50%'
|
||||
},
|
||||
// range start border-radius
|
||||
[`&-in-view${pickerCellCls}-range-start:not(${pickerCellCls}-range-end) ${pickerCellInnerCls}`]: {
|
||||
borderStartStartRadius: borderRadiusSM,
|
||||
borderEndStartRadius: borderRadiusSM,
|
||||
borderStartEndRadius: 0,
|
||||
borderEndEndRadius: 0
|
||||
},
|
||||
// range end border-radius
|
||||
[`&-in-view${pickerCellCls}-range-end:not(${pickerCellCls}-range-start) ${pickerCellInnerCls}`]: {
|
||||
borderStartStartRadius: 0,
|
||||
borderEndStartRadius: 0,
|
||||
borderStartEndRadius: borderRadiusSM,
|
||||
borderEndEndRadius: borderRadiusSM
|
||||
},
|
||||
// >>> Disabled
|
||||
'&-disabled': {
|
||||
color: colorTextDisabled,
|
||||
cursor: 'not-allowed',
|
||||
[pickerCellInnerCls]: {
|
||||
background: 'transparent'
|
||||
},
|
||||
'&::before': {
|
||||
background: cellBgDisabled
|
||||
}
|
||||
},
|
||||
[`&-disabled${pickerCellCls}-today ${pickerCellInnerCls}::before`]: {
|
||||
borderColor: colorTextDisabled
|
||||
}
|
||||
};
|
||||
};
|
||||
const genPanelStyle = token => {
|
||||
const {
|
||||
componentCls,
|
||||
pickerCellCls,
|
||||
pickerCellInnerCls,
|
||||
pickerYearMonthCellWidth,
|
||||
pickerControlIconSize,
|
||||
cellWidth,
|
||||
paddingSM,
|
||||
paddingXS,
|
||||
paddingXXS,
|
||||
colorBgContainer,
|
||||
lineWidth,
|
||||
lineType,
|
||||
borderRadiusLG,
|
||||
colorPrimary,
|
||||
colorTextHeading,
|
||||
colorSplit,
|
||||
pickerControlIconBorderWidth,
|
||||
colorIcon,
|
||||
textHeight,
|
||||
motionDurationMid,
|
||||
colorIconHover,
|
||||
fontWeightStrong,
|
||||
cellHeight,
|
||||
pickerCellPaddingVertical,
|
||||
colorTextDisabled,
|
||||
colorText,
|
||||
fontSize,
|
||||
motionDurationSlow,
|
||||
withoutTimeCellHeight,
|
||||
pickerQuarterPanelContentHeight,
|
||||
borderRadiusSM,
|
||||
colorTextLightSolid,
|
||||
cellHoverBg,
|
||||
timeColumnHeight,
|
||||
timeColumnWidth,
|
||||
timeCellHeight,
|
||||
controlItemBgActive,
|
||||
marginXXS,
|
||||
pickerDatePanelPaddingHorizontal,
|
||||
pickerControlIconMargin
|
||||
} = token;
|
||||
const pickerPanelWidth = token.calc(cellWidth).mul(7).add(token.calc(pickerDatePanelPaddingHorizontal).mul(2)).equal();
|
||||
return {
|
||||
[componentCls]: {
|
||||
'&-panel': {
|
||||
display: 'inline-flex',
|
||||
flexDirection: 'column',
|
||||
textAlign: 'center',
|
||||
background: colorBgContainer,
|
||||
borderRadius: borderRadiusLG,
|
||||
outline: 'none',
|
||||
'&-focused': {
|
||||
borderColor: colorPrimary
|
||||
},
|
||||
'&-rtl': {
|
||||
[`${componentCls}-prev-icon,
|
||||
${componentCls}-super-prev-icon`]: {
|
||||
transform: 'rotate(45deg)'
|
||||
},
|
||||
[`${componentCls}-next-icon,
|
||||
${componentCls}-super-next-icon`]: {
|
||||
transform: 'rotate(-135deg)'
|
||||
},
|
||||
[`${componentCls}-time-panel`]: {
|
||||
[`${componentCls}-content`]: {
|
||||
direction: 'ltr',
|
||||
'> *': {
|
||||
direction: 'rtl'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// ========================================================
|
||||
// = Shared Panel =
|
||||
// ========================================================
|
||||
[`&-decade-panel,
|
||||
&-year-panel,
|
||||
&-quarter-panel,
|
||||
&-month-panel,
|
||||
&-week-panel,
|
||||
&-date-panel,
|
||||
&-time-panel`]: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
width: pickerPanelWidth
|
||||
},
|
||||
// ======================= Header =======================
|
||||
'&-header': {
|
||||
display: 'flex',
|
||||
padding: `0 ${(0, _cssinjs.unit)(paddingXS)}`,
|
||||
color: colorTextHeading,
|
||||
borderBottom: `${(0, _cssinjs.unit)(lineWidth)} ${lineType} ${colorSplit}`,
|
||||
'> *': {
|
||||
flex: 'none'
|
||||
},
|
||||
button: {
|
||||
padding: 0,
|
||||
color: colorIcon,
|
||||
lineHeight: (0, _cssinjs.unit)(textHeight),
|
||||
background: 'transparent',
|
||||
border: 0,
|
||||
cursor: 'pointer',
|
||||
transition: `color ${motionDurationMid}`,
|
||||
fontSize: 'inherit',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
'&:empty': {
|
||||
display: 'none'
|
||||
}
|
||||
},
|
||||
'> button': {
|
||||
minWidth: '1.6em',
|
||||
fontSize,
|
||||
'&:hover': {
|
||||
color: colorIconHover
|
||||
},
|
||||
'&:disabled': {
|
||||
opacity: 0.25,
|
||||
pointerEvents: 'none'
|
||||
}
|
||||
},
|
||||
'&-view': {
|
||||
flex: 'auto',
|
||||
fontWeight: fontWeightStrong,
|
||||
lineHeight: (0, _cssinjs.unit)(textHeight),
|
||||
'> button': {
|
||||
color: 'inherit',
|
||||
fontWeight: 'inherit',
|
||||
verticalAlign: 'top',
|
||||
'&:not(:first-child)': {
|
||||
marginInlineStart: paddingXS
|
||||
},
|
||||
'&:hover': {
|
||||
color: colorPrimary
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// Arrow button
|
||||
[`&-prev-icon,
|
||||
&-next-icon,
|
||||
&-super-prev-icon,
|
||||
&-super-next-icon`]: {
|
||||
position: 'relative',
|
||||
width: pickerControlIconSize,
|
||||
height: pickerControlIconSize,
|
||||
'&::before': {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
insetInlineStart: 0,
|
||||
width: pickerControlIconSize,
|
||||
height: pickerControlIconSize,
|
||||
border: `0 solid currentcolor`,
|
||||
borderBlockStartWidth: pickerControlIconBorderWidth,
|
||||
borderInlineStartWidth: pickerControlIconBorderWidth,
|
||||
content: '""'
|
||||
}
|
||||
},
|
||||
[`&-super-prev-icon,
|
||||
&-super-next-icon`]: {
|
||||
'&::after': {
|
||||
position: 'absolute',
|
||||
top: pickerControlIconMargin,
|
||||
insetInlineStart: pickerControlIconMargin,
|
||||
display: 'inline-block',
|
||||
width: pickerControlIconSize,
|
||||
height: pickerControlIconSize,
|
||||
border: '0 solid currentcolor',
|
||||
borderBlockStartWidth: pickerControlIconBorderWidth,
|
||||
borderInlineStartWidth: pickerControlIconBorderWidth,
|
||||
content: '""'
|
||||
}
|
||||
},
|
||||
'&-prev-icon, &-super-prev-icon': {
|
||||
transform: 'rotate(-45deg)'
|
||||
},
|
||||
'&-next-icon, &-super-next-icon': {
|
||||
transform: 'rotate(135deg)'
|
||||
},
|
||||
// ======================== Body ========================
|
||||
'&-content': {
|
||||
width: '100%',
|
||||
tableLayout: 'fixed',
|
||||
borderCollapse: 'collapse',
|
||||
'th, td': {
|
||||
position: 'relative',
|
||||
minWidth: cellHeight,
|
||||
fontWeight: 'normal'
|
||||
},
|
||||
th: {
|
||||
height: token.calc(cellHeight).add(token.calc(pickerCellPaddingVertical).mul(2)).equal(),
|
||||
color: colorText,
|
||||
verticalAlign: 'middle'
|
||||
}
|
||||
},
|
||||
'&-cell': Object.assign({
|
||||
padding: `${(0, _cssinjs.unit)(pickerCellPaddingVertical)} 0`,
|
||||
color: colorTextDisabled,
|
||||
cursor: 'pointer',
|
||||
// In view
|
||||
'&-in-view': {
|
||||
color: colorText
|
||||
}
|
||||
}, genPickerCellInnerStyle(token)),
|
||||
[`&-decade-panel,
|
||||
&-year-panel,
|
||||
&-quarter-panel,
|
||||
&-month-panel`]: {
|
||||
[`${componentCls}-content`]: {
|
||||
height: token.calc(withoutTimeCellHeight).mul(4).equal()
|
||||
},
|
||||
[pickerCellInnerCls]: {
|
||||
padding: `0 ${(0, _cssinjs.unit)(paddingXS)}`
|
||||
}
|
||||
},
|
||||
'&-quarter-panel': {
|
||||
[`${componentCls}-content`]: {
|
||||
height: pickerQuarterPanelContentHeight
|
||||
}
|
||||
},
|
||||
// ========================================================
|
||||
// = Special =
|
||||
// ========================================================
|
||||
// ===================== Decade Panel =====================
|
||||
'&-decade-panel': {
|
||||
[pickerCellInnerCls]: {
|
||||
padding: `0 ${(0, _cssinjs.unit)(token.calc(paddingXS).div(2).equal())}`
|
||||
},
|
||||
[`${componentCls}-cell::before`]: {
|
||||
display: 'none'
|
||||
}
|
||||
},
|
||||
// ============= Year & Quarter & Month Panel =============
|
||||
[`&-year-panel,
|
||||
&-quarter-panel,
|
||||
&-month-panel`]: {
|
||||
[`${componentCls}-body`]: {
|
||||
padding: `0 ${(0, _cssinjs.unit)(paddingXS)}`
|
||||
},
|
||||
[pickerCellInnerCls]: {
|
||||
width: pickerYearMonthCellWidth
|
||||
}
|
||||
},
|
||||
// ====================== Date Panel ======================
|
||||
'&-date-panel': {
|
||||
[`${componentCls}-body`]: {
|
||||
padding: `${(0, _cssinjs.unit)(paddingXS)} ${(0, _cssinjs.unit)(pickerDatePanelPaddingHorizontal)}`
|
||||
},
|
||||
[`${componentCls}-content th`]: {
|
||||
boxSizing: 'border-box',
|
||||
padding: 0
|
||||
}
|
||||
},
|
||||
// ====================== Week Panel ======================
|
||||
'&-week-panel-row': {
|
||||
td: {
|
||||
'&:before': {
|
||||
transition: `background ${motionDurationMid}`
|
||||
},
|
||||
'&:first-child:before': {
|
||||
borderStartStartRadius: borderRadiusSM,
|
||||
borderEndStartRadius: borderRadiusSM
|
||||
},
|
||||
'&:last-child:before': {
|
||||
borderStartEndRadius: borderRadiusSM,
|
||||
borderEndEndRadius: borderRadiusSM
|
||||
}
|
||||
},
|
||||
'&:hover td:before': {
|
||||
background: cellHoverBg
|
||||
},
|
||||
'&-range-start td, &-range-end td, &-selected td, &-hover td': {
|
||||
// Rise priority to override hover style
|
||||
[`&${pickerCellCls}`]: {
|
||||
'&:before': {
|
||||
background: colorPrimary
|
||||
},
|
||||
[`&${componentCls}-cell-week`]: {
|
||||
color: new _fastColor.FastColor(colorTextLightSolid).setA(0.5).toHexString()
|
||||
},
|
||||
[pickerCellInnerCls]: {
|
||||
color: colorTextLightSolid
|
||||
}
|
||||
}
|
||||
},
|
||||
'&-range-hover td:before': {
|
||||
background: controlItemBgActive
|
||||
}
|
||||
},
|
||||
// >>> ShowWeek
|
||||
'&-week-panel, &-date-panel-show-week': {
|
||||
[`${componentCls}-body`]: {
|
||||
padding: `${(0, _cssinjs.unit)(paddingXS)} ${(0, _cssinjs.unit)(paddingSM)}`
|
||||
},
|
||||
[`${componentCls}-content th`]: {
|
||||
width: 'auto'
|
||||
}
|
||||
},
|
||||
// ==================== Datetime Panel ====================
|
||||
'&-datetime-panel': {
|
||||
display: 'flex',
|
||||
[`${componentCls}-time-panel`]: {
|
||||
borderInlineStart: `${(0, _cssinjs.unit)(lineWidth)} ${lineType} ${colorSplit}`
|
||||
},
|
||||
[`${componentCls}-date-panel,
|
||||
${componentCls}-time-panel`]: {
|
||||
transition: `opacity ${motionDurationSlow}`
|
||||
},
|
||||
// Keyboard
|
||||
'&-active': {
|
||||
[`${componentCls}-date-panel,
|
||||
${componentCls}-time-panel`]: {
|
||||
opacity: 0.3,
|
||||
'&-active': {
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// ====================== Time Panel ======================
|
||||
'&-time-panel': {
|
||||
width: 'auto',
|
||||
minWidth: 'auto',
|
||||
[`${componentCls}-content`]: {
|
||||
display: 'flex',
|
||||
flex: 'auto',
|
||||
height: timeColumnHeight
|
||||
},
|
||||
'&-column': {
|
||||
flex: '1 0 auto',
|
||||
width: timeColumnWidth,
|
||||
margin: `${(0, _cssinjs.unit)(paddingXXS)} 0`,
|
||||
padding: 0,
|
||||
overflowY: 'hidden',
|
||||
textAlign: 'start',
|
||||
listStyle: 'none',
|
||||
transition: `background ${motionDurationMid}`,
|
||||
overflowX: 'hidden',
|
||||
'&::-webkit-scrollbar': {
|
||||
width: 8,
|
||||
backgroundColor: 'transparent'
|
||||
},
|
||||
'&::-webkit-scrollbar-thumb': {
|
||||
backgroundColor: token.colorTextTertiary,
|
||||
borderRadius: token.borderRadiusSM
|
||||
},
|
||||
// For Firefox
|
||||
'&': {
|
||||
scrollbarWidth: 'thin',
|
||||
scrollbarColor: `${token.colorTextTertiary} transparent`
|
||||
},
|
||||
'&::after': {
|
||||
display: 'block',
|
||||
height: `calc(100% - ${(0, _cssinjs.unit)(timeCellHeight)})`,
|
||||
content: '""'
|
||||
},
|
||||
'&:not(:first-child)': {
|
||||
borderInlineStart: `${(0, _cssinjs.unit)(lineWidth)} ${lineType} ${colorSplit}`
|
||||
},
|
||||
'&-active': {
|
||||
background: new _fastColor.FastColor(controlItemBgActive).setA(0.2).toHexString()
|
||||
},
|
||||
'&:hover': {
|
||||
overflowY: 'auto'
|
||||
},
|
||||
'> li': {
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
[`&${componentCls}-time-panel-cell`]: {
|
||||
marginInline: marginXXS,
|
||||
[`${componentCls}-time-panel-cell-inner`]: {
|
||||
display: 'block',
|
||||
width: token.calc(timeColumnWidth).sub(token.calc(marginXXS).mul(2)).equal(),
|
||||
height: timeCellHeight,
|
||||
margin: 0,
|
||||
paddingBlock: 0,
|
||||
paddingInlineEnd: 0,
|
||||
paddingInlineStart: token.calc(timeColumnWidth).sub(timeCellHeight).div(2).equal(),
|
||||
color: colorText,
|
||||
lineHeight: (0, _cssinjs.unit)(timeCellHeight),
|
||||
borderRadius: borderRadiusSM,
|
||||
cursor: 'pointer',
|
||||
transition: `background ${motionDurationMid}`,
|
||||
'&:hover': {
|
||||
background: cellHoverBg
|
||||
}
|
||||
},
|
||||
'&-selected': {
|
||||
[`${componentCls}-time-panel-cell-inner`]: {
|
||||
background: controlItemBgActive
|
||||
}
|
||||
},
|
||||
'&-disabled': {
|
||||
[`${componentCls}-time-panel-cell-inner`]: {
|
||||
color: colorTextDisabled,
|
||||
background: 'transparent',
|
||||
cursor: 'not-allowed'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
exports.genPanelStyle = genPanelStyle;
|
||||
const genPickerPanelStyle = token => {
|
||||
const {
|
||||
componentCls,
|
||||
textHeight,
|
||||
lineWidth,
|
||||
paddingSM,
|
||||
antCls,
|
||||
colorPrimary,
|
||||
cellActiveWithRangeBg,
|
||||
colorPrimaryBorder,
|
||||
lineType,
|
||||
colorSplit
|
||||
} = token;
|
||||
return {
|
||||
[`${componentCls}-dropdown`]: {
|
||||
// ======================== Footer ========================
|
||||
[`${componentCls}-footer`]: {
|
||||
borderTop: `${(0, _cssinjs.unit)(lineWidth)} ${lineType} ${colorSplit}`,
|
||||
'&-extra': {
|
||||
padding: `0 ${(0, _cssinjs.unit)(paddingSM)}`,
|
||||
lineHeight: (0, _cssinjs.unit)(token.calc(textHeight).sub(token.calc(lineWidth).mul(2)).equal()),
|
||||
textAlign: 'start',
|
||||
'&:not(:last-child)': {
|
||||
borderBottom: `${(0, _cssinjs.unit)(lineWidth)} ${lineType} ${colorSplit}`
|
||||
}
|
||||
}
|
||||
},
|
||||
// ==================== Footer > Ranges ===================
|
||||
[`${componentCls}-panels + ${componentCls}-footer ${componentCls}-ranges`]: {
|
||||
justifyContent: 'space-between'
|
||||
},
|
||||
[`${componentCls}-ranges`]: {
|
||||
marginBlock: 0,
|
||||
paddingInline: (0, _cssinjs.unit)(paddingSM),
|
||||
overflow: 'hidden',
|
||||
textAlign: 'start',
|
||||
listStyle: 'none',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
'> li': {
|
||||
lineHeight: (0, _cssinjs.unit)(token.calc(textHeight).sub(token.calc(lineWidth).mul(2)).equal()),
|
||||
display: 'inline-block'
|
||||
},
|
||||
[`${componentCls}-now-btn-disabled`]: {
|
||||
pointerEvents: 'none',
|
||||
color: token.colorTextDisabled
|
||||
},
|
||||
// https://github.com/ant-design/ant-design/issues/23687
|
||||
[`${componentCls}-preset > ${antCls}-tag-blue`]: {
|
||||
color: colorPrimary,
|
||||
background: cellActiveWithRangeBg,
|
||||
borderColor: colorPrimaryBorder,
|
||||
cursor: 'pointer'
|
||||
},
|
||||
[`${componentCls}-ok`]: {
|
||||
paddingBlock: token.calc(lineWidth).mul(2).equal(),
|
||||
marginInlineStart: 'auto'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
var _default = exports.default = genPickerPanelStyle;
|
||||
Reference in New Issue
Block a user