javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-17 10:41:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(input): disable shadow-dom for text inputs (#17043)

Browse Source 
fixes #17020
This commit is contained in:
Manu MA
2019-01-11 16:07:38 +01:00
committed by GitHub
parent 418052f84b
commit 63e0501ae6
10 changed files with 44 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
core/src/components/input/input.ios.scss
View File

@ -10,6 +10,13 @@
font-size: $input-ios-font-size;
}
:host-context(.item-label-stacked),
:host-context(.item-label-floating) {
--padding-top: 8px;
--padding-bottom: 8px;
--padding-start: 0px;
}
.input-clear-icon {
@include svg-background-image($input-ios-input-clear-icon-svg);

6
core/src/components/input/input.md.scss
View File

@ -14,6 +14,12 @@
font-size: $input-md-font-size;
}
:host-context(.item-label-stacked),
:host-context(.item-label-floating) {
--padding-top: 8px;
--padding-bottom: 8px;
--padding-start: 0;
}
.input-clear-icon {
@include svg-background-image($input-md-input-clear-icon-svg);

5
core/src/components/input/input.scss
View File

@ -46,6 +46,10 @@
z-index: $z-index-item-input;
}
:host-context(ion-item:not(.item-label)) {
--padding-start: 0;
}
:host(.ion-color) {
color: current-color(base);
}
@ -63,6 +67,7 @@
flex: 1;
width: 100%;
height: 100%;
border: 0;

9
core/src/components/input/input.tsx
View File

@ -1,8 +1,8 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core';
import { Color, InputChangeEventDetail, Mode, StyleEventDetail, TextFieldTypes } from '../../interface';
import { debounceEvent, findItemLabel, renderHiddenInput } from '../../utils/helpers';
import { createColorClasses, hostContext } from '../../utils/theme';
import { debounceEvent, findItemLabel } from '../../utils/helpers';
import { createColorClasses } from '../../utils/theme';
@Component({
tag: 'ion-input',
@ -10,7 +10,7 @@ import { createColorClasses, hostContext } from '../../utils/theme';
ios: 'input.ios.scss',
md: 'input.md.scss'
},
shadow: true
scoped: true
})
export class Input implements ComponentInterface {
@ -319,7 +319,6 @@ export class Input implements ComponentInterface {
'aria-disabled': this.disabled ? 'true' : null,
class: {
...createColorClasses(this.color),
'in-item': hostContext('ion-item', this.el),
'has-value': this.hasValue(),
'has-focus': this.hasFocus
}
@ -328,8 +327,6 @@ export class Input implements ComponentInterface {
render() {
const value = this.getValue();
renderHiddenInput(false, this.el, this.name, value, this.disabled);
const labelId = this.inputId + '-lbl';
const label = findItemLabel(this.el);
if (label) {

11
core/src/components/item/item.ios.scss
View File

@ -152,10 +152,7 @@
--min-height: 68px;
}
:host(.item-label-stacked) ::slotted(ion-input),
:host(.item-label-floating) ::slotted(ion-input),
:host(.item-label-stacked) ::slotted(ion-textarea),
:host(.item-label-floating) ::slotted(ion-textarea),
// TODO: refactor, ion-item and ion-textarea have the same CSS
:host(.item-label-stacked) ::slotted(ion-select),
:host(.item-label-floating) ::slotted(ion-select) {
--padding-top: 8px;
@ -164,12 +161,6 @@
}
// TODO
// .item-ios.item-label-stacked .label-ios + .input + .cloned-input,
// .item-ios.item-label-floating .label-ios + .input + .cloned-input {
// @include margin-horizontal(0, null);
// }
// FROM TEXTAREA
// iOS Stacked & Floating Textarea
// --------------------------------------------------

12
core/src/components/item/item.md.scss
View File

@ -235,11 +235,7 @@
--min-height: 65px;
}
// TODO: refactor
:host(.item-label-stacked) ::slotted(ion-input),
:host(.item-label-floating) ::slotted(ion-input),
:host(.item-label-stacked) ::slotted(ion-textarea),
:host(.item-label-floating) ::slotted(ion-textarea),
// TODO: refactor, ion-item and ion-textarea have the same CSS
:host(.item-label-stacked) ::slotted(ion-select),
:host(.item-label-floating) ::slotted(ion-select) {
--padding-top: 8px;
@ -247,12 +243,6 @@
--padding-start: 0;
}
:host(:not(.item-label)) ::slotted(ion-input),
:host(:not(.item-label)) ::slotted(ion-textarea) {
--padding-start: 0;
}
:host(.item-has-focus:not(.ion-color)) ::slotted(.label-stacked),
:host(.item-has-focus:not(.ion-color)) ::slotted(.label-floating) {
color: $label-md-text-color-focused;

7
core/src/components/textarea/textarea.ios.scss
View File

@ -12,3 +12,10 @@
font-size: $textarea-ios-font-size;
}
:host-context(.item-label-stacked),
:host-context(.item-label-floating) {
--padding-top: 8px;
--padding-bottom: 8px;
--padding-start: 0px;
}

7
core/src/components/textarea/textarea.md.scss
View File

@ -12,3 +12,10 @@
font-size: $textarea-md-font-size;
}
:host-context(.item-label-stacked),
:host-context(.item-label-floating) {
--padding-top: 8px;
--padding-bottom: 8px;
--padding-start: 0;
}

6
core/src/components/textarea/textarea.scss
View File

@ -56,10 +56,14 @@
// Textarea Within An Item
// --------------------------------------------------
:host(.in-item) {
:host-context(ion-item) {
position: static;
}
:host-context(ion-item:not(.item-label)) {
--padding-start: 0;
}
// Native Textarea
// --------------------------------------------------

6
core/src/components/textarea/textarea.tsx
View File

@ -1,7 +1,7 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core';
import { Color, Mode, StyleEventDetail, TextareaChangeEventDetail } from '../../interface';
import { debounceEvent, findItemLabel, renderHiddenInput } from '../../utils/helpers';
import { debounceEvent, findItemLabel } from '../../utils/helpers';
import { createColorClasses } from '../../utils/theme';
@Component({
@ -10,7 +10,7 @@ import { createColorClasses } from '../../utils/theme';
ios: 'textarea.ios.scss',
md: 'textarea.md.scss'
},
shadow: true
scoped: true
})
export class Textarea implements ComponentInterface {
@ -263,8 +263,6 @@ export class Textarea implements ComponentInterface {
render() {
const value = this.getValue();
renderHiddenInput(false, this.el, this.name, value, this.disabled);
const labelId = this.inputId + '-lbl';
const label = findItemLabel(this.el);
if (label) {