Elevation

影によってZ軸の高さや要素の重なりを表現することで、視点を誘導したり情報の優先順位を伝えることができます。Inhouseでは、0から6までの7段階のレベルを定義しています。

Elevation

Sass function

Elevationのbox-shadowを取得できます。

Syntax

get-elevation-box-shadow($level)

Usage

@use '@inhouse/inhouse-components-web' as inhouse;

.example {
  box-shadow: inhouse.get-elevation-box-shadow($level: 1);
}
Levelbox-shadow(Pepper flavor)
0

0 0 0 0 rgba(0, 0, 0, 0),


0 0 0 0 rgba(0, 0, 0, 0),


0 0 0 0 rgba(0, 0, 0, 0)

1

0 -0.1px 1px 0 rgba(0, 0, 0, 0.12),


0 1px 2px 0 rgba(0, 0, 0, 0.12),


0 0 0 0 rgba(0, 0, 0, 0)

2

0 0 4px 0 rgba(0, 0, 0, 0.12),


0 4px 6px -2px rgba(0, 0, 0, 0.12),


0 0 0 0 rgba(0, 0, 0, 0)

3

0 0 6px 0 rgba(0, 0, 0, 0.08),


0 6px 7px -8px rgba(0, 0, 0, 0.12),


0 6px 16px 2px rgba(0, 0, 0, 0.12)

4

0 2px 6px 0 rgba(0, 0, 0, 0.08),


0 8px 32px -12px rgba(0, 0, 0, 0.12),


0 10 28px 4px rgba(0, 0, 0, 0.12)

5

0 4px 16px -16px rgba(0, 0, 0, 0.28),


0 12px 64px -20 rgba(0, 0, 0, 0.2),


0 16px 48px -8px rgba(0, 0, 0, 0.24)

6

0 4px 40 -28px rgba(0, 0, 0, 0.32),


0 16px 72px -24px rgba(0, 0, 0, 0.24),


0 24px 64px -12px rgba(0, 0, 0, 0.28)

Sass mixin

Elevationのbox-shadowを取得できます。

Syntax

elevation($level)

Usage

@use '@inhouse/inhouse-components-web' as inhouse;

.example {
  @include inhouse.elevation($level: 1);
}