amis2/scss/components/form/_text.scss

264 lines
6.0 KiB
SCSS
Raw Normal View History

2019-12-06 09:58:08 +08:00
.#{$ns}TextControl {
@include input-text();
&-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
}
// &-valueWrap {
// flex-grow: 1;
// line-height: 1;
// flex-wrap: wrap;
// display: flex;
// > 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
&--withAddOn {
display: flex;
flex-wrap: nowrap;
2019-04-30 11:11:25 +08:00
@include media-breakpoint-up(sm) {
2019-12-06 09:58:08 +08:00
&.#{$ns}Form-control--sizeXs,
&.#{$ns}Form-control--sizeSm,
&.#{$ns}Form-control--sizeMd,
&.#{$ns}Form-control--sizeLg {
display: inline-flex;
> .#{$ns}TextControl-input {
min-width: unset;
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
}
2019-04-30 11:11:25 +08:00
2019-12-06 09:58:08 +08:00
&--withAddOn > &-input {
flex-basis: 1;
flex-grow: 1;
width: 0;
2019-04-30 11:11:25 +08:00
2019-12-06 09:58:08 +08:00
border-radius: 0;
2019-04-30 11:11:25 +08:00
2019-12-06 09:58:08 +08:00
&:first-child {
border-top-left-radius: var(--Form-input-borderRadius);
border-bottom-left-radius: var(--Form-input-borderRadius);
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
&:last-child {
border-top-right-radius: var(--Form-input-borderRadius);
border-bottom-right-radius: var(--Form-input-borderRadius);
2019-04-30 11:11:25 +08:00
}
@if var(--Form-input-addOnDividerBorderWidth) ==0 {
2019-12-06 09:58:08 +08:00
&:not(:last-child) {
border-right-width: 0;
}
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
&--withAddOn > &-addOn {
display: flex;
align-items: center;
justify-content: center;
padding-left: px2rem(10px);
padding-right: px2rem(10px);
background: var(--Form-input-addOnBg);
color: var(--Form-input-addOnColor);
border-color: var(--Form-input-borderColor);
2019-12-06 09:58:08 +08:00
border-style: solid;
border-width: px2rem(1px) 0;
&:first-child {
border-left-width: px2rem(1px);
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
&:last-child {
border-right-width: px2rem(1px);
border-top-right-radius: var(--Form-input-borderRadius);
border-bottom-right-radius: var(--Form-input-borderRadius);
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
}
&--withAddOn > &-button {
> .#{$ns}Button {
position: relative;
border-radius: 0;
margin-left: px2rem(-1px);
border: var(--InputGroup-button-borderWidth) solid
var(--InputGroup-button-borderColor);
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
&:not(:last-child) .#{$ns}Button {
border-right: 0;
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
&:first-child .#{$ns}Button {
@if var(--InputGroup-button-borderRadius) {
border-top-left-radius: var(--InputGroup-button-borderRadius);
border-bottom-left-radius: var(--InputGroup-button-borderRadius);
2019-12-06 09:58:08 +08:00
}
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
&:last-child .#{$ns}Button {
@if var(--InputGroup-button-borderRadius) {
border-top-right-radius: var(--InputGroup-button-borderRadius);
border-bottom-right-radius: var(--InputGroup-button-borderRadius);
2019-12-06 09:58:08 +08:00
}
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
&--withAddOn.is-focused > &-button .#{$ns}Button {
border-color: var(--Form-input-onFocused-borderColor);
2019-12-06 09:58:08 +08:00
}
2019-04-30 11:11:25 +08:00
2019-12-06 09:58:08 +08:00
&--withAddOn.is-error > &-addOn {
border-color: var(--Form-input-onError-borderColor);
2019-12-06 09:58:08 +08:00
}
2019-04-30 11:11:25 +08:00
2019-12-06 09:58:08 +08:00
&--withAddOn.is-focused > &-addOn {
border-color: var(--Form-input-onFocused-borderColor);
color: var(--Form-input-onFocus-addOnColor);
box-shadow: var(--Form-input-boxShadow);
2019-12-06 09:58:08 +08:00
}
2019-04-30 11:11:25 +08:00
2019-12-06 09:58:08 +08:00
&--withAddOn.is-disabled > &-addOn {
color: var(--text--muted-color);
2019-12-06 09:58:08 +08:00
}
&--withAddOn.is-inline {
display: inline-block;
@include media-breakpoint-up(sm) {
&.#{$ns}Form-control--sizeXs,
&.#{$ns}Form-control--sizeSm,
&.#{$ns}Form-control--sizeMd,
&.#{$ns}Form-control--sizeLg {
> .#{$ns}TextControl-input {
min-width: 100%;
}
}
}
}
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;
color: var(--Form-input-placeholderColor);
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
}
&-sugs {
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;
max-height: px2rem(300px);
overflow: auto;
2019-12-06 09:58:08 +08:00
}
&-sugItem {
padding: calc(
(
var(--Form-selectOption-height) - var(--Form-input-lineHeight) *
var(--Form-input-fontSize) - #{px2rem(2px)}
) / 2
)
px2rem(12px);
2019-04-30 11:11:25 +08:00
2019-12-06 09:58:08 +08:00
svg {
width: px2rem(16px);
margin-top: px2rem(4px);
float: right;
fill: var(--Form-input-onHover-iconColor);
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
&:not(.is-disabled) {
cursor: pointer;
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
&.is-highlight {
color: var(--Form-select-menu-onHover-color);
background: var(--Form-select-menu-onHover-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
&-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-12-06 09:58:08 +08:00
&-input--multiple {
height: auto;
min-height: var(--Form-input-height);
padding: calc(var(--Form-input-paddingY) - #{px2rem(2px)})
calc(var(--Form-input-paddingX) - #{px2rem(3px)});
}
&-input--multiple &-placeholder {
margin-top: 0;
}
&-input--multiple > input {
margin-top: 2px;
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--multiple &-valueWrap {
white-space: normal;
2019-04-30 11:11:25 +08:00
margin-bottom: calc(var(--gap-xs) * -1);
2019-04-30 11:11:25 +08:00
2019-12-06 09:58:08 +08:00
> input {
margin-bottom: var(--gap-xs);
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
}
&-input--multiple &-value {
white-space: nowrap;
line-height: calc(
var(--Form-input-lineHeight) * var(--Form-input-fontSize) - #{px2rem(2px)}
);
font-size: var(--Form-selectValue-fontSize);
color: var(--Form-selectValue-color);
background: var(--Form-selectValue-bg);
border: px2rem(1px) solid var(--Form-selectValue-borderColor);
2019-12-06 09:58:08 +08:00
border-radius: px2rem(2px);
margin: 2px 3px;
2019-12-06 09:58:08 +08:00
}
&-valueIcon {
cursor: pointer;
border-right: px2rem(1px) solid var(--Form-selectValue-borderColor);
2019-12-06 09:58:08 +08:00
padding: 1px 5px;
2019-04-30 11:11:25 +08:00
2019-12-06 09:58:08 +08:00
&:hover {
background: var(--Form-selectValue-onHover-bg);
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
}
&-input--multiple &-valueLabel {
padding: 0 var(--gap-xs);
2019-12-06 09:58:08 +08:00
}
}