.form-bordered .form-group { border-top: 1px solid @platinum; padding-top: 15px; margin-left: -12px; margin-right: -12px; &:first-child { border-top: 0; padding-top: 0; } &:last-child { margin-bottom: 0; } } .form-title { display: block; padding: 8px 0; border-bottom: 1px dashed @black2; font-size: 15px; font-weight: 300; color: @darkcarbon; margin-bottom: 15px; } /*#region Form Label*/ label { font-weight: normal; font-size: 13px; vertical-align: middle; } /*#endregion Form Label*/ /*#region Form Text Input*/ textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"] { .border-radius(0) !important; color: #858585; background-color: @snow; border: 1px solid #d5d5d5; font-family: inherit; .transition(box-shadow 0.45s,border-color 0.45s ease-in-out); .box-shadow(none); &:hover { border-color: rgba(0,0,0,.2); } &:focus { color: @darkcarbon; background-color: @white; .box-shadow(inset 0 1px 2px rgba(0,0,0,0.1)); border-color: rgba(0,0,0,.25); outline: 0; } } .form-control, select { font-size: 13px; color: #858585; background-color: @snow; border: 1px solid #d5d5d5; padding: 6px 12px; &:focus { color: @darkcarbon; background-color: @white; outline: 0; .box-shadow(inset 0 1px 2px rgba(0,0,0,0.1)); border-color: rgba(0,0,0,.25); } } textarea.form-control { padding: 5px 9px; .transition(height 0.2s); } .input-xs { height: 24px; padding: 2px 10px; font-size: 11px; line-height: 1.5; } .input-sm { height: 30px; padding: 5px 10px; font-size: 12px; line-height: 1.5; } .input-lg { font-weight: 300; font-size: 18px; height: 46px; padding: 10px 16px; line-height: 1.33; } .input-xl { height: 52px; padding: 12px 18px; font-size: 20px; line-height: 1.5; font-weight: 300; } .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { cursor: not-allowed; background-color: @snow; border-color: @platinum; &:hover { border-color: @ivory; background-color: @white; } } .form-group, .input-group { &.has-success { input, select, textarea { border-color: #b0dd9c; color: @palegreen; .box-shadow(none); background-color: #f3f7f1; &:focus { .box-shadow(none); color: @green; border-color: @green; } } .form-control-feedback:before { color: @green !important; color: inherit; } .control-label, .help-block, .help-inline { color: @green; } } &.has-error { input, .select, textarea { border-color: #E7BEBE; color: @lightred; .box-shadow(none); background-color: snow; &:focus { .box-shadow(none); color: @danger; border-color: @lightred; } } .form-control-feedback:before { color: @lightred !important; color: inherit; } .control-label, .help-block, .help-inline { color: @lightred; } } &.has-warning { input, .select, textarea { border-color: #fecf49; color: @warning; .box-shadow(none); background-color: #fefbf1; &:focus { .box-shadow(none); color: @warning; border-color: @warning; } } .form-control-feedback:before { color: @warning !important; color: inherit; } .control-label, .help-block, .help-inline { color: @warning; } } &.has-info { input, .select, textarea { border-color: #a4d3fe; color: @info; .box-shadow(none); background-color: #f9fcff; &:focus { .box-shadow(none); color: @info; border-color: @info; } } .form-control-feedback:before { color: @info !important; color: inherit; } .control-label, .help-block, .help-inline { color: @info; } } } span.input-icon { display: inline-block; } .input-icon { position: relative; width: 100%; &.inverted { > [class*="fa-"], > [class*="glyphicon-"] { color: @white; background-color: @darkcarbon; } } > input { padding-left: 36px; padding-right: 6px; &:focus { + [class*="fa-"], + [class*="glyphicon-"] { .opacity(1); } + .circular { .box-shadow(0 0 0 .1em rgba(0,0,0,.15) inset); } } &.input-xs { padding-left: 26px; + [class*="fa-"], + [class*="glyphicon-"] { width: 24px; font-size: 10px; padding-top: 0; line-height: 24px; } + .circular { width: 14px; height: 14px; font-size: 10px; line-height: 14px; } } &.input-sm { padding-left: 32px; + [class*="fa-"], + [class*="glyphicon-"] { width: 30px; font-size: 12px; padding-top: 0; line-height: 30px; } + .circular { width: 20px; height: 20px; font-size: 12px; line-height: 20px; } } &.input-lg { padding-left: 48px; + [class*="fa-"], + [class*="glyphicon-"] { width: 46px; font-size: 18px; padding-top: 5px; line-height: 34px; } + .circular { width: 36px; height: 36px; font-size: 18px; line-height: 26px; } } &.input-xl { padding-left: 54px; + [class*="fa-"], + [class*="glyphicon-"] { width: 52px; font-size: 20px; padding-top: 8px; line-height: 34px; } + .circular { width: 42px; height: 42px; font-size: 20px; line-height: 26px; } } } > [class*="fa-"], > [class*="glyphicon-"] { z-index: 2; position: absolute; top: 0; bottom: 0; left: 0; width: 34px; height: 100%; line-height: 28px; display: inline-block; color: @lightcarbon; font-size: 14px; text-align: center; padding-top: 3px; .opacity(.7); &.circular { border-radius: 500em !important; box-shadow: 0 0 0 .1em rgba(0,0,0,.1) inset; .transition(box-shadow .3s ease); padding: 0; top: 5px; bottom: 5px; left: 7px; width: 24px; height: 24px; font-size: 12px; line-height: 24px; } } &.icon-right { > input { padding-left: 6px; padding-right: 36px; &.input-xs { padding-right: 26px; } &.input-sm { padding-right: 32px; } &.input-lg { padding-right: 48px; } &.input-xl { padding-right: 54px; } } > [class*="fa-"], > [class*="glyphicon-"] { left: auto; right: 0; } .circular { left: auto; right: 5px; } } ~ .help-inline { padding-left: 8px; } } .input-group .input-group-addon { border-radius: 0 !important; .background-image(linear-gradient(to bottom, @ivory 0, @snow 100%)); &[class*="bg-"] { .background-image(none); color: @white; } } .input-group-xl { > .form-control, > .input-group-addon, > .input-group-btn > .btn { height: 52px; padding: 10px 18px; font-size: 20px; line-height: 1.4; } } .input-group-xs { > .form-control, > .input-group-addon, > .input-group-btn > .btn { height: 24px; padding: 2px 6px 2px 7px; font-size: 11px; line-height: 1.4; } } .has-success .input-group-addon { border-color: #b0dd9c !important; color: @green; .background-image(none); } .has-error .input-group-addon { border-color: #E7BEBE; color: @lightred; .background-image(none); } .has-warning .input-group-addon { border-color: #fecf49; color: @warning; .background-image(none); } .has-info .input-group-addon { border-color: #a4d3fe; color: @info; background-color: #e4f0fc; .background-image(none); } .input-group-btn { .btn-label { padding: 6px 10px !important; } > .btn { line-height: 20px; border-radius: 0 !important; &.dropdown-toggle > [class*="fa-"] { margin-right: 0; font-size: 14px; } } } .input-group > .btn.btn-sm { line-height: 22px; } .input-group > .btn + .btn { margin-left: 1px; } .input-group > .btn-group > .btn { line-height: 23px; } .input-group > .btn-group > .btn.btn-sm { line-height: 26px; } .input-group > .btn > .caret, .input-group > .btn-group > .btn > .caret, .input-group > .btn.btn-sm > .caret, .input-group > .btn-group > .btn.btn-sm > .caret { margin-top: 10px; } /*#endregion Form TextInput*/