diff --git a/packages/styles/src/components/datepicker.scss b/packages/styles/src/components/datepicker.scss index 1b299667b5..943b35e112 100644 --- a/packages/styles/src/components/datepicker.scss +++ b/packages/styles/src/components/datepicker.scss @@ -5,7 +5,9 @@ @use './../variables/components/datepicker'; @use './../variables/components/forms'; @use './../variables/commons'; +@use './../variables/spacing'; @use './../mixins/icons' as icons-mx; +@use './../mixins/utilities'; @use './../themes/bootstrap/core' as b; @@ -21,8 +23,9 @@ ngb-datepicker.dropdown-menu { ngb-datepicker-navigation { justify-content: space-between; - button.ngb-dp-arrow-btn:focus-visible { - outline: forms.$input-focus-outline-thickness solid var(--post-contrast-color); + button.ngb-dp-arrow-btn { + @include utilities.focus-style(); + outline-width: spacing.$size-line !important; } } @@ -35,9 +38,10 @@ ngb-datepicker-navigation-select.ngb-dp-navigation-select { background-position: right; &:focus { + outline-style: solid; + box-shadow: none; border-radius: commons.$border-radius; - background-color: transparent; - box-shadow: inset 0 0 0 commons.$border-thick color.$black; + @include utilities.focus-style(); } + select { @@ -108,7 +112,9 @@ span.ngb-dp-navigation-chevron { height: 40px !important; line-height: 40px; &.active:not(.bg-primary) { - outline: forms.$input-focus-outline-thickness solid var(--post-contrast-color); + @include utilities.focus-style(); + outline-style: solid; + border-radius: commons.$border-radius !important; } } } @@ -161,7 +167,13 @@ span.ngb-dp-navigation-chevron { transform: none; } &:focus-visible { - outline: forms.$input-focus-outline-thickness solid var(--post-contrast-color); + outline: none; + & .pi { + @include utilities.focus-style(); + outline-style: solid; + border-radius: commons.$border-radius !important; + outline-offset: spacing.$size-micro; + } } }