amis-rpc-design/libs/amis/packages/amis-ui/scss/components/_input-box.scss
2023-10-07 19:42:30 +08:00

104 lines
2.0 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);
transform: rotate(90deg);
&:hover {
color: var(--Form-select-caret-onHover-iconColor);
}
> svg {
width: px2rem(10px);
height: px2rem(10px);
top: 0;
}
}
&.is-active &-caret {
transform: rotate(270deg);
}
&.is-mobile {
border: none;
border-radius: 0;
position: relative;
&::before {
@include hairline-bottom(var(--Form-input-borderColor));
}
&.is-error,
.is-error > & {
border-bottom-color: var(--Form-input-onError-borderColor);
}
&.is-focused {
border-bottom-color: var(--Form-input-onFocused-borderColor);
}
&.is-error.is-focused {
border-bottom-color: var(--Form-input-onError-borderColor);
}
&.is-disabled {
border-bottom-color: var(--Form-input-onDisabled-borderColor);
}
}
}