Bootstrap4 Alpha3 - チェックボックスボタンがfocusedの時もoutlineなスタイルにする

な、何を言っているのかわからねーと思うが・・・

http://v4-alpha.getbootstrap.com/components/buttons/#checkbox-and-radio-buttons

上のリンクをチェックしていただけるとわかるかと思いますが、チェックボックスがボタン型になったボタングループを用意します。

ボタングループを用意

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-outline-success btn-block">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
.
.
.
</div>

btn-groupクラスがあるdivに、data-toggle="buttons"を追加します。これでボタンがトグル可能になるわけです。buttonsが複数形であることに注意。

ボタンはbtn-outline-successでアウトラインスタイルに、btn-blockでブロック型にします。
注意としてはinput要素ではなくlabelのクラスに定義する点ですかね。

input要素はtype="checkbox"としておきます。

これだけでactive(checked)な場合は緑地に白字、そうでない場合はoutlineなスタイルになってくれるのですが、一つ問題があります。

focusが当たっている時は白地になってくれない

クリックしてactiveからnon-activeにした場合、フォーカスがかかっている状態では色が変わってくれません。フォーカスを外した時に初めて、白地のアウトラインスタイルになってくれます。
下のCodepenの例でいうと左側（または上側）のグループです。ちょっと試していただけると良いかと。

See the Pen Bootstrap4 Alpha3 - Keep non-active buttons with outline style when focused by Noriyo Akita (@noriyotcp) on CodePen.

さて、これをどうするかなと

non-activeかつfocusが当たっている時のスタイル定義

フォーカスが当たっている時は擬似要素:focusだけではなく、focusというクラスが追加されるようです。
調べてみると.btn-outline-successにはどちらの場合もこのようなスタイルが定義されています。

.btn-outline-success.focus, .btn-outline-success:focus {
    color: #fff;
    background-color: #5cb85c;
    border-color: #5cb85c;
}

これでは緑地に白字になってしまうわけですね。これを次のような通常の状態にできればいいわけです。

.btn-outline-success {
    color: #5cb85c;
    background-image: none;
    background-color: transparent;
    border-color: #5cb85c;
}

なので、このようにしました。

.btn-outline-success:not(.active) {
    &.focus, &:focus {
        color: #5cb85c;
        background-image: none;
        background-color: transparent;
        border-color: #5cb85c;
    }
}