_inputs.scss

@mixin input($text-color: $base-grey) {

	$border-amount: 2px;

	input {
		padding: 10px 15px;
		background: none;
		border: none;
		border-bottom: $border-amount solid $text-color;
		font-size: $font-baseline-size;
		outline: none;
		color: $text-color;
	
		//unexpected results sometimes
		&::-webkit-input-placeholder {
		  color: lighten($text-color, 10%);
		}
		&::-moz-placeholder {
		  color: lighten($text-color, 10%);
		}
		&:-ms-input-placeholder {
		  color: lighten($text-color, 10%);
		}
		&:-moz-placeholder {
		  color: lighten($text-color, 10%);
		}
	}

	@each $name, $color in (success: $success, error: $error, warning: $warning, info: $info, white: $white) {
		&.#{$name} {

			input {
				@if $name == white {
					&::-webkit-input-placeholder {
					  color: darken($color, 20%);
					}
					&::-moz-placeholder {
					  color: darken($color, 20%);
					}
					&:-ms-input-placeholder {
					  color: darken($color, 20%);
					}
					&:-moz-placeholder {
					  color: darken($color, 20%);
					}
				} @else {
					&::-webkit-input-placeholder {
					  color: lighten($color, 10%);
					}
					&::-moz-placeholder {
					  color: lighten($color, 10%);
					}
					&:-ms-input-placeholder {
					  color: lighten($color, 10%);
					}
					&:-moz-placeholder {
					  color: lighten($color, 10%);
					}					
				}

				color: $color;

				border-bottom-color: $color;
			}
		}
	}

	//this is experiemental and has only been tested in chrome, firefox and safari
	&.frosted {
	    position: relative;
	    display: inline-block;
	    overflow: hidden;
	    visibility: visible;

	    &::before {
	        visibility: visible;
	        content: '';
	        position: absolute;
	        display: block;
	        width: 120%;
	        height: 110%;
	        top: -5%;
	        bottom: -5%;
	        background: inherit;
	        @include vendor-prefix(filter, url("blur.svg#blur"));
	        -webkit-filter: url("css/blur.svg#blur");
	        filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='15');
	    }

	    &.dark {
	        input {
	            color: $base-grey;

	            //unexpected results sometimes
	            &::-webkit-input-placeholder {
	              color: lighten($base-grey, 15%);
	            }
	            &::-moz-placeholder {
	              color: lighten($base-grey, 15%);
	            }
	            &:-ms-input-placeholder {
	              color: lighten($base-grey, 15%);
	            }
	            &:-moz-placeholder {
	              color: lighten($base-grey, 15%);
	            }
	        }
	    }

	    input {
	    	@include vendor-prefix(transition, background 0.3s ease);
	        padding: 10px 15px 12px;
	        color: $white;
	        background: rgba($white, 0.2);
	        position: relative;
	        display: inline-block;
	        visibility: visible;
	        border: none;

	        &::-webkit-input-placeholder {
	          color: rgba($white, 0.75);
	        }
	        &::-moz-placeholder {
	          color: rgba($white, 0.75);
	        }
	        &:-ms-input-placeholder {
	          color: rgba($white, 0.75);
	        }
	        &:-moz-placeholder {
	          color: rgba($white, 0.75);
	        }

	        &:focus {
	            background: rgba($white, 0.4);
	        }
	    }
	}

	&.block {
        display: block;
        margin: 0 auto;

        input {
            display: block;
            width: 100%;
            padding: (10px) 5px;
        }
    }
}