<p class="c-field c-field--input">
<label class="c-field__label" for="commentName">Name</label>
<input class="c-field__input" id="commentName" name="commentName" type="text" autocorrect="off" required="required" />
</p>
<p class="c-field c-field--input">
<label class="c-field__label" for="commentName">Name</label>
<input class="c-field__input" id="commentName" name="commentName" type="text" autocorrect="off" required="required"/>
</p>
{
"site": {
"title": "24 ways",
"handle": "24ways",
"description": "24 ways is the advent calendar for web geeks. Each day throughout December we publish a daily dose of web design and development goodness to bring you all a little Christmas cheer.",
"url": "https://24ways.org",
"feed": "https://feeds.feedburner.com/24ways",
"theme_color": "#f04"
},
"theme": {
"year": [
348,
344,
340,
336,
332,
328,
324,
320,
316,
312,
308,
304,
300,
296,
292,
288
],
"day": [
360,
353,
346,
339,
332,
325,
318,
311,
304,
297,
290,
283,
276,
269,
262,
255,
248,
241,
234,
227,
220,
213,
206,
199
]
}
}
.c-field {
@apply --typeset-ui;
position: relative;
&:not(:last-of-type) {
margin-bottom: map(spaces, medium);
}
@media print {
display: none;
}
}
.c-field__icon {
height: 2.5rem;
width: 2.5rem;
}
.c-field__input {
width: 100%;
border: 1px solid $prose-color--rule;
border-radius: 0;
padding: map(spaces, medium);
}
.c-field__label {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: map(sizes, xlarge);
padding: map(spaces, medium);
font-weight: 700;
+ .c-field__input {
padding-left: calc(map(sizes, xlarge) + map(spaces, medium));
}
}
.c-field__label--icon {
padding: map(spaces, small);
+ .c-field__input {
padding-left: map(sizes, large);
}
}
.c-field--combined {
display: flex;
}
There are no notes for this item.