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 disabled state to the ionic theme (#29323)

Browse Source 
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
This commit is contained in:
Maria Hutt
2024-04-15 12:49:50 -07:00
committed by GitHub
parent 6e45fef869
commit 3b0f3af897
10 changed files with 292 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -54,3 +54,41 @@
--border-color: #{tokens.$ionic-color-neutral-600};
}
}
// Input - Disabled
// ----------------------------------------------------------------
:host(.input-disabled) {
// color for the text within the input
--color: #{tokens.$ionic-color-neutral-400};
--background: #{tokens.$ionic-color-neutral-10};
pointer-events: none;
}
:host(.input-disabled:not(.ion-valid)) .input-bottom .helper-text,
:host(.input-disabled) .input-bottom .counter,
:host(.input-disabled) .label-text-wrapper {
color: tokens.$ionic-color-neutral-400;
}
:host(.input-disabled.has-focus.ion-valid) {
// TODO(FW-6112): Update to use the correct color token when rgb tokens are available
--border-color: rgba(var(--ionic-color-success-400-rgb, 82, 165, 24), 0.6);
}
:host(.input-disabled.ion-touched.ion-invalid) {
// TODO(FW-6112): Update to use the correct color token when rgb tokens are available
--border-color: rgba(var(--ionic-color-error-400-rgb, 247, 44, 44), 0.6);
}
:host(.input-disabled.ion-color) {
--border-color: #{current-color(base, 0.6)};
}
:host(.input-disabled.has-focus.ion-valid) .input-bottom .helper-text,
:host(.input-disabled.ion-touched.ion-invalid) .error-text,
:host(.input-disabled.ion-color) .input-bottom .helper-text,
:host(.input-disabled.ion-color) .helper-text {
opacity: 0.6;
}