v7.1.0

Padding

Table of Contents

Detail

共通モディファイアで余白（Padding）を与えるユーティリティ CSS。

Basic

.is-padding-(value) では上下左右に Padding を付与します。(value) を省略した場合は md と同等値の Padding 付与。(value) は Meter の値を引き継いでいます。

Padding
カード
<div class="card is-padding-md is-bg-light is-outline is-radius-md">カード</div>
XXSXSSmallMediumLargeXLXXL
.is-padding-xxs.is-padding-xs.is-padding-sm.is-padding, .is-padding-md.is-padding-lg.is-padding-xl.is-padding-xxl

Way

.is-padding-(way)-(value) では 1 方向のみに Padding を付与します。

Way
Padding
カード
<div class="card is-padding-top-md is-bg-light is-outline is-radius-md">カード</div>
XXSXSSmallMediumLargeXLXXL
.is-padding-top-xxs.is-padding-top-xs.is-padding-top-sm.is-padding-top, .is-padding-top-md.is-padding-top-lg.is-padding-top-xl.is-padding-top-xxl
.is-padding-right-xxs.is-padding-right-xs.is-padding-right-sm.is-padding-right, .is-padding-right-md.is-padding-right-lg.is-padding-right-xl.is-padding-right-xxl
.is-padding-bottom-xxs.is-padding-bottom-xs.is-padding-bottom-sm.is-padding-bottom, .is-padding-bottom-md.is-padding-bottom-lg.is-padding-bottom-xl.is-padding-bottom-xxl
.is-padding-left-xxs.is-padding-left-xs.is-padding-left-sm.is-padding-left, .is-padding-left-md.is-padding-left-lg.is-padding-left-xl.is-padding-left-xxl

Vertical

.is-padding-vertical-(value) では上下方向同時に Padding を付与します。

XXSXSSmallMediumLargeXLXXL
.is-padding-vertical-xxs.is-padding-vertical-xs.is-padding-vertical-smis-padding-vertical, .is-padding-vertical-md.is-padding-vertical-lg.is-padding-vertical-xl.is-padding-vertical-xxl

Horizontal

.is-padding-horizontal-(value) では左右方向同時に Padding を付与します。

XXSXSSmallMediumLargeXLXXL
.is-padding-horizontal-xxs.is-padding-horizontal-xs.is-padding-horizontal-smis-padding-horizontal, .is-padding-horizontal-md.is-padding-horizontal-lg.is-padding-horizontal-xl.is-padding-horizontal-xxl

Safe Area

.is-padding-(way)-safe は iPhone X などのセーフエリア Padding を付与します。

AllTopRightbottomleftVerticalHorizontal
.is-padding-safe.is-padding-safe-top.is-padding-right-safeis-padding-bottom-safe.is-padding-left-safe.is-padding-vertical-safe.is-padding-horizontal-safe

Important

Option の $option-important-padding を true にすると、全プロパティに !important を付与できます。

Variables

Name
Default Value
Compiled Value
  • Name
    $modifier-padding
    Default Value
    .is-padding
    Compiled Value
    .is-padding
  • Name
    $modifier-padding-xxl
    Default Value
    .is-padding-xxl
    Compiled Value
    .is-padding-xxl
  • Name
    $modifier-padding-xl
    Default Value
    .is-padding-xl
    Compiled Value
    .is-padding-xl
  • Name
    $modifier-padding-lg
    Default Value
    .is-padding-lg
    Compiled Value
    .is-padding-lg
  • Name
    $modifier-padding-md
    Default Value
    .is-padding-md
    Compiled Value
    .is-padding-md
  • Name
    $modifier-padding-sm
    Default Value
    .is-padding-sm
    Compiled Value
    .is-padding-sm
  • Name
    $modifier-padding-xs
    Default Value
    .is-padding-xs
    Compiled Value
    .is-padding-xs
  • Name
    $modifier-padding-xxs
    Default Value
    .is-padding-xxs
    Compiled Value
    .is-padding-xxs
  • Name
    $modifier-padding-top
    Default Value
    .is-padding-top
    Compiled Value
    .is-padding-top
  • Name
    $modifier-padding-top-xxl
    Default Value
    .is-padding-top-xxl
    Compiled Value
    .is-padding-top-xxl
  • Name
    $modifier-padding-top-xl
    Default Value
    .is-padding-top-xl
    Compiled Value
    .is-padding-top-xl
  • Name
    $modifier-padding-top-lg
    Default Value
    .is-padding-top-lg
    Compiled Value
    .is-padding-top-lg
  • Name
    $modifier-padding-top-md
    Default Value
    .is-padding-top-md
    Compiled Value
    .is-padding-top-md
  • Name
    $modifier-padding-top-sm
    Default Value
    .is-padding-top-sm
    Compiled Value
    .is-padding-top-sm
  • Name
    $modifier-padding-top-xs
    Default Value
    .is-padding-top-xs
    Compiled Value
    .is-padding-top-xs
  • Name
    $modifier-padding-top-xxs
    Default Value
    .is-padding-top-xxs
    Compiled Value
    .is-padding-top-xxs
  • Name
    $modifier-padding-right
    Default Value
    .is-padding-right
    Compiled Value
    .is-padding-right
  • Name
    $modifier-padding-right-xxl
    Default Value
    .is-padding-right-xxl
    Compiled Value
    .is-padding-right-xxl
  • Name
    $modifier-padding-right-xl
    Default Value
    .is-padding-right-xl
    Compiled Value
    .is-padding-right-xl
  • Name
    $modifier-padding-right-lg
    Default Value
    .is-padding-right-lg
    Compiled Value
    .is-padding-right-lg
  • Name
    $modifier-padding-right-md
    Default Value
    .is-padding-right-md
    Compiled Value
    .is-padding-right-md
  • Name
    $modifier-padding-right-sm
    Default Value
    .is-padding-right-sm
    Compiled Value
    .is-padding-right-sm
  • Name
    $modifier-padding-right-xs
    Default Value
    .is-padding-right-xs
    Compiled Value
    .is-padding-right-xs
  • Name
    $modifier-padding-right-xxs
    Default Value
    .is-padding-right-xxs
    Compiled Value
    .is-padding-right-xxs
  • Name
    $modifier-padding-bottom
    Default Value
    .is-padding-bottom
    Compiled Value
    .is-padding-bottom
  • Name
    $modifier-padding-bottom-xxl
    Default Value
    .is-padding-bottom-xxl
    Compiled Value
    .is-padding-bottom-xxl
  • Name
    $modifier-padding-bottom-xl
    Default Value
    .is-padding-bottom-xl
    Compiled Value
    .is-padding-bottom-xl
  • Name
    $modifier-padding-bottom-lg
    Default Value
    .is-padding-bottom-lg
    Compiled Value
    .is-padding-bottom-lg
  • Name
    $modifier-padding-bottom-md
    Default Value
    .is-padding-bottom-md
    Compiled Value
    .is-padding-bottom-md
  • Name
    $modifier-padding-bottom-sm
    Default Value
    .is-padding-bottom-sm
    Compiled Value
    .is-padding-bottom-sm
  • Name
    $modifier-padding-bottom-xs
    Default Value
    .is-padding-bottom-xs
    Compiled Value
    .is-padding-bottom-xs
  • Name
    $modifier-padding-bottom-xxs
    Default Value
    .is-padding-bottom-xxs
    Compiled Value
    .is-padding-bottom-xxs
  • Name
    $modifier-padding-left
    Default Value
    .is-padding-left
    Compiled Value
    .is-padding-left
  • Name
    $modifier-padding-left-xxl
    Default Value
    .is-padding-left-xxl
    Compiled Value
    .is-padding-left-xxl
  • Name
    $modifier-padding-left-xl
    Default Value
    .is-padding-left-xl
    Compiled Value
    .is-padding-left-xl
  • Name
    $modifier-padding-left-lg
    Default Value
    .is-padding-left-lg
    Compiled Value
    .is-padding-left-lg
  • Name
    $modifier-padding-left-md
    Default Value
    .is-padding-left-md
    Compiled Value
    .is-padding-left-md
  • Name
    $modifier-padding-left-sm
    Default Value
    .is-padding-left-sm
    Compiled Value
    .is-padding-left-sm
  • Name
    $modifier-padding-left-xs
    Default Value
    .is-padding-left-xs
    Compiled Value
    .is-padding-left-xs
  • Name
    $modifier-padding-left-xxs
    Default Value
    .is-padding-left-xxs
    Compiled Value
    .is-padding-left-xxs
  • Name
    $modifier-padding-vertical
    Default Value
    .is-padding-vertical
    Compiled Value
    .is-padding-vertical
  • Name
    $modifier-padding-vertical-xxl
    Default Value
    .is-padding-vertical-xxl
    Compiled Value
    .is-padding-vertical-xxl
  • Name
    $modifier-padding-vertical-xl
    Default Value
    .is-padding-vertical-xl
    Compiled Value
    .is-padding-vertical-xl
  • Name
    $modifier-padding-vertical-lg
    Default Value
    .is-padding-vertical-lg
    Compiled Value
    .is-padding-vertical-lg
  • Name
    $modifier-padding-vertical-md
    Default Value
    .is-padding-vertical-md
    Compiled Value
    .is-padding-vertical-md
  • Name
    $modifier-padding-vertical-sm
    Default Value
    .is-padding-vertical-sm
    Compiled Value
    .is-padding-vertical-sm
  • Name
    $modifier-padding-vertical-xs
    Default Value
    .is-padding-vertical-xs
    Compiled Value
    .is-padding-vertical-xs
  • Name
    $modifier-padding-vertical-xxs
    Default Value
    .is-padding-vertical-xxs
    Compiled Value
    .is-padding-vertical-xxs
  • Name
    $modifier-padding-horizontal
    Default Value
    .is-padding-horizontal
    Compiled Value
    .is-padding-horizontal
  • Name
    $modifier-padding-horizontal-xxl
    Default Value
    .is-padding-horizontal-xxl
    Compiled Value
    .is-padding-horizontal-xxl
  • Name
    $modifier-padding-horizontal-xl
    Default Value
    .is-padding-horizontal-xl
    Compiled Value
    .is-padding-horizontal-xl
  • Name
    $modifier-padding-horizontal-lg
    Default Value
    .is-padding-horizontal-lg
    Compiled Value
    .is-padding-horizontal-lg
  • Name
    $modifier-padding-horizontal-md
    Default Value
    .is-padding-horizontal-md
    Compiled Value
    .is-padding-horizontal-md
  • Name
    $modifier-padding-horizontal-sm
    Default Value
    .is-padding-horizontal-sm
    Compiled Value
    .is-padding-horizontal-sm
  • Name
    $modifier-padding-horizontal-xs
    Default Value
    .is-padding-horizontal-xs
    Compiled Value
    .is-padding-horizontal-xs
  • Name
    $modifier-padding-horizontal-xxs
    Default Value
    .is-padding-horizontal-xxs
    Compiled Value
    .is-padding-horizontal-xxs
  • Name
    $modifier-padding-safe
    Default Value
    .is-padding-safe
    Compiled Value
    .is-padding-safe
  • Name
    $modifier-padding-top-safe
    Default Value
    .is-padding-top-safe
    Compiled Value
    .is-padding-top-safe
  • Name
    $modifier-padding-right-safe
    Default Value
    .is-padding-right-safe
    Compiled Value
    .is-padding-right-safe
  • Name
    $modifier-padding-bottom-safe
    Default Value
    .is-padding-bottom-safe
    Compiled Value
    .is-padding-bottom-safe
  • Name
    $modifier-padding-left-safe
    Default Value
    .is-padding-left-safe
    Compiled Value
    .is-padding-left-safe
  • Name
    $modifier-padding-vertical-safe
    Default Value
    .is-padding-vertical-safe
    Compiled Value
    .is-padding-vertical-safe
  • Name
    $modifier-padding-horizontal-safe
    Default Value
    .is-padding-horizontal-safe
    Compiled Value
    .is-padding-horizontal-safe
  • Name
    $padding-size-xxl
    Default Value
    $meter-xxl
    Compiled Value
    28px
  • Name
    $padding-size-xl
    Default Value
    $meter-xl
    Compiled Value
    24px
  • Name
    $padding-size-lg
    Default Value
    $meter-lg
    Compiled Value
    20px
  • Name
    $padding-size-md
    Default Value
    $meter-md
    Compiled Value
    16px
  • Name
    $padding-size-sm
    Default Value
    $meter-sm
    Compiled Value
    12px
  • Name
    $padding-size-xs
    Default Value
    $meter-xs
    Compiled Value
    8px
  • Name
    $padding-size-xxs
    Default Value
    $meter-xxs
    Compiled Value
    4px
  • Name
    $padding-important
    Default Value
    if( $option-important-padding == true, !important, null )

Mixins

  • musubii-style-padding($padding-size)
  • musubii-style-padding-top($padding-size)
  • musubii-style-padding-right($padding-size)
  • musubii-style-padding-bottom($padding-size)
  • musubii-style-padding-left($padding-size)
  • musubii-style-padding-vertical($padding-size)
  • musubii-style-padding-horizontal($padding-size)
  • musubii-style-padding-safe()
  • musubii-style-padding-top-safe()
  • musubii-style-padding-right-safe()
  • musubii-style-padding-bottom-safe()
  • musubii-style-padding-left-safe()
  • musubii-style-padding-vertical-safe()
  • musubii-style-padding-horizontal-safe()

Sources