Browse Source

update ant-input-group style

pull/57/head
SimaQ 9 years ago
parent
commit
4e4567c9e8
  1. 40
      style/components/form.less
  2. 37
      style/mixins/input.less

40
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]

37
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";
}
}

Loading…
Cancel
Save