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

UI changes according to new style guide.

Author: amarantha-k

preview-src/index.adoc

@@ -1,7 +1,6 @@
 = Monitoring Statistics
 :doctype: book
 :page-edition: enterprise
-:page-status: beta
 // The following should be global document attributes
 :url-edition: https://www.couchbase.com/products/editions
 :enterprise: {url-edition}[ENTERPRISE EDITION]
@@ -147,7 +146,7 @@ You could also use it to mark new features, but _only within the version in whic
 == Labels for a Section
 
 [.labels]
-[.edition]##{enterprise}##[.status]##{developer-preview}##
+[.edition]##{enterprise}##
 
 To create an edition label, use a span with the role `edition`.
 To create a status label, use a span with the role `status`.
@@ -246,7 +245,7 @@ return thisAirline; // <2>
 
 [#vbucket-stats]
 == Monitoring `vBucket` Resources
-
+[.table-ui]
 [cols="1,3"]
 |===
 | Statistic | Description

src/css/base.css

@@ -18,19 +18,25 @@ body {
   color: var(--color-text);
   font-family: "Source Sans Pro", sans-serif;
   /* font-family: "Gotham", sans-serif; */
-  line-height: 1.5;
+  line-height: var(--line-height-body);
   margin: 0;
 }
 
 a {
   color: var(--color-link);
   outline: none;
   text-decoration: none;
+  font-family: "Open Sans", sans-serif;
 }
 
 a:focus,
 a:hover {
   text-decoration: underline;
+  color: var(--color-link-hover);
+}
+
+a:active {
+  color: var(--color-link-active);
 }
 
 button,
@@ -53,12 +59,13 @@ 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 {
   color: var(--color-brand-black);
-  font-size: 0.9375em;
+  font-size: var(--font-base);
   word-spacing: -0.125em;
 }
 
@@ -68,7 +75,7 @@ html code {
 
 b,
 strong {
-  font-weight: var(--weight-bold);
+  font-weight: var(--weight-semibold);
 }
 
 small {
@@ -87,6 +94,99 @@ 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,20 @@
 .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);
+  z-index: 1;
+}
+
+a.copy-code-button:focus,
+a.copy-code-button:hover {
+  color: var(--color-brand-gray4);
 }
 
 .doc .listingblock:hover .copy-code-button {
@@ -16,34 +24,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: 0 3px 6px rgba(0, 0, 0, 0.06);
   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;
 }

src/css/contributor.css

@@ -2,8 +2,9 @@
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  margin: 15px 0;
+  margin: 15px 0 0;
   visibility: hidden;
+  display: none;
 }
 
 .contributor-list-box.show {