mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
fdd52832c6
Issue number: N/A --------- ## What is the current behavior? Helper text is lighter than it should be. ## What is the new behavior? - Updates helper and counter text to match MD design - Updates e2e test to include more coverage ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information [Preview](https://ionic-framework-git-rou-11558-ionic1.vercel.app/src/components/input/test/bottom-content) > Note that the fill toggle will only work in `md` mode --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
81 lines
1.9 KiB
SCSS
81 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);
|
|
}
|
|
|
|
/**
|
|
* The bottom content should never have
|
|
* a border with the solid style.
|
|
*/
|
|
: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});
|
|
}
|