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

106 lines
2.2 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: var(--Form-input-placeholderColor);
2019-12-06 09:58:08 +08:00
user-select: none;
position: absolute;
left: var(--Form-input-paddingX);
top: var(--Form-input-paddingY);
margin-top: calc(2 * var(--Form-input-borderWidth));
line-height: var(--Form-input-lineHeight);
2019-12-06 09:58:08 +08:00
}
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: var(--Form-select-menu-bg);
color: var(--Form-select-menu-color);
border: var(--Form-input-borderWidth) solid
var(--Form-input-onFocused-borderColor);
2019-12-06 09:58:08 +08:00
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 {
background: var(--IconPicker-tabs-bg);
2019-12-06 09:58:08 +08:00
}
2019-04-30 11:11:25 +08:00
2019-12-06 09:58:08 +08:00
&-tab {
display: inline-block;
padding: var(--IconPicker-tab-padding);
height: var(--IconPicker-tab-height);
line-height: var(--IconPicker-tab-lineHeight);
2019-12-06 09:58:08 +08:00
cursor: pointer;
text-align: center;
font-size: var(--fontSizeSm);
2020-03-02 15:40:05 +08:00
user-select: none;
2019-12-06 09:58:08 +08:00
&.active {
background: var(--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
&-sugs {
position: relative;
padding: var(--IconPicker-padding);
max-height: var(--IconPicker-content-maxHeight);
2020-03-02 15:40:05 +08:00
overflow-y: auto;
2019-12-06 09:58:08 +08:00
}
2019-04-30 11:11:25 +08:00
2019-12-06 09:58:08 +08:00
&-sugItem {
display: inline-block;
width: var(--IconPicker-sugItem-width);
height: var(--IconPicker-sugItem-height);
2019-12-06 09:58:08 +08:00
text-align: center;
line-height: var(--IconPicker-sugItem-lineHeight);
2019-12-06 09:58:08 +08:00
cursor: pointer;
2020-03-02 15:40:05 +08:00
&:hover {
background: var(--Form-select-menu-onHover-bg);
2020-03-02 15:40:05 +08:00
}
&.is-active {
color: var(--white);
background: var(--Form-select-menu-onActive-color);
2020-03-02 15:40:05 +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
&-value {
user-select: none;
line-height: calc(
var(--Form-input-lineHeight) * var(--Form-input-fontSize)
);
2019-12-06 09:58:08 +08:00
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: var(--IconPicker-selectedIcon-marginRight);
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
}
}