Negative
ネガティブマージンを付与するユーティリティ CSS。
Table of Contents
Basic
.is-n{way}-{size}で各方向にマイナスのmarginを付与します.is-n-{size}は全方向.is-nt-{size}は上方向.is-nr-{size}は右方向.is-nb-{size}は下方向.is-nl-{size}は左方向.is-ny-{size}は上下方向.is-nx-{size}は左右方向{size}は最大xxlから最小xxsまで
| サイズ | 全方向 | 上方向 | 右方向 | 下方向 | 左方向 | 上下方向 | 左右方向 |
|---|---|---|---|---|---|---|---|
| -28px | .is-n-xxl | .is-nt-xxl | .is-nr-xxl | .is-nb-xxl | .is-nl-xxl | .is-ny-xxl | .is-nx-xxl |
| -24px | .is-n-xl | .is-nt-xl | .is-nr-xl | .is-nb-xl | .is-nl-xl | .is-ny-xl | .is-nx-xl |
| -20px | .is-n-lg | .is-nt-lg | .is-nr-lg | .is-nb-lg | .is-nl-lg | .is-ny-lg | .is-nx-lg |
| -16px | .is-n-md | .is-nt-md | .is-nr-md | .is-nb-md | .is-nl-md | .is-ny-md | .is-nx-md |
| -12px | .is-n-sm | .is-nt-sm | .is-nr-sm | .is-nb-sm | .is-nl-sm | .is-ny-sm | .is-nx-sm |
| -8px | .is-n-xs | .is-nt-xs | .is-nr-xs | .is-nb-xs | .is-nl-xs | .is-ny-xs | .is-nx-xs |
| -4px | .is-n-xxs | .is-nt-xxs | .is-nr-xxs | .is-nb-xxs | .is-nl-xxs | .is-ny-xxs | .is-nx-xxs |
ネガティブマージンテスト
ネガティブマージンテスト
ネガティブマージンテスト
<div>ネガティブマージンテスト</div>
<div class="box is-nt-md">ネガティブマージンテスト</div>
<div>ネガティブマージンテスト</div>Compatible
推奨のクラス名と同様の効果を互換のあるクラス名で得ることもできます。
| 推奨のクラス名 | 互換のあるクラス名 |
|---|---|
.is-n-md | .is-margin-minus-md .is-margin-minus |
.is-nt-md | .is-margin-top-minus-md .is-margin-top-minus |
.is-nr-md | .is-margin-right-minus-md .is-margin-right-minus |
.is-nb-md | .is-margin-bottom-minus-md .is-margin-bottom-minus |
.is-nl-md | .is-margin-left-minus-md .is-margin-left-minus |
.is-ny-md | .is-margin-vertical-minus-md .is-margin-vertical-minus |
.is-nx-md | .is-margin-horizontal-minus-md .is-margin-horizontal-minus |
Variables
上書きできる変数は以下の通りです。
/* None */Import
PostCSS で読み込む場合の各パスは以下となります。
@import "musubii/src/utilities/negative/main.css";