Group up existing components into elements

elements/Input/input.scarlet

@@ -0,0 +1,87 @@
+input, textarea, button, .button, select
+	ui-element
+	font-family inherit
+	font-size 1em
+	line-height 1.25em
+	color text-color
+
+input, textarea, select
+	input-focus
+	width 100%
+
+	:disabled
+		ui-disabled
+
+input, select
+	padding 0.5rem 1rem
+
+input
+	height input-height
+
+	[pattern]
+		:focus
+			:invalid
+				border-color red !important
+
+			:valid
+				border-color green !important
+
+	:active
+		transform translateY(3px)
+
+.color-picker-container
+	horizontal
+
+.color-picker
+	ui-element
+	flex 1
+	height input-height
+	margin-right content-padding-half
+
+	:hover
+		cursor pointer
+
+	:active
+		transform translateY(3px)
+
+button, .button
+	horizontal
+	padding 0rem 1rem
+	color button-color
+	align-items center
+	pointer-events all
+	height input-height
+
+	button-hover
+
+	:disabled
+		ui-disabled
+
+select
+	appearance none
+	-webkit-appearance none
+	-moz-appearance none
+
+	option
+		color text-color
+		background bg-color
+
+label
+	width 100%
+	padding 0.5rem 0
+	text-align left
+
+textarea
+	padding 0.4em 0.8em
+	line-height 1.5em
+	min-height 10rem
+	transition none
+
+.number-input-container
+	horizontal
+
+	button
+		justify-content center
+		margin-left 0.2rem
+		width input-height
+		height input-height