<div class="form-01">
<div class="form-01__field"><input class="form-01__input" type="text" /></div>
<div class="form-01__field"><textarea class="form-01__textarea" rows="10"></textarea></div>
<div class="form-01__field"><select class="form-01__select">
<option>項目1</option>
<option>項目2</option>
<option>項目3</option>
<option>項目4</option>
<option>項目5</option>
<option>項目6</option>
<option>項目7</option>
<option>項目8</option>
<option>項目9</option>
<option>項目10</option>
</select></div>
<div class="form-01__field"><label class="form-01__radio" for="form-01-radio"><input class="form-01__radio" type="radio" id="form-01-radio" />ラジオボタン01</label></div>
</div>
.form-01
div.form-01__field
input.form-01__input(type='text')
div.form-01__field
textarea.form-01__textarea(rows='10')
div.form-01__field
select.form-01__select
- for (var i = 0; i < 10; i++)
option 項目#{i + 1}
div.form-01__field
label.form-01__radio(for='form-01-radio')
input.form-01__radio(type='radio', id='form-01-radio')
| ラジオボタン01
//- div.form-01__field
//- input.form-01__checkbox(type='checkbox')
{
"text": "フォーム01"
}
$BLOCK_NAME: '.form-01';
// 変数
$color_primary: #000;
$color_secondary: #f00;
$radius_default: 8px;
$shadow_default: 0 0 8px rgba($color_secondary, 0.3);
$duration_default: 0.4s;
#{ $BLOCK_NAME } {
&__field {
max-width: 480px;
& + & {
margin-top: 16px;
}
}
&__input,
&__textarea,
&__select {
width: 100%;
padding: 8px;
border: 1px solid $color_primary;
border-radius: $radius_default;
transition: box-shadow $duration_default;
&:focus {
border-color: $color_secondary;
outline: none;
box-shadow: $shadow_default;
}
}
}