component-overlay

c-overlay

特定条件で表示状態となる、画面全体を覆うコンポーネントを表示する。
画面全体を覆っている .c-overlay-bg と、内容を含む .c-overlay-contents の二重構造となっている。

使用する際は、JavaScript等で「なんらかのトリガーで表示し、かつbody要素のスクロールを禁止する処理」を行う必要がある。

z-index は 1000 となっている。常に表示する要素は、レイヤーを 1001 以上にすること。

<div class="c-overlay">
    <div class="c-overlay-bg"></div>
    <div class="c-overlay-contents">
        (contents)
    </div><!-- /.c-overlay-contents -->
</div><!-- /.c-overlay -->

c-overlay-inverse

文字色と背景色が反転する。

<div class="c-overlay c-overlay-inverse">
    <div class="c-overlay-bg"></div>
    <div class="c-overlay-contents">
        (contents)
    </div><!-- /.c-overlay-contents -->
</div><!-- /.c-overlay -->