mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 04:14:21 +08:00
112 lines
2.1 KiB
SCSS
112 lines
2.1 KiB
SCSS
@import "../../globals.core";
|
|
|
|
// Input/Textarea Wrapper
|
|
// --------------------------------------------------
|
|
|
|
ion-input,
|
|
ion-textarea {
|
|
display: block;
|
|
flex: 1;
|
|
}
|
|
|
|
|
|
|
|
|
|
// Textarea Within An Item
|
|
// --------------------------------------------------
|
|
|
|
.item.item-textarea {
|
|
align-items: stretch;
|
|
}
|
|
|
|
|
|
// Native Text Input
|
|
// --------------------------------------------------
|
|
|
|
.text-input {
|
|
display: inline-block;
|
|
background: transparent;
|
|
border: 0;
|
|
border-radius: 0;
|
|
flex: 1;
|
|
width: 92%;
|
|
width: calc(100% - 10px);
|
|
-webkit-appearance: none;
|
|
@include placeholder();
|
|
}
|
|
|
|
|
|
input.text-input:-webkit-autofill {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.platform-mobile textarea.text-input {
|
|
resize: none;
|
|
}
|
|
|
|
|
|
// 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
|
|
|
|
.input-cover {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
|
|
// Input Cover: Focused
|
|
// --------------------------------------------------
|
|
// When the input has focus, then the input cover should be hidden
|
|
|
|
.input-has-focus .input-cover {
|
|
display: none;
|
|
}
|
|
|
|
|
|
// Scroll Assist Input
|
|
// --------------------------------------------------
|
|
// This input is used to help the app handle
|
|
// Next and Previous input tabbing
|
|
|
|
[next-input] {
|
|
position: absolute;
|
|
bottom: 1px;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
pointer-events: none;
|
|
}
|
|
|
|
|
|
// Clear Input Icon
|
|
// --------------------------------------------------
|
|
|
|
.text-input-clear-icon {
|
|
position: absolute;
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
|
|
// Cloned Input
|
|
// --------------------------------------------------
|
|
|
|
.text-input.cloned-input,
|
|
.text-input.cloned-hidden {
|
|
position: absolute;
|
|
top: 0;
|
|
pointer-events: none;
|
|
} |