feat(time-picker): [time-picker] updata time-picker xdesign (#2013)

* feat(time-picker): [time-picker] updata time-picker xdesign

* feat(time-picker): [time-picker] updata time-picker xdesign

* feat(time-picker): [time-picker] updata time-picker xdesign
This commit is contained in:
wuyiping0628 2024-08-31 03:04:37 -07:00 committed by GitHub
parent cdad7745e4
commit 68d17cd02c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 37 additions and 14 deletions

View File

@ -60,7 +60,9 @@ export default {
},
getFlagStyle: ({ index, idx }) => {
return {
left: `calc(${(100 / props.data[props.flagBefore ? index : index + 1][props.flagField].length) * idx}% + ${idx * 8}px)`
left: `calc(${(100 / props.data[props.flagBefore ? index : index + 1][props.flagField].length) * idx}% + ${
idx * 8
}px)`
}
}
}

View File

@ -120,6 +120,8 @@ export const getFlagStyle =
(props) =>
({ index, idx }) => {
return {
left: `calc(${(100 / (props.data[props.flagBefore ? index : index + 1][props.flagField].length + 1)) * (idx + 1)}% - 29px)`
left: `calc(${
(100 / (props.data[props.flagBefore ? index : index + 1][props.flagField].length + 1)) * (idx + 1)
}% - 29px)`
}
}

View File

@ -35,14 +35,18 @@
&__header {
display: var(--ti-time-panel-header-display);
}
&__header-input {
width: 212px;
margin: 16px 4px 24px;
input {
height: 28px;
}
}
&__header-title {
font-size: 14px;
display: flex;
justify-content: space-around;
color: #808080;
@ -100,11 +104,11 @@
&__footer {
border-top: 1px solid var(--ti-time-panel-border-color);
padding: var(--ti-time-panel-footer-padding) 4px;
padding: var(--ti-time-panel-footer-padding-top) var(--ti-time-panel-footer-padding-right);
height: var(--ti-time-panel-footer-height, 36px);
text-align: right;
box-sizing: border-box;
margin-top: 12px;
margin: 12px var(--ti-time-panel-footer-margin-right) 0;
}
&__btn.tiny-button {

View File

@ -1,7 +1,9 @@
export const tinyTimePanelSmbTheme = {
'ti-time-panel-footer-height': '64px',
'ti-time-panel-footer-padding': '16px',
'ti-time-panel-padding-right': '12px',
'ti-time-panel-footer-height': 'var(--ti-common-size-14x)',
'ti-time-panel-footer-padding-top': 'var(--ti-common-size-4x)',
'ti-time-panel-footer-padding-right': 'var(--ti-common-size-4x)',
'ti-time-panel-padding-right': 'calc(var(--ti-common-size-4x) - 2px)',
'ti-time-panel-footer-margin-right': 'calc(2px - var(--ti-common-size-4x))',
'ti-time-panel-width': '220px',
'ti-time-panel-content-split-line-display': 'none',
'ti-time-panel-btn-cancel-display': 'none',

View File

@ -25,7 +25,9 @@
--ti-time-panel-btn-font-weight: 800;
--ti-time-panel-btn-confirm-hover-bg-color: transparent;
--ti-time-panel-footer-height: 36px;
--ti-time-panel-footer-padding: 4px;
--ti-time-panel-footer-padding-top: 4px;
--ti-time-panel-footer-padding-right: 0;
--ti-time-panel-footer-margin-right: 0;
--ti-time-panel-width: 180px;
--ti-time-spinner-list-margin-bottom: 0px;
--ti-time-spinner-list-margin-top: 0px;

View File

@ -121,6 +121,7 @@
color: var(--ti-time-spinner-text-color);
height: var(--ti-time-spinner-item-height);
line-height: var(--ti-time-spinner-item-line-height);
font-weight: var(--ti-time-spinner-item-font-weight);
&:hover:not(.disabled):not(.active) {
background: var(--ti-time-spinner-selected-bg-color);
@ -130,7 +131,7 @@
&.active:not(.disabled) {
color: var(--ti-time-spinner-item-active-text-color);
font-weight: var(--ti-time-spinner-item-font-weight);
font-weight: var(--ti-time-spinner-item-active-font-weight);
background-color: var(--ti-time-spinner-item-bg-color);
border-radius: var(--ti-time-spinner-selected-border-radius);
}
@ -138,6 +139,8 @@
&.disabled {
color: var(--ti-time-spinner-disabled-text-color);
cursor: not-allowed;
background: var(--ti-time-spinner-disabled-text-background);
border-radius: var(--ti-time-spinner-disabled-text-border-radius);
}
}

View File

@ -9,5 +9,10 @@ export const tinyTimeSpinnerSmbTheme = {
'ti-time-spinner-selected-bg-color': '#deedff',
'ti-time-spinner-item-bg-color': '#deedff',
'ti-time-spinner-selected-border-radius': '16px',
'ti-time-spinner-item-font-weight': 'var(--ti-common-font-weight-normal)'
'ti-time-spinner-text-color': 'var(--ti-common-color-selected-text-color)',
'ti-time-spinner-item-active-text-color': 'var(--ti-common-color-selected-text-color)',
'ti-time-spinner-disabled-text-border-radius': 'var(--ti-common-size-4x)',
'ti-time-spinner-disabled-text-background': 'var(--ti-common-color-bg-disabled)',
'ti-time-spinner-item-font-weight': 'var(--ti-common-font-weight-6)',
'ti-time-spinner-item-active-font-weight': 'var(--ti-common-font-weight-6)'
}

View File

@ -14,7 +14,8 @@
--ti-time-spinner-arrow-text-color: #909399;
--ti-time-spinner-arrow-hover-text-color: var(--ti-base-color-brand-7, #526ecc);
--ti-time-spinner-item-active-text-color: #303133;
--ti-time-spinner-item-font-weight: 700;
--ti-time-spinner-item-active-font-weight: 700;
--ti-time-spinner-item-font-weight: var(--ti-common-font-weight-4, 400);
--ti-time-spinner-item-bg-color: transparent;
--ti-time-spinner-list-border-color: transparent;
--ti-time-spinner-font-size: var(--ti-common-font-size-base, 12px);
@ -22,10 +23,12 @@
--ti-time-spinner-bg-color: var(--ti-base-color-light);
--ti-time-spinner-selected-bg-color: #f2f2f3;
--ti-time-spinner-wrapper-max-height: 190px;
--ti-time-spinner-item-margin-top: 0px;
--ti-time-spinner-item-margin-right: 0px;
--ti-time-spinner-item-margin-top: 0;
--ti-time-spinner-item-margin-right: 0;
--ti-time-spinner-item-height: 32px;
--ti-time-spinner-item-line-height: 32px;
--ti-time-spinner-selected-border-radius: 0px;
--ti-time-spinner-selected-border-radius: 0;
--ti-time-spinner-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
--ti-time-spinner-disabled-text-background: var(--ti-common-color-bg-white-normal, #fff);
--ti-time-spinner-disabled-text-border-radius: var(--ti-common-space-0, 0);
}