[Docs] UI phase 1 bugs/changes (yugabyte#14979)

pinargulsen · Nov 17, 2022 · a680515 · a680515
1 parent bc8beea
commit a680515
Show file tree

Hide file tree

Showing 36 changed files with 1,936 additions and 1,903 deletions.
diff --git a/docs/assets/scss/_code_block.scss b/docs/assets/scss/_code_block.scss
@@ -1,13 +1,16 @@
 main {
   .td-content {
+    :not(pre) > code {
+      overflow: hidden;
+    }
+
     code {
       display: inline-block;
       vertical-align: middle;
       margin: 0 0;
       font-size: inherit !important;
       line-height: 110%;
       max-width: 100%;
-      overflow: auto;
       background: #f2f6ff;
       border: 1px solid #cbdbff;
       border-radius: 4px;
@@ -28,6 +31,7 @@ main {
     li p > a > code,
     li > code,
     li > em code,
+    p > a > code,
     p > code {
       font-size: 12px !important;
       line-height: 16px;
@@ -51,7 +55,6 @@ main {
 
       > code {
         position: relative;
-        overflow: hidden;
       }
     }
 
@@ -70,6 +73,15 @@ main {
       margin-top: 24px;
     }
 
+    > pre.can-be-copied {
+      + {
+        h2,
+        h4 {
+          margin-top: 0;
+        }
+      }
+    }
+
     pre {
       background: transparent !important;
       padding: 0 !important;

diff --git a/docs/assets/scss/_release_notes.scss b/docs/assets/scss/_release_notes.scss
diff --git a/docs/assets/scss/_styles_project.scss b/docs/assets/scss/_styles_project.scss
@@ -7,7 +7,7 @@
 @import "./_contribute_list.scss";
 @import "./_admonition.scss";
 @import "./_code_block.scss";
-@import "./_release_notes.scss";
+@import "./_yb_pills.scss";
 @import "./_yb_tabs.scss";
 @import "./_tables.scss";
 @import "./_search.scss";
@@ -71,8 +71,13 @@
         color: $yb-font-blue;
         line-height: 18px;
 
+        &.disabled {
+          color: #4e5f6d;
+        }
+
         &:hover {
-          color: #21313c;
+          text-decoration: underline;
+          text-underline-offset: 3px;
         }
       }
 
@@ -309,6 +314,10 @@
         position: relative;
         z-index: 2;
 
+        code {
+          overflow: hidden;
+        }
+
         @media only screen and (min-width: 768px) and (max-width: 1024px) {
           max-height: 84px;
         }

diff --git a/docs/assets/scss/_yb_bullets-and-number-list.scss b/docs/assets/scss/_yb_bullets-and-number-list.scss
@@ -4,7 +4,7 @@
     line-height: 24px;
 
     & + p {
-      margin: 24px 0 0 0;
+      margin: 12px 0 0 0;
     }
   }
 }
@@ -68,6 +68,12 @@
             }
           }
         }
+
+        @for $i from 1 through 100 {
+          &[start="#{$i}"] {
+            counter-reset: lis $i;
+          }
+        }
       }
     }
   }

diff --git a/docs/assets/scss/_yb_container.scss b/docs/assets/scss/_yb_container.scss
@@ -39,6 +39,10 @@
       @media (max-width: 1380px) {
         width: 95%;
       }
+
+      @media (max-width: 767px) {
+        width: 100%;
+      }
     }
   }
 

diff --git a/docs/assets/scss/_yb_headings.scss b/docs/assets/scss/_yb_headings.scss
@@ -15,7 +15,8 @@
       justify-content: center;
       align-items: center;
       position: relative;
-      top: -10px;
+      top: -2px;
+      vertical-align: middle;
       padding: 3px 7px;
 
       &:hover,

diff --git a/docs/assets/scss/_yb_pills.scss b/docs/assets/scss/_yb_pills.scss
@@ -0,0 +1,113 @@
+
+ul.nav.yb-pills {
+  display: flex;
+  gap: 16px;
+  margin: 40px 0;
+
+  li {
+    background: #fff;
+    border: 1px solid #d7dee4;
+    box-shadow: 0 0 0 1px transparent;
+    border-radius: 8px;
+    width: 350px;
+    max-width: calc(33.3% - 11px);
+    display: flex;
+    align-items: center;
+    padding: 0;
+    margin: 0;
+    height: 56px;
+    position: relative;
+
+    @media (max-width: 991px) {
+      max-width: calc(50% - 10px);
+    }
+
+    @media (max-width: 600px) {
+      max-width: calc(100%);
+      margin: 0 auto;
+    }
+
+    &.active,
+    &:hover {
+      background: #f2f6ff;
+      cursor: pointer;
+      box-shadow: 0 0 0 1px #cbdbff;
+      border: 1px solid #cbdbff;
+      border-radius: 8px;
+    }
+
+    a {
+      width: 100%;
+      background: transparent;
+      text-decoration: none !important;
+      align-items: center;
+      position: static !important;
+      font-weight: 400;
+      font-size: 13px;
+      line-height: 24px;
+      color: #25323d;
+      padding: 0 12px;
+      overflow: hidden;
+      display: inline-block;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      &::before {
+        content: "";
+        position: absolute;
+        z-index: -1;
+        border-radius: 8px;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        right: 0;
+      }
+
+      &.orange {
+        i {
+          color: #f75821;
+        }
+      }
+
+      img,
+      i {
+        font-size: 24px;
+        margin: 0 12px 0 0;
+        align-items: center;
+        height: 24px;
+        width: 24px;
+        vertical-align: middle;
+        display: inline-block;
+      }
+    }
+
+    .tooltip {
+      opacity: 0;
+      width: 0;
+    }
+
+    &:hover {
+      .tooltip {
+        display: block;
+        background: #fff;
+        border: 1px solid #e9edf0;
+        box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
+        border-radius: 8px;
+        opacity: 1;
+        top: 0;
+        font-weight: 400;
+        font-size: 11.5px;
+        line-height: 16px;
+        color: #4e5f6d;
+        padding: 10px;
+        left: 0;
+        margin-top: -4px;
+        transform: translate(72px, 110%);
+        white-space: nowrap;
+        width: auto;
+        transition: opacity 500ms linear;
+      }
+    }
+  }
+}
diff --git a/docs/assets/scss/_yb_tabs.scss b/docs/assets/scss/_yb_tabs.scss
@@ -9,6 +9,7 @@
         background: #fff;
         display: flex;
         align-items: center;
+        position: static;
 
         i {
           font-size: 24px;
@@ -20,12 +21,15 @@
   }
 }
 
+// for jquery inline tabs
 .td-content {
-  .nav-tabs {
+  .nav-tabs:not(.nav-tabs-yb) {
     margin-bottom: 16px;
     border: 0;
 
     > li {
+      margin-bottom: 0;
+
       .nav-link {
         font-weight: 400;
         font-size: 13px;
@@ -37,6 +41,7 @@
         &.active {
           color: $yb-font-dark;
           background: #e9eef2;
+          border-radius: 8px;
         }
       }
     }
@@ -56,20 +61,25 @@
   max-width: 100%;
   border: 0;
 
+  .highlight {
+    margin: 20px 0;
+  }
+
   pre {
     border: none;
   }
 }
 
-ul.nav.nav-tabs-alt.nav-tabs-yb {
-  margin: 20px 0 6px;
+ul.nav.nav-tabs-yb:not(.yb-pills) {
+  border: none;
+  margin: 20px 0 29px;
   position: relative;
   padding: 0 8px 6px;
   gap: 0;
   display: block;
   white-space: nowrap;
   width: calc(100%);
-  overflow: auto;
+  overflow: scroll;
   overflow-y: hidden;
   scrollbar-width: thin;
 
@@ -154,6 +164,7 @@ ul.nav.nav-tabs-alt.nav-tabs-yb {
         border-radius: 0;
         width: 24px;
         height: 24px;
+        line-height: 24px;
         display: inline-block;
         text-align: center;
       }
@@ -172,7 +183,7 @@ ul.nav.nav-tabs-alt.nav-tabs-yb {
   }
 }
 
-ul.nav.nav-tabs-alt.nav-tabs-yb ~ .nav-tabs-yb {
+ul.nav.nav-tabs-yb:not(.yb-pills) ~ .nav-tabs-yb:not(.yb-pills) {
   li {
     font-size: 13px;
     line-height: 16px;
@@ -189,10 +200,15 @@ ul.nav.nav-tabs-alt.nav-tabs-yb ~ .nav-tabs-yb {
         width: 16px;
         height: 16px;
         font-size: 16px;
+        line-height: 16px;
       }
 
       i {
-        margin: 0 13px 1px 0;
+        margin: 0 13px 0 0;
+
+        &.icon-postgres {
+          margin: 0 13px -4px 0;
+        }
       }
     }
   }