mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
67a913773b
This PR gives the same behavior in Chrome, Safari and FF, when the input is not wrapped in html tags
165 lines
3.4 KiB
SCSS
165 lines
3.4 KiB
SCSS
@import "./input.vars";
|
|
|
|
// Input
|
|
// --------------------------------------------------
|
|
|
|
:host {
|
|
/**
|
|
* @prop --background: Background of the input
|
|
* @prop --color: Color of the input text
|
|
* @prop --padding-top: Top padding of the input
|
|
* @prop --padding-end: End padding of the input
|
|
* @prop --padding-bottom: Bottom padding of the input
|
|
* @prop --padding-start: Start padding of the input
|
|
* @prop --placeholder-color: Color of the input placeholder text
|
|
* @prop --placeholder-font-style: Font style of the input placeholder text
|
|
* @prop --placeholder-font-weight: Font weight of the input placeholder text
|
|
* @prop --placeholder-opacity: Opacity of the input placeholder text
|
|
*/
|
|
--placeholder-color: initial;
|
|
--placeholder-font-style: initial;
|
|
--placeholder-font-weight: initial;
|
|
--placeholder-opacity: .5;
|
|
--padding-top: 0;
|
|
--padding-end: 0;
|
|
--padding-bottom: 0;
|
|
--padding-start: 0;
|
|
--background: transparent;
|
|
--color: initial;
|
|
|
|
display: flex;
|
|
position: relative;
|
|
|
|
flex: 1;
|
|
align-items: center;
|
|
|
|
width: 100%;
|
|
|
|
/* stylelint-disable-next-line all */
|
|
padding: 0 !important;
|
|
|
|
background: var(--background);
|
|
color: var(--color);
|
|
|
|
font-family: $font-family-base;
|
|
|
|
z-index: $z-index-item-input;
|
|
}
|
|
|
|
:host-context(ion-item:not(.item-label)) {
|
|
--padding-start: 0;
|
|
}
|
|
|
|
:host(.ion-color) {
|
|
color: current-color(base);
|
|
}
|
|
|
|
// Native Text Input
|
|
// --------------------------------------------------
|
|
|
|
.native-input {
|
|
@include border-radius(var(--border-radius));
|
|
@include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
|
|
@include text-inherit();
|
|
|
|
display: inline-block;
|
|
|
|
flex: 1;
|
|
|
|
width: 100%;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
|
|
border: 0;
|
|
|
|
outline: none;
|
|
|
|
background: transparent;
|
|
|
|
box-sizing: border-box;
|
|
appearance: none;
|
|
|
|
&::placeholder {
|
|
color: var(--placeholder-color);
|
|
|
|
font-family: inherit;
|
|
font-style: var(--placeholder-font-style);
|
|
font-weight: var(--placeholder-font-weight);
|
|
|
|
opacity: var(--placeholder-opacity);
|
|
}
|
|
|
|
&:-webkit-autofill {
|
|
background-color: transparent;
|
|
}
|
|
|
|
&:invalid {
|
|
box-shadow: none;
|
|
}
|
|
|
|
&::-ms-clear {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.native-input[disabled] {
|
|
opacity: .4;
|
|
}
|
|
|
|
|
|
|
|
// Input Cover: Unfocused
|
|
// --------------------------------------------------
|
|
// The input cover is the div that actually receives the
|
|
// tap/click event when scroll assist is configured to true.
|
|
// This make it so the native input element is not clickable.
|
|
// This will only show when the scroll assist is configured
|
|
// otherwise the .input-cover will not be rendered at all
|
|
// The input cover is not clickable when the input is disabled
|
|
.cloned-input {
|
|
@include position(0, null, null, 0);
|
|
|
|
position: absolute;
|
|
|
|
pointer-events: none;
|
|
}
|
|
|
|
|
|
// Clear Input Icon
|
|
// --------------------------------------------------
|
|
|
|
.input-clear-icon {
|
|
@include margin(0);
|
|
@include padding(0);
|
|
@include background-position(center);
|
|
|
|
border: 0;
|
|
|
|
outline: none;
|
|
|
|
background-color: transparent;
|
|
background-repeat: no-repeat;
|
|
|
|
visibility: hidden;
|
|
appearance: none;
|
|
}
|
|
|
|
:host(.has-focus.has-value) .input-clear-icon {
|
|
visibility: visible;
|
|
}
|
|
|
|
|
|
// Input Has focus
|
|
// --------------------------------------------------
|
|
// When the input has focus, then the input cover should be hidden
|
|
|
|
:host(.has-focus) {
|
|
pointer-events: none;
|
|
}
|
|
|
|
:host(.has-focus) input,
|
|
:host(.has-focus) a,
|
|
:host(.has-focus) button {
|
|
pointer-events: auto;
|
|
}
|