collapse 'Define Your Search' on small screens

This commit is contained in:
Mark Eaton
2022-08-10 10:47:45 -04:00
parent 0c54e0e105
commit 3b0626f168
2 changed files with 23 additions and 25 deletions
+22 -24
View File
@@ -132,6 +132,27 @@ a.searchmenu { color: var(--text); }
margin-right: -2px; margin-right: -2px;
} }
.zero-margin { margin: -2px; }
/* add flex so that blue box-shadows line up */
#flex-search-form {
display: flex;
flex-direction: row;
justify-content: center;
}
.inherit-height-from-flex { height: inherit; }
/* shadow for the search bar */
#blue-border1 {
box-shadow: 0 5px 0 var(--kbccblue), 0 -5px 0 var(--kbccblue), -5px -5px 0 var(--kbccblue), -5px 5px 0 var(--kbccblue);
}
#blue-border2 {
box-shadow: 0 -5px 0 var(--kbccblue), 0 5px 0 var(--kbccblue);
}
#blue-border3 {
box-shadow: 0 5px 0 var(--kbccblue), 0 -5px 0 var(--kbccblue), 5px -5px 0 var(--kbccblue), 5px 5px 0 var(--kbccblue);
}
/* style for nav by the jumbotron */ /* style for nav by the jumbotron */
.nav-divs-by-jumbotron { .nav-divs-by-jumbotron {
text-align: center; text-align: center;
@@ -264,7 +285,6 @@ a.no-underline { text-decoration: none; }
} }
nav.navbar-default.yamm { margin-top: -20px; } nav.navbar-default.yamm { margin-top: -20px; }
.form-width { width: 210px; } .form-width { width: 210px; }
.zero-margin { margin: 7px auto; }
.nav-by-jumbotron { margin-top: 40px !important; } .nav-by-jumbotron { margin-top: 40px !important; }
#main-blue-footer { min-height: 450px; } #main-blue-footer { min-height: 450px; }
.library-address { float: left; } .library-address { float: left; }
@@ -281,32 +301,10 @@ a.no-underline { text-decoration: none; }
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
#login-text { display: none; } #login-text { display: none; }
#lcs_slide_out_button-21944 { } #defineYourSearch { display: none; }
} }
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
.zero-margin { margin: -2px; }
/* add flex so that blue box-shadows line up */
#flex-search-form {
display: flex;
flex-direction: row;
justify-content: center;
}
.inherit-height-from-flex {
height: inherit;
}
/* shadow for the search bar */
#blue-border1 {
box-shadow: 0 5px 0 var(--kbccblue), 0 -5px 0 var(--kbccblue), -5px -5px 0 var(--kbccblue), -5px 5px 0 var(--kbccblue);
}
#blue-border2 {
box-shadow: 0 -5px 0 var(--kbccblue), 0 5px 0 var(--kbccblue);
}
#blue-border3 {
box-shadow: 0 5px 0 var(--kbccblue), 0 -5px 0 var(--kbccblue), 5px -5px 0 var(--kbccblue), 5px 5px 0 var(--kbccblue);
}
.nav-by-jumbotron { margin-top: 0 !important; } .nav-by-jumbotron { margin-top: 0 !important; }
#lighthouse-logo { #lighthouse-logo {
+1 -1
View File
@@ -283,7 +283,7 @@
<div class="form-group" id="flex-search-form"> <div class="form-group" id="flex-search-form">
<div class="dropdown input-group zero-margin" id="blue-border1"> <div class="dropdown input-group zero-margin" id="blue-border1">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Define Your Search <span class="caret"></span> <span id="defineYourSearch">Define Your Search </span><span class="caret"></span>
</button> </button>
<ul class="dropdown-menu fade" aria-labelledby="dropdownMenu1"> <ul class="dropdown-menu fade" aria-labelledby="dropdownMenu1">
<li> <li>