mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 14:13:37 +08:00
update ant-input-group style
This commit is contained in:
parent
cbd61bb087
commit
4e4567c9e8
@ -34,7 +34,7 @@ label {
|
||||
|
||||
//== Style for input-group: input with label, with button or dropdown...
|
||||
.@{css-prefix}input-group {
|
||||
.input-group(~"@{css-prefix}input"; @btnClass)
|
||||
.input-group(~"@{css-prefix}input");
|
||||
}
|
||||
|
||||
// Radio && Checkbox
|
||||
@ -122,11 +122,43 @@ form {
|
||||
}
|
||||
.@{css-prefix}input,
|
||||
.@{css-prefix}input-group .@{css-prefix}input,
|
||||
.@{css-prefix}input-group .@{css-prefix}input-group-addon,
|
||||
.@{css-prefix}input-group .@{css-prefix}input-group-btn .@{btnClass} {
|
||||
.@{css-prefix}input-group .@{css-prefix}input-group-addon {
|
||||
height: @input-height-lg;
|
||||
font-size: @font-size-base;
|
||||
padding: @input-padding-horizontal;
|
||||
padding: 6px 7px;
|
||||
}
|
||||
|
||||
// Input combined with select
|
||||
.@{css-prefix}input-group {
|
||||
.@{selectPrefixCls}-selection {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
&:hover {
|
||||
border-color: #d9d9d9;
|
||||
}
|
||||
}
|
||||
|
||||
.@{selectPrefixCls}-selection--single {
|
||||
margin-left: -1px;
|
||||
height: @input-height-lg;
|
||||
background-color: #eee;
|
||||
.@{selectPrefixCls}-selection__rendered {
|
||||
padding-left: 8px;
|
||||
padding-right: 25px;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
.@{selectPrefixCls}-arrow {
|
||||
right: 8px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.@{selectPrefixCls}-open .@{selectPrefixCls}-selection {
|
||||
border-color: #d9d9d9;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// input[type=file]
|
||||
|
@ -99,7 +99,7 @@
|
||||
}
|
||||
|
||||
// label input
|
||||
.input-group(@inputClass; @btnclass) {
|
||||
.input-group(@inputClass) {
|
||||
position: relative;
|
||||
display: table;
|
||||
border-collapse: separate;
|
||||
@ -116,7 +116,7 @@
|
||||
}
|
||||
|
||||
&-addon,
|
||||
&-btn,
|
||||
&-wrap,
|
||||
> .@{inputClass} {
|
||||
display: table-cell;
|
||||
|
||||
@ -126,7 +126,7 @@
|
||||
}
|
||||
|
||||
&-addon,
|
||||
&-btn {
|
||||
&-wrap {
|
||||
width: 1%;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
@ -152,24 +152,6 @@
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
.@{btnclass} {
|
||||
border-radius: @border-radius-base;
|
||||
.button-variant(@input-color; #eee; @input-border-color);
|
||||
margin-left: -1px;
|
||||
|
||||
&:hover {
|
||||
.button-color(@input-color; tint(#eee, 20%); @input-border-color);
|
||||
}
|
||||
&:active, &.active {
|
||||
.button-color(@input-color; shade(#eee, 5%); @input-border-color);
|
||||
}
|
||||
|
||||
.@{iconfont-css-prefix} {
|
||||
line-height: 1;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
// Reset rounded corners
|
||||
> .@{inputClass}:first-child,
|
||||
&-addon:first-child {
|
||||
@ -185,26 +167,19 @@
|
||||
}
|
||||
|
||||
> .@{inputClass}:last-child,
|
||||
&-addon:last-child,
|
||||
&-btn .@{btnclass}{
|
||||
&-addon:last-child {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
// Sizing options
|
||||
&-lg .@{inputClass},
|
||||
&-lg > &-addon,
|
||||
&-lg > &-btn .@{btnclass} {
|
||||
&-lg > &-addon {
|
||||
.input-lg();
|
||||
}
|
||||
|
||||
&-sm .@{inputClass},
|
||||
&-sm > &-addon,
|
||||
&-sm > &-btn .@{btnclass} {
|
||||
&-sm > &-addon {
|
||||
.input-sm();
|
||||
}
|
||||
|
||||
&-sm > &-btn .@{btnclass} {
|
||||
margin-top: ~"-2px \9";
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user