[camel-website] branch master updated: chore: customized scrollbar for table and code snippets

[zr...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

zregvart pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/camel-website.git


The following commit(s) were added to refs/heads/master by this push:
     new 1680529  chore: customized scrollbar for table and code snippets
1680529 is described below

commit 1680529d476a10ebf1af96564f602eb62c2e55d7
Author: Aemie Jariwala <44...@users.noreply.github.com>
AuthorDate: Thu Jul 2 14:16:09 2020 +0530

    chore: customized scrollbar for table and code snippets
---
 antora-ui-camel/src/css/doc.css  | 38 ++++++++++++++++++++++++++++++++++++++
 antora-ui-camel/src/css/nav.css  |  6 +++---
 antora-ui-camel/src/css/vars.css |  2 ++
 3 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/antora-ui-camel/src/css/doc.css b/antora-ui-camel/src/css/doc.css
index 522cfc0..912c080 100644
--- a/antora-ui-camel/src/css/doc.css
+++ b/antora-ui-camel/src/css/doc.css
@@ -111,6 +111,25 @@
   overflow-x: auto;
 }
 
+.doc .table-wrapper::-webkit-scrollbar {
+  height: var(--scrollbar-thickness);
+}
+
+.doc .table-wrapper::-webkit-scrollbar-track {
+  background: var(--scrollbar-track-color);
+  border-radius: var(--scrollbar-radius);
+}
+
+.doc .table-wrapper::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb-color);
+  border-radius: var(--scrollbar-radius);
+}
+
+.doc .table-wrapper::-webkit-scrollbar-thumb:hover,
+.doc .table-wrapper::-webkit-scrollbar-thumb:active {
+  background: var(--scrollbar-thumb-active-color);
+}
+
 .doc .table-wrapper table {
   width: 100%;
 }
@@ -532,6 +551,25 @@
   padding: 0.75rem;
 }
 
+.doc pre.highlight code::-webkit-scrollbar {
+  height: var(--scrollbar-thickness);
+}
+
+.doc pre.highlight code::-webkit-scrollbar-track {
+  background: var(--scrollbar-track-color);
+  border-radius: var(--scrollbar-radius);
+}
+
+.doc pre.highlight code::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb-color);
+  border-radius: var(--scrollbar-radius);
+}
+
+.doc pre.highlight code::-webkit-scrollbar-thumb:hover,
+.doc pre.highlight code::-webkit-scrollbar-thumb:active {
+  background: var(--scrollbar-thumb-active-color);
+}
+
 /* NOTE assume pre.highlight contains code[data-lang] */
 .doc pre.highlight {
   position: relative;
diff --git a/antora-ui-camel/src/css/nav.css b/antora-ui-camel/src/css/nav.css
index bb4d4ff..1440119 100644
--- a/antora-ui-camel/src/css/nav.css
+++ b/antora-ui-camel/src/css/nav.css
@@ -119,17 +119,17 @@ html.is-clipped--nav {
 }
 
 .nav-menu::-webkit-scrollbar {
-  width: 0.42rem;
+  width: var(--scrollbar-thickness);
 }
 
 .nav-menu::-webkit-scrollbar-track {
   background: var(--scrollbar-track-color);
-  border-radius: 3.125rem;
+  border-radius: var(--scrollbar-radius);
 }
 
 .nav-menu::-webkit-scrollbar-thumb {
   background: var(--scrollbar-thumb-color);
-  border-radius: 3.125rem;
+  border-radius: var(--scrollbar-radius);
 }
 
 .nav-menu::-webkit-scrollbar-thumb:hover,
diff --git a/antora-ui-camel/src/css/vars.css b/antora-ui-camel/src/css/vars.css
index cc8adfb..838a524 100644
--- a/antora-ui-camel/src/css/vars.css
+++ b/antora-ui-camel/src/css/vars.css
@@ -41,6 +41,8 @@
   --scrollbar-track-color: var(--color-gray-10);
   --scrollbar-thumb-color: var(--color-gray-30);
   --scrollbar-thumb-active-color: var(--color-gray-50);
+  --scrollbar-thickness: 0.425em; /* 6.8px */
+  --scrollbar-radius: 3.125em; /* 50px */
   /* navbar */
   --navbar-background: var(--color-white);
   --navbar-font-color: var(--color-camel-orange);