mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 23:16:52 +08:00
feat(input): add hover state to the ionic theme (#29313)
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? The ionic input does not have a hover state. ## What is the new behavior? Adds a hover state. ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information We do not currently have a way to test hover states. See https://github.com/microsoft/playwright/issues/12077 for more information. --------- Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
This commit is contained in:
@ -1,3 +1,4 @@
|
||||
@use "../../foundations/ionic.vars.scss" as tokens;
|
||||
@import "./input";
|
||||
@import "./input.ionic.vars";
|
||||
@import "./input.ionic.outline.scss";
|
||||
@ -23,10 +24,18 @@
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
.input-bottom .helper-text {
|
||||
// TODO(FW-6112): Verify the design token is correct once it's available and remove the hardcoded value.
|
||||
color: var(--ionic-color-neutral-600, #535353);
|
||||
color: tokens.$ionic-color-neutral-600;
|
||||
}
|
||||
|
||||
:host(.ion-touched.ion-invalid) .error-text {
|
||||
color: var(--text-color-invalid);
|
||||
}
|
||||
|
||||
// Input Hover
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
@media (any-hover: hover) {
|
||||
:host(:hover) {
|
||||
--border-color: #{tokens.$ionic-color-neutral-600};
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user