WIP

Signed-off-by: Avior <florian.bouillon@delta-wings.net>

styl/include/_input.styl

@@ -0,0 +1,90 @@
+$color = #4285F4
+
+.input
+	position relative
+
+	*:not(input)
+		display inline
+
+	&.inline
+		display inline-block
+
+		&:not(:last-of-type)
+			margin-right 10px
+
+	input
+		display block
+		border-radius 10px
+		background-color #EEE
+		border none
+		padding 15px 20px
+		margin 3px
+		box-shadow inset 0 0 0 2px #BDBDBD
+		transition-property background-color, box-shadow, border
+		transition-duration 200ms
+		transition-timing-function cubic-bezier(.2, 0, .6, 1)
+
+		// Make input follow .input size
+		width: inherit
+		max-width calc(100% - 46px) // padding * 2 + margin * 2
+
+		&::placeholder
+			text-transform: lowercase
+			color #666
+
+		:disabled
+			background-color #EFEFEF
+			box-shadow none
+
+		&:not([readonly]):not([disabled])
+
+			&:hover
+				background-color #DDD
+
+			&:focus
+				background-color #FFF
+				box-shadow inset 0 0 0 2px $color, 0 0 0 3px rgba(204,204,204, .75)
+
+	label
+		text-transform uppercase
+		margin auto
+		font-weight 700
+
+	.helper
+		text-transform lowercase
+		font-weight 300
+
+	.status
+		float right
+		text-transform lowercase
+		font-weight 300
+		font-style italic
+
+
+	// Icons
+
+	i
+		width 25px
+		position absolute
+		left 28px
+		top 18px
+		// pointer-events none
+		color #666
+		transition color 200ms cubic-bezier(.2,0,.6,1)
+
+	&.icon-right i
+		left initial
+		right 28px
+
+	&.icon-left input
+		padding-left 50px
+
+	&.icon-right input
+		padding-right 50px
+
+
+	&.icon-right input, &.icon-left input
+		max-width calc(100% - 76px)
+
+	input:focus:not([readonly]) + i
+		color $color