Skip to content

Instantly share code, notes, and snippets.

@angry-dan

angry-dan/bootstrap-panel chevron.scss

Last active November 4, 2015 10:05
Show Gist options
  • Save angry-dan/2f15c4472f78848051c8 to your computer and use it in GitHub Desktop.
Save angry-dan/2f15c4472f78848051c8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
readme.md

Drupal's bootstrap theme converts Drupal's fieldsets into Bootstrap panels, but sadly doesn't include any kind of indication in the panel header that they are collapsible/expandible.

This nifty bit of sass will let you add a dropdown icon to the title:

<span class="glyphicon glyphicon-chevron-down pull-right"></span>

And have it animate when you expand/collapse the panel.

To use, simply override bootstrap-panel.tpl.php and throw that in just after the title is printed inside of the <?php if ($collapsible): ?>

Raw
bootstrap-panel chevron.scss
.panel-title {
.glyphicon.pull-right {
line-height: inherit;
}
.glyphicon-chevron-down {
transition: transform 0.6s ease 0s;
transform: rotateX(180deg);
}
&.collapsed .glyphicon-chevron-down {
transform: rotateX(0deg);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment