fix: update safari fixes and nested ordered align

carbon-design-system · Sep 11, 2020 · 870ccad · 870ccad
1 parent c5dc43f
commit 870ccad
Showing 1 changed file with 15 additions and 1 deletion.
diff --git a/packages/gatsby-theme-carbon/src/components/markdown/Markdown.module.scss b/packages/gatsby-theme-carbon/src/components/markdown/Markdown.module.scss
@@ -85,7 +85,21 @@ ul :global(.bx--list--unordered) {
 
 :global(.bx--list--ordered:not(.bx--list--nested)) {
   margin-left: 1ch;
-  -webkit-padding-start: 0.5ch; // needed to align ordered lists to body copy in Safari
+}
+
+:global(.bx--list--ordered.bx--list--nested) {
+  margin-left: 0.5rem;
+}
+
+//Safari only fixes to align ordered list/nested ordered list to body copy #993
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+  :global(.bx--list--ordered:not(.bx--list--nested)) {
+    padding-left: 0.5ch;
+  }
+
+  :global(.bx--list--ordered.bx--list--nested) {
+    padding-left: 0.25rem;
+  }
 }
 
 // responsive items in a list need to be full width