add fade to dropdowns, clean up css

groups/home/LibAnswers-4-js-css.html

@@ -12,25 +12,40 @@ body {
 }
 
 /* style slide out chat */
-
 #lcs_slide_out_button-21944 { font-size: 1.5em; }
 
 /* style header */
-
 #header-div {
         padding: 30px;
         text-align: center;
 }
 
+/* style the hamburger menu */
 #hamburger-container { float: left; }
-
 #hamburger, #hamburger:active { 
         border: none;
         outline: none;
         background-color: #fff;
         color: var(--kbccblue)
 }
+#hamburger-ul > li > .searchmenu { background-color: #fff; }
 
+/* have bootstrap dropdowns fade in and out */
+.dropdown-menu.fade {
+        display: block;
+        opacity: 0;
+        pointer-events: none;
+}
+.open > .dropdown-menu.fade {
+        pointer-events: auto;
+        opacity: 1;
+}
+.fade {
+    -webkit-transition-duration: 5s; /* Safari */
+    transition-duration: 0.5s;
+}
+
+/* style the login at the top right */
 #login-div {
         float: right;
         padding: 8px 15px 0px 0px;
@@ -38,21 +53,18 @@ body {
 }
 
 /* style alert */
-
 #corona-alert {
         text-align: center;
         background-color: #faf870;
         padding: 5px 15px;
         cursor: pointer;
 }
-
 #corona-alert-text {
         color: var(--text);
         font-size: 1.5em;
 }
 
 /* style navbar */
-
 nav.navbar-default.yamm {
         background-color: white;
         border: none;
@@ -60,27 +72,29 @@ nav.navbar-default.yamm {
         color: var(--text);
         border-radius: 0px;
 }
-
-.dropdown > .ga-main-navbar, .dropdown > .ga-main-navbar:hover, .dropdown > .ga-main-navbar:active { 
+.dropdown > .ga-main-navbar, .dropdown > .ga-main-navbar:hover, .dropdown > .ga-main-navbar:active {
         outline: none;
         border: none;
 }
-
 .navbar-default .navbar-nav > li > a { color: var(--text); }
-
 #navbar-center {
         display: flex;
         justify-content: center;
         float: none;
 }
-
 .ga-main-navbar { 
         font-size: 1.3em;
 }
-
 .faux-card {
         margin-left: 16px;
 }
+#dropdownMenu1 { border-radius: 0px; }
+a.searchmenu { color: var(--text); }
+.highlight-menu-item { padding: 2px; }
+.highlight-menu-item:hover {
+        background-color: #eee;
+        cursor: pointer;
+}
 
 /* style background image */
 .kbcc-background-image {
@@ -93,33 +107,19 @@ nav.navbar-default.yamm {
 }
 
 /* style jumbotron */
-
 .onesearch-jumbotron {
         text-align: center;
         margin-top: -40px;
 }
-
 #onesearch-header {
         font-size: 10em;
         margin-bottom: 0px;
 }
-
 .zero-margin {
         margin-left: -2px;
         margin-right: -2px;
 }
 
-#dropdownMenu1 { border-radius: 0px; }
-
-a.searchmenu { color: var(--text); }
-
-.highlight-menu-item { padding: 2px; }
-
-.highlight-menu-item:hover {
-        background-color: #eee;
-        cursor: pointer;
-}
-
 /* style for nav by the jumbotron */
 .nav-divs-by-jumbotron {
         text-align: center;
@@ -129,24 +129,18 @@ a.searchmenu { color: var(--text); }
         background-color: var(--kbccblue);
         border-radius: 3px;
 }
-
 .nav-divs-by-jumbotron > h2 {
         font-size: 1.5em;
         margin-bottom: 4px;
         margin-top: 4px;
 }
-
 a.no-underline { text-decoration: none; }
-
 .nav-divs-by-jumbotron:hover { background-color: #444; }
-
 #eq_32886 { 
         background-color: var(--kbccblue);
         border: none;
 }
-
 .nav-divs-by-jumbotron:hover > h2 > #eq_32886, #eq_32886:hover { background-color: #444; }
-
 #bookastudyroom { cursor: pointer; }
 
 /* style link list */
@@ -157,51 +151,40 @@ a.no-underline { text-decoration: none; }
         background-color: var(--kbccblue);
         text-align: center;
 }
-
 .hide-body-border {
        border: none;
        box-shadow: none;
 }
-
 .glyphicon-panel-title { font-size: 2em; }
-
 .content-panel-title {
         color: white;
         font-size: 2em;
 }
-
 .content-panel-title > h2 {
         margin: 7px 0px;
         font-size: 1em;
 }
-
 .panel-heading { padding: 2px; }
 
 /* style the gallery */
-
 .slick-slide img {
         padding: 2px;
         max-height: 350px !important;
         object-fit: contain;
         margin: 0px;
 }
-
 .s-lib-public-side-header { display: none; }
-
 .slick-active { outline: 0; }
 
 /* style the hours */
 .hours { text-align:center; }
-
 .hours-panel-body { padding: 10px 5px 0px 5px; }
-
 .padding-0 {
         padding-left: 4px;
         padding-right: 4px;
         flex:1 1 auto;
         display: flex;
 }
-
 .equal {
         display: -webkit-box;
         display: -moz-box;
@@ -209,22 +192,18 @@ a.no-underline { text-decoration: none; }
         display: -webkit-flex;
         display: flex;
 }
-
 .panel { flex:1 0 100%; }
-
 .panel-outline-color {
         border: solid #555 1px;
         font-size: 1.2em;
         line-height: 1.4em;
 }
-
 .vertical-align {
         display: flex;
         align-items: center;
         justify-content: center;
         height: 100%;
 }
-
 .more-link {
         text-align: center;
         width: 100%;
@@ -232,44 +211,32 @@ a.no-underline { text-decoration: none; }
 
 /* style the yamm menu */
 .dropdown-margin { margin-right: 50px; }
-
 .bigger-fancy-text { font-size: 1.2em; }
-
 .yamm1 { max-width: 900px; }
-
 .yamm2 { max-width: 675px; }
-
 .yamm3 { max-width: 300px; }
-
 .yamm4 { max-width: 460px; }
-
 #yamm4-margins { margin: -15px 0px; }
 
 /* style footer */
-
 #orange-line {
         height:10px; 
         background-color: var(--kbccorange);
 }
-
 #main-blue-footer {
         background-color: var(--kbccblue);
         color: white; 
         padding: 30px;
 }
-
 .whiteahrefs a:link, .whiteahrefs a:hover, .whiteahrefs a:visited, .whiteahrefs a:active { 
         color: white;
         text-decoration:none;
 }
-
 .whiteahrefs a i {
         margin: 4px 5px 0px 0px;
         font-size: 1.5em
 }
-
 .whiteahrefs { margin-top: 10px; }
-
 #lighthouse-logo > img { max-width: 150px; }
 
 /* media queries */