MokoConsulting/MokoCassiopeia
1
1
Fork 0
Code Issues 2 Pull Requests Actions Packages Releases 1 Activity

Add mobile responsive mod_search override with comprehensive CSS and documentation

Browse Source 
Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
2026-02-22 05:50:13 +00:00
parent 7f3c10581b
commit 85d890c8df
4 changed files with 349 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
src/media/css/template.css
View File

@@ -18559,3 +18559,131 @@ nav[data-toggle=toc] .nav-link.active+ul{
--alert-color: color-mix(in srgb, var(--warning) 90%, black);
--alert-border-color: color-mix(in srgb, var(--warning) 20%, var(--body-bg));
}
/* ===== MOD_SEARCH MOBILE RESPONSIVE STYLES ===== */
.mod-search-responsive {
width: 100%;
}
.mod-search__form {
display: flex;
flex-direction: column;
gap: 0.5rem;
width: 100%;
}
.mod-search__input-wrapper {
display: flex;
flex-direction: column;
gap: 0.5rem;
width: 100%;
}
.mod-search__input-wrapper--inline {
flex-direction: row;
align-items: stretch;
}
.mod-search__input {
flex: 1;
min-width: 0;
padding: 0.5rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border: 1px solid var(--input-border-color, #dee2e6);
border-radius: 0.375rem;
background-color: var(--input-bg, #fff);
color: var(--input-color, #212529);
-webkit-appearance: none;
appearance: none;
}
.mod-search__input:focus {
border-color: var(--color-primary, #0d6efd);
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.mod-search__button-wrapper {
display: flex;
}
.mod-search__button-wrapper--left,
.mod-search__button-wrapper--right {
flex-shrink: 0;
}
.mod-search__button {
padding: 0.5rem 1rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.375rem;
white-space: nowrap;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.mod-search__button--icon {
padding: 0.5rem;
width: 44px;
height: 44px;
}
.mod-search__button--icon .icon-search {
font-size: 1.25rem;
}
/* Mobile-first responsive adjustments */
@media (max-width: 575.98px) {
.mod-search__input {
font-size: 16px;
padding: 0.625rem 0.875rem;
}
.mod-search__button {
padding: 0.625rem 1.25rem;
font-size: 1rem;
min-height: 48px;
}
.mod-search__button--icon {
width: 48px;
height: 48px;
}
.mod-search__input-wrapper--inline {
flex-direction: column;
}
.mod-search__button-wrapper--left .mod-search__button,
.mod-search__button-wrapper--right .mod-search__button {
width: 100%;
}
}
/* Tablet improvements */
@media (min-width: 576px) and (max-width: 767.98px) {
.mod-search__input-wrapper--inline {
flex-direction: row;
}
}
/* Desktop enhancements */
@media (min-width: 768px) {
.mod-search__form {
flex-direction: row;
align-items: center;
}
.mod-search__input-wrapper--inline {
flex-direction: row;
}
.mod-search__button-wrapper--top,
.mod-search__button-wrapper--bottom {
flex: 0 0 auto;
}
}