mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
516b84475e
Issue number: N/A --------- <!-- 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. --> Buttons slotted in the start/end slots of input, textarea, or select have a lot of excess padding that can cause them to look misaligned from other pieces such as the control's label, especially when using `fill="clear"`. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> Padding removed, and a border radius added so that non-clear buttons as well as the focus state on clear buttons still look okay. Existing screenshot tests have also been updated to include buttons (non-clear ones so you can see the border radius in the screenshots). Let me know if you think this should go on a feature branch instead. I chose `main` because the current experience looks somewhat broken and we just did a minor release recently, but this could be considered a notable enough behavior change. ## 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. --> --------- Co-authored-by: ionitron <hi@ionicframework.com>
62 lines
1.6 KiB
SCSS
62 lines
1.6 KiB
SCSS
@import "./input";
|
|
@import "./input.ios.vars";
|
|
|
|
:host {
|
|
--border-width: #{$hairlines-width};
|
|
--border-color: #{$item-ios-border-color};
|
|
|
|
font-size: $input-ios-font-size;
|
|
}
|
|
|
|
// TODO FW-2764 Remove this
|
|
:host(.legacy-input) {
|
|
--padding-top: #{$input-ios-padding-top};
|
|
--padding-end: #{$input-ios-padding-end};
|
|
--padding-bottom: #{$input-ios-padding-bottom};
|
|
--padding-start: #{$input-ios-padding-start};
|
|
}
|
|
|
|
:host-context(.item-label-stacked),
|
|
:host-context(.item-label-floating) {
|
|
--padding-top: 8px;
|
|
--padding-bottom: 8px;
|
|
--padding-start: 0px;
|
|
}
|
|
|
|
.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(.legacy-input) .native-input[disabled],
|
|
: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;
|
|
}
|