make box-shadows line up on all screen resolutions

This commit is contained in:
Mark Eaton
2022-07-13 12:14:05 -04:00
parent eab29704e2
commit 934833c042
2 changed files with 9 additions and 1 deletions
+8
View File
@@ -273,6 +273,14 @@ a.no-underline { text-decoration: none; }
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
.zero-margin { margin: -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;
}
#blue-border1 { #blue-border1 {
box-shadow: 0px 5px 0 var(--kbccblue), 0px -5px 0 var(--kbccblue), -5px -5px 0 var(--kbccblue), -5px 5px 0 var(--kbccblue); box-shadow: 0px 5px 0 var(--kbccblue), 0px -5px 0 var(--kbccblue), -5px -5px 0 var(--kbccblue), -5px 5px 0 var(--kbccblue);
} }
+1 -1
View File
@@ -253,7 +253,7 @@
<img class="image-fail onesearchsubmit" src="https://libapps.s3.amazonaws.com/accounts/16298/images/onesearch_logo.png" alt="OneSearch" /> <img class="image-fail onesearchsubmit" src="https://libapps.s3.amazonaws.com/accounts/16298/images/onesearch_logo.png" alt="OneSearch" />
</a> </a>
</h1> </h1>
<div class="form-group"> <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> Define Your Search <span class="caret"></span>