amis/scss/components/form/_picker.scss
2020-06-08 17:13:54 +08:00

104 lines
2.0 KiB
SCSS

.#{$ns}Picker {
@include input-text();
outline: none;
&.is-focus > &-input {
border-color: $Form-input-onFocused-borderColor;
box-shadow: $Form-input-boxShadow;
@if $Form-input-onFocused-bg !=$Form-input-bg {
background-color: $Form-input-onFocused-bg;
}
}
&-placeholder {
color: $Form-input-placeholderColor;
user-select: none;
position: absolute;
// margin-top: 2 * $Form-input-borderWidth;
line-height: $Form-input-lineHeight;
}
&-input {
min-height: $Form-input-height;
height: auto;
}
.#{$ns}Picker-values {
display: inline;
}
&-valueWrap {
flex-grow: 1;
position: relative;
> input {
width: 1rem;
display: inline-block;
}
}
.#{$ns}Picker-valueWrap {
margin-bottom: -$gap-xs;
line-height: 1;
}
.#{$ns}Picker-value {
cursor: pointer;
user-select: none;
white-space: nowrap;
vertical-align: middle;
line-height: $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px);
display: inline-block;
font-size: $Form-selectValue-fontSize;
color: $Form-selectValue-color;
background: $Form-selectValue-bg;
border: px2rem(1px) solid $Form-selectValue-borderColor;
border-radius: 2px;
margin-right: $gap-xs;
margin-bottom: $gap-xs;
&.is-disabled {
pointer-events: none;
opacity: $Button-onDisabled-opacity;
}
}
.#{$ns}Picker-valueIcon {
cursor: pointer;
border-right: px2rem(1px) solid $Form-selectValue-borderColor;
padding: 1px 5px;
&:hover {
background-color: darken($Form-selectValue-bg, 5%);
}
}
.#{$ns}Picker-valueLabel {
padding: 0 $gap-xs;
}
&-btn {
cursor: pointer;
color: $Picker-iconColor;
&:hover {
color: $Picker-onHover-iconColor;
}
}
&-clear {
display: inline-block;
@include input-clear();
line-height: 1;
margin-right: $gap-xs;
}
}
.#{$ns}PickerControl.is-inline {
.#{$ns}Picker {
display: inline-block;
min-width: px2rem(150px);
}
}