amis/scss/components/form/_icon-picker.scss
2020-03-02 15:40:05 +08:00

103 lines
2.0 KiB
SCSS

.#{$ns}IconPickerControl {
@include input-text();
&-placeholder {
color: $Form-input-placeholderColor;
user-select: none;
position: absolute;
left: $Form-input-paddingX;
top: $Form-input-paddingY;
margin-top: 2 * $Form-input-borderWidth;
line-height: $Form-input-lineHeight;
}
&-valueWrap {
flex-grow: 1;
line-height: 1;
white-space: nowrap;
> input {
display: inline-block;
width: auto;
vertical-align: middle;
}
}
&-input--withAC {
position: relative;
flex-wrap: wrap;
> input {
width: auto;
}
}
&-sugsPanel {
position: absolute;
background: $Form-select-menu-bg;
color: $Form-select-menu-color;
border: $Form-input-borderWidth solid $Form-input-onFocused-borderColor;
left: px2rem(-1px);
right: px2rem(-1px);
top: 100%;
z-index: 10;
height: auto;
}
&-tabs {
background: $IconPicker-tabs-bg;
}
&-tab {
display: inline-block;
padding: $IconPicker-tab-padding;
height: $IconPicker-tab-height;
line-height: $IconPicker-tab-lineHeight;
cursor: pointer;
text-align: center;
font-size: $fontSizeSm;
user-select: none;
&.active {
background: $IconPicker-tab-onActive-bg;
}
}
&-sugs {
position: relative;
padding: $IconPicker-padding;
max-height: $IconPicker-content-maxHeight;
overflow-y: auto;
}
&-sugItem {
display: inline-block;
width: $IconPicker-sugItem-width;
height: $IconPicker-sugItem-height;
text-align: center;
line-height: $IconPicker-sugItem-lineHeight;
cursor: pointer;
&:hover {
background-color: $Form-select-menu-onHover-bg;
}
&.is-active {
color: $white;
background-color: $Form-select-menu-onActive-color;
}
}
&-value {
user-select: none;
line-height: $Form-input-lineHeight * $Form-input-fontSize;
vertical-align: middle;
display: inline-block;
> i {
display: inline-block;
margin-right: $IconPicker-selectedIcon-marginRight;
}
}
}