Merge branch 'master' into fix-spacing-issues

Author: rakeshAlgo

README.adoc

@@ -1,6 +1,6 @@
 = Couchbase Documentation UI
 // Variables:
-:current-release: prod-62
+:current-release: prod-67
 // Settings:
 :!example-caption:
 :experimental:

netlify.toml

@@ -7,7 +7,8 @@ NODE_VERSION = "10"
 ALGOLIA_APP_ID = "NI1G57N08Q"
 ALGOLIA_API_KEY = "d3eff3e8bcc0860b8ceae87360a47d54"
 ALGOLIA_INDEX_NAME = "prod_docs_couchbase"
-OPTANON_SCRIPT_URL = "https://cdn.cookielaw.org/consent/288c1333-faac-4514-a8bf-a30b3db0ee32.js"
+OPTANON_SCRIPT_URL = "https://cdn.cookielaw.org/scripttemplates/otSDKStub.js"
+OPTANON_SCRIPT_DATA_DOMAIN_SCRIPT = "748511ff-10bf-44bf-88b8-36382e5b5fd9"
 
 [context.branch-deploy]
 command = "node_modules/.bin/gulp preview:build && node_modules/.bin/gulp --series build bundle:pack"

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/body.css

@@ -33,7 +33,8 @@ aside.toc.sidebar {
   width: var(--width-toc);
 }
 
-@media screen and (min-width: 769px) {
+/* Make layout in full screen */
+@media screen and (min-width: 993px) {
   div.body {
     min-height: var(--height-min-body);
   }

src/css/clipboard.css

@@ -146,11 +146,11 @@ a.copy-code-button:hover {
   }
 }
 
-code.language-console.hljs.shell,
+/* code.language-console.hljs.shell,
 pre code.language-bash.hljs {
   white-space: nowrap;
   overflow-x: auto;
-}
+} */
 
 code::-webkit-scrollbar {
   width: 0.25rem;