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";