javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 23:16:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(input): add focused state for ionic theme (#29342)

Browse Source 
Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
This commit is contained in:
Maria Hutt
2024-04-17 08:27:15 -07:00
committed by GitHub
parent ac102cf52a
commit 930f275b7e
25 changed files with 74 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
core/src/components/input/input.ionic.scss
View File

@ -11,6 +11,8 @@
--border-color: #{$ionic-color-neutral-300};
--highlight-color-valid: #{$ionic-color-success-400};
--highlight-color-invalid: #{$ionic-color-error-400};
--placeholder-color: #{$ionic-color-neutral-500};
--placeholder-opacity: 1;
--text-color-invalid: #{$ionic-color-error-600};
}
@ -91,6 +93,11 @@
color: var(--text-color-invalid);
}
:host(.has-focus.ion-valid),
:host(.ion-touched.ion-invalid) {
--border-width: #{tokens.$ionic-border-size-small};
}
// Input Hover
// ----------------------------------------------------------------
@ -137,3 +144,11 @@
:host(.input-disabled.ion-color) .helper-text {
opacity: 0.6;
}
// Input Focus
// ----------------------------------------------------------------
:host(.has-focus) {
--border-color: #{tokens.$ionic-color-primary};
--border-width: #{tokens.$ionic-border-size-medium};
}