Added some styling to the dropdown

This commit is contained in:
tsmitty11 2023-05-15 19:23:27 +02:00
parent 4dcee642fe
commit 1924ba34ee
2 changed files with 11 additions and 8 deletions

View file

@ -70,7 +70,7 @@
} }
.hbtn-light { .hbtn-light {
font-family: "pp-neue-machina"; font-family: "inter";
background: none !important; background: none !important;
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;

View file

@ -22,7 +22,7 @@
{{- partial "click-to-copy.html" . -}} {{- partial "click-to-copy.html" . -}}
<p class="no-installer grid-gray text-center small twoway-boiler"><span class="tea">tea</span> is a stand&#8208;alone binary. See <a class="install-link" href="https://docs.tea.xyz/getting-started/install-tea/without-installer">our docs</a> for more installation methods, including&nbsp;<span class="tea brew-install no-break pe-2">brew install</span>&nbsp;.</p> <p class="no-installer grid-gray text-center small twoway-boiler"><span class="tea">tea</span> is a stand&#8208;alone binary. See <a class="install-link" href="https://docs.tea.xyz/getting-started/install-tea/without-installer">our docs</a> for more installation methods, including&nbsp;<span class="tea brew-install no-break pe-2">brew install</span>&nbsp;.</p>
<div class="dropdown mx-auto;"> <div class="dropdown mx-auto;">
<button onclick="toggleDropdown()" class="dropbtn">Additional Install Options</button> <button onclick="toggleDropdown()" class="dropbtn hbtn-light hb-light-fill-right">Additional Install Options</button>
<div id="myDropdown" class="dropdown-content"> <div id="myDropdown" class="dropdown-content">
<a href="#">fancy one-liner</a> <a href="#">fancy one-liner</a>
<a href="#">hombrew</a> <a href="#">hombrew</a>
@ -49,30 +49,33 @@
border: none; border: none;
cursor: pointer; cursor: pointer;
z-index: 2; /* Added z-index to keep the button above the dropdown */ z-index: 2; /* Added z-index to keep the button above the dropdown */
min-width: 240px; min-width: 300px;
margin-bottom: 5px; margin-bottom: 5px;
height: 45px;
border: 1px solid #e1e1e1;
} }
.dropdown-content { .dropdown-content {
display: none; display: none;
position: absolute; position: absolute;
background-color: #f9f9f9; background-color: #1a1a1a;
min-width: 160px; min-width: 300px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1; z-index: 1;
top: 100%; /* Added top property to position the dropdown below the button */ top: 100%; /* Added top property to position the dropdown below the button */
min-width: 240px; border: 1px solid #949494;
} }
.dropdown-content a { .dropdown-content a {
color: black; color: #fff;
padding: 12px 16px; padding: 12px 16px;
text-decoration: none; text-decoration: none;
display: block; display: block;
} }
.dropdown-content a:hover { .dropdown-content a:hover {
background-color: #f1f1f1; background-color: #00ffd0;
color: #1a1a1a;
} }
.show { .show {