Skip to content

Instantly share code, notes, and snippets.

@dimmech
Created September 5, 2016 20:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dimmech/fb3354e43993f99ac8270f29e844d674 to your computer and use it in GitHub Desktop.
Save dimmech/fb3354e43993f99ac8270f29e844d674 to your computer and use it in GitHub Desktop.
Drupal Isotope Hierarchical css
.isotope-container {
margin: 0 auto !important;
min-height: 500px;
}
.isotope-container a {
display: block;
}
.isotope-container ul,
.isotope-container li {
text-align: center;
list-style-type: none;
}
.isotope-element li,
.isotope-element ul, {
margin: 0;
padding: 0;
}
.isotope-element {
width: 25%;
height: 250px;
}
.isotope-options a,
.isotope-options a:link,
.isotope-options a:visited,
.isotope-options a:hover {
color: #fff;
text-decoration: none;
line-height: 1.75em;
}
.item-list .isotope-options {
border: 1px solid #999;
border-radius: 5px;
margin-bottom: 30px;
padding: 30px;
text-align: center;
background-color: #F0F8FF;
}
/* Menu Items */
.isotope-options li{
display: inline;
transition: height .5s ease;
transition-delay: .2s;
}
.isotope-options li.first {
background: #1E90FF;
border-radius: 5px;
display: inline-block;
padding: 5px 10px;
-moz-transition: background-color .3s;
-o-transition: background-color .3s;
-webkit-transition: background-color .3s;
transition: background-color .3s;
margin: 0;
}
.isotope-options li a span {
font-size: 15px;
font-style: unset;
vertical-align: middle;
display: block;
}
/* Visibility toggle classes */
.isotope-options li.sub-parent {
background: #657E97;
display: block;
height: 0px;
margin:auto;
padding: 0px;
overflow: hidden;
border-radius: 5px;
}
.isotope-options li.sub-child {
background: #1B3855;
width: 50%;
display: block;
height: 0px;
margin:auto;
padding: 0px;
overflow: hidden;
border-radius: 5px;
}
.isotope-options li.sub-grandchild {
background: #9098A0;
display: block;
height: 0px;
margin: auto;
padding: 0px;
overflow: hidden;
border-radius: 5px;
width: 25%;
}
.isotope-options li.hovered {
height: 1.75em;
}
.isotope-options li:hover span{
background: #ADD8E6;
color: #000;
}
.isotope-options .active {
background: #FFD700;
color: #555;
}
/* Responsive */
@media all and (max-width: 550px) {
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment