amis2/scss/components/form/_text.scss
2019-12-06 09:58:08 +08:00

326 lines
7.1 KiB
SCSS

@mixin input-clear {
padding: px2rem(3px);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
svg {
fill: $Form-input-iconColor;
width: px2rem(10px);
height: px2rem(10px);
}
&:hover svg {
fill: darken($color: $Form-input-iconColor, $amount: 20%);
}
}
@mixin input-text {
position: relative;
&.is-inline {
display: inline-block;
}
&-input {
display: flex;
background-color: $Form-input-bg;
border: $Form-input-borderWidth solid $Form-input-borderColor;
border-radius: $Form-input-borderRadius;
// height: $Form-input-height;
line-height: $Form-input-lineHeight;
padding: $Form-input-paddingY $Form-input-paddingX;
font-size: $Form-input-fontSize;
input {
outline: none;
background: transparent;
border: none;
color: $Form-input-color;
width: 100%;
height: $Form-input-lineHeight * $Form-input-fontSize;
&::placeholder {
color: $Form-input-placeholderColor;
user-select: none;
}
}
> input {
flex-grow: 1;
}
}
&.is-error > &-input {
border-color: $Form-input-onError-borderColor;
background-color: $Form-input-onError-bg;
}
&.is-focused > &-input {
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;
}
}
&.is-error.is-focused > &-input {
border-color: $Form-input-onError-borderColor;
}
&.is-disabled > &-input {
color: $text--muted-color;
background: $Form-input-onDisabled-bg;
border-color: $Form-input-onDisabled-borderColor;
}
&-spinner {
line-height: $Form-input-lineHeight * $Form-input-fontSize;
}
&-clear {
@include input-clear();
}
// 需要能撑开
@include media-breakpoint-up(sm) {
&.#{$ns}Form-control--sizeXs > &-input,
&.#{$ns}Form-control--sizeSm > &-input,
&.#{$ns}Form-control--sizeMd > &-input,
&.#{$ns}Form-control--sizeLg > &-input {
min-width: 100%;
display: inline-flex;
}
}
}
.#{$ns}TextControl {
@include input-text();
&-placeholder {
color: $Form-input-placeholderColor;
user-select: none;
position: absolute;
left: $Form-input-paddingX;
top: $Form-input-paddingY;
margin-top: 2 * $Form-input-borderWidth;
line-height: $Form-input-lineHeight;
}
&-valueWrap {
flex-grow: 1;
line-height: 1;
white-space: nowrap;
> input {
display: inline-block;
width: auto;
vertical-align: middle;
}
}
&--withAddOn {
display: flex;
flex-wrap: nowrap;
@include media-breakpoint-up(sm) {
&.#{$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;
}
}
}
}
&--withAddOn > &-input {
flex-basis: 1;
flex-grow: 1;
width: 0;
border-radius: 0;
&:first-child {
border-top-left-radius: $Form-input-borderRadius;
border-bottom-left-radius: $Form-input-borderRadius;
}
&:last-child {
border-top-right-radius: $Form-input-borderRadius;
border-bottom-right-radius: $Form-input-borderRadius;
}
@if $Form-input-addOnDividerBorderWidth==0 {
&:not(:last-child) {
border-right-width: 0;
}
}
}
&--withAddOn > &-addOn {
display: flex;
align-items: center;
justify-content: center;
padding-left: px2rem(10px);
padding-right: px2rem(10px);
background: $Form-input-addOnBg;
color: $Form-input-addOnColor;
border-color: $Form-input-borderColor;
border-style: solid;
border-width: px2rem(1px) 0;
&:first-child {
border-left-width: px2rem(1px);
}
&:last-child {
border-right-width: px2rem(1px);
border-top-right-radius: $Form-input-borderRadius;
border-bottom-right-radius: $Form-input-borderRadius;
}
}
&--withAddOn > &-button {
> .#{$ns}Button {
position: relative;
border-radius: 0;
margin-left: px2rem(-1px);
border: $InputGroup-button-borderWidth solid
$InputGroup-button-borderColor;
}
&:not(:last-child) .#{$ns}Button {
border-right: 0;
}
&:first-child .#{$ns}Button {
@if $InputGroup-button-borderRadius {
border-top-left-radius: $InputGroup-button-borderRadius;
border-bottom-left-radius: $InputGroup-button-borderRadius;
}
}
&:last-child .#{$ns}Button {
@if $InputGroup-button-borderRadius {
border-top-right-radius: $InputGroup-button-borderRadius;
border-bottom-right-radius: $InputGroup-button-borderRadius;
}
}
}
&--withAddOn.is-focused > &-button .#{$ns}Button {
border-color: $Form-input-onFocused-borderColor;
}
&--withAddOn.is-error > &-addOn {
border-color: $Form-input-onError-borderColor;
}
&--withAddOn.is-focused > &-addOn {
border-color: $Form-input-onFocused-borderColor;
color: $Form-input-onFocus-addOnColor;
box-shadow: $Form-input-boxShadow;
}
&--withAddOn.is-disabled > &-addOn {
color: $text--muted-color;
}
&-input--withAC {
position: relative;
flex-wrap: wrap;
input {
width: auto;
color: $Form-input-placeholderColor;
}
}
&-sugs {
position: absolute;
background: $Form-select-menu-bg;
color: $Form-select-menu-color;
border: $Form-input-borderWidth solid $Form-input-onFocused-borderColor;
left: px2rem(-1px);
right: px2rem(-1px);
top: 100%;
z-index: 10;
}
&-sugItem {
padding: (
$Form-selectOption-height - $Form-input-lineHeight *
$Form-input-fontSize - px2rem(2px)
)/2 px2rem(12px);
svg {
width: px2rem(16px);
margin-top: px2rem(4px);
float: right;
fill: darken($color: $Form-input-iconColor, $amount: 20%);
}
&:not(.is-disabled) {
cursor: pointer;
}
&.is-highlight {
color: $Form-select-menu-onHover-color;
background: $Form-select-menu-onHover-bg;
}
}
&-value {
user-select: none;
line-height: $Form-input-lineHeight * $Form-input-fontSize;
vertical-align: middle;
display: inline-block;
}
&-input--multiple {
height: auto;
min-height: $Form-input-height;
}
&-input--multiple &-valueWrap {
white-space: normal;
margin-bottom: -$gap-xs;
> input {
margin-bottom: $gap-xs;
}
}
&-input--multiple &-value {
line-height: $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px);
font-size: $Form-selectValue-fontSize;
color: $Form-selectValue-color;
background: $Form-selectValue-bg;
border: px2rem(1px) solid $Form-selectValue-borderColor;
border-radius: px2rem(2px);
margin-right: $gap-xs;
margin-bottom: $gap-xs;
}
&-valueIcon {
cursor: pointer;
border-right: px2rem(1px) solid $Form-selectValue-borderColor;
padding: 1px 5px;
&:hover {
background-color: darken($Form-selectValue-bg, 5%);
}
}
&-input--multiple &-valueLabel {
padding: 0 $gap-xs;
}
}