amis2/scss/components/_result-box.scss

129 lines
2.4 KiB
SCSS
Raw Normal View History

2020-05-14 20:47:05 +08:00
.#{$ns}ResultBox {
@include input-input();
flex-wrap: wrap;
padding: 0 px2rem(3px);
2020-05-14 20:47:05 +08:00
min-height: $Form-input-height;
align-items: center;
&.is-error {
border-color: $Form-input-onError-borderColor;
background-color: $Form-input-onError-bg;
}
2020-07-03 17:11:32 +08:00
&.is-focused,
&:focus {
outline: none;
2020-05-14 20:47:05 +08:00
border-color: $Form-input-onFocused-borderColor;
box-shadow: $Form-input-boxShadow;
@if $Form-input-onFocused-bg !=$Form-input-bg {
background-color: $Form-input-onFocused-bg;
}
}
2020-07-15 20:15:38 +08:00
&.is-clickable:not(.is-disabled) {
2020-06-12 14:39:21 +08:00
cursor: pointer;
&:hover {
border-color: $Form-input-onFocused-borderColor;
box-shadow: $Form-input-boxShadow;
@if $Form-input-onFocused-bg !=$Form-input-bg {
background-color: $Form-input-onFocused-bg;
}
}
}
2020-05-14 20:47:05 +08:00
&.is-error.is-focused {
border-color: $Form-input-onError-borderColor;
}
&.is-disabled {
color: $text--muted-color;
background: $Form-input-onDisabled-bg;
border-color: $Form-input-onDisabled-borderColor;
}
&-singleValue {
padding: 0 ($Form-input-paddingX - px2rem(3px));
}
2020-05-14 20:47:05 +08:00
&-clear {
@include input-clear();
2020-05-15 16:47:08 +08:00
width: px2rem(26px);
height: px2rem(26px);
margin: 0 px2rem(-2px);
2020-07-09 17:07:50 +08:00
margin-left: auto;
2020-05-15 16:47:08 +08:00
&:hover {
background: $ResultBox-value-bg;
}
> svg {
width: px2rem(12px);
height: px2rem(12px);
}
2020-05-14 20:47:05 +08:00
}
> svg {
display: inline-block;
2020-05-15 16:47:08 +08:00
width: px2rem(14px);
2020-05-14 20:47:05 +08:00
color: $icon-color;
}
> a {
cursor: pointer;
}
&-value {
background: $ResultBox-value-bg;
color: $ResultBox-value-color;
font-size: $Form-input-fontSize;
2020-05-15 16:47:08 +08:00
padding: 0 px2rem(5px);
min-height: px2rem(24px);
2020-05-14 20:47:05 +08:00
flex-wrap: nowrap;
display: inline-flex;
align-items: center;
margin: 2px 3px;
user-select: none;
> a {
cursor: pointer;
2020-05-15 16:47:08 +08:00
margin-left: px2rem(5px);
2020-05-14 20:47:05 +08:00
color: $ResultBox-icon-color;
&:hover {
color: $ResultBox-icon--onHover-color;
}
2020-05-15 16:47:08 +08:00
> svg {
width: px2rem(10px);
height: px2rem(10px);
}
2020-05-14 20:47:05 +08:00
}
&:hover {
background: $ResultBox-value--onHover-bg;
}
&.is-disabled {
pointer-events: none;
color: $ResultBox-value--onDisabled-color;
> a {
color: $ResultBox-icon--onDisabled-color;
}
}
}
&-placeholder {
color: $Form-input-placeholderColor;
user-select: none;
margin-left: 8px;
}
> input {
padding-left: 8px;
min-height: 24px;
}
}