Merge pull request #52 from couchbase/ui-spacing-fixes

fix vertical spaces and align issues

Author: amarantha-k

src/css/base.css

@@ -198,11 +198,217 @@ label::after {
   outline-width: 0;
 }
 
+/* Common margin padding css class */
+/* margin-top */
+.mt-0 {
+  margin-top: 0 !important;
+}
+
+.mt-1 {
+  margin-top: var(--base-extra-small-space) !important;  /* 8px */
+}
+
+.mt-2 {
+  margin-top: var(--base-small-space) !important;        /* 12px */
+}
+
+.mt-3 {
+  margin-top: var(--base-space) !important;             /* 16px */
+}
+
+.mt-4 {
+  margin-top: var(--base-medium-space) !important;    /* 24px */
+}
+
+.mt-5 {
+  margin-top: var(--base-large-space) !important;     /* 32px */
+}
+
+/* margin-bottom */
+.mb-0 {
+  margin-bottom: 0 !important;
+}
+
+.mb-1 {
+  margin-bottom: var(--base-extra-small-space) !important;   /* 8px */
+}
+
+.mb-2 {
+  margin-bottom: var(--base-small-space) !important;     /* 12px */
+}
+
+.mb-3 {
+  margin-bottom: var(--base-space) !important;         /* 16px */
+}
+
+.mb-4 {
+  margin-bottom: var(--base-medium-space) !important;   /* 24px */
+}
+
+.mb-5 {
+  margin-bottom: var(--base-large-space) !important;   /* 32px */
+}
+
 /* Responsive css */
-@media screen and (min-width: 1024px) {
+/* For tablet,ipad Portrait view mode 1024px screen */
+@media screen and (min-width: 740px) {
+  /* Spacing media query */
+  .mt-sm-0 {
+    margin-top: 0 !important;
+  }
+
+  .mt-sm-1 {
+    margin-top: var(--base-extra-small-space) !important;  /* 8px */
+  }
+
+  .mt-sm-2 {
+    margin-top: var(--base-small-space) !important;        /* 12px */
+  }
+
+  .mt-sm-3 {
+    margin-top: var(--base-space) !important;             /* 16px */
+  }
+
+  .mt-sm-4 {
+    margin-top: var(--base-medium-space) !important;    /* 24px */
+  }
+
+  .mt-sm-5 {
+    margin-top: var(--base-large-space) !important;     /* 32px */
+  }
+
+  /* margin-bottom */
+  .mb-sm-0 {
+    margin-bottom: 0 !important;
+  }
+
+  .mb-sm-1 {
+    margin-bottom: var(--base-extra-small-space) !important;   /* 8px */
+  }
+
+  .mb-sm-2 {
+    margin-bottom: var(--base-small-space) !important;     /* 12px */
+  }
+
+  .mb-sm-3 {
+    margin-bottom: var(--base-space) !important;         /* 16px */
+  }
+
+  .mb-sm-4 {
+    margin-bottom: var(--base-medium-space) !important;   /* 24px */
+  }
+
+  .mb-sm-5 {
+    margin-bottom: var(--base-large-space) !important;   /* 32px */
+  }
+}
+/* For tablet,ipad landscape mode 1024px screen */
+@media screen and (min-width: 993px) {
   .container-fluid {
     max-width: var(--width-container-fluid);
     padding: 0;
     margin: 0 auto;
   }
+
+  /* Spacing media query */
+  .mt-md-0 {
+    margin-top: 0 !important;
+  }
+
+  .mt-md-1 {
+    margin-top: var(--base-extra-small-space) !important;  /* 8px */
+  }
+
+  .mt-md-2 {
+    margin-top: var(--base-small-space) !important;        /* 12px */
+  }
+
+  .mt-md-3 {
+    margin-top: var(--base-space) !important;             /* 16px */
+  }
+
+  .mt-md-4 {
+    margin-top: var(--base-medium-space) !important;    /* 24px */
+  }
+
+  .mt-md-5 {
+    margin-top: var(--base-large-space) !important;     /* 32px */
+  }
+
+  /* margin-bottom */
+  .mb-md-0 {
+    margin-bottom: 0 !important;
+  }
+
+  .mb-md-1 {
+    margin-bottom: var(--base-extra-small-space) !important;   /* 8px */
+  }
+
+  .mb-md-2 {
+    margin-bottom: var(--base-small-space) !important;     /* 12px */
+  }
+
+  .mb-md-3 {
+    margin-bottom: var(--base-space) !important;         /* 16px */
+  }
+
+  .mb-md-4 {
+    margin-bottom: var(--base-medium-space) !important;   /* 24px */
+  }
+
+  .mb-md-5 {
+    margin-bottom: var(--base-large-space) !important;   /* 32px */
+  }
+}
+/* For large desktop to small desktop screen */
+@media screen and (min-width: 1200px) {
+  /* Spacing media query */
+  .mt-lg-0 {
+    margin-top: 0 !important;
+  }
+
+  .mt-lg-1 {
+    margin-top: var(--base-extra-small-space) !important;  /* 8px */
+  }
+
+  .mt-lg-2 {
+    margin-top: var(--base-small-space) !important;        /* 12px */
+  }
+
+  .mt-lg-3 {
+    margin-top: var(--base-space) !important;             /* 16px */
+  }
+
+  .mt-lg-4 {
+    margin-top: var(--base-medium-space) !important;    /* 24px */
+  }
+
+  .mt-lg-5 {
+    margin-top: var(--base-large-space) !important;     /* 32px */
+  }
+
+  /* margin-bottom */
+  .mb-lg-0 {
+    margin-bottom: 0 !important;
+  }
+
+  .mb-lg-1 {
+    margin-bottom: var(--base-extra-small-space) !important;   /* 8px */
+  }
+
+  .mb-lg-2 {
+    margin-bottom: var(--base-small-space) !important;     /* 12px */
+  }
+
+  .mb-lg-3 {
+    margin-bottom: var(--base-space) !important;         /* 16px */
+  }
+
+  .mb-lg-4 {
+    margin-bottom: var(--base-medium-space) !important;   /* 24px */
+  }
+
+  .mb-lg-5 {
+    margin-bottom: var(--base-large-space) !important;   /* 32px */
+  }
 }

src/css/doc.css

@@ -15,7 +15,7 @@
   font-weight: var(--weight-semibold);
   letter-spacing: -0.025rem;
   line-height: var(--line-height-heading);
-  margin: 1.5rem 0 1rem;
+  margin-bottom: 0;
 }
 
 .doc h1 {
@@ -45,8 +45,9 @@
 
 .doc h2 {
   font-size: var(--heading-h2);
-  max-width: fit-content;
+  /* max-width: fit-content; */
   width: 100%;
+  margin-top: var(--base-extra-large-space);
   /* NOTE used to restrict width of key line */
 }
 
@@ -61,14 +62,17 @@
 
 .doc h3 {
   font-size: var(--heading-h3);
+  margin-top: var(--base-extra-large-space);
 }
 
 .doc h4 {
   font-size: var(--heading-h4);
+  margin-top: var(--base-extra-large-space);
 }
 
 .doc h5 {
   font-size: var(--heading-h5);
+  margin-top: var(--base-extra-large-space);
 }
 
 .doc h1 > a.anchor,
@@ -126,10 +130,20 @@
   word-spacing: inherit;
 }
 
-.doc .paragraph,
+.doc .paragraph {
+  margin-top: var(--base-space);
+}
+
+.doc .paragraph + .paragraph {
+  margin-top: var(--base-medium-space);
+}
+
+.doc .admonitionblock {
+  margin-top: var(--base-large-space);
+}
+
 .doc .olist,
 .doc .ulist,
-.doc .admonitionblock,
 .doc .exampleblock,
 .doc .imageblock,
 .doc .listingblock,
@@ -138,7 +152,7 @@
 .doc .swagger-container,
 .doc .verseblock,
 .doc .videoblock {
-  margin-top: 1rem;
+  margin-top: var(--base-medium-space);
 }
 
 .doc .paragraph .title,
@@ -149,11 +163,11 @@
 .doc .literalblock .title,
 .doc .openblock .title,
 .doc caption {
-  font-size: 1rem;
+  font-size: var(--font-base);
   font-weight: var(--weight-semibold);
   /* letter-spacing: -0.025em; */
   line-height: 1.2;
-  margin-bottom: 0.75rem;
+  margin-bottom: var(--base-space);
   color: var(--color-brand-gray3);
 }
 
@@ -430,14 +444,22 @@ ul ul ul {
   width: auto;
 }
 
+.doc .quoteblock {
+  margin-top: var(--base-medium-space);
+}
+
 .doc .abstract blockquote {
   font-size: 0.9375rem;
-  margin: 1rem 0 1.5625rem 0;
+  margin: 0;
   font-weight: var(--weight-light);
   border-left: 2px solid var(--color-brand-gray5);
   padding-left: 1.125rem;
 }
 
+.doc .quoteblock + .paragraph {
+  margin-top: var(--base-extra-large-space);
+}
+
 .doc .abstract blockquote * {
   font-weight: inherit;
 }
@@ -599,32 +621,36 @@ table.tableblock pre code.language-bash.hljs {
 }
 
 .doc .dlist {
-  margin: 1.5rem 0;
+  margin: 1.5rem 0 0;
 }
 
 .doc .dlist dl {
   margin: 0;
 }
 
 .doc .dlist dt {
-  font-weight: var(--weight-medium);
+  font-weight: var(--weight-semibold);
 }
 
 .doc .dlist dd + dt {
   margin-top: 1.5rem;
 }
 
+.doc .dlist dt + dt {
+  margin-top: var(--base-extra-small-space);
+}
+
 .doc .dlist dd {
   margin-left: 1.5rem;
 }
 
 .doc .dlist dt + dd {
-  margin-top: 0.125rem;
+  margin-top: var(--base-small-space);
 }
 
-.doc .dlist dd > .openblock > .content > :first-child {
+/* .doc .dlist dd > .openblock > .content > :first-child {
   margin-top: 0;
-}
+} */
 
 .doc .sidebarblock > .content {
   border: 1px solid var(--color-border);
@@ -778,7 +804,7 @@ table.tableblock pre code.language-bash.hljs {
   padding: var(--base-space);
   border-radius: 8px;
   border: 1px solid var(--color-brand-gray8);
-  margin-top: var(--base-space);
+  margin-top: var(--base-extra-large-space);
 }
 
 .doc .tabs.ulist {

src/css/header.css

@@ -49,6 +49,7 @@
 .header-bottom-row {
   background: var(--color-brand-blue-secondary);
   display: none;
+  transition: all 0.3s;
 }
 
 .navbar-new-bottom .nav-item {
@@ -300,7 +301,7 @@
     color: var(--color-brand-blue);
   }
 
-  .navbar-new-bottom.is-active {
+  .header-bottom-row.is-active {
     display: block;
     position: absolute;
     width: 100%;