forked from opentiny/tiny-vue
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:
parent
cdad7745e4
commit
68d17cd02c
|
@ -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)`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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)`
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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)'
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue