WIP

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

styl/include/_button.styl

@@ -0,0 +1,102 @@
+$color = #4285F4
+$hover = #70A8F8
+$active = #3066D1
+
+$outline-shadow = inset 0 0 0 2px $color
+$outline-hover = rgba(179, 216, 253, 0.3)
+$outline-active = rgba(66, 133, 244, 0.3)
+
+$active-shadow = 0 0 0 3px rgba(204,204,204,.75)
+
+button, a.button
+	cursor: pointer
+	color: #FFF
+	background-color: $color
+	border-radius: 5px
+	border: none
+	padding: 7px 14px
+	transition-property: box-shadow, background-color
+	transition-duration: 200ms
+	transition-timing-function: cubic-bezier(.2,0,.6,1)
+	margin: 3px
+	display: inline-flex
+	user-select: none
+	outline: none
+	/* Set Chrome on Firefox base */
+	line-height: 22px
+	text-decoration: none
+	box-sizing: border-box
+
+	&:hover
+		background-color: $hover
+
+	&:active
+		background-color: $active
+
+	&:focus:not(.disabled)
+		background-color: $active
+		box-shadow: $active-shadow
+
+	&::-moz-focus-inner
+		border: none
+
+
+	&.outline, &.ghost
+		color: $color
+		background-color: transparent
+
+		&:hover:not(:disabled):not(.disabled)
+			background-color: $outline-hover
+
+		&:active:not(:disabled):not(.disabled)
+			background-color: $outline-active
+
+		&.loading::after
+			border-color: transparent transparent $color $color
+
+	&.outline
+		box-shadow: $outline-shadow
+
+		&:focus
+			box-shadow: $outline-shadow, $active-shadow
+
+	&:disabled, &.disabled
+		background-color: #EEE
+		color: #BDBDBD
+		cursor: default
+		pointer-events: none
+
+		&.outline
+			box-shadow: 0 0 0 2px #BDBDBD
+
+	&.loading
+		color: transparent
+		position: relative
+		pointer-events: none
+		// cursor: default
+		&::after
+			content: ""
+			display: block
+			border: white 2px solid
+			border-color: transparent transparent white white
+			width: 1em
+			position: absolute
+			top: calc(50% - (1em / 2))
+			left: calc(50% - (1em / 2))
+			border-radius: 1000000000px
+			height: 1em
+			box-sizing: inherit
+			animation: ButtonLoading .5s infinite linear
+
+
+a.button.outline:focus:not(.disabled),
+a.button.ghost:focus:not(.disabled),
+button.outline:focus, button.ghost:focus
+	background-color: $outline-active
+
+
+@keyframes ButtonLoading
+	0%
+		transform: rotate(0)
+	100%
+		transform: rotate(365deg)

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