ant-design/style/mixins/input.less
2015-07-09 10:55:06 +08:00

204 lines
3.9 KiB
Plaintext

// size mixins for input
.input-lg() {
padding: @input-padding-lg;
height: @input-height-lg;
font-size: @input-font-size-lg;
}
.input-sm() {
padding: @input-padding-vertical-sm @input-padding-horizontal;
height: @input-height-sm;
font-size: @input-font-size-sm;
}
// Basic style for input
.input() {
position: relative;
display: inline-block;
padding: @input-padding-vertical-base @input-padding-horizontal;
width: 100%;
height: @input-height-base;
cursor: text;
font-size: @input-font-size;
line-height: @line-height-base;
color: @input-color;
background-color: @input-bg;
background-image: none;
border: 1px solid @input-border-color;
border-radius: @border-radius-base;
.placeholder(); // Reset placeholder
.transition(~"border .3s @{ease-in-out}, background .3s @{ease-in-out}, box-shadow .3s @{ease-in-out}");
&:hover {
border-color: @input-hover-border-color;
}
&:focus {
border-color: @input-focus-border-color;
outline: 0;
box-shadow: 0 0 3px tint(@input-focus-border-color, 20%);
}
&[disabled],
fieldset[disabled] & {
background-color: @input-disabled-bg;
opacity: 1;
&:hover {
border-color: @input-border-color;
}
}
&[disabled],
fieldset[disabled] & {
cursor: @cursor-disabled;
}
// Reset height for `textarea`s
textarea& {
height: auto;
}
// Size
&-lg {
.input-lg();
}
&-sm {
.input-sm();
}
}
// Input with icons, you can define @height if you wish to change the input size
.input-with-icon(@height: @input-height-base) {
position: relative;
.@{iconfont-css-prefix} {
position: absolute;
bottom: 0;
right: 0;
z-index: 2;
.square(@height);
font-size: 14px;
line-height: @height;
text-align: center;
pointer-events: none;
}
}
// label input
.input-group(@inputClass; @btnclass) {
position: relative;
display: table;
border-collapse: separate;
// Undo padding and float of grid classes
&[class*="col-"] {
float: none;
padding-left: 0;
padding-right: 0;
}
&-addon, &-btn, .@{inputClass} {
display: table-cell;
&:not(:first-child):not(:last-child) {
border-radius: 0;
}
}
&-addon, &-btn {
width: 1%;
white-space: nowrap;
vertical-align: middle;
}
.@{inputClass} {
position: relative;
z-index: 2;
float: left;
width: 100%;
margin-bottom: 0;
}
&-addon {
padding: @input-padding-vertical-base @input-padding-horizontal;
font-size: @font-size-base;
font-weight: normal;
line-height: 1;
color: @input-color;
text-align: center;
background-color: #eee;
border: 1px solid @input-border-color;
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 {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
&-addon:first-child {
border-right: 0;
}
&-addon:last-child {
border-left: 0;
}
.@{inputClass}:last-child,
&-addon:last-child,
&-btn .@{btnclass}{
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
// Sizing options
&-lg > .@{inputClass},
&-lg > &-addon,
&-lg > &-btn .@{btnclass} {
.input-lg();
}
&-sm > .@{inputClass},
&-sm > &-addon,
&-sm > &-btn .@{btnclass} {
.input-sm();
}
&-sm > &-btn .@{btnclass} {
margin-top: ~"-2px \9";
}
}
.inputs(@inputClass) {
display: flex;
flex-direction: row;
& > &-item {
flex: 0 1 auto;
padding-left: 8px;
&:first-child {
padding-left: 0;
}
}
}