* Copyright (c) 2022 - present TinyVue Authors.
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
*
* Use of this source code is governed by an MIT-style license.
*
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
*
*/
@import '../mixins/common.less';
@import '../custom.less';
@import './vars.less';
@import '../transition/timepicker.less';
@picker-prefix-cls: ~'@{css-prefix}picker';
@date-editor-prefix-cls: ~'@{css-prefix}date-editor';
@range-editor-prefix-cls: ~'@{css-prefix}range-editor';
@range-prefix-cls: ~'@{css-prefix}range';
.@{picker-prefix-cls} {
position: relative;
.@{date-editor-prefix-cls} {
.inject-Picker-vars();
position: relative;
display: inline-block;
text-align: left;
.@{css-prefix}svg {
font-size: var(--tv-Picker-icon-size);
fill: var(--tv-Picker-icon-color);
&:hover {
fill: var(--tv-Picker-icon-color-hover);
}
}
&.@{input-prefix-cls},
&.@{input-prefix-cls}__inner {
width: 100%;
}
&--dates {
.@{input-prefix-cls}__inner {
.text-overflow();
}
}
&.show-auto-width {
&.@{input-prefix-cls},
&.@{input-prefix-cls}__inner {
width: 100%;
}
}
.@{input-prefix-cls}__label {
color: var(--tv-Picker-label-text-color);
font-size: 12px;
margin-right: 8px;
max-width: 100px;
display: inline-block;
text-align: left;
.text-overflow();
}
.@{input-prefix-cls}__icon-container {
width: initial;
cursor: pointer;
position: absolute;
right: 0;
.baseClearicon {
position: absolute;
& + .@{css-prefix}svg-size {
visibility: hidden;
}
&:hover {
fill: var(--tv-Picker-icon-color-hover);
}
}
&:not(.@{range-prefix-cls}__icon) {
display: flex;
}
}
.@{range-prefix-cls}-input,
.@{range-prefix-cls}-separator {
font-size: var(--tv-Picker-font-size);
height: 100%;
margin: 0;
text-align: center;
display: inline-block;
}
.@{range-prefix-cls}-input {
text-align: left;
appearance: none;
border: none;
outline: 0;
padding: 0;
width: 39%;
background: inherit;
color: var(--tv-Picker-text-color);
.text-overflow();
.placeholder();
}
.@{range-prefix-cls}-separator {
padding: 0 5px;
line-height: 22px;
width: 12%;
}
.@{range-prefix-cls}__close-icon {
position: absolute;
right: 12px;
display: flex;
align-items: center;
height: 100%;
svg {
width: var(--tv-Picker-icon-size);
height: var(--tv-Picker-icon-size);
cursor: pointer;
}
}
.@{range-prefix-cls}__close-icon:has(> svg) + .@{range-prefix-cls}__icon {
display: none;
}
}
}
.@{range-editor-prefix-cls}.@{input-prefix-cls}__inner {
width: 360px;
}
.@{range-editor-prefix-cls} {
&:not(.is-display-only).@{input-prefix-cls}__inner {
display: inline-flex;
align-items: center;
padding: 3px 10px;
}
&:not(.is-display-only) .@{range-prefix-cls}-input {
line-height: 1;
}
&:not(.is-display-only).is-active,
&:not(.is-display-only).is-active:hover {
border-color: var(--tv-Picker-border-color-active);
}
&--medium:not(.is-display-only) {
&.@{input-prefix-cls}__inner {
height: var(--tv-Picker-height-medium);
}
.@{range-prefix-cls}-separator {
line-height: 34px;
font-size: var(--tv-Picker-font-size);
}
.@{range-prefix-cls}-input {
font-size: var(--tv-Picker-font-size);
}
}
&--small:not(.is-display-only) {
&.@{input-prefix-cls}__inner {
height: var(--tv-Picker-height-small);
}
.@{range-prefix-cls}-separator {
line-height: 20px;
font-size: var(--tv-Picker-font-size);
}
.@{range-prefix-cls}-input {
font-size: var(--tv-Picker-font-size);
}
}
&--mini:not(.is-display-only) {
&.@{input-prefix-cls}__inner {
height: var(--tv-Picker-height-mini);
}
.@{range-prefix-cls}-separator {
line-height: 16px;
font-size: var(--tv-Picker-font-size-sm);
}
.@{range-prefix-cls}-input {
font-size: var(--tv-Picker-font-size-sm);
}
}
&:not(.is-display-only).is-disabled {
background-color: var(--tv-Picker-bg-color-disabled);
border-color: transparent;
color: var(--tv-Picker-text-color-disabled);
cursor: not-allowed;
&:focus,
&:hover {
border-color: transparent;
}
input {
color: var(--tv-Picker-text-color-disabled);
background-color: var(--tv-Picker-bg-color-disabled);
cursor: not-allowed;
.placeholder();
}
.@{range-prefix-cls}-separator {
color: var(--tv-Picker-text-color-disabled);
}
}
}
.@{range-editor-prefix-cls}.is-display-only {
position: relative;
border-width: 0;
& > *:not(.@{range-editor-prefix-cls}-display-only) {
visibility: hidden;
}
& > .@{range-editor-prefix-cls}-display-only {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
max-width: 100%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-size: 12px;
}
}
.@{scrollbar-prefix-cls} {
overflow: hidden;
position: relative;
&:active > &__bar,
&:focus > &__bar,
&:hover > &__bar {
opacity: 1;
transition: opacity 340ms ease-out;
}
&__wrap {
overflow: scroll;
height: 100%;
}
&__wrap--hidden-default::-webkit-scrollbar {
width: 0;
height: 0;
}
&__thumb {
position: relative;
display: block;
width: 0;
height: 0;
cursor: pointer;
border-radius: inherit;
background-color: rgba(144, 147, 153, 0.3);
transition: 0.3s background-color;
&:hover {
background-color: rgba(144, 147, 153, 0.5);
}
}
&__bar {
position: absolute;
right: 2px;
bottom: 2px;
z-index: 1;
border-radius: 4px;
opacity: 0;
transition: opacity 120ms ease-out;
&.is-vertical {
width: 6px;
top: 2px;
& > div {
width: 100%;
}
}
&.is-horizontal {
height: 6px;
left: 2px;
& > div {
height: 100%;
}
}
}
}