mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-17 18:54:11 +08:00
@ -10,6 +10,13 @@
|
|||||||
font-size: $input-ios-font-size;
|
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 {
|
.input-clear-icon {
|
||||||
@include svg-background-image($input-ios-input-clear-icon-svg);
|
@include svg-background-image($input-ios-input-clear-icon-svg);
|
||||||
|
|
||||||
|
@ -14,6 +14,12 @@
|
|||||||
font-size: $input-md-font-size;
|
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 {
|
.input-clear-icon {
|
||||||
@include svg-background-image($input-md-input-clear-icon-svg);
|
@include svg-background-image($input-md-input-clear-icon-svg);
|
||||||
|
@ -46,6 +46,10 @@
|
|||||||
z-index: $z-index-item-input;
|
z-index: $z-index-item-input;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:host-context(ion-item:not(.item-label)) {
|
||||||
|
--padding-start: 0;
|
||||||
|
}
|
||||||
|
|
||||||
:host(.ion-color) {
|
:host(.ion-color) {
|
||||||
color: current-color(base);
|
color: current-color(base);
|
||||||
}
|
}
|
||||||
@ -63,6 +67,7 @@
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
border: 0;
|
border: 0;
|
||||||
|
|
||||||
|
@ -1,8 +1,8 @@
|
|||||||
import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core';
|
import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core';
|
||||||
|
|
||||||
import { Color, InputChangeEventDetail, Mode, StyleEventDetail, TextFieldTypes } from '../../interface';
|
import { Color, InputChangeEventDetail, Mode, StyleEventDetail, TextFieldTypes } from '../../interface';
|
||||||
import { debounceEvent, findItemLabel, renderHiddenInput } from '../../utils/helpers';
|
import { debounceEvent, findItemLabel } from '../../utils/helpers';
|
||||||
import { createColorClasses, hostContext } from '../../utils/theme';
|
import { createColorClasses } from '../../utils/theme';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
tag: 'ion-input',
|
tag: 'ion-input',
|
||||||
@ -10,7 +10,7 @@ import { createColorClasses, hostContext } from '../../utils/theme';
|
|||||||
ios: 'input.ios.scss',
|
ios: 'input.ios.scss',
|
||||||
md: 'input.md.scss'
|
md: 'input.md.scss'
|
||||||
},
|
},
|
||||||
shadow: true
|
scoped: true
|
||||||
})
|
})
|
||||||
export class Input implements ComponentInterface {
|
export class Input implements ComponentInterface {
|
||||||
|
|
||||||
@ -319,7 +319,6 @@ export class Input implements ComponentInterface {
|
|||||||
'aria-disabled': this.disabled ? 'true' : null,
|
'aria-disabled': this.disabled ? 'true' : null,
|
||||||
class: {
|
class: {
|
||||||
...createColorClasses(this.color),
|
...createColorClasses(this.color),
|
||||||
'in-item': hostContext('ion-item', this.el),
|
|
||||||
'has-value': this.hasValue(),
|
'has-value': this.hasValue(),
|
||||||
'has-focus': this.hasFocus
|
'has-focus': this.hasFocus
|
||||||
}
|
}
|
||||||
@ -328,8 +327,6 @@ export class Input implements ComponentInterface {
|
|||||||
|
|
||||||
render() {
|
render() {
|
||||||
const value = this.getValue();
|
const value = this.getValue();
|
||||||
renderHiddenInput(false, this.el, this.name, value, this.disabled);
|
|
||||||
|
|
||||||
const labelId = this.inputId + '-lbl';
|
const labelId = this.inputId + '-lbl';
|
||||||
const label = findItemLabel(this.el);
|
const label = findItemLabel(this.el);
|
||||||
if (label) {
|
if (label) {
|
||||||
|
@ -152,10 +152,7 @@
|
|||||||
--min-height: 68px;
|
--min-height: 68px;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host(.item-label-stacked) ::slotted(ion-input),
|
// TODO: refactor, ion-item and ion-textarea have the same CSS
|
||||||
:host(.item-label-floating) ::slotted(ion-input),
|
|
||||||
:host(.item-label-stacked) ::slotted(ion-textarea),
|
|
||||||
:host(.item-label-floating) ::slotted(ion-textarea),
|
|
||||||
:host(.item-label-stacked) ::slotted(ion-select),
|
:host(.item-label-stacked) ::slotted(ion-select),
|
||||||
:host(.item-label-floating) ::slotted(ion-select) {
|
:host(.item-label-floating) ::slotted(ion-select) {
|
||||||
--padding-top: 8px;
|
--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
|
// FROM TEXTAREA
|
||||||
// iOS Stacked & Floating Textarea
|
// iOS Stacked & Floating Textarea
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
@ -235,11 +235,7 @@
|
|||||||
--min-height: 65px;
|
--min-height: 65px;
|
||||||
}
|
}
|
||||||
|
|
||||||
// TODO: refactor
|
// TODO: refactor, ion-item and ion-textarea have the same CSS
|
||||||
: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),
|
|
||||||
:host(.item-label-stacked) ::slotted(ion-select),
|
:host(.item-label-stacked) ::slotted(ion-select),
|
||||||
:host(.item-label-floating) ::slotted(ion-select) {
|
:host(.item-label-floating) ::slotted(ion-select) {
|
||||||
--padding-top: 8px;
|
--padding-top: 8px;
|
||||||
@ -247,12 +243,6 @@
|
|||||||
--padding-start: 0;
|
--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-stacked),
|
||||||
:host(.item-has-focus:not(.ion-color)) ::slotted(.label-floating) {
|
:host(.item-has-focus:not(.ion-color)) ::slotted(.label-floating) {
|
||||||
color: $label-md-text-color-focused;
|
color: $label-md-text-color-focused;
|
||||||
|
@ -12,3 +12,10 @@
|
|||||||
|
|
||||||
font-size: $textarea-ios-font-size;
|
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;
|
||||||
|
}
|
||||||
|
@ -12,3 +12,10 @@
|
|||||||
|
|
||||||
font-size: $textarea-md-font-size;
|
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;
|
||||||
|
}
|
||||||
|
@ -56,10 +56,14 @@
|
|||||||
// Textarea Within An Item
|
// Textarea Within An Item
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
:host(.in-item) {
|
:host-context(ion-item) {
|
||||||
position: static;
|
position: static;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:host-context(ion-item:not(.item-label)) {
|
||||||
|
--padding-start: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// Native Textarea
|
// Native Textarea
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core';
|
import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core';
|
||||||
|
|
||||||
import { Color, Mode, StyleEventDetail, TextareaChangeEventDetail } from '../../interface';
|
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';
|
import { createColorClasses } from '../../utils/theme';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
@ -10,7 +10,7 @@ import { createColorClasses } from '../../utils/theme';
|
|||||||
ios: 'textarea.ios.scss',
|
ios: 'textarea.ios.scss',
|
||||||
md: 'textarea.md.scss'
|
md: 'textarea.md.scss'
|
||||||
},
|
},
|
||||||
shadow: true
|
scoped: true
|
||||||
})
|
})
|
||||||
export class Textarea implements ComponentInterface {
|
export class Textarea implements ComponentInterface {
|
||||||
|
|
||||||
@ -263,8 +263,6 @@ export class Textarea implements ComponentInterface {
|
|||||||
|
|
||||||
render() {
|
render() {
|
||||||
const value = this.getValue();
|
const value = this.getValue();
|
||||||
renderHiddenInput(false, this.el, this.name, value, this.disabled);
|
|
||||||
|
|
||||||
const labelId = this.inputId + '-lbl';
|
const labelId = this.inputId + '-lbl';
|
||||||
const label = findItemLabel(this.el);
|
const label = findItemLabel(this.el);
|
||||||
if (label) {
|
if (label) {
|
||||||
|
Reference in New Issue
Block a user