@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 placeholder() { &::-moz-placeholder {@content; } // Firefox &:-ms-input-placeholder {@content; } // Internet Explorer 10+ &::-webkit-input-placeholder {@content; } // Safari and Chrome } @mixin light-form(){ border-radius: 0; border:0; padding: 0; background-color: transparent; } @mixin form-control-lg-padding($padding-vertical, $padding-horizontal) { .form-group.no-border.form-control-lg, .input-group.no-border.form-control-lg{ .input-group-append .input-group-text{ padding: $padding-vertical 0 $padding-vertical $padding-horizontal; } .form-control{ padding: $padding-vertical $padding-horizontal; & + .input-group-prepend .input-group-text, & + .input-group-append .input-group-text{ padding: $padding-vertical $padding-horizontal $padding-vertical 0; } } } .form-group.form-control-lg, .input-group.form-control-lg{ .form-control{ padding: $padding-vertical - 1 $padding-horizontal - 1; height: 100%; & + .input-group-prepend .input-group-text, & + .input-group-append .input-group-text{ padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 0; } } .input-group-prepend .input-group-text, .input-group-append .input-group-text{ 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.no-border, .input-group.no-border{ .form-control{ padding: $padding-vertical $padding-horizontal; & + .input-group-prepend .input-group-text, & + .input-group-append .input-group-text{ padding: $padding-vertical $padding-horizontal $padding-vertical 0; } } .input-group-prepend .input-group-text, .input-group-append .input-group-text{ padding: $padding-vertical 0 $padding-vertical $padding-horizontal; } } .form-group, .input-group{ .form-control{ padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 $padding-horizontal - 1; & + .input-group-prepend .input-group-text, & + .input-group-append .input-group-text{ padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 0; } } .input-group-prepend .input-group-text, .input-group-append .input-group-text{ 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(rgba($white, 0.4), 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-prepend{ margin-right: 0; } .input-group-prepend .input-group-text, .input-group-append .input-group-text{ background-color: rgba($background-black, 0.2); border-color: $color1; color: $color2; } .input-group-focus{ .input-group-prepend .input-group-text, .input-group-append .input-group-text{ background-color: rgba($background-black, 0.3); border-color: $color3; color: $color3; } } .form-group.no-border, .input-group.no-border{ .form-control{ background-color: rgba($background-black,0.2); color: $color2; &:focus, &:active, &:active{ background-color: rgba($background-black,0.3); color: $color3; } } .form-control + .input-group-prepend .input-group-text, .form-control + .input-group-append .input-group-text{ background-color: rgba($background-black,0.2);; &:focus, &:active, &:active{ background-color: rgba($background-black,0.3); color: $color3; } } .form-control{ &:focus{ & + .input-group-prepend .input-group-text, & + .input-group-append .input-group-text{ background-color: rgba($background-black, 0.3); color: $color3; } } } .input-group-prepend .input-group-text, .input-group-append .input-group-text{ background-color: rgba($background-black, 0.2); border: none; color: $color2; } &.input-group-focus{ .input-group-prepend .input-group-text, .input-group-append .input-group-text{ background-color: rgba($background-black, 0.3); color: $color3; } } } }