mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-09 08:09:32 +08:00
13b7f8ac3a
Issue number: Internal --------- <!-- 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. --> In v7, using the legacy syntax, the height of the highlight on an item could be adjusted using the `--highlight-height` variable. This variable was not added to input and therefore would not work using the modern syntax. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> Adds the `--highlight-height` variable to `ion-input`, `ion-textarea` and `ion-select` so that developers can customize this height in `md` mode. Since the highlight element is not added for `ios` mode, this variable won't do anything for `ios`. Note that this diverges from the v7 behavior, where setting `--highlight-height` enabled the highlight for `ios`. A design document outlining this has been proposed here: https://github.com/ionic-team/ionic-framework-design-documents/pull/252 ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> --------- Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
47 lines
1.2 KiB
SCSS
47 lines
1.2 KiB
SCSS
@import "./input";
|
|
@import "./input.ios.vars";
|
|
|
|
:host {
|
|
--border-width: #{$hairlines-width};
|
|
--border-color: #{$item-ios-border-color};
|
|
--highlight-height: 0px;
|
|
|
|
font-size: $input-ios-font-size;
|
|
}
|
|
|
|
.input-clear-icon ion-icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
// Input - Disabled
|
|
// ----------------------------------------------------------------
|
|
// The input, label, helper text, char counter and placeholder
|
|
// should use the same opacity and match the other form controls
|
|
|
|
:host(.input-disabled) {
|
|
opacity: #{$input-ios-disabled-opacity};
|
|
}
|
|
|
|
// Start/End Slots
|
|
// ----------------------------------------------------------------
|
|
|
|
/**
|
|
* Slotted buttons have a lot of default padding that can
|
|
* cause them to look misaligned from other pieces such
|
|
* as the control's label, especially when using a clear
|
|
* fill. We also make them circular to ensure that non-
|
|
* clear buttons and the focus/hover state on clear ones
|
|
* don't look too crowded.
|
|
*/
|
|
::slotted(ion-button[slot="start"].button-has-icon-only),
|
|
::slotted(ion-button[slot="end"].button-has-icon-only) {
|
|
--border-radius: 50%;
|
|
--padding-start: 0;
|
|
--padding-end: 0;
|
|
--padding-top: 0;
|
|
--padding-bottom: 0;
|
|
|
|
aspect-ratio: 1;
|
|
}
|