Styling for search link on menu

This commit is contained in:
dave onion 2025-12-19 10:05:36 -05:00
parent 9fd82bf7f8
commit 415026b317
3 changed files with 87 additions and 16 deletions

View file

@ -9844,7 +9844,7 @@ a#main-content {
font-weight: 400;
font-style: normal;
}
.agc {
.agc, a.navbar-item[href="/search"] {
display: inline-block;
font-family: Agaricons;
speak: none;
@ -9878,7 +9878,7 @@ a#main-content {
content: "\e004";
}
.agc-search::before {
.agc-search::before, a.navbar-item[href="/search"]::before {
content: "\e005";
}
@ -10283,7 +10283,6 @@ a.navbar-link.is-active {
a.navbar-item.is-active::before,
a.navbar-link.is-active::before {
display: block;
content: "" !important;
position: absolute;
left: 1em;
right: 1em;
@ -10296,11 +10295,6 @@ a.navbar-link.is-active {
color: #FFFFFF;
background-color: #0D1E34;
}
a.navbar-item.is-active:hover::before, a.navbar-item.is-active:focus::before,
a.navbar-link.is-active:hover::before,
a.navbar-link.is-active:focus::before {
display: none;
}
}
@media screen and (min-width: 769px), print {
@ -10330,10 +10324,48 @@ a.navbar-link:focus,
background-color: #0D1E34;
}
.navbar-link .navbar-item.is-active::before, .navbar-item .navbar-item.is-active::before {
.navbar-link .navbar-item:not([href="/search"]).is-active::before, .navbar-item .navbar-item:not([href="/search"]).is-active::before {
display: none;
}
a.navbar-item[href="/search"] {
font-size: 0.001rem;
color: transparent;
display: flex;
}
a.navbar-item[href="/search"]::before {
color: #FFFFFF;
font-size: 1.25rem;
}
a.navbar-item[href="/search"]:hover, a.navbar-item[href="/search"]:focus {
color: transparent !important;
background-color: #FFFFFF;
font-size: 0.0001;
}
a.navbar-item[href="/search"]:hover::before, a.navbar-item[href="/search"]:focus::before {
color: #0D1E34;
}
a.navbar-item[href="/search"].is-active {
display: flex;
}
@media screen and (min-width: 769px), print {
a.navbar-item[href="/search"].is-active {
color: transparent;
}
}
a.navbar-item[href="/search"].is-active:hover {
display: flex;
color: #FFFFFF;
background-color: transparent;
}
a.navbar-item[href="/search"].is-active:hover::before {
color: #FFFFFF;
}
a.navbar-item[href="/search"].is-active::before {
border-top: 0;
position: unset;
}
.navbar .ion-search {
font-size: 1.25em;
}
@ -11224,7 +11256,7 @@ ul.slick-dots li button::before {
margin-top: -0.325em;
font-size: 4.5em;
}
.footer .footer-logo .icon .agc {
.footer .footer-logo .icon .agc, .footer .footer-logo .icon a.navbar-item[href="/search"] {
display: block;
}

File diff suppressed because one or more lines are too long

View file

@ -213,7 +213,7 @@ a.navbar-link.is-active {
color: currentColor;
&::before {
display: block;
content: '' !important;
// content: '' !important;
position: absolute;
left: 1em;
right: 1em;
@ -224,9 +224,9 @@ a.navbar-link.is-active {
&:focus {
color: $white;
background-color: $dark;
&::before {
display: none;
}
// &::before {
// display: none;
// }
}
}
}
@ -262,13 +262,52 @@ a.navbar-link:focus,
}
.navbar-link, .navbar-item {
.navbar-item.is-active::before {
.navbar-item:not([href="/search"]).is-active::before {
display: none;
}
}
// Navbar search
a.navbar-item[href="/search"] {
@extend .agc;
@extend .agc-search;
font-size: .001rem;
color: transparent;
display: flex;
&::before {
color: $white;
font-size: 1.25rem;
}
&:hover,
&:focus {
color: transparent !important;
background-color: $white;
font-size: .0001;
&::before {
color: $dark;
}
}
&.is-active {
display: flex;
@include tablet {
color: transparent;
}
&:hover {
display: flex;
color: $white;
background-color: transparent;
&::before {
color: $white;
}
}
&::before {
border-top: 0;
position: unset;
}
}
}
.navbar .ion-search {
font-size: 1.25em;
}