// 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; } // input status // == when focus or actived .active(@color: @input-hover-border-color) { border-color: @color; outline: 0; box-shadow: 0 0 3px tint(@color, 20%); } // == when hoverd .hover(@color: @input-hover-border-color ) { border-color: @color; } .disabled() { background-color: @input-disabled-bg; opacity: 1; cursor: @cursor-disabled; &:hover { .hover(@input-border-color); } } // 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 { .hover(); } &:focus { .active(); } &[disabled], fieldset[disabled] & { .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; } > [class*="col-"] { padding-right: 8px; } &-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"; } }