Merge pull request #64 from uklibraries/click-behavior

Click behavior, fixes #62
uklibraries · Nov 4, 2024 · 53d272a · 53d272a
2 parents 947582d + 8bb96f8
commit 53d272a
Show file tree

Hide file tree

Showing 3 changed files with 189 additions and 148 deletions.
diff --git a/css/global_header_footer.css b/css/global_header_footer.css
@@ -42,6 +42,10 @@
   margin: 0;
 }
 
+.ukl-link {
+  margin: 0;
+}
+
 .ukl-dropdown-content {
   list-style-type: none;
   margin: 0;
@@ -119,7 +123,6 @@
 
 .ukl-ext-clamp .ukl-global-header .ukl-slab.ukl-global-header__nav-bar {
   display: none;
-  padding: rr-gridbase(2);
 }
 
 .ukl-ext-clamp .ukl-global-header-layout > div {
@@ -193,7 +196,7 @@
 }
 
 .ukl-ext-clamp .ukl-universal-header.ukl-slab {
-  padding-left: 1.2em;
+  padding-left: 1.25em;
   padding-right: 1em;
 }
 
@@ -669,44 +672,39 @@ body {
   .ukl-nav-links {
     display: flex;
     flex-direction: column;
-    gap: 2rem;
     padding:2rem;
     margin-left: 20px;
   }
 
   #ukl-gethome {
+    display: flex;
+    justify-content: space-between;
     width: 100%;
   }
+
+  #ukl-gethome:first-child {
+   align-self: start; 
+  }
 
-  .ukl-dropdown {
-    /* border-width: 1px;
-    border-color: red;
-    border-style: solid; */
+  /* .ukl-dropdown {
     width: fit-content;
-  }
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+  } */
 
   .ukl-dropdown .ukl-dropdown-content {
     display: flex;
     flex-direction: column;
     position: relative;
     width: 100%;
-    /* filter: drop-shadow(10px 5px 5px #212121); */
   }
 
-  /* .ukl-dropdown:focus-within .ukl-dropdown-content {
-    outline: none;
-    position:inherit;
-    display:block;
-    visibility: visible;
-    opacity: 1;
-    transform: translateY(0px);
-    padding-top: 0px;
-  } */
-
   .ukl-ext-clamp .ukl-global-header-layout { 
     display: flex;
     flex-direction: column;
-    gap: 1.25rem;
+    justify-content: center;
+    align-items: baseline;
   } 
 
 }
@@ -733,10 +731,6 @@ body {
 }
 
 .ukl-menu-button-more {
-  display: block;
-  float: right;
-  justify-content:flex-end;
-  margin-left: auto;
   width: 7mm;
   height: 7mm;
   background-size: 100%;
@@ -756,12 +750,6 @@ body {
   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M8 8 L24 24 M8 24 L24 8'/%3E%3C/svg%3E");
 }
 
-@media screen and (min-width: 770px) and (max-width: 1190px) {
-  .ukl-ext-clamp .ukl-slab__wrapper {
-    padding-right: 15px;
-  }
-}
-
 /* was 769 */
 @media screen and (min-width: 1024px) {
     .ukl-menu-button {
@@ -864,17 +852,28 @@ body {
   opacity: 1;
 }
 
-.ukl-dropbtn.ukl-c {
+.ukl-dropbtn {
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: 0.5rem; 
+  gap: .5rem;
 }
 
 @media screen and (max-width: 1023px){
+  .ukl-global-header-layout {
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+  }
   .ukl-dropdown-content {
     width: 50%;
   }
+
+  .ukl-nav-links, .ukl-utility-links {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
 }
 
 /* dd container */
@@ -902,3 +901,8 @@ div#ukl-gethome>a>img {
   height: auto;
   object-fit:cover;
 }
+
+/* Hide empty menu elements */
+.ukl-link:has(.ukl-getlink:empty), #ukl-gethdrw:empty {
+  display: none;
+}