ionic-team / ionic-team/ionic-framework

feat: Set custom --opacity for disabled labels/inputs/select

Đang mở
#18,514 2 bình luận 5 reaction 0 người được giao Xem trên GitHub
package: core type: feature request
Ngôn ngữ chính
TypeScript
Star
52.7k
Fork
13.3k
Merge trung bình
1 ngày 15 giờ
Pull request đã merge (30 ngày)
51

Mô tả

# Feature Request

**Ionic version:**
- [x] **4.x**

**Describe the Feature Request**

Availability to overwrite the default opacity of disabled form elements in the following scenarios:
1. When an `ion-input` or `ion-select` is disabled
1. When an `ion-label` is inside an `ion-item` with the class `item-interactive-disabled` (allow to overwrite label's opacity from parent)

Leave a comment if there might be any other scenario I missed.

**Describe Preferred Solution**

- Setting the value of the variable `--opacity` in the disabled `ion-item`, `ion-input` or `ion-select` (or another parent, e.g. `ion-list`) overwrites its default opacity

**Related Code**

`input.scss`:
```scss
// Change
.native-input[disabled] {
opacity: .4;
}

// To
.native-input[disabled] {
opacity: var(--opacity, .4);
}
```

`select.scss`:
```scss
// Change
:host(.select-disabled) {
opacity: .4;
pointer-events: none;
}

// To
:host(.select-disabled) {
opacity: var(--opacity, .4);
pointer-events: none;
}
```

`label.scss`:
```scss
// Change
:host-context(.item-interactive-disabled) {
cursor: default;
opacity: .3;
pointer-events: none;
}

// To
:host-context(.item-interactive-disabled) {
cursor: default;
opacity: var(--opacity, .3);
pointer-events: none;
}
```

**Additional Context**

I will submit the PR myself, if that's OK.

Related Issues: #17166, https://github.com/ionic-team/ionic/issues/16965#issuecomment-456422796

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.