mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
117 lines
2.6 KiB
SCSS
117 lines
2.6 KiB
SCSS
@import "./input";
|
|
@import "./input.md.vars";
|
|
@import "./input.md.solid.scss";
|
|
@import "./input.md.outline.scss";
|
|
@import "../item/item.md.vars.scss";
|
|
|
|
// Material Design Input
|
|
// --------------------------------------------------
|
|
|
|
:host {
|
|
--border-width: 1px;
|
|
--border-color: #{$item-md-border-color};
|
|
|
|
font-size: $input-md-font-size;
|
|
}
|
|
|
|
// TODO FW-2764 Remove this
|
|
:host(.legacy-input) {
|
|
--padding-top: #{$input-md-padding-top};
|
|
--padding-end: #{$input-md-padding-end};
|
|
--padding-bottom: #{$input-md-padding-bottom};
|
|
--padding-start: #{$input-md-padding-start};
|
|
}
|
|
|
|
: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);
|
|
|
|
width: $input-md-input-clear-icon-width;
|
|
height: $input-md-input-clear-icon-width;
|
|
|
|
background-size: $input-md-input-clear-icon-size;
|
|
}
|
|
|
|
/**
|
|
* The input with no fill in item should
|
|
* have start padding applied on the input
|
|
* not the item.
|
|
*/
|
|
:host(.in-full-item:not(.input-fill-outline)),
|
|
:host(.in-full-item:not(.input-fill-solid)) {
|
|
--padding-start: #{$item-md-padding-start};
|
|
}
|
|
|
|
// Input Bottom
|
|
// ----------------------------------------------------------------
|
|
/**
|
|
* If the input has a validity state, the
|
|
* border and label should reflect that as a color.
|
|
*/
|
|
:host(.ion-touched.ion-valid) .input-bottom,
|
|
:host(.ion-touched.ion-invalid) .input-bottom {
|
|
--border-color: var(--highlight-color);
|
|
}
|
|
|
|
.input-bottom .counter {
|
|
letter-spacing: .0333333333em;
|
|
}
|
|
|
|
// Input Wrapper
|
|
// ----------------------------------------------------------------
|
|
|
|
.input-wrapper {
|
|
min-height: 56px;
|
|
}
|
|
|
|
// Input Label
|
|
// ----------------------------------------------------------------
|
|
|
|
/**
|
|
* When the input is focused the label should
|
|
* take on the highlight color.
|
|
*/
|
|
:host(.has-focus) .label-text-wrapper {
|
|
color: var(--highlight-color);
|
|
}
|
|
|
|
:host(.ion-touched.ion-valid) .label-text-wrapper,
|
|
:host(.ion-touched.ion-invalid) .label-text-wrapper {
|
|
color: var(--highlight-color);
|
|
}
|
|
|
|
// Input Highlight
|
|
// ----------------------------------------------------------------
|
|
|
|
.input-highlight {
|
|
@include position(null, null, -1px, 0);
|
|
|
|
position: absolute;
|
|
|
|
width: 100%;
|
|
height: 2px;
|
|
|
|
transform: scale(0);
|
|
|
|
transition: transform 200ms;
|
|
|
|
background: var(--highlight-color);
|
|
}
|
|
|
|
:host(.has-focus) .input-highlight {
|
|
transform: scale(1);
|
|
}
|
|
|
|
// Input Shape Rounded
|
|
// ----------------------------------------------------------------
|
|
|
|
:host(.input-shape-round) {
|
|
--border-radius: 16px;
|
|
}
|