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>
144 lines
3.5 KiB
SCSS
144 lines
3.5 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 ion-icon {
|
|
width: 22px;
|
|
height: 22px;
|
|
}
|
|
|
|
// 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-md-disabled-opacity};
|
|
}
|
|
|
|
// Input Bottom
|
|
// ----------------------------------------------------------------
|
|
|
|
/**
|
|
* If the input has a validity state, the
|
|
* border and label should reflect that as a color.
|
|
*/
|
|
:host(.has-focus.ion-valid),
|
|
:host(.ion-touched.ion-invalid) {
|
|
--border-color: var(--highlight-color);
|
|
}
|
|
|
|
.input-bottom .counter {
|
|
letter-spacing: .0333333333em;
|
|
}
|
|
|
|
// Input Label
|
|
// ----------------------------------------------------------------
|
|
|
|
/**
|
|
* When the input is focused the label should
|
|
* take on the highlight color. This should
|
|
* only apply to floating or stacked labels.
|
|
*/
|
|
:host(.input-label-placement-floating.has-focus) .label-text-wrapper,
|
|
:host(.input-label-placement-stacked.has-focus) .label-text-wrapper {
|
|
color: var(--highlight-color);
|
|
}
|
|
|
|
:host(.has-focus.input-label-placement-floating.ion-valid) .label-text-wrapper,
|
|
:host(.input-label-placement-floating.ion-touched.ion-invalid) .label-text-wrapper,
|
|
:host(.has-focus.input-label-placement-stacked.ion-valid) .label-text-wrapper,
|
|
:host(.input-label-placement-stacked.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);
|
|
}
|
|
|
|
/**
|
|
* Adjust the highlight up by 1px
|
|
* so it is not cut off by the
|
|
* the item's line (if one is present).
|
|
*/
|
|
:host(.in-item) .input-highlight {
|
|
@include position(null, null, 0, 0);
|
|
}
|
|
|
|
// Input Shape Rounded
|
|
// ----------------------------------------------------------------
|
|
|
|
:host(.input-shape-round) {
|
|
--border-radius: 16px;
|
|
}
|
|
|
|
// 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: 8px;
|
|
--padding-end: 8px;
|
|
--padding-top: 8px;
|
|
--padding-bottom: 8px;
|
|
|
|
aspect-ratio: 1;
|
|
|
|
min-height: 40px;
|
|
}
|