diff --git a/core/src/components/input-otp/input-otp.common.scss b/core/src/components/input-otp/input-otp.common.scss index b905146155..6af7c8cee6 100644 --- a/core/src/components/input-otp/input-otp.common.scss +++ b/core/src/components/input-otp/input-otp.common.scss @@ -129,13 +129,6 @@ background: var(--separator-color); } -// Fills -// -------------------------------------------------- - -:host(.input-otp-fill-outline) { - --background: none; -} - // States // -------------------------------------------------- diff --git a/core/src/components/input-otp/input-otp.ionic.scss b/core/src/components/input-otp/input-otp.ionic.scss index ac67b4c455..29322bc527 100644 --- a/core/src/components/input-otp/input-otp.ionic.scss +++ b/core/src/components/input-otp/input-otp.ionic.scss @@ -68,20 +68,24 @@ // -------------------------------------------------- :host(.input-otp-shape-round) { - --border-radius: #{globals.$ion-border-radius-400}; + --border-radius: #{globals.$ion-round-xl}; } :host(.input-otp-shape-soft) { - --border-radius: #{globals.$ion-border-radius-200}; + --border-radius: #{globals.$ion-soft-xl}; } :host(.input-otp-shape-rectangular) { - --border-radius: #{globals.$ion-border-radius-0}; + --border-radius: #{globals.$ion-rectangular-xl}; } // Fills // -------------------------------------------------- +:host(.input-otp-fill-outline) { + --background: #{globals.$ion-bg-input-default}; +} + :host(.input-otp-fill-solid) { --border-color: #{globals.$ion-bg-input-bold-default}; --background: #{globals.$ion-bg-input-bold-default}; diff --git a/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-ionic-md-ltr-light-Mobile-Safari-linux.png index e36a00b0d3..f2eeecba1c 100644 Binary files a/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ