Joint
直下の Button・Badge・Form の .input
や .select
を連結させられるレイアウト CSS。
Table of Contents
Basic
.joint
を設置し直下に.button
.badge
.input
.select
を配置します- 自動的に角丸と区切りのボーダーが調整されます
<div class="joint">
<button class="button is-outline" type="button">ボタン</button>
<button class="button is-outline" type="button">ボタン</button>
<button class="button is-outline" type="button">ボタン</button>
</div>
BuildPassing
<div class="joint">
<span class="badge is-plain">Build</span>
<span class="badge is-plain is-success">Passing</span>
</div>
<div class="joint">
<div class="select">
<select>
<option>Select A</option>
<option>Select B</option>
<option>Select C</option>
</select>
</div>
<input type="text" class="input" name="text" placeholder="キーワード">
<button type="submit" class="button is-plain is-info">検索</button>
</div>
Variables
上書きできる変数は以下の通りです。
/* None */
Import
PostCSS で読み込む場合の各パスは以下となります。
@import "musubii/src/layouts/joint/main.css";