amis/packages/amis-ui/scss/components/_input-box.scss
徐佳豪 0a382a34b4
fix:amis 4.0样式对齐 checkbox&select等组件 (#4878)
* fix:amis 4.0样式对齐 checkbox&select等组件

* style:修复checkbox勾选框hover上去出现小圆点

Co-authored-by: xujiahao01 <xujiahao01@baidu.com>
2022-07-26 17:21:43 +08:00

76 lines
1.4 KiB
SCSS

.#{$ns}InputBox {
@include input-input();
@include input-border();
&--inline {
display: inline-flex;
}
> input[readonly] {
cursor: inherit;
}
&.is-error,
.is-error > & {
border-color: var(--Form-input-onError-borderColor);
background: var(--Form-input-onError-bg);
}
&.is-focused {
border-color: var(--Form-input-onFocused-borderColor);
box-shadow: var(--Form-input-boxShadow);
background: var(--Form-input-onFocused-bg);
}
&.is-clickable:hover {
border-color: var(--Form-input-onFocused-borderColor);
box-shadow: var(--Form-input-boxShadow);
cursor: pointer;
}
&.is-error.is-focused {
border-color: var(--Form-input-onError-borderColor);
}
&.is-disabled {
color: var(--text--muted-color);
background: var(--Form-input-onDisabled-bg);
border-color: var(--Form-input-onDisabled-borderColor);
}
&-clear {
@include input-clear();
}
> svg {
display: inline-block;
width: 14px;
color: var(--icon-color);
margin-top: px2rem(2px);
}
> a {
cursor: pointer;
}
&-caret {
transition: transform var(--animation-duration) ease-out;
margin: 5px;
display: flex;
color: var(--Form-select-caret-iconColor);
&:hover {
color: var(--Form-select-caret-onHover-iconColor);
}
> svg {
width: px2rem(10px);
height: px2rem(10px);
top: 0;
}
}
&.is-active &-caret {
transform: rotate(180deg);
}
}