New Style Guide UI Fixes

Author: rakeshAlgo

preview-src/index.adoc

@@ -57,6 +57,9 @@ Installation will vary based on your operation system.
 <div class="ulist tabs">
 <ul>
 <li>
+<p><a id="tabset1_demo"></a> Code Block</p>
+</li>
+<li>
 <p><a id="tabset1_ubuntu"></a>Ubuntu</p>
 </li>
 <li>
@@ -68,7 +71,28 @@ Installation will vary based on your operation system.
 </ul>
 </div>
 <div class="content">
-<div class="tab-pane is-active" aria-labelledby="tabset1_ubuntu">
+<div class="tab-pane is-active" aria-labelledby="tabset1_demo">
+<div class="paragraph">
+++++
+[source,json]
+----
+{
+   "_id": "_design/myddoc",
+   "views": {
+      "view1": {
+          "map": "function(doc, meta) { if (doc.value) { emit(doc.value, meta.id);} }"
+      }
+   },
+   "options": {
+       "updateMinChanges": 1000,
+       "replicaUpdateMinChanges": 20000
+   }
+}
+----
+++++
+</div>
+</div>
+<div class="tab-pane" aria-labelledby="tabset1_ubuntu">
 <div class="paragraph">
 <p>Content for Ubuntu tab.</p>
 </div>
@@ -192,7 +216,7 @@ This section does not have any edition or status labels at the start.
 
 * This is the first item in a list.
 
-* [.edition]#{community}# This is the second item in a list.
+* [.community]#{community}# This is the second item in a list.
 This item is only applicable to community edition.
 
 * This is the third item in the list.

src/css/base.css

@@ -26,6 +26,7 @@ a {
   color: var(--color-link);
   outline: none;
   text-decoration: none;
+  font-family: "Open Sans", sans-serif;
 }
 
 a:focus,
@@ -57,7 +58,9 @@ button::-moz-focus-inner {
 code,
 kbd,
 pre {
-  font-family: "Roboto Mono", monospace;
+  /* font-family: "Roboto Mono", monospace; */
+  font-family: "Source Sans Pro", sans-serif;
+
 }
 
 code {
@@ -91,6 +94,101 @@ small {
   margin: 0 auto;
 } */
 
+
+/* checkbox css  */
+
+/* Base for label styling */
+
+ [type="checkbox"]:not(:checked),
+ [type="checkbox"]:checked {
+  position: absolute;
+  left: -9999px;
+}
+
+ [type="checkbox"]:not(:checked) + label,
+ [type="checkbox"]:checked + label {
+  position: relative;
+  padding-left: 2rem;
+  cursor: pointer;
+  display: inline-block;
+}
+
+/* checkbox aspect */
+ [type="checkbox"]:not(:checked) + label::before,
+ [type="checkbox"]:checked + label::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 25px;
+  height: 25px;
+  border: 1px solid var(--checkbox-border-color);
+  background: #F9F9F9;
+  border-radius: 3px;
+  display: inline-block;
+}
+/* checked mark aspect */
+ [type="checkbox"]:not(:checked) + label::after,
+ [type="checkbox"]:checked + label::after {
+  content: "\2713\0020";
+  position: absolute;
+  top: 0;
+  left: 0;
+  font-size: 0.875rem;
+  line-height: 0.8;
+  color: var(--color-brand-white);
+  transition: all 0.2s;
+  width: 25px;
+  height: 25px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--color-brand-blue-secondary);
+  border-radius: 3px;
+}
+/* checked mark aspect changes */
+ [type="checkbox"]:not(:checked) + label::after {
+  opacity: 0;
+  transform: scale(0);
+}
+
+ [type="checkbox"]:checked + label::after,
+ .active[type="checkbox"] + label::after {
+  opacity: 1;
+  transform: scale(1);
+}
+/* disabled checkbox */
+ [type="checkbox"]:disabled:not(:checked) + label::before,
+ [type="checkbox"]:disabled:checked + label::before {
+  box-shadow: none;
+  border-color: #bbb;
+  background-color: #ddd;
+}
+
+ [type="checkbox"]:disabled:checked + label::after {
+  color: #999;
+}
+
+ [type="checkbox"]:disabled + label {
+  color: #aaa;
+}
+
+ label:hover::before {
+  border: 2px solid var(--color-brand-blue);
+  outline: none;
+}
+
+ label,
+ label:focus,
+ label:active,
+ label::before,
+ label::after {
+  outline: none;
+  outline-width: 0;
+}
+
+
+/* Responsive css */
 @media screen and (min-width: 1024px) {
   .container-fluid {
     max-width: var(--width-container-fluid);

src/css/clipboard.css

@@ -1,12 +1,18 @@
 .copy-code-button {
   position: absolute;
   background: url(../img/copy.png) no-repeat center right/contain;
-  width: 20px;
-  height: 10px;
+  width: 24px;
+  height: 14px;
   right: 0.5rem;
-  top: 0.375rem;
+  top: 8px;
   display: none;
   cursor: pointer;
+  font-family: "Source Sans Pro", sans-serif;
+  color: var(--color-brand-gray4);
+}
+
+a.copy-code-button:focus, a.copy-code-button:hover{
+  color: var(--color-brand-gray4);
 }
 
 .doc .listingblock:hover .copy-code-button {
@@ -16,34 +22,35 @@
 .copy-code-button:hover::after {
   content: attr(data-title);
   color: var("--color-brand-gray4");
-  font-size: 0.7em;
+  font-size: 14px;
   font-weight: var(--weight-light);
-  letter-spacing: 1px;
   line-height: 1;
   text-transform: capitalize;
   position: absolute;
-  bottom: -30px;
+  bottom: -53px;
   right: -100%;
   left: -100%;
   margin: auto;
   padding: 5px;
   text-align: center;
-  box-shadow: inset 0 0 1px #bec0c1;
+  box-shadow: 0px 3px 6px #0000001A;
   background: var(--color-brand-white);
-  border: 1px solid var(--color-brand-gray6);
+  border: 1px solid var(--color-brand-gray7);
   box-sizing: border-box;
   border-radius: 3px;
+  /* min-width: 90px; */
+  font-family: "Source Sans Pro", sans-serif;
 }
 
 .copy-code-button:hover::before {
   width: 0;
   height: 0;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
   border-bottom: 10px solid var(--color-brand-white);
   position: absolute;
   content: "";
   box-shadow: inset 0 0 1px #bec0c1;
-  bottom: -10px;
+  bottom: -27px;
   right: 0;
 }