amis/scss/components/form/_icon-picker.scss

104 lines
2.0 KiB
SCSS
Raw Normal View History

2019-04-30 11:11:25 +08:00
.#{$ns}IconPickerControl {
2019-12-06 09:58:08 +08:00
@include input-text();
2019-04-30 11:11:25 +08:00
2019-12-06 09:58:08 +08:00
&-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;
}
2019-04-30 11:11:25 +08:00
2019-12-06 09:58:08 +08:00
&-valueWrap {
flex-grow: 1;
line-height: 1;
white-space: nowrap;
2019-04-30 11:11:25 +08:00
2019-12-06 09:58:08 +08:00
> input {
display: inline-block;
width: auto;
vertical-align: middle;
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
}
2019-04-30 11:11:25 +08:00
2019-12-06 09:58:08 +08:00
&-input--withAC {
position: relative;
flex-wrap: wrap;
2019-04-30 11:11:25 +08:00
2019-12-06 09:58:08 +08:00
> input {
width: auto;
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
}
2019-04-30 11:11:25 +08:00
2019-12-06 09:58:08 +08:00
&-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;
}
2019-04-30 11:11:25 +08:00
2019-12-06 09:58:08 +08:00
&-tabs {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 11;
background: $IconPicker-tabs-bg;
}
2019-04-30 11:11:25 +08:00
2019-12-06 09:58:08 +08:00
&-tab {
display: inline-block;
padding: $IconPicker-tab-padding;
height: $IconPicker-tab-height;
line-height: $IconPicker-tab-lineHeight;
cursor: pointer;
text-align: center;
2019-12-06 09:58:08 +08:00
&.active {
background: $IconPicker-tab-onActive-bg;
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
}
2019-04-30 11:11:25 +08:00
2019-12-06 09:58:08 +08:00
&-singleVendor {
padding: $IconPicker-singleVendor-padding;
}
2019-04-30 11:11:25 +08:00
2019-12-06 09:58:08 +08:00
&-multiVendor {
padding: $IconPicker-multiVendor-padding;
}
2019-04-30 11:11:25 +08:00
2019-12-06 09:58:08 +08:00
&-sugs {
position: relative;
max-height: $IconPicker-content-maxHeight;
overflow-y: scroll;
}
2019-04-30 11:11:25 +08:00
2019-12-06 09:58:08 +08:00
&-sugItem {
display: inline-block;
width: $IconPicker-sugItem-width;
height: $IconPicker-sugItem-height;
text-align: center;
line-height: $IconPicker-sugItem-lineHeight;
cursor: pointer;
}
2019-04-30 11:11:25 +08:00
2019-12-06 09:58:08 +08:00
&-value {
user-select: none;
line-height: $Form-input-lineHeight * $Form-input-fontSize;
vertical-align: middle;
display: inline-block;
2019-04-30 11:11:25 +08:00
2019-12-06 09:58:08 +08:00
> i {
display: inline-block;
margin-right: $IconPicker-selectedIcon-marginRight;
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
}
}