octicon-rss(16/)
You've already forked ionic-framework
mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-10 00:27:41 +08:00
b31ecbbfe8
aIssue number: resolves #28388 --------- <!-- 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. --> We added a `min-height: 56px` to the input, textarea, and select components for MD mode. However, these were added for the outline/solid style inputs to align with the Material Design spec: https://material-components.github.io/material-components-web-catalog/#/component/text-field They should not apply to regular inputs in an item. The end result is inconsistently sized items when used with non-control items. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Non-filled and non-stacked/floating label controls are now have a minimum height of 44px. There should be **no changes** to the following types of controls: 1. iOS controls (all variants) 2. MD filled controls 3. MD stacked controls ## 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. --> Dev build: `7.5.2-dev.11697818830.1a33c881` --------- Co-authored-by: ionitron <hi@ionicframework.com>
81 lines
2.2 KiB
SCSS
81 lines
2.2 KiB
SCSS
@import "./select.vars";
|
|
|
|
// Select Fill: Solid
|
|
// ----------------------------------------------------------------
|
|
|
|
:host(.select-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 select wrapper.
|
|
* As a result, the border on the "bottom
|
|
* content" is not needed.
|
|
*/
|
|
:host(.select-fill-solid) .select-wrapper {
|
|
border-bottom: var(--border-width) var(--border-style) var(--border-color);
|
|
}
|
|
|
|
/**
|
|
* If the select has a validity state, the
|
|
* border should reflect that as a color.
|
|
*/
|
|
:host(.has-focus.select-fill-solid.ion-valid),
|
|
:host(.select-fill-solid.ion-touched.ion-invalid) {
|
|
--border-color: var(--highlight-color);
|
|
}
|
|
|
|
:host(.select-fill-solid) .select-bottom {
|
|
border-top: none;
|
|
}
|
|
|
|
/**
|
|
* Background and border should be
|
|
* slightly darker on hover.
|
|
*/
|
|
@media (any-hover: hover) {
|
|
:host(.select-fill-solid:hover) {
|
|
--background: #{$background-color-step-100};
|
|
--border-color: #{$background-color-step-750};
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Background and border should be
|
|
* much darker on focus.
|
|
*/
|
|
:host(.select-fill-solid.select-expanded),
|
|
:host(.select-fill-solid.ion-focused) {
|
|
--background: #{$background-color-step-150};
|
|
--border-color: #{$background-color-step-750};
|
|
}
|
|
|
|
:host(.select-fill-solid) .select-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);
|
|
}
|
|
|
|
// Select Label
|
|
// ----------------------------------------------------------------
|
|
|
|
:host(.select-fill-solid.select-label-placement-stacked) .label-text-wrapper,
|
|
:host(.select-expanded.select-fill-solid.select-label-placement-floating) .label-text-wrapper,
|
|
:host(.ion-focused.select-fill-solid.select-label-placement-floating) .label-text-wrapper,
|
|
:host(.has-value.select-fill-solid.select-label-placement-floating) .label-text-wrapper {
|
|
/**
|
|
* Label text should not extend
|
|
* beyond the bounds of the select.
|
|
*/
|
|
max-width: calc(100% / #{$form-control-label-stacked-scale});
|
|
}
|