ocertat/Kingsborough-LibGuide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add fade to dropdowns, clean up css

Browse Source
This commit is contained in:
Mark Eaton
2022-06-23 11:42:55 -04:00
parent e8235daa10
commit af519966b9
2 changed files with 31 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
groups/home/LibAnswers-4-js-css.html
+26 -59
View File
@@ -12,25 +12,40 @@ body {
} }
/* style slide out chat */ /* style slide out chat */
#lcs_slide_out_button-21944 { font-size: 1.5em; } #lcs_slide_out_button-21944 { font-size: 1.5em; }
/* style header */ /* style header */
#header-div { #header-div {
padding: 30px; padding: 30px;
text-align: center; text-align: center;
} }
/* style the hamburger menu */
#hamburger-container { float: left; } #hamburger-container { float: left; }
#hamburger, #hamburger:active { #hamburger, #hamburger:active {
border: none; border: none;
outline: none; outline: none;
background-color: #fff; background-color: #fff;
color: var(--kbccblue) 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 { #login-div {
float: right; float: right;
padding: 8px 15px 0px 0px; padding: 8px 15px 0px 0px;
@@ -38,21 +53,18 @@ body {
} }
/* style alert */ /* style alert */
#corona-alert { #corona-alert {
text-align: center; text-align: center;
background-color: #faf870; background-color: #faf870;
padding: 5px 15px; padding: 5px 15px;
cursor: pointer; cursor: pointer;
} }
#corona-alert-text { #corona-alert-text {
color: var(--text); color: var(--text);
font-size: 1.5em; font-size: 1.5em;
} }
/* style navbar */ /* style navbar */
nav.navbar-default.yamm { nav.navbar-default.yamm {
background-color: white; background-color: white;
border: none; border: none;
@@ -60,27 +72,29 @@ nav.navbar-default.yamm {
color: var(--text); color: var(--text);
border-radius: 0px; 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; outline: none;
border: none; border: none;
} }
.navbar-default .navbar-nav > li > a { color: var(--text); } .navbar-default .navbar-nav > li > a { color: var(--text); }
#navbar-center { #navbar-center {
display: flex; display: flex;
justify-content: center; justify-content: center;
float: none; float: none;
} }
.ga-main-navbar { .ga-main-navbar {
font-size: 1.3em; font-size: 1.3em;
} }
.faux-card { .faux-card {
margin-left: 16px; 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 */ /* style background image */
.kbcc-background-image { .kbcc-background-image {
@@ -93,33 +107,19 @@ nav.navbar-default.yamm {
} }
/* style jumbotron */ /* style jumbotron */
.onesearch-jumbotron { .onesearch-jumbotron {
text-align: center; text-align: center;
margin-top: -40px; margin-top: -40px;
} }
#onesearch-header { #onesearch-header {
font-size: 10em; font-size: 10em;
margin-bottom: 0px; margin-bottom: 0px;
} }
.zero-margin { .zero-margin {
margin-left: -2px; margin-left: -2px;
margin-right: -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 */ /* style for nav by the jumbotron */
.nav-divs-by-jumbotron { .nav-divs-by-jumbotron {
text-align: center; text-align: center;
@@ -129,24 +129,18 @@ a.searchmenu { color: var(--text); }
background-color: var(--kbccblue); background-color: var(--kbccblue);
border-radius: 3px; border-radius: 3px;
} }
.nav-divs-by-jumbotron > h2 { .nav-divs-by-jumbotron > h2 {
font-size: 1.5em; font-size: 1.5em;
margin-bottom: 4px; margin-bottom: 4px;
margin-top: 4px; margin-top: 4px;
} }
a.no-underline { text-decoration: none; } a.no-underline { text-decoration: none; }
.nav-divs-by-jumbotron:hover { background-color: #444; } .nav-divs-by-jumbotron:hover { background-color: #444; }
#eq_32886 { #eq_32886 {
background-color: var(--kbccblue); background-color: var(--kbccblue);
border: none; border: none;
} }
.nav-divs-by-jumbotron:hover > h2 > #eq_32886, #eq_32886:hover { background-color: #444; } .nav-divs-by-jumbotron:hover > h2 > #eq_32886, #eq_32886:hover { background-color: #444; }
#bookastudyroom { cursor: pointer; } #bookastudyroom { cursor: pointer; }
/* style link list */ /* style link list */
@@ -157,51 +151,40 @@ a.no-underline { text-decoration: none; }
background-color: var(--kbccblue); background-color: var(--kbccblue);
text-align: center; text-align: center;
} }
.hide-body-border { .hide-body-border {
border: none; border: none;
box-shadow: none; box-shadow: none;
} }
.glyphicon-panel-title { font-size: 2em; } .glyphicon-panel-title { font-size: 2em; }
.content-panel-title { .content-panel-title {
color: white; color: white;
font-size: 2em; font-size: 2em;
} }
.content-panel-title > h2 { .content-panel-title > h2 {
margin: 7px 0px; margin: 7px 0px;
font-size: 1em; font-size: 1em;
} }
.panel-heading { padding: 2px; } .panel-heading { padding: 2px; }
/* style the gallery */ /* style the gallery */
.slick-slide img { .slick-slide img {
padding: 2px; padding: 2px;
max-height: 350px !important; max-height: 350px !important;
object-fit: contain; object-fit: contain;
margin: 0px; margin: 0px;
} }
.s-lib-public-side-header { display: none; } .s-lib-public-side-header { display: none; }
.slick-active { outline: 0; } .slick-active { outline: 0; }
/* style the hours */ /* style the hours */
.hours { text-align:center; } .hours { text-align:center; }
.hours-panel-body { padding: 10px 5px 0px 5px; } .hours-panel-body { padding: 10px 5px 0px 5px; }
.padding-0 { .padding-0 {
padding-left: 4px; padding-left: 4px;
padding-right: 4px; padding-right: 4px;
flex:1 1 auto; flex:1 1 auto;
display: flex; display: flex;
} }
.equal { .equal {
display: -webkit-box; display: -webkit-box;
display: -moz-box; display: -moz-box;
@@ -209,22 +192,18 @@ a.no-underline { text-decoration: none; }
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
} }
.panel { flex:1 0 100%; } .panel { flex:1 0 100%; }
.panel-outline-color { .panel-outline-color {
border: solid #555 1px; border: solid #555 1px;
font-size: 1.2em; font-size: 1.2em;
line-height: 1.4em; line-height: 1.4em;
} }
.vertical-align { .vertical-align {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100%; height: 100%;
} }
.more-link { .more-link {
text-align: center; text-align: center;
width: 100%; width: 100%;
@@ -232,44 +211,32 @@ a.no-underline { text-decoration: none; }
/* style the yamm menu */ /* style the yamm menu */
.dropdown-margin { margin-right: 50px; } .dropdown-margin { margin-right: 50px; }
.bigger-fancy-text { font-size: 1.2em; } .bigger-fancy-text { font-size: 1.2em; }
.yamm1 { max-width: 900px; } .yamm1 { max-width: 900px; }
.yamm2 { max-width: 675px; } .yamm2 { max-width: 675px; }
.yamm3 { max-width: 300px; } .yamm3 { max-width: 300px; }
.yamm4 { max-width: 460px; } .yamm4 { max-width: 460px; }
#yamm4-margins { margin: -15px 0px; } #yamm4-margins { margin: -15px 0px; }
/* style footer */ /* style footer */
#orange-line { #orange-line {
height:10px; height:10px;
background-color: var(--kbccorange); background-color: var(--kbccorange);
} }
#main-blue-footer { #main-blue-footer {
background-color: var(--kbccblue); background-color: var(--kbccblue);
color: white; color: white;
padding: 30px; padding: 30px;
} }
.whiteahrefs a:link, .whiteahrefs a:hover, .whiteahrefs a:visited, .whiteahrefs a:active { .whiteahrefs a:link, .whiteahrefs a:hover, .whiteahrefs a:visited, .whiteahrefs a:active {
color: white; color: white;
text-decoration:none; text-decoration:none;
} }
.whiteahrefs a i { .whiteahrefs a i {
margin: 4px 5px 0px 0px; margin: 4px 5px 0px 0px;
font-size: 1.5em font-size: 1.5em
} }
.whiteahrefs { margin-top: 10px; } .whiteahrefs { margin-top: 10px; }
#lighthouse-logo > img { max-width: 150px; } #lighthouse-logo > img { max-width: 150px; }
/* media queries */ /* media queries */
groups/home/LibAnswers-SlideOutChat-4.html
+5 -5
View File
@@ -12,7 +12,7 @@
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" id="hamburger"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" id="hamburger">
<i class="fas fa-bars" style="font-size: 2em;"></i> <i class="fas fa-bars" style="font-size: 2em;"></i>
</button> </button>
<ul class="dropdown-menu" aria-labelledby="hamburger" id="hamburger-ul"> <ul class="dropdown-menu fade" aria-labelledby="hamburger" id="hamburger-ul">
<li> <li>
<a class="searchmenu" aria-label="Faculty and Staff" href="https://library.kbcc.cuny.edu/about-us/directory"> <a class="searchmenu" aria-label="Faculty and Staff" href="https://library.kbcc.cuny.edu/about-us/directory">
<div class="col-xs-12 highlight-menu-item bigger-fancy-text"> <div class="col-xs-12 highlight-menu-item bigger-fancy-text">
@@ -80,7 +80,7 @@
<li class="dropdown"> <li class="dropdown">
<a class="dropdown-toggle ga-main-navbar" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Find It <span class="caret"></span></a> <a class="dropdown-toggle ga-main-navbar" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Find It <span class="caret"></span></a>
<ul class="dropdown-menu dropdown-margin"> <ul class="dropdown-menu fade dropdown-margin">
<li> <li>
<div class="yamm-content yamm1"> <div class="yamm-content yamm1">
<div class="row"> <div class="row">
@@ -148,7 +148,7 @@
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a class="dropdown-toggle ga-main-navbar" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services <span class="caret"></span></a> <a class="dropdown-toggle ga-main-navbar" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services <span class="caret"></span></a>
<ul class="dropdown-menu dropdown-margin"> <ul class="dropdown-menu fade dropdown-margin">
<li> <li>
<div class="yamm-content yamm2"> <div class="yamm-content yamm2">
<div class="row"> <div class="row">
@@ -202,7 +202,7 @@
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a class="dropdown-toggle ga-main-navbar" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About Us <span class="caret"></span></a> <a class="dropdown-toggle ga-main-navbar" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About Us <span class="caret"></span></a>
<ul class="dropdown-menu dropdown-margin"> <ul class="dropdown-menu fade dropdown-margin">
<li> <li>
<div class="yamm-content yamm3"> <div class="yamm-content yamm3">
<div class="row"> <div class="row">
@@ -278,7 +278,7 @@
<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>
</button> </button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <ul class="dropdown-menu fade" aria-labelledby="dropdownMenu1">
<li> <li>
<div class="yamm-content yamm4"> <div class="yamm-content yamm4">
<div class="row" id="yamm4-margins"> <div class="row" id="yamm4-margins">