diff --git a/style/components/form.less b/style/components/form.less index eb5fb85333..670014211c 100644 --- a/style/components/form.less +++ b/style/components/form.less @@ -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] diff --git a/style/mixins/input.less b/style/mixins/input.less index 4f3168a7ab..f68fcedffe 100644 --- a/style/mixins/input.less +++ b/style/mixins/input.less @@ -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"; - } }