mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-09 15:43:32 +08:00
176 lines
4.9 KiB
SCSS
176 lines
4.9 KiB
SCSS
.#{$ns}InputGroup {
|
|
display: inline-flex;
|
|
flex-wrap: nowrap;
|
|
|
|
&.#{$ns}Form-control--sizeXs,
|
|
&.#{$ns}Form-control--sizeSm,
|
|
&.#{$ns}Form-control--sizeMd,
|
|
&.#{$ns}Form-control--sizeLg {
|
|
display: inline-flex;
|
|
}
|
|
|
|
&-addOn,
|
|
& .#{$ns}Form-control {
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
&-addOn {
|
|
background: $InputGroup-addOn-bg;
|
|
border: $InputGroup-addOn-borderWidth solid
|
|
$InputGroup-addOn-borderColor;
|
|
line-height: $InputGroup-height - $InputGroup-paddingY * 2 -
|
|
$InputGroup-addOn-borderWidth * 2;
|
|
height: $InputGroup-height;
|
|
box-sizing: border-box;
|
|
padding: $InputGroup-paddingY $InputGroup-paddingX;
|
|
|
|
&:not(:last-child) {
|
|
border-right: 0;
|
|
}
|
|
|
|
&:first-child {
|
|
@if $InputGroup-addOn-borderRadius {
|
|
border-top-left-radius: $InputGroup-addOn-borderRadius;
|
|
border-bottom-left-radius: $InputGroup-addOn-borderRadius;
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
@if $InputGroup-addOn-borderRadius {
|
|
border-top-right-radius: $InputGroup-addOn-borderRadius;
|
|
border-bottom-right-radius: $InputGroup-addOn-borderRadius;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-btn {
|
|
.#{$ns}Button {
|
|
border-radius: 0;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.#{$ns}TextControl-input {
|
|
flex-basis: 0;
|
|
flex-grow: 1;
|
|
|
|
&:not(:first-child) {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
|
|
&:not(:last-child) {
|
|
border-right-width: 0;
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
}
|
|
|
|
.#{$ns}SelectControl {
|
|
@if $InputGroup-select-borderWidth {
|
|
.#{$ns}Select {
|
|
background-color: $InputGroup-select-bg;
|
|
border: $InputGroup-select-borderWidth
|
|
solid
|
|
$InputGroup-select-borderColor;
|
|
|
|
@if $InputGroup-select-color !=$Form-select-color {
|
|
color: $InputGroup-select-color;
|
|
}
|
|
}
|
|
|
|
&:not(:last-child) .#{$ns}Select {
|
|
border-right: 0;
|
|
}
|
|
|
|
&:first-child .#{$ns}Select {
|
|
@if $InputGroup-select-borderRadius {
|
|
border-top-left-radius: $InputGroup-select-borderRadius;
|
|
border-bottom-left-radius: $InputGroup-select-borderRadius;
|
|
}
|
|
}
|
|
|
|
&:last-child .#{$ns}Select {
|
|
@if $InputGroup-select-borderRadius {
|
|
border-top-right-radius: $InputGroup-select-borderRadius;
|
|
border-bottom-right-radius: $InputGroup-select-borderRadius;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:not(:first-child) .#{$ns}Select {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
|
|
&:not(:last-child) .#{$ns}Select {
|
|
border-right-width: 0;
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
}
|
|
|
|
@if $InputGroup-select-arrowColor !=$Form-select-caret-iconColor {
|
|
.#{$ns}Select-arrow {
|
|
color: $InputGroup-select-arrowColor;
|
|
}
|
|
}
|
|
|
|
&.is-focused {
|
|
.#{$ns}InputGroup-addOn,
|
|
.#{$ns}TextControl-input,
|
|
.#{$ns}Select,
|
|
.#{$ns}InputGroup-btn .#{$ns}Button {
|
|
border-color: $InputGroup-addOn-onFocused-borderColor;
|
|
}
|
|
|
|
@if $InputGroup-select-onFocused-bg !=$InputGroup-select-bg {
|
|
.#{$ns}Select {
|
|
background-color: $InputGroup-select-onFocused-bg;
|
|
}
|
|
}
|
|
|
|
@if $InputGroup-select-onFocused-color !=$InputGroup-select-color {
|
|
.#{$ns}Select {
|
|
color: $InputGroup-select-onFocused-color;
|
|
}
|
|
}
|
|
|
|
@if $InputGroup-select-onFocused-arrowColor
|
|
!=$Form-select-caret-iconColor
|
|
{
|
|
.#{$ns}Select-arrow {
|
|
color: $InputGroup-select-onFocused-arrowColor;
|
|
}
|
|
}
|
|
|
|
.#{$ns}InputGroup-addOn {
|
|
color: $primary;
|
|
}
|
|
}
|
|
}
|
|
|
|
.#{$ns}InputGroup:not(.is-inline) {
|
|
display: flex;
|
|
}
|