amis/scss/components/_search-box.scss

67 lines
1.3 KiB
SCSS
Raw Normal View History

2020-05-26 20:28:09 +08:00
.#{$ns}SearchBox {
display: inline-flex;
flex-direction: row;
line-height: var(--Form-input-lineHeight);
font-size: var(--Form-input-fontSize);
2020-05-26 20:28:09 +08:00
flex-wrap: nowrap;
align-items: center;
justify-content: flex-end;
height: 30px;
width: 30px;
padding: 0 8px;
transition: all var(--animation-duration) ease-in-out;
border: var(--Form-input-borderWidth) solid transparent;
border-radius: var(--Form-input-borderRadius);
2020-05-26 20:28:09 +08:00
&:hover {
background: var(--Form-input-onHover-bg);
2020-05-26 20:28:09 +08:00
}
&.is-active {
background: var(--Form-input-bg);
border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
2020-05-26 20:28:09 +08:00
width: 150px;
> input {
flex-grow: 1;
}
}
&-activeBtn,
&-searchBtn,
2020-05-26 20:28:09 +08:00
&-cancelBtn {
cursor: pointer;
color: var(--icon-color);
2020-05-26 20:28:09 +08:00
&:hover {
color: var(--icon-onHover-color);
2020-05-26 20:28:09 +08:00
}
}
&.is-disabled &-activeBtn,
&.is-disabled &-searchBtn,
&.is-disabled &-cancelBtn {
color: var(--icon-onDisabled-color);
pointer-events: none;
}
2020-05-26 20:28:09 +08:00
> input {
outline: none;
border: none;
background: transparent;
color: var(--Form-input-color);
2020-05-26 20:28:09 +08:00
width: 0;
height: calc(var(--Form-input-lineHeight) * var(--Form-input-fontSize));
2020-05-26 20:28:09 +08:00
&::placeholder {
color: var(--Form-input-placeholderColor);
2020-05-26 20:28:09 +08:00
user-select: none;
}
}
height: 30px;
}