Move px to rem in scss files (#23009)

Co-authored-by: Mike Surowiec <[email protected]>

Author: heiskr

components/page-header/Breadcrumbs.module.scss

@@ -1,3 +1,3 @@
 .breadcrumbs {
-  clip-path: inset(-5px -5px -5px 0px);
+  clip-path: inset(-0.5rem -0.5rem -0.5rem 0);
 }

components/sidebar/SidebarProduct.module.scss

@@ -1,7 +1,7 @@
 .sidebarArticle::before {
   content: "";
   position: absolute;
-  left: 26px;
+  left: calc(1.5rem + 2px);
   height: 100%;
   border-left: 1px solid var(--color-fg-default);
   width: 1px;

components/ui/MarkdownContent/MarkdownContent.module.scss

@@ -14,8 +14,8 @@
     h5,
     h6 {
       display: inline-block;
-      margin-top: 10px;
-      margin-bottom: 10px;
+      margin-top: 0.5rem;
+      margin-bottom: 0.5rem;
 
       p {
         margin: 0;
@@ -36,8 +36,8 @@
       }
     }
     & > a[class~="doctocat-link"] {
-      padding: 8px;
-      margin-left: -32px;
+      padding: 0.5rem;
+      margin-left: -2rem;
       color: var(--color-fg-muted);
       &:active,
       &:focus {

components/ui/MarkdownContent/stylesheets/code.scss

@@ -1,16 +1,16 @@
 .markdownBody {
   [class~="highlight"] pre,
   pre {
-    margin-top: 10px;
+    margin-top: 0.5rem;
   }
 
   [class~="height-constrained-code-block"] pre {
-    max-height: 500px;
+    max-height: 32rem;
     overflow: auto;
   }
 
   [class~="code-extra"] {
-    margin-top: 24px;
+    margin-top: 1.5rem;
 
     pre {
       margin-top: 0 !important;
@@ -22,24 +22,24 @@
     }
   }
 
+  // on graphql/overview/resource-limitations
+  pre [class~="redbox"],
+  pre [class~="greenbox"],
+  pre [class~="bluebox"] {
+    color: var(--color-fg-on-emphasis);
+    padding: 0 0.25rem;
+    border-radius: 4px; // primer rounded-1
+  }
+
   pre [class~="redbox"] {
-    border: 2px solid var(--color-danger-emphasis);
-    padding: 2px;
-    border-radius: 2px;
-    margin-right: 2px;
+    background-color: var(--color-danger-emphasis);
   }
 
   pre [class~="greenbox"] {
-    border: 2px solid var(--color-success-emphasis);
-    padding: 2px;
-    border-radius: 2px;
-    margin-right: 2px;
+    background-color: var(--color-success-emphasis);
   }
 
   pre [class~="bluebox"] {
-    border: 2px solid var(--color-accent-emphasis);
-    padding: 2px;
-    border-radius: 2px;
-    margin-right: 2px;
+    background-color: var(--color-accent-emphasis);
   }
 }

components/ui/MarkdownContent/stylesheets/lists.scss

@@ -3,20 +3,20 @@
     counter-reset: li;
     list-style: none;
     position: relative;
-    padding-bottom: 10px;
+    padding-bottom: 0.5rem;
     padding-left: 0;
 
     > li {
-      padding: 8px 0 8px 40px;
+      padding: 0.5rem 0 0.5rem 2.5rem;
       border: 0;
       position: relative;
-      margin-bottom: 5px;
+      margin-bottom: 0.25rem;
 
       &:before {
-        width: 22px;
-        height: 22px;
-        font-size: 14px;
-        margin: 1px 0 0 8px;
+        width: calc(1.5rem - 2px);
+        height: calc(1.5rem - 2px);
+        font-size: calc(1rem - 2px);
+        margin: 1px 0 0 0.5rem;
         content: counter(li);
         counter-increment: li;
         position: absolute;
@@ -46,11 +46,11 @@
       }
 
       p:not(:first-child) {
-        margin-top: 15px;
+        margin-top: 1rem;
       }
 
       [class~="extended-markdown"] {
-        margin-top: 15px;
+        margin-top: 1rem;
       }
     }
 
@@ -63,8 +63,8 @@
   ul ol,
   ol ol,
   ol ul {
-    margin-top: 15px;
-    margin-bottom: 15px;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
   }
 }
 

components/ui/MarkdownContent/stylesheets/table.scss

@@ -16,7 +16,7 @@
       font-size: 85%;
       padding: 0.2em 0.4em;
       background-color: var(--color-canvas-subtle);
-      border-radius: 6px;
+      border-radius: 6px; // primer rounded-2
     }
 
     pre > code {
@@ -37,8 +37,8 @@
       top: 0;
       background: var(--color-canvas-default);
       box-shadow: 0 3px 0 0 var(--color-canvas-subtle);
-      padding: 12px 8px;
-      border: 0px;
+      padding: 0.75rem 0.5rem;
+      border: 0;
     }
 
     th[align="center"] {
@@ -55,8 +55,8 @@
     }
 
     td {
-      padding: 10px 8px;
-      border: 0px;
+      padding: 0.75rem 0.5rem;
+      border: 0;
       vertical-align: top;
     }
 

stylesheets/extended-markdown.scss

@@ -15,7 +15,7 @@
   }
 
   p:not(:first-child) {
-    margin-top: 15px;
+    margin-top: 1rem;
   }
 
   &.note pre code {
@@ -24,7 +24,7 @@
 
   &.note pre {
     background: none;
-    padding: 10px 10px 10px 0;
+    padding: 0.5rem 0.5rem 0.5rem 0;
     margin-bottom: 0;
   }
 }