diff --git a/projects/ng-aquila/src/circle-toggle/icon-toggle-button/icon-toggle-button.component.scss b/projects/ng-aquila/src/circle-toggle/icon-toggle-button/icon-toggle-button.component.scss index 888b7596e..553b66879 100644 --- a/projects/ng-aquila/src/circle-toggle/icon-toggle-button/icon-toggle-button.component.scss +++ b/projects/ng-aquila/src/circle-toggle/icon-toggle-button/icon-toggle-button.component.scss @@ -259,92 +259,44 @@ $check-icon-size: nx-spacer(2m); } @media screen and (-ms-high-contrast: active) { - .nx-toggle-circle__icon-wrapper { - border-color: buttonText; - background-color: buttonFace; - } - - .nx-toggle-circle__content-text { - -ms-high-contrast-adjust: none; - } - - .nx-toggle-circle__label-text, - .nx-toggle-circle__label-hint { - color: buttonText; - } - - :host:not(.is-flipped), - :host(.is-negative):not(.is-flipped):not(.is-disabled):not(.is-touched) { - - .nx-toggle-circle__icon nx-icon, - .nx-toggle-circle__content-text { - color: buttonText; - } - } - - :host(.is-flipped), - :host(.is-negative.is-flipped) { - - .nx-toggle-circle__icon-wrapper { - background: highlight; - border-color: highlight; - color: highlightText; - } - - .nx-toggle-circle__icon nx-icon, - .nx-toggle-circle__content-text { - color: highlightText; - } + :host { + forced-color-adjust: none; + .nx-toggle-circle__icon-wrapper, .nx-toggle-circle__check-icon { - border-color: windowText; - color: windowText; + border-color: buttonText !important; + color: buttonText !important; + background: buttonFace !important; } - } - // Undo hover styles - :host:not(.is-disabled):not(.is-touched):hover, - :host.is-negative:not(.is-disabled):not(.is-touched):hover { - &.is-flipped { - .nx-toggle-circle__icon nx-icon, - .nx-toggle-circle__content-text { - color: highlightText; - } + .nx-toggle-circle__content-text, + .nx-toggle-circle__label-text, + .nx-toggle-circle__label-hint { + color: buttonText !important; } - &:not(.is-flipped) { - .nx-toggle-circle__icon nx-icon, - .nx-toggle-circle__content-text { - color: buttonText; + &.is-flipped { + .nx-toggle-circle__icon-wrapper { + background: highlight !important; + border-color: highlight !important; + color: highlightText !important; } } - } - // disabled - :host(.is-disabled.is-flipped), - :host(.is-disabled.is-flipped):hover, - :host(.is-disabled) { - opacity: 1; + &.is-disabled { + opacity: 1; - .nx-toggle-circle__icon-wrapper { - border-color: GrayText; - background: buttonFace; - color: GrayText; - - .nx-toggle-circle__icon nx-icon, - .nx-toggle-circle__content-text { - color: GrayText; + .nx-toggle-circle__icon-wrapper, + .nx-toggle-circle__check-icon { + background: window !important; + border-color: GrayText !important; + color: GrayText !important; } - } - .nx-toggle-circle__check-icon { - border-color: GrayText; - color: GrayText; - } - - .nx-toggle-circle__label-text, - .nx-toggle-circle__label-hint { - color: GrayText; + .nx-toggle-circle__label-text, + .nx-toggle-circle__label-hint { + color: GrayText !important; + } } } } diff --git a/projects/ng-aquila/src/circle-toggle/mobile-toggle-button/mobile-toggle-button.component.scss b/projects/ng-aquila/src/circle-toggle/mobile-toggle-button/mobile-toggle-button.component.scss index c4872c56e..ee62e931d 100644 --- a/projects/ng-aquila/src/circle-toggle/mobile-toggle-button/mobile-toggle-button.component.scss +++ b/projects/ng-aquila/src/circle-toggle/mobile-toggle-button/mobile-toggle-button.component.scss @@ -125,39 +125,37 @@ } @media screen and (-ms-high-contrast: active) { - :host, - :host(.is-negative) { - background-color: buttonFace; - border-color: buttonText; + :host { + forced-color-adjust: none; + background-color: buttonFace !important; + border-color: buttonText !important; + color: buttonText !important; - .nx-toggle-button__label-hint, .nx-toggle-button__label-text, - .nx-toggle-button__mobile-check { - color: buttonText; - -ms-high-contrast-adjust: none; + .nx-toggle-button__label-hint { + color: buttonText !important; } } - :host(.is-flipped), - :host(.is-negative.is-flipped) { - background-color: highlight; + :host.is-flipped { + background-color: highlight !important; + color: highlightText !important; - .nx-toggle-button__label-hint, .nx-toggle-button__label-text, - .nx-toggle-button__mobile-check { - color: highlightText; + .nx-toggle-button__label-hint { + color: highlightText !important; } } - :host(.is-disabled) { + :host.is-disabled { opacity: 1; - border-color: GrayText; - color: GrayText; + border-color: GrayText !important; + color: GrayText !important; + background-color: buttonFace !important; - &.is-flipped { - .nx-toggle-button__mobile-check { - color: GrayText; - } + .nx-toggle-button__label-text, + .nx-toggle-button__label-hint { + color: GrayText !important; } } } diff --git a/projects/ng-aquila/src/code-input/code-input.scss b/projects/ng-aquila/src/code-input/code-input.scss index 66416de80..94a617af8 100644 --- a/projects/ng-aquila/src/code-input/code-input.scss +++ b/projects/ng-aquila/src/code-input/code-input.scss @@ -125,6 +125,22 @@ input[type=number] { -moz-appearance: textfield; } +@media screen and (forced-colors: active) { + .nx-code-input__field { + border-bottom: 1px solid buttonText !important; + } + + &:focus { + border-bottom: 2px solid highlight !important; + } + + :host.is-disabled { + .nx-code-input__field { + border-bottom: 1px solid GrayText !important; + } + } +} + @media screen and (-ms-high-contrast: active) { .nx-code-input__field { box-shadow: inset $default-box-shadow buttonText; diff --git a/projects/ng-aquila/src/comparison-table/comparison-table.component.scss b/projects/ng-aquila/src/comparison-table/comparison-table.component.scss index 5f777b4c1..32984bff0 100644 --- a/projects/ng-aquila/src/comparison-table/comparison-table.component.scss +++ b/projects/ng-aquila/src/comparison-table/comparison-table.component.scss @@ -504,3 +504,12 @@ position: relative; // needed that z-index works } } + +@media screen and (-ms-high-contrast: active) { + ::ng-deep .nx-comparison-table__popular-cell, + ::ng-deep .nx-comparison-table__mobile-popular-cell { + border-top: 1px solid windowText; + border-right: 1px solid windowText; + border-left: 1px solid windowText; + } +} diff --git a/projects/ng-aquila/src/comparison-table/select-button/select-button.component.scss b/projects/ng-aquila/src/comparison-table/select-button/select-button.component.scss index 0491c4cfb..0dcbb9890 100644 --- a/projects/ng-aquila/src/comparison-table/select-button/select-button.component.scss +++ b/projects/ng-aquila/src/comparison-table/select-button/select-button.component.scss @@ -16,5 +16,11 @@ [dir="rtl"] & { margin-left: 4px; } + + @media screen and (-ms-high-contrast: active) { + background: buttonFace; + border: 1px solid buttonText; + border-radius: 50%; + } } } diff --git a/projects/ng-aquila/src/datefield/datepicker/calendar-body.scss b/projects/ng-aquila/src/datefield/datepicker/calendar-body.scss index 1bbf36b1a..9e0a091a5 100644 --- a/projects/ng-aquila/src/datefield/datepicker/calendar-body.scss +++ b/projects/ng-aquila/src/datefield/datepicker/calendar-body.scss @@ -88,6 +88,10 @@ $item-size: nx-spacer(3m); .nx-calendar-body-cell-content:not(.nx-calendar-body-selected) { @include var(background-color, datefield-cell-focused-background-color); + + @media screen and (-ms-high-contrast: active) { + background-color: highlight; + } } } diff --git a/projects/ng-aquila/src/datefield/datepicker/datepicker-toggle.scss b/projects/ng-aquila/src/datefield/datepicker/datepicker-toggle.scss index c8ed2f626..fe82484c1 100644 --- a/projects/ng-aquila/src/datefield/datepicker/datepicker-toggle.scss +++ b/projects/ng-aquila/src/datefield/datepicker/datepicker-toggle.scss @@ -29,6 +29,10 @@ $icon-size: nx-spacer(m); &::-moz-focus-inner { border: 0; } + + @media screen and (-ms-high-contrast: active) { + color: ButtonText; + } } .default-icon { @@ -39,6 +43,10 @@ $icon-size: nx-spacer(m); :host(.nx-datepicker-toggle--disabled) .nx-datepicker-toggle-button { cursor: not-allowed; + + @media screen and (-ms-high-contrast: active) { + color: GrayText; + } } .nx-datepicker-toggle-button.cdk-keyboard-focused { diff --git a/projects/ng-aquila/src/dropdown/dropdown.scss b/projects/ng-aquila/src/dropdown/dropdown.scss index 838a2cdf9..db67e3716 100644 --- a/projects/ng-aquila/src/dropdown/dropdown.scss +++ b/projects/ng-aquila/src/dropdown/dropdown.scss @@ -195,6 +195,7 @@ $dropdown-border-size: nx-border-size(xs); @media screen and (-ms-high-contrast: active) { .nx-dropdown__panel { box-shadow: 0 0 0 nx-border-size(xs) windowText; + border: 1px solid CanvasText; // Chromium Edge } .nx-dropdown__panel-header { diff --git a/projects/ng-aquila/src/dropdown/item/dropdown-item.scss b/projects/ng-aquila/src/dropdown/item/dropdown-item.scss index 59f5ce128..3119828a4 100644 --- a/projects/ng-aquila/src/dropdown/item/dropdown-item.scss +++ b/projects/ng-aquila/src/dropdown/item/dropdown-item.scss @@ -52,25 +52,6 @@ nx-checkbox { @include var(color, dropdown-item-hover-color); } -@media screen and (-ms-high-contrast: active) { - :host:hover, - :host(.nx-dropdown-item--active):not(.nx-multiselect) { - .nx-dropdown-results__option-label { - color: highlightText; - background-color: highlight; - } - } - - :host(.nx-dropdown-item--active):not(.nx-multiselect) { - .nx-dropdown-results__option-checkicon { - -ms-high-contrast-adjust: none; - color: highlightText; - background: highlight; - z-index: 1; - } - } -} - :host(.nx-selected) .nx-dropdown-results__option-checkicon { opacity: 1; } @@ -151,3 +132,28 @@ nx-checkbox { @include var(color, dropdown-item-text-color-disabled); } } + +@media screen and (-ms-high-contrast: active) { + :host:hover:not(.nx-dropdown-item--disabled), + :host(.nx-dropdown-item--active):not(.nx-multiselect) { + .nx-dropdown-results__option-label { + color: highlightText; + background-color: highlight; + } + } + + :host(.nx-dropdown-item--active):not(.nx-multiselect) { + .nx-dropdown-results__option-checkicon { + -ms-high-contrast-adjust: none; + color: highlightText; + background: highlight; + z-index: 1; + } + } + + :host(.nx-dropdown-item--disabled) { + .nx-dropdown-results__option-label { + color: GrayText; + } + } +} diff --git a/projects/ng-aquila/src/formfield/formfield.scss b/projects/ng-aquila/src/formfield/formfield.scss index c7ac26c62..d69bd9b68 100644 --- a/projects/ng-aquila/src/formfield/formfield.scss +++ b/projects/ng-aquila/src/formfield/formfield.scss @@ -508,9 +508,16 @@ $outline-padding: 7px; // HIGH CONTRAST @media screen and (-ms-high-contrast: active) { - .nx-formfield__input-container { + .nx-formfield__input-container, + .nx-formfield.nx-formfield--negative .nx-formfield__input-container, + // overwrite hover in chromium edge: + .nx-formfield:not(.nx-formfield--negative):not(.has-error):not(.is-disabled):not(.is-focused):not(.has-outline) + .nx-formfield__row:hover .nx-formfield__input-container, + // overwrite error color + .nx-formfield.has-error:not(.nx-formfield--negative) .nx-formfield__input-container { border-bottom-color: buttonText; } + .nx-formfield.has-outline { .nx-formfield__input-container { @@ -540,7 +547,8 @@ $outline-padding: 7px; } } - .nx-formfield.is-focused:not(.has-outline) .nx-formfield__input-container { + .nx-formfield.is-focused:not(.has-outline) .nx-formfield__input-container, + .nx-formfield.is-focused:not(.nx-formfield--negative):not(.has-error) .nx-formfield__input-container { border-bottom-color: highlight; } diff --git a/projects/ng-aquila/src/icon/icon.component.scss b/projects/ng-aquila/src/icon/icon.component.scss index 83ec678c4..73634eacd 100644 --- a/projects/ng-aquila/src/icon/icon.component.scss +++ b/projects/ng-aquila/src/icon/icon.component.scss @@ -31,7 +31,7 @@ $icon-outline-size-xl: 160px; } @media screen and (-ms-high-contrast: active) { - -ms-high-contrast-adjust: none; + color: inherit !important; } } diff --git a/projects/ng-aquila/src/input/password-toggle.component.scss b/projects/ng-aquila/src/input/password-toggle.component.scss index 8b2aa0679..1137d5ff4 100644 --- a/projects/ng-aquila/src/input/password-toggle.component.scss +++ b/projects/ng-aquila/src/input/password-toggle.component.scss @@ -10,7 +10,7 @@ $icon-size: nx-spacer(m); cursor: pointer; @media screen and (-ms-high-contrast: active) { - color: buttonText; + color: buttonText !important; } } @@ -31,4 +31,8 @@ $icon-size: nx-spacer(m); :host-context(.is-disabled) { pointer-events: none; + + @media screen and (-ms-high-contrast: active) { + color: GrayText !important; + } } diff --git a/projects/ng-aquila/src/link/link.component.scss b/projects/ng-aquila/src/link/link.component.scss index ea1e3b365..cb71df248 100644 --- a/projects/ng-aquila/src/link/link.component.scss +++ b/projects/ng-aquila/src/link/link.component.scss @@ -162,9 +162,15 @@ } } +@media screen and (forced-colors: active) { + :host { + color: LinkText !important; + } +} + @media screen and (-ms-high-contrast: active) { :host::ng-deep a[disabled], :host::ng-deep a[aria-disabled] { - color: GrayText; + color: GrayText !important; } } diff --git a/projects/ng-aquila/src/list/list.component.scss b/projects/ng-aquila/src/list/list.component.scss index 56a11d5c4..e05b1e557 100644 --- a/projects/ng-aquila/src/list/list.component.scss +++ b/projects/ng-aquila/src/list/list.component.scss @@ -99,7 +99,7 @@ $dot-border-radius: 50%; } @media screen and (-ms-high-contrast: active) { - background-color: windowText; + background-color: windowText !important; } } } diff --git a/projects/ng-aquila/src/number-stepper/number-stepper.component.scss b/projects/ng-aquila/src/number-stepper/number-stepper.component.scss index 1163697d0..211a7e4fe 100644 --- a/projects/ng-aquila/src/number-stepper/number-stepper.component.scss +++ b/projects/ng-aquila/src/number-stepper/number-stepper.component.scss @@ -187,6 +187,11 @@ $margin-default: nx-spacer(s); .nx-stepper__input { color: buttonText; + + &:disabled { + color: GrayText; + -webkit-text-fill-color: GrayText; + } } ::ng-deep .nx-stepper__prefix, @@ -201,7 +206,18 @@ $margin-default: nx-spacer(s); background: buttonFace; } - .nx-stepper__input-underline { + .nx-stepper__input-underline, + :host.is-negative .nx-stepper__input-underline { background: buttonText; } + + :host.is-disabled { + .nx-stepper__input-underline { + background: GrayText; + } + ::ng-deep .nx-stepper__prefix, + ::ng-deep .nx-stepper__suffix { + color: GrayText; + } + } }