@mixin input-size($padding-vertical, $padding-horizontal) { padding: $padding-vertical $padding-horizontal; } @mixin form-control-placeholder($color, $opacity) { .form-control::-moz-placeholder { color: $color; @include opacity(1); } .form-control:-moz-placeholder { color: $color; @include opacity(1); } .form-control::-webkit-input-placeholder { color: $color; @include opacity(1); } .form-control:-ms-input-placeholder { color: $color; @include opacity(1); } } @mixin light-form() { border-radius: 0; border: 0; padding: 0; background-color: transparent; } @mixin input-sm-padding($padding-vertical, $padding-horizontal) { .form-group.form-group-no-border.input-sm, .input-group.form-group-no-border.input-sm { .input-group-addon { padding: $padding-vertical 0 $padding-vertical $padding-horizontal; } .form-control { padding: $padding-vertical $padding-horizontal; & + .input-group-addon { padding: $padding-vertical $padding-horizontal $padding-vertical 0; } } } .form-group.input-sm, .input-group.input-sm { .form-control { padding: $padding-vertical - 1 $padding-horizontal - 1; & + .input-group-addon { padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 0; } } .input-group-addon { padding: $padding-vertical - 1 0 $padding-vertical $padding-horizontal - 1; & + .form-control { padding: $padding-vertical $padding-horizontal - 1 $padding-vertical $padding-horizontal - 3; } } } } @mixin input-lg-padding($padding-vertical, $padding-horizontal) { .form-group.form-group-no-border.input-lg, .input-group.form-group-no-border.input-lg { .input-group-addon { padding: $padding-vertical 0 $padding-vertical $padding-horizontal; } .form-control { padding: $padding-vertical $padding-horizontal; & + .input-group-addon { padding: $padding-vertical $padding-horizontal $padding-vertical 0; } } } .form-group.input-lg, .input-group.input-lg { .form-control { padding: $padding-vertical - 1 $padding-horizontal - 1; & + .input-group-addon { padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 0; } } .input-group-addon { padding: $padding-vertical - 1 0 $padding-vertical $padding-horizontal - 1; & + .form-control { padding: $padding-vertical $padding-horizontal - 1 $padding-vertical $padding-horizontal - 3; } } } } @mixin input-base-padding($padding-vertical, $padding-horizontal) { .form-group.form-group-no-border, .input-group.form-group-no-border { .form-control { /*margin-top: 2px;*/ padding: $padding-vertical $padding-horizontal; & + .input-group-addon { padding: $padding-vertical $padding-horizontal $padding-vertical 0; } } .input-group-addon { padding: $padding-vertical 0 $padding-vertical $padding-horizontal; } } .form-group, .input-group { .form-control { margin-top: 2px; padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 $padding-horizontal - 1; & + .input-group-addon { padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 0; } } .input-group-addon { padding: $padding-vertical - 1 0 $padding-vertical - 1 $padding-horizontal - 1; & + .form-control, & ~ .form-control { padding: $padding-vertical - 1 $padding-horizontal $padding-vertical $padding-horizontal - 3; } } } } //color1 = $opacity-5 //color2 = $opacity-8 //color3 = $white-color //color4 = $transparent-bg //color5 = $opacity-1 //color6 = $opacity-2 @mixin input-coloured-bg($color1, $color2, $color3, $color4, $color5, $color6) { @include form-control-placeholder(darken($color2, 8%), 1); .form-control { border-color: $color1; color: $color2; &:focus { border-color: $color3; background-color: $color4; color: $color3; } } .has-success, .has-danger { &:after { color: $color3; } } .has-danger { .form-control { background-color: $color4; } } .input-group-addon { background-color: $color4; border-color: $color1; color: $color2; } .input-group-focus { .input-group-addon { background-color: $color4; border-color: $color3; color: $color3; } } .form-group.form-group-no-border, .input-group.form-group-no-border { .form-control { background-color: $color5; color: $color2; &:focus, &:active, &:active { background-color: $color6; color: $color3; } } .form-control + .input-group-addon { background-color: $color5; &:focus, &:active, &:active { background-color: $color6; color: $color3; } } .form-control { &:focus { & + .input-group-addon { background-color: $color6; color: $color3; } } } .input-group-addon { background-color: $color5; border: none; color: $color2; } &.input-group-focus { .input-group-addon { background-color: $color6; color: $color3; } } } }