scssのz-indexを変数で管理したい
- 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
Assessment
This issue has not been assessed yet.