diff --git a/packages/main/src/themes/base/CheckBox.less b/packages/main/src/themes/base/CheckBox.less index 7a917e6e33c0..8a4553652966 100644 --- a/packages/main/src/themes/base/CheckBox.less +++ b/packages/main/src/themes/base/CheckBox.less @@ -22,13 +22,16 @@ @_ui5_checkbox_checkmark_warning_color: darken(@sapUiFieldWarningColor, 100); @_ui5_checkbox_checkmark_color: @sapUiSelected; @_ui5_checkbox_focus_left_top_bottom_position: .6875rem; -@_ui5_checkbox_compact_no_label_focus_right: 0px; +@_ui5_checkbox_compact_no_label_focus_right: 1px; @_ui5_checkbox_no_label_focus_right: .6875rem; @_ui5_checkbox_focus_outline: 1px dotted @sapUiContentFocusColor; @_ui5_checkbox_compact_inner_size: 1rem; @_ui5_checkbox_compact_focus_left_top_bottom_position: .375rem; @_ui5_checkbox_wrapped_content_margin_top: 0.125rem; @_ui5_checkbox_wrapped_focus_padding: .375rem; +@_ui5_checkbox_wrapped_focus_left_top_bottom_position: .5625rem; +@_ui5_checkbox_compact_wrapped_focus_left_top_bottom_position: .4375rem; +@_ui5_checkbox_compact_wrapped_label_margin_top: -1px; :host(ui5-checkbox) { display: inline-block; @@ -75,6 +78,10 @@ ui5-checkbox { margin-top: @_ui5_checkbox_wrapped_content_margin_top; } +.sapUiSizeCompact .ui5-checkbox-wrapper.ui5-checkbox-with-label.ui5-checkbox--wrap .ui5-checkbox-label { + margin-top: @_ui5_checkbox_compact_wrapped_label_margin_top; +} + .ui5-checkbox--disabled { opacity: .5; } @@ -132,7 +139,11 @@ ui5-checkbox { border: @_ui5_checkbox_focus_outline; } -.ui5-checkbox-wrapper:not(.ui5-checkbox-with-label):focus::after { +.ui5-checkbox-wrapper.ui5-checkbox--wrap:focus::before { + bottom: @_ui5_checkbox_wrapped_focus_left_top_bottom_position; +} + +.ui5-checkbox-wrapper:not(.ui5-checkbox-with-label):focus::before { right: @_ui5_checkbox_no_label_focus_right; } @@ -181,6 +192,7 @@ ui5-checkbox { } .ui5-checkbox-wrapper .ui5-checkbox-label { + width: calc(100% - .8125rem - @_ui5_checkbox_inner_width_height); margin-left: .8125rem; cursor: default; pointer-events: none; @@ -211,7 +223,7 @@ ui5-checkbox { border: @_ui5_checkbox_focus_outline; } -.sapUiSizeCompact .ui5-checkbox-wrapper:not(.ui5-checkbox-with-label):focus::after { +.sapUiSizeCompact .ui5-checkbox-wrapper:not(.ui5-checkbox-with-label):focus::before { right: @_ui5_checkbox_compact_no_label_focus_right; } @@ -221,6 +233,15 @@ ui5-checkbox { padding-bottom: @_ui5_checkbox_wrapped_focus_padding; } +.sapUiSizeCompact .ui5-checkbox-wrapper.ui5-checkbox--wrap:focus::before { + bottom: @_ui5_checkbox_compact_wrapped_focus_left_top_bottom_position; +} + +.sapUiSizeCompact .ui5-checkbox-wrapper .ui5-checkbox-label { + width: calc(100% - .8125rem - @_ui5_checkbox_compact_inner_size); +} + + span[dir="rtl"] .ui5-checkbox-wrapper .ui5-checkbox-label { margin-left: 0; margin-right: .8125rem; diff --git a/packages/main/src/themes/sap_fiori_3/CheckBox.less b/packages/main/src/themes/sap_fiori_3/CheckBox.less index 07ca6a80a023..58414ce94a2f 100644 --- a/packages/main/src/themes/sap_fiori_3/CheckBox.less +++ b/packages/main/src/themes/sap_fiori_3/CheckBox.less @@ -23,4 +23,6 @@ @_ui5_checkbox_inner_border_radius: .125rem; @_ui5_checkbox_compact_no_label_focus_right: 1px; @_ui5_checkbox_wrapped_focus_padding: .5rem; -@_ui5_checkbox_inner_readonly_border: 1px solid @sapUiFieldReadOnlyBorderColor; \ No newline at end of file +@_ui5_checkbox_inner_readonly_border: 1px solid @sapUiFieldReadOnlyBorderColor; +@_ui5_checkbox_compact_wrapped_label_margin_top: -0.125rem; +@_ui5_checkbox_compact_wrapped_focus_left_top_bottom_position: .625rem; \ No newline at end of file