Permalink
Browse files

feat(expandable): add modifier for navigation components

  • Loading branch information...
lara-aigmueller committed Jun 28, 2017
1 parent 9e87b5b commit 72319af62ecc3182f6774a678e37972977627125
Showing with 54 additions and 0 deletions.
  1. +2 −0 src/expandable/README.md
  2. +5 −0 src/expandable/expandable.js
  3. +47 −0 src/expandable/expandable.scss
View
@@ -50,6 +50,8 @@ If you want to separate the expandable section from the rest of the content when
|------------|--------|
| `.expandable` | Base class for the expandable element |
| `.expandable--separated` | Adds border-top and -bottom to expanded section |
| `.expandable--nav` | Use this together with the navbar component to enhance the mobile behavior of the navigation. For examples check out Groundhog's [navbar](/doc/components/navbar/). |
| `.expandable--subnav` | Use this together with the subnav component to enhance the mobile behavior of the navigation. For examples check out Groundhog's [subnav](/doc/components/subnav/). |
## States
@@ -14,6 +14,11 @@ const init = () => {
el.setAttribute('data-initialized', true);
}
});
$('.expandable--subnav').forEach(el => {
const text = $('.is-current', el)[0].textContent;
$('.expandable__trigger', el)[0].textContent = text;
});
};
init();
@@ -1,4 +1,5 @@
@import "../common/variables";
@import "../common/nav";
$includedExpandable: false !default;
@@ -76,6 +77,52 @@ $includedExpandable: false !default;
border-top-color: transparent;
}
/* Expandable for nav components */
.expandable--nav .expandable__trigger,
.expandable--subnav .expandable__trigger {
color: $gray-200;
}
.expandable--nav .expandable__trigger:before,
.expandable--subnav .expandable__trigger:before {
background-image: url(/assets/images/icons/dropdown_open-white.svg);
transform: translate(0, -50%) rotate(-90deg);
}
.expandable--nav .expandable__trigger:hover,
.expandable--subnav .expandable__trigger:hover {
color: #fff;
}
.expandable--nav.is-active .expandable__trigger:before,
.expandable--subnav.is-active .expandable__trigger:before {
transform: translate(0, -50%) rotate(0);
}
@media (min-width: $nav-breakpoint) {
.expandable--subnav .expandable__trigger {
display: none;
}
.expandable--subnav .expandable__content {
display: flex;
}
.expandable--nav .expandable__trigger {
line-height: inherit;
}
.expandable--nav .expandable__trigger:before {
content: none;
}
.expandable--nav.is-current .expandable__content {
display: flex;
}
}
$includedExpandable: true;
}

0 comments on commit 72319af

Please sign in to comment.