diff --git a/src/checkbox.scss b/src/checkbox.scss index 486da8e054..b4f3314614 100644 --- a/src/checkbox.scss +++ b/src/checkbox.scss @@ -27,7 +27,7 @@ $fd-checkbox-margin-compact: 0.5rem; border-radius: var(--sapField_BorderCornerRadius); color: var(--sapSelectedColor); - &::before { + &::after { font-family: "SAP-icons"; font-style: normal; font-weight: normal; @@ -36,13 +36,13 @@ $fd-checkbox-margin-compact: 0.5rem; } &:checked { - &::before { + &::after { content: "\e05b"; } } &:indeterminate { - &::before { + &::after { content: ""; display: inline-block; width: 0.75rem; @@ -51,21 +51,25 @@ $fd-checkbox-margin-compact: 0.5rem; } } + @include fd-form-radio-focus($fd-checkbox-margin); + &--compact { height: $fd-checkbox-dimensions-compact; width: $fd-checkbox-dimensions-compact; margin: $fd-checkbox-margin-compact; - &::before { + &::after { font-size: 0.625rem; } &:indeterminate { - &::before { + &::after { width: 0.5rem; height: 0.5rem; } } + + @include fd-form-radio-focus($fd-checkbox-margin-compact); } // states @@ -83,13 +87,13 @@ $fd-checkbox-margin-compact: 0.5rem; border: 0.125rem solid var(--sapField_InvalidColor); &:checked { - &::before { + &::after { color: var(--sapField_InvalidColor); } } &:indeterminate { - &::before { + &::after { background-color: var(--sapField_InvalidColor); } } @@ -106,13 +110,13 @@ $fd-checkbox-margin-compact: 0.5rem; border: var(--sapField_BorderWidth) solid var(--sapField_SuccessColor); &:checked { - &::before { + &::after { color: var(--sapField_SuccessColor); } } &:indeterminate { - &::before { + &::after { background-color: var(--sapField_SuccessColor); } } @@ -130,13 +134,13 @@ $fd-checkbox-margin-compact: 0.5rem; border: 0.125rem solid var(--sapField_WarningColor); &:checked { - &::before { + &::after { color: var(--sapField_TextColor); } } &:indeterminate { - &::before { + &::after { background-color: var(--sapField_TextColor); } } @@ -153,13 +157,13 @@ $fd-checkbox-margin-compact: 0.5rem; border: 0.125rem solid var(--sapField_InformationColor); &:checked { - &::before { + &::after { color: var(--sapField_InformationColor); } } &:indeterminate { - &::before { + &::after { background-color: var(--sapField_InformationColor); } } @@ -178,13 +182,13 @@ $fd-checkbox-margin-compact: 0.5rem; pointer-events: none; &:checked { - &::before { + &::after { color: var(--sapContent_NonInteractiveIconColor); } } &:indeterminate { - &::before { + &::after { background-color: var(--sapContent_NonInteractiveIconColor); } } diff --git a/src/form-label.scss b/src/form-label.scss index 5c8f808938..e3e31d71af 100644 --- a/src/form-label.scss +++ b/src/form-label.scss @@ -31,12 +31,6 @@ $block: #{$fd-namespace}-form-label; opacity: 0.4; } - &:focus-within { - outline-width: var(--sapContent_FocusWidth); - outline-style: var(--sapContent_FocusStyle); - outline-color: var(--sapContent_FocusColor); - } - &--required, &[aria-required="true"] { &::after { @@ -75,10 +69,6 @@ $block: #{$fd-namespace}-form-label; display: flex; align-items: center; cursor: pointer; - - &:focus-within { - outline-offset: -0.25rem; - } } &--toggle { diff --git a/src/mixins/_forms.scss b/src/mixins/_forms.scss index 12a7847f69..1755647fb2 100644 --- a/src/mixins/_forms.scss +++ b/src/mixins/_forms.scss @@ -1,28 +1,22 @@ // Form Mixins @import "./mixins"; +@import "./states"; @mixin fd-form-states { + + $fd-form-border-thin-width: 0.0625rem; + $fd-form-border-thick-width: 2 * $fd-form-border-thin-width; + // states @include fd-hover() { background-color: var(--sapField_Hover_Background); border-color: var(--sapField_Hover_BorderColor); } - &.is-invalid { - background-color: var(--sapField_InvalidBackground); - border-color: var(--sapField_InvalidColor); - border-width: 0.125rem; - - @include fd-hover() { - background-color: var(--sapField_InvalidBackground); - border-color: var(--sapField_InvalidColor); - } - } - &.is-valid { background-color: var(--sapField_SuccessBackground); border-color: var(--sapField_SuccessColor); - border-width: 0.125rem; + border-width: $fd-form-border-thin-width; @include fd-hover() { background-color: var(--sapField_SuccessBackground); @@ -30,11 +24,20 @@ } } + &.is-invalid { + background-color: var(--sapField_InvalidBackground); + border-color: var(--sapField_InvalidColor); + + @include fd-hover() { + background-color: var(--sapField_InvalidBackground); + border-color: var(--sapField_InvalidColor); + } + } + &.is-warning, &.is-alert { background-color: var(--sapField_WarningBackground); border-color: var(--sapField_WarningColor); - border-width: 0.125rem; @include fd-hover() { background-color: var(--sapField_WarningBackground); @@ -45,7 +48,6 @@ &.is-information { background-color: var(--sapField_InformationBackground); border-color: var(--sapField_InformationColor); - border-width: 0.125rem; @include fd-hover() { background-color: var(--sapField_InformationBackground); @@ -61,6 +63,18 @@ outline-style: var(--sapContent_FocusStyle); } + &.is-warning, + &.is-alert, + &.is-information, + &.is-invalid { + border-width: $fd-form-border-thick-width; + + @include fd-focus() { + box-shadow: none; + outline-offset: -0.25rem; + } + } + @include fd-disabled() { pointer-events: none; opacity: 0.4; @@ -120,3 +134,24 @@ padding-right: $fd-forms-padding; @content; } + +@mixin fd-form-radio-focus($margin) { + $fd-radio-label-padding: 0.3125rem; + $fd-radio-focus-offset: 0.125rem; + + @include fd-focus() { + &::before { + content: ""; + position: absolute; + border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor); + top: $margin - $fd-radio-focus-offset; + left: $margin - $fd-radio-focus-offset; + bottom: $margin - $fd-radio-focus-offset; + right: $fd-radio-label-padding - $fd-radio-focus-offset; + @content; + } + + box-shadow: none; + outline: none; + } +} diff --git a/src/radio.scss b/src/radio.scss index 5776788b09..9390bb5287 100644 --- a/src/radio.scss +++ b/src/radio.scss @@ -37,6 +37,8 @@ $fd-radio-inner-circle-diameter-compact: 0.375rem; background-color: transparent; } + @include fd-form-radio-focus($fd-radio-outer-circle-margin); + &--compact { height: $fd-radio-outer-circle-diameter-compact; width: $fd-radio-outer-circle-diameter-compact; @@ -46,6 +48,8 @@ $fd-radio-inner-circle-diameter-compact: 0.375rem; width: $fd-radio-inner-circle-diameter-compact; height: $fd-radio-inner-circle-diameter-compact; } + + @include fd-form-radio-focus($fd-radio-outer-circle-margin-compact); } &:checked { diff --git a/test/visual-regression-tests/reference_images/FS_input-group_2_backstop__n2_0_.png b/test/visual-regression-tests/reference_images/FS_input-group_2_backstop__n2_0_.png index 65b436dbb2..8547dc1c3a 100644 Binary files a/test/visual-regression-tests/reference_images/FS_input-group_2_backstop__n2_0_.png and b/test/visual-regression-tests/reference_images/FS_input-group_2_backstop__n2_0_.png differ diff --git a/test/visual-regression-tests/reference_images/FS_input_2_backstop__n2_0_.png b/test/visual-regression-tests/reference_images/FS_input_2_backstop__n2_0_.png index 159c079cf6..ec947dd0c3 100644 Binary files a/test/visual-regression-tests/reference_images/FS_input_2_backstop__n2_0_.png and b/test/visual-regression-tests/reference_images/FS_input_2_backstop__n2_0_.png differ diff --git a/test/visual-regression-tests/reference_images/FS_textarea_3_backstop__n3_0_.png b/test/visual-regression-tests/reference_images/FS_textarea_3_backstop__n3_0_.png index c7ece7aaf6..e818d4a3dd 100644 Binary files a/test/visual-regression-tests/reference_images/FS_textarea_3_backstop__n3_0_.png and b/test/visual-regression-tests/reference_images/FS_textarea_3_backstop__n3_0_.png differ