From ef88386825b91d4ca910d28331f7000c08728a27 Mon Sep 17 00:00:00 2001
From: Jordan Scales <scalesjordan@gmail.com>
Date: Sat, 18 Apr 2020 11:05:27 -0400
Subject: [PATCH] scrollbars

---
 ...utton-active.svg => button-down-active.svg |  0
 dropdown-button.svg => button-down.svg        |  0
 button-left.svg                               |  8 ++++
 button-right.svg                              |  8 ++++
 button-up.svg                                 |  8 ++++
 docs/index.html                               |  9 +++-
 scrollbar-background.svg                      |  4 ++
 style.css                                     | 47 ++++++++++++++++++-
 8 files changed, 81 insertions(+), 3 deletions(-)
 rename dropdown-button-active.svg => button-down-active.svg (100%)
 rename dropdown-button.svg => button-down.svg (100%)
 create mode 100644 button-left.svg
 create mode 100644 button-right.svg
 create mode 100644 button-up.svg
 create mode 100644 scrollbar-background.svg

diff --git a/dropdown-button-active.svg b/button-down-active.svg
similarity index 100%
rename from dropdown-button-active.svg
rename to button-down-active.svg
diff --git a/dropdown-button.svg b/button-down.svg
similarity index 100%
rename from dropdown-button.svg
rename to button-down.svg
diff --git a/button-left.svg b/button-left.svg
new file mode 100644
index 0000000..f31b886
--- /dev/null
+++ b/button-left.svg
@@ -0,0 +1,8 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 0H0V1V16H1V1H15V0Z" fill="#DFDFDF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 1H1V15H2V2H14V1H2Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 17H15H0V16H15V0H16V17Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 1H14V15H1V16H14H15V1Z" fill="#808080"/>
+<rect x="2" y="2" width="12" height="13" fill="#C0C0C0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 4H8V5H7V6H6V7H5V8H6V9H7V10H8V11H9V4Z" fill="black"/>
+</svg>
diff --git a/button-right.svg b/button-right.svg
new file mode 100644
index 0000000..ddab662
--- /dev/null
+++ b/button-right.svg
@@ -0,0 +1,8 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 0H0V1V16H1V1H15V0Z" fill="#DFDFDF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 1H1V15H2V2H14V1H2Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 17H15H0V16H15V0H16V17Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 1H14V15H1V16H14H15V1Z" fill="#808080"/>
+<rect x="2" y="2" width="12" height="13" fill="#C0C0C0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 4H6V11H7V10H8V9H9V8H10V7H9V6H8V5H7V4Z" fill="black"/>
+</svg>
diff --git a/button-up.svg b/button-up.svg
new file mode 100644
index 0000000..91f8d4f
--- /dev/null
+++ b/button-up.svg
@@ -0,0 +1,8 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 0H0V1V16H1V1H15V0Z" fill="#DFDFDF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 1H1V15H2V2H14V1H2Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 17H15H0V16H15V0H16V17Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 1H14V15H1V16H14H15V1Z" fill="#808080"/>
+<rect x="2" y="2" width="12" height="13" fill="#C0C0C0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 6H7V7H6V8H5V9H4V10H11V9H10V8H9V7H8V6Z" fill="black"/>
+</svg>
diff --git a/docs/index.html b/docs/index.html
index 5bcc6ae..d7948a9 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -87,7 +87,14 @@
       </section>
 
       <section>
-
+        <!-- maybe want some sort of "panel" idk -->
+        <div id="panel">
+          <div style="height: 1200px">
+            <p>This is some text</p>
+            <p>if there's enough of it</p>
+            <p>it should scroll</p>
+          </div>
+        </div>
       </section>
 
       <section class="field-row align-right">
diff --git a/scrollbar-background.svg b/scrollbar-background.svg
new file mode 100644
index 0000000..3770071
--- /dev/null
+++ b/scrollbar-background.svg
@@ -0,0 +1,4 @@
+<svg width="2" height="2" viewBox="0 0 2 2" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 0H0V1H1V2H2V1H1V0Z" fill="#C0C0C0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 0H1V1H0V2H1V1H2V0Z" fill="white"/>
+</svg>
diff --git a/style.css b/style.css
index b192956..eda87ab 100644
--- a/style.css
+++ b/style.css
@@ -317,7 +317,7 @@ select {
   -webkit-appearance: none;
   -moz-appearance: none;
   position: relative;
-  background-image: url("./dropdown-button.svg");
+  background-image: url("./button-down.svg");
   background-position: top 2px right 2px;
   background-repeat: no-repeat;
 }
@@ -329,7 +329,7 @@ textarea:focus {
 }
 
 select:active {
-  background-image: url("./dropdown-button-active.svg");
+  background-image: url("./button-down-active.svg");
 }
 
 a {
@@ -339,3 +339,46 @@ a {
 a:focus {
   outline: 1px dotted var(--link-blue);
 }
+
+#panel {
+  width: 168px;
+  height: 120px;
+  overflow-y: scroll;
+}
+
+::-webkit-scrollbar {
+  width: 16px;
+}
+
+::-webkit-scrollbar-track {
+  background-image: url("./scrollbar-background.svg");
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--button-face);
+  box-shadow: var(--border-raised-outer), var(--border-raised-inner);
+}
+
+::-webkit-scrollbar-button:vertical:start {
+  height: 17px;
+  background-image: url("./button-up.svg");
+}
+::-webkit-scrollbar-button:vertical:end {
+  height: 17px;
+  background-image: url("./button-down.svg");
+}
+::-webkit-scrollbar-button:horizontal:start {
+  height: 17px;
+  background-image: url("./button-left.svg");
+}
+::-webkit-scrollbar-button:horizontal:end {
+  height: 17px;
+  background-image: url("./button-right.svg");
+}
+
+/*
+div::-webkit-scrollbar-thumb,
+div::-webkit-scrollbar-button {
+  box-shadow: var(--border-raised-outer), var(--border-raised-inner);
+}
+*/