fix(ui5-radiobutton): focus outline in Compact & RTL (#18)

SAP · Feb 12, 2019 · 9afa81b · 9afa81b
1 parent 37ea08a
commit 9afa81b
Showing 1 changed file with 6 additions and 19 deletions.
diff --git a/packages/main/src/themes/base/RadioButton.less b/packages/main/src/themes/base/RadioButton.less
@@ -116,8 +116,8 @@ ui5-radiobutton {
 
 		input {
 			margin: 0; /* FF puts margin */
-			-webkit-appearance: none;
 			visibility: hidden;
+			width: 0;
 		}
 	}
 
@@ -188,35 +188,22 @@ ui5-radiobutton {
 	}
 }
 
-/* RTL */
-:host([dir=RTL]) {
-	.sapMRb.sapMRbHasLabel:focus:before {
-		left: 0;
- 		right: 0.625rem;
-	}
-}
-/* RTL in Compact */
-:host([dir=RTL]) {
-	.sapUiSizeCompact .sapMRb.sapMRbHasLabel:focus:before {
-		left: 0;
- 		right: 0.375rem;
-	}
-}
-
 /* ListItem Context */
 :host(ui5-radiobutton.radioButtonInListItem) .sapMRb .sapMRbInner .sapMRbSvgOuter {
 	fill: @sapUiListBackground;
 }
 
-[dir=RTL] {
+/* RTL */
+span[dir="rtl"] {
 	.sapMRb.sapMRbHasLabel:focus:before {
 		left: 0;
  		right: 0.625rem;
 	}
 }
+
 /* RTL in Compact */
-[dir=RTL] {
-	.sapUiSizeCompact .sapMRb.sapMRbHasLabel:focus:before {
+span[dir="rtl"] {
+	&.sapUiSizeCompact .sapMRb.sapMRbHasLabel:focus:before {
 		left: 0;
  		right: 0.375rem;
 	}