Initial public commit

shared/2-blocks/input/input.html.php

@@ -0,0 +1,16 @@
+<div class="form">
+	<div class="field field--small">
+		<label class="field__label" for="name">Name</label>
+		<input class="input input--invalid field__input" type="text" name="name" id="name" value="Lukas Bestle" placeholder=" " autocomplete="name" required/>
+	</div>
+	
+	<div class="field field--required field--small">
+		<label class="field__label" for="email">Email address</label>
+		<input class="input field__input" type="email" name="email" id="email" value="" placeholder=" " autocomplete="email" required/>
+	</div>
+	
+	<div class="field">
+		<label class="field__label" for="message">Message</label>
+		<textarea class="input field__input" rows="7" name="message" id="message"></textarea>
+	</div>
+</div>

shared/2-blocks/input/input.scss

@@ -0,0 +1,16 @@
+.input {
+	background: -cdd-img-url('warn.svg');
+	background-size: 1.5rem;
+	background-repeat: no-repeat;
+	
+	background-position: calc(100% + 1.5rem + 1px) center;
+	transition: background-position 0.2s ease;
+	
+	// Duplicated styles for browsers that don't support :placeholder-shown
+	&:invalid:not(:focus):not(:placeholder-shown) {
+		background-position: calc(100% - 0.7rem) center;
+	}
+	&--invalid {
+		background-position: calc(100% - 0.7rem) center;
+	}
+}

shared/2-blocks/input/warn.svg

@@ -0,0 +1 @@
+<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M256 0C114.615 0 0 114.615 0 256s114.615 256 256 256 256-114.615 256-256S397.385 0 256 0zm32 416h-64v-64h64v64zm0-128h-64V96h64v192z" fill="#E63A16" fill-rule="evenodd"/></svg>