fix: checkbox and radio are now inline-flex

cft-group · Dec 2, 2020 · 70024f5 · 70024f5
1 parent a9a534a
commit 70024f5
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 3 deletions.
diff --git a/src/packages/core/src/checkbox/checkbox.css b/src/packages/core/src/checkbox/checkbox.css
@@ -1,5 +1,5 @@
 ._e_checkbox {
-  display: flex;
+  display: inline-flex;
   align-items: flex-start;
   cursor: pointer;
 
@@ -12,6 +12,13 @@
   }
 }
 
+/* IE11 only */
+@media screen and (-ms-high-contrast: none) {
+  ._e_checkbox {
+    display: flex;
+  }
+}
+
 ._e_checkbox_disabled {
   cursor: default;
   pointer-events: none;

diff --git a/src/packages/core/src/fieldset/fieldset.css b/src/packages/core/src/fieldset/fieldset.css
@@ -1,5 +1,6 @@
 ._e_fieldset {
-  display: block;
+  display: grid;
+  justify-items: start;
 
   & > ._e_checkbox, > ._e_radio {
     margin-bottom: var(--S12);
@@ -10,6 +11,13 @@
   }
 }
 
+/* IE11 only */
+@media screen and (-ms-high-contrast: none) {
+  ._e_fieldset {
+    display: block;
+  }
+}
+
 ._e_fieldset__legend {
   margin-bottom: var(--S12);
   font: var(--Body1);

diff --git a/src/packages/core/src/radio/radio.css b/src/packages/core/src/radio/radio.css
@@ -1,5 +1,5 @@
 ._e_radio {
-  display: flex;
+  display: inline-flex;
   align-items: flex-start;
   cursor: pointer;
 
@@ -12,6 +12,13 @@
   }
 }
 
+/* IE11 only */
+@media screen and (-ms-high-contrast: none) {
+  ._e_radio {
+    display: flex;
+  }
+}
+
 ._e_radio_disabled {
   cursor: default;
   pointer-events: none;