agaric/agaric-coop
10
1
Fork 0
Code Issues 102 Pull requests Projects Releases Packages Wiki Activity

Styling for search link on menu

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

52
web/themes/custom/agarica/patternlibrary/agaric/css/agaric.css
View file

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

2
web/themes/custom/agarica/patternlibrary/agaric/css/agaric.css.map
View file

File diff suppressed because one or more lines are too long

49
web/themes/custom/agarica/patternlibrary/agaric/sass/agaric/_component.navbar.scss
View file

@ -213,7 +213,7 @@ a.navbar-link.is-active {
color: currentColor; color: currentColor;
&::before { &::before {
display: block; display: block;
content: '' !important; // content: '' !important;
position: absolute; position: absolute;
left: 1em; left: 1em;
right: 1em; right: 1em;
@ -224,9 +224,9 @@ a.navbar-link.is-active {
&:focus { &:focus {
color: $white; color: $white;
background-color: $dark; background-color: $dark;
&::before { // &::before {
display: none; // display: none;
} // }
} }
} }
} }
@ -262,13 +262,52 @@ a.navbar-link:focus,
} }
.navbar-link, .navbar-item { .navbar-link, .navbar-item {
.navbar-item.is-active::before { .navbar-item:not([href="/search"]).is-active::before {
display: none; display: none;
} }
} }
// Navbar search // 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 { .navbar .ion-search {
font-size: 1.25em; font-size: 1.25em;
} }