EC-CUBE / EC-CUBE/ec-cube

scssのz-indexを変数で管理したい

Open
#4,317 0 comments 0 reactions 0 assignees View on GitHub
improvement
Dominant language
PHP
Stars
788
Forks
719
Avg merge
4d 4h
Merged PRs (30d)
39

Description

## 概要(Overview)
ディレクトリ内を検索しないと`z-index`が管理、把握出来ないため、変数と`map-get`を用いて管理したい。
現状は無秩序で値もバラバラ。`z-index`の最大値が設定されていたり、管理されていない。

- `$z-index`内の値は前後に余裕をもたせて`key`にコンポーネント名を指定したい。
- コンポーネント単位で指定できると`_variables.scss`が汚くならない。
- 前後に余裕をもたせることで以下のように+n,-nでコンポーネント内の`z-index`が統一出来て楽。
`z-index: map-get($z-index, ec-modal-overlay - 1);`

変数化自体はすぐできるが、プラグイン用に値を空けておく等、ルール付が必要。

- コンポーネントは`1000*n`
- ユーザーが利用できる範囲は`n001〜n499`
- プラグインが利用できる範囲は`n500〜n999`
など

## 期待する内容(Expect) or 要望 (Requirement)

下記のように変数化する。

```
// _variables.scss

$z-index: (
ec-modal-overlay: 10000,
)
```

```
// _13.4.cartModal.scss

input:checked {
~ .ec-modal-overlay-close {
z-index: map-get($z-index, ec-modal-overlay - 1);
}

~ .ec-modal-overlay {
transform: scale(1);
opacity: 1;
z-index: map-get($z-index, ec-modal-overlay - 2);
overflow: auto;
}

~ .ec-modal-overlay .ec-modal-wrap {
transform: translateY(0);
z-index: map-get($z-index, ec-modal-overlay);
}
}
```

プラグイン等で`z-index`を利用する場合等を考え、ルールを策定する。

### 環境 (environment)
+ EC-CUBE: 4.0.x

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.