Merge pull request #12 from rakeshAlgo/style-guide-ui

Status label and other UI issues fixes.

Author: amarantha-k

src/css/doc.css

@@ -1,3 +1,7 @@
+.doc {
+  padding: var(--base-space) 0;
+}
+
 .doc p {
   margin: 0;
 }
@@ -83,8 +87,8 @@
 .doc h4 a.anchor::before,
 .doc h5 a.anchor::before,
 .doc h6 a.anchor::before {
-  content: '\f0c1';
-  font-family: 'Font Awesome 5 Free', sans-serif;
+  content: "\f0c1";
+  font-family: "Font Awesome 5 Free", sans-serif;
   font-weight: 900;
 }
 
@@ -489,7 +493,8 @@
 .doc pre.highlight code {
   /* background-color: #151514; */
   color: var(--color-brand-gray1);
-  font-weight: var(--weight-normal); /* needed to override third-party styles */
+  font-weight: var(--weight-normal);
+  /* needed to override third-party styles */
   padding-left: var(--base-small-space);
   padding-right: var(--base-small-space);
   padding-top: var(--base-large-space);
@@ -585,8 +590,7 @@
   content: "";
   display: inline-block;
   background:
-    transparent
-    linear-gradient(
+    transparent linear-gradient(
       180deg,
       #f1f7fe0d 0%,
       #f1f7fe40 18%,
@@ -875,6 +879,7 @@ code.language-console.hljs.shell {
 .doc .tab-pane > :first-child {
   margin-top: 0;
 }
+
 /* Media css  */
 
 @media screen and (min-width: 840px) {
@@ -1002,7 +1007,6 @@ code.language-console.hljs.shell {
 }
 
 @media screen and (max-width: 767px) {
-
   .doc h1 {
     font-size: var(--heading-h1-sm);
   }
@@ -1037,8 +1041,12 @@ code.language-console.hljs.shell {
     padding: 1.5rem;
   }
 
-  .doc h1 > a.anchor, .doc h2 > a.anchor, .doc h3 > a.anchor, .doc h4 > a.anchor, .doc h5 > a.anchor, .doc h6 > a.anchor {
+  .doc h1 > a.anchor,
+  .doc h2 > a.anchor,
+  .doc h3 > a.anchor,
+  .doc h4 > a.anchor,
+  .doc h5 > a.anchor,
+  .doc h6 > a.anchor {
     font-size: 18px;
   }
-
-}
+}

src/css/labels.css

@@ -48,7 +48,7 @@
 .doc .edition,
 .doc .status,
 .doc .edition.page-edition {
-  color: #fff;
+  /* color: #fff; */
   display: inline-block;
   padding: 6px;
   text-transform: uppercase;

src/css/main.css

@@ -155,5 +155,4 @@ main p {
   .article-banner p .fab {
     font-size: 1.2rem;
   }
-
 }

src/css/vars.css

@@ -121,10 +121,9 @@
   --admonition-icon-space: 1rem;
   --admonition-content-space: 1rem;
 
-   /* Heading fonts for responsive */
-   --heading-h1-sm: 2.25rem; /* ~36px */
-   --heading-h2-sm: 1.75rem; /* ~28px */
-   --heading-h3-sm: 1.25rem; /* ~20px */
-   --heading-h4-sm: 0.875rem; /* ~14px */
-
+  /* Heading fonts for responsive */
+  --heading-h1-sm: 2.25rem; /* ~36px */
+  --heading-h2-sm: 1.75rem; /* ~28px */
+  --heading-h3-sm: 1.25rem; /* ~20px */
+  --heading-h4-sm: 0.875rem; /* ~14px */
 }