From f0e63330ce2277faa60cd342bd8152d24277c833 Mon Sep 17 00:00:00 2001
From: TreetopFlyer <seth111@gmail.com>
Date: Wed, 1 Sep 2021 16:25:37 -0400
Subject: [PATCH] frame interactive states

---
 pad.html | 29 ++++++++++++++++++-----------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/pad.html b/pad.html
index 4609be8..00f9991 100644
--- a/pad.html
+++ b/pad.html
@@ -123,8 +123,9 @@
     box-sizing: border-box;
     width:33.3%;
     text-align:center;
+    cursor:pointer;
 }
-.frame__button[data-frame-active='false']:hover::before
+.frame__button:hover::before
 {
     content: " ";
     display: block;
@@ -132,21 +133,32 @@
     height: 7px;
     background: black;
     position: absolute;
-    top: -27px;
+    top: -12px;
     left: 50%;
     transform: translateX(-5px) rotate(45deg);
+    transition: top 0.4s, bottom 0.4s;
 }
-.frame__button[data-frame-index="0"]:hover::before, .frame__button[data-frame-index="1"]:hover::before, .frame__button[data-frame-index="2"]:hover::before
+.frame__button--upper:hover::before
 {
     top:auto;
-    bottom:-23px;
+    bottom:-9px;
+}
+.frame__button[data-frame-active='true']:hover::before
+{
+    bottom:auto;
+    top: -30px;
+}
+.frame__button--upper[data-frame-active='true']:hover::before
+{
+    bottom: -26px;
+    top:auto;
 }
 </style>
 <div class="frame">
     <div class="frame__image">
         <img style="display:block; width:100%; height:auto;" src="https://via.placeholder.com/1024x512.png"/>
     </div>
-    <div class="frame__button">Cover</div><div class="frame__button">Back </div><div class="frame__button">Spine</div>
+    <div class="frame__button frame__button--upper">Cover</div><div class="frame__button frame__button--upper">Back </div><div class="frame__button frame__button--upper">Spine</div>
 
     <div class="frame__bar"><span></span></div>
     <div class="frame__bracket"></div>
@@ -161,8 +173,6 @@
         var bar = inFrame.querySelector(".frame__bar");
         var active = false;
 
-
-
         function activate(inButton)
         {
             var index = parseInt(inButton.getAttribute("data-frame-index"));
@@ -170,16 +180,13 @@
             var classY = index > 2 ? "frame__bar--down" : "frame__bar--up";
 
             bar.setAttribute("class", "frame__bar " + classX + " " + classY);
+
             if(active)
             {
                 active.setAttribute("data-frame-active", "false");
             }
             active = inButton;
             inButton.setAttribute("data-frame-active", "true");
-        }
-        function hover(inButton)
-        {
-            
         }
         for(var i=0; i<buttons.length; i++)
         {