Initial public commit

shared/2-blocks/field/field.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 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/field/field.scss

@@ -0,0 +1,47 @@
+.field {
+	position: relative;
+	
+	background: white;
+	border: 2px solid $color--passive;
+	border-radius: 0.2rem;
+	
+	width: 100%;
+	@media (min-width: 35em) {
+		&--small {
+			width: 50%;
+		}
+	}
+}
+
+.field__label {
+	font-size: -cdd-rem(14);
+	
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 1;
+	
+	display: block;
+	padding: 0.3rem 0.4rem;
+	
+	.field--required &::after {
+		padding-left: 0.1em;
+		content: '*';
+		color: $color--warn;
+	}
+}
+
+.field__input {
+	font: inherit;
+	border-radius: 0.2rem;
+	
+	display: block;
+	width: 100%;
+	padding: 0.3rem 0.4rem;
+	padding-top: 1.7rem;
+}
+
+// Prevent horizontal resizing
+.field textarea {
+	resize: vertical;
+}