Merge pull request #614 from hlxsites/612-menu-explore-all-button-color

Menu 'Explore All' button should be btn btn-info
hlxsites · Dec 22, 2023 · d711b90 · d711b90
2 parents 77754c4 + 7313fe8
commit d711b90
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 1 deletion.
diff --git a/blocks/header/header.js b/blocks/header/header.js
@@ -642,7 +642,7 @@ function buildFlyoutMenus(headerBlock) {
             { class: 'inline-flex justify-between items-center mb-2' },
             span({ class: 'text-left text-xl font-bold py-2 pl-1 text-gray-900 w-1/2' }, menuTitle),
             menuItemEl.querySelector(':scope > p > a')
-              ? a({ class: 'btn btn-info', href: menuItemEl.querySelector(':scope > p > a').href }, 'Explore All') : '',
+              ? a({ class: 'btn btn-info rounded-full', href: menuItemEl.querySelector(':scope > p > a').href }, 'Explore All') : '',
           ),
           linkList,
         ),

diff --git a/styles/styles.css b/styles/styles.css
@@ -2169,6 +2169,22 @@ main .section.carousel-container {
     color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.btn-info {
+    --tw-border-opacity: 1;
+    border-color: rgb(59 199 229 / var(--tw-border-opacity));
+    --tw-bg-opacity: 1;
+    background-color: rgb(59 199 229 / var(--tw-bg-opacity));
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.btn-info:hover {
+    --tw-border-opacity: 1;
+    border-color: rgb(1 139 157 / var(--tw-border-opacity));
+    --tw-bg-opacity: 1;
+    background-color: rgb(1 139 157 / var(--tw-bg-opacity));
+}
+
 .sticky-footer {
     position: fixed;
     bottom: 0.75rem;

diff --git a/styles/tailwind.css b/styles/tailwind.css
@@ -166,6 +166,10 @@
     @apply text-danaherpurple-500 bg-white border-2 border-danaherpurple-500 hover:text-white hover:bg-danaherpurple-500;
   }
 
+  .btn-info {
+    @apply text-white bg-lightblue-500 hover:bg-lightblue-600 border-lightblue-500 hover:border-lightblue-600;
+  }
+
   .form-input,
   .form-select,
   .form-date {