fix(ui5-checkbox): fixes issues with focus outline and wrapping (#238)

SAP · Mar 25, 2019 · 02bb56e · 02bb56e
1 parent 912f434
commit 02bb56e
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 4 deletions.
diff --git 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
@@ -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;
+@_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;