add fade to dropdowns, clean up css
This commit is contained in:
Mark Eaton
@@ -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 {
|
||||
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 */
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
<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>
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="hamburger" id="hamburger-ul">
|
||||
<ul class="dropdown-menu fade" aria-labelledby="hamburger" id="hamburger-ul">
|
||||
<li>
|
||||
<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">
|
||||
@@ -80,7 +80,7 @@
|
||||
|
||||
<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>
|
||||
<ul class="dropdown-menu dropdown-margin">
|
||||
<ul class="dropdown-menu fade dropdown-margin">
|
||||
<li>
|
||||
<div class="yamm-content yamm1">
|
||||
<div class="row">
|
||||
@@ -148,7 +148,7 @@
|
||||
</li>
|
||||
<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>
|
||||
<ul class="dropdown-menu dropdown-margin">
|
||||
<ul class="dropdown-menu fade dropdown-margin">
|
||||
<li>
|
||||
<div class="yamm-content yamm2">
|
||||
<div class="row">
|
||||
@@ -202,7 +202,7 @@
|
||||
</li>
|
||||
<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>
|
||||
<ul class="dropdown-menu dropdown-margin">
|
||||
<ul class="dropdown-menu fade dropdown-margin">
|
||||
<li>
|
||||
<div class="yamm-content yamm3">
|
||||
<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">
|
||||
Define Your Search <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
|
||||
<ul class="dropdown-menu fade" aria-labelledby="dropdownMenu1">
|
||||
<li>
|
||||
<div class="yamm-content yamm4">
|
||||
<div class="row" id="yamm4-margins">
|
||||
|
||||
Reference in New Issue
Block a user