mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
357b8b2beb
Issue number: Resolves #26297 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> With the modern form control syntax, it is not possible to add icon buttons or other decorators to the sides of `ion-input`, `ion-textarea`, or `ion-select`, as you can with `ion-item`. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> `start` and `end` slots added to each component. This PR is a combination of several others that were already approved. If needed, it might be easiest to review the PRs individually by looking at the commit history here. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Docs PR: https://github.com/ionic-team/ionic-docs/pull/3271 Dev build: `7.5.4-dev.11701112913.1ea61220` --------- Co-authored-by: ionitron <hi@ionicframework.com> Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com> Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
77 lines
1.9 KiB
SCSS
77 lines
1.9 KiB
SCSS
@import "./input.vars";
|
|
|
|
// Input Fill: Solid
|
|
// ----------------------------------------------------------------
|
|
|
|
:host(.input-fill-solid) {
|
|
--background: #{$background-color-step-50};
|
|
--border-color: #{$background-color-step-500};
|
|
--border-radius: 4px;
|
|
--padding-start: 16px;
|
|
--padding-end: 16px;
|
|
|
|
min-height: 56px;
|
|
}
|
|
|
|
/**
|
|
* The solid fill style has a border
|
|
* at the bottom of the input wrapper.
|
|
* As a result, the border on the "bottom
|
|
* content" is not needed.
|
|
*/
|
|
:host(.input-fill-solid) .input-wrapper {
|
|
border-bottom: var(--border-width) var(--border-style) var(--border-color);
|
|
}
|
|
|
|
/**
|
|
* If the input has a validity state, the
|
|
* border should reflect that as a color.
|
|
*/
|
|
:host(.has-focus.input-fill-solid.ion-valid),
|
|
:host(.input-fill-solid.ion-touched.ion-invalid) {
|
|
--border-color: var(--highlight-color);
|
|
}
|
|
|
|
:host(.input-fill-solid) .input-bottom {
|
|
border-top: none;
|
|
}
|
|
|
|
/**
|
|
* Background and border should be
|
|
* slightly darker on hover.
|
|
*/
|
|
@media (any-hover: hover) {
|
|
:host(.input-fill-solid:hover) {
|
|
--background: #{$background-color-step-100};
|
|
--border-color: #{$background-color-step-750};
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Background and border should be
|
|
* much darker on focus.
|
|
*/
|
|
:host(.input-fill-solid.has-focus) {
|
|
--background: #{$background-color-step-150};
|
|
--border-color: #{$background-color-step-750};
|
|
}
|
|
|
|
:host(.input-fill-solid) .input-wrapper {
|
|
/**
|
|
* Only the top left and top right borders should.
|
|
* have a radius when using a solid fill.
|
|
*/
|
|
@include border-radius(var(--border-radius), var(--border-radius), 0px, 0px);
|
|
}
|
|
|
|
// Input Label
|
|
// ----------------------------------------------------------------
|
|
|
|
:host(.label-floating.input-fill-solid.input-label-placement-floating) .label-text-wrapper {
|
|
/**
|
|
* Label text should not extend
|
|
* beyond the bounds of the input.
|
|
*/
|
|
max-width: calc(100% / #{$form-control-label-stacked-scale});
|
|
}
|